/* Theme: Easy Donation Addons Form - Improved UI/UX */ .eazypay-form-wrapper { max-width: 540px; margin: 48px auto; padding: 36px 32px; background: #fff; border-radius: 18px; box-shadow: 0 8px 32px rgba(244, 108, 20, 0.10), 0 1.5px 6px rgba(0,0,0,0.04); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; gap: 0; } .eazypay-form-title { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 28px; color: #222; letter-spacing: 0.01em; } .eazypay-form-subheading { font-size: 1.08rem; color: #666; text-align: center; margin-bottom: 26px; margin-top: -12px; line-height: 1.5; } .eazypay-form-group { margin-bottom: 22px; position: relative; } .eazypay-form-row { display: flex; gap: 18px; margin-bottom: 0; } .eazypay-form-row .eazypay-form-group { flex: 1 1 0; margin-bottom: 22px; } @media (max-width: 700px) { .eazypay-form-row { flex-direction: column; gap: 0; } } /* Portal tooltip (appended to ) to avoid clipping by parent containers */ .eazypay-portal-tooltip { position: fixed; background: rgba(0,0,0,0.92); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 0.95rem; max-width: min(360px, 90vw); box-sizing: border-box; word-wrap: break-word; z-index: 99999; pointer-events: none; line-height: 1.3; text-align: left; } .eazypay-portal-tooltip::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; } /* visible state helpers */ .eazypay-portal-tooltip.hidden { display: none; } /* arrow for tooltip when it's above the target (default) */ .eazypay-portal-tooltip.above::after { left: 50%; transform: translateX(-50%); bottom: -6px; border-width: 6px 6px 0 6px; border-color: rgba(0,0,0,0.92) transparent transparent transparent; } /* arrow for tooltip when it's below the target */ .eazypay-portal-tooltip.below::after { left: 50%; transform: translateX(-50%); top: -6px; border-width: 0 6px 6px 6px; border-color: transparent transparent rgba(0,0,0,0.92) transparent; } /* Phone code + phone input styling */ .eazypay-form-group .phone-inline { display: flex; gap: 6px; /* slightly tighter so small select fits better */ align-items: center; flex-wrap: nowrap; /* don't allow select/input to wrap to next line */ } .eazypay-form-group .phone-inline select[name="phone_code"], .eazypay-form-group select#phone_code { flex: 0 0 var(--eazypay-phone-select-width, 56px); width: var(--eazypay-phone-select-width, 56px); min-width: 44px; box-sizing: border-box; height: 44px; /* enforce exact height */ padding: 6px 8px; /* slightly smaller padding */ font-size: 0.95rem; border-radius: 8px; border: 1.5px solid #e0e0e0; background: #faf9f7; z-index: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; text-align: center; /* center small code */ overflow: hidden; } .eazypay-form-group .phone-inline input#payer_mobile, .eazypay-form-group input#payer_mobile { flex: 1 1 auto; min-width: 0; height: 44px; /* enforce exact height */ padding: 12px 14px; border-radius: 8px; border: 1.5px solid #e0e0e0; background: #faf9f7; z-index: 1; line-height: 1.2; } /* Position floating label for phone group: align with other labels at the start (no extra calc offset) */ .phone-inline label { left: 14px; /* align with other floating labels */ z-index: 3; /* sit above select/input */ pointer-events: none; /* ensure clicks go to input/select */ } @media (max-width: 700px) { /* stack phone code + number on small screens to avoid overlap */ .eazypay-form-group .phone-inline, .eazypay-form-group[style*="display:flex"] { flex-direction: column; align-items: stretch; } .eazypay-form-group .phone-inline select[name="phone_code"], .eazypay-form-group select#phone_code, .eazypay-form-group input#payer_mobile { width: 100%; flex: none; } /* reset manual label left positioning used in markup */ label[for="payer_mobile"] { left: 8px !important; } /* when stacked, reset phone-inline label to normal position */ .phone-inline label { left: 14px !important; } } /* Already supports flex row and responsive stacking. Ensure single-child .eazypay-form-row is full width. */ .eazypay-form-row:only-child, .eazypay-form-row > .eazypay-form-group:only-child { width: 100%; } .floating-label input[type="text"], .floating-label input[type="email"], .floating-label input[type="number"], .floating-label input[type="file"], .floating-label input[type="datetime-local"], .floating-label select { width: 100%; padding: 12px 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 1rem; background: #faf9f7; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; outline: none; min-height: 44px; } .floating-label input:focus, .floating-label input[type="datetime-local"]:focus, .floating-label select:focus { border-color: #F46C14; box-shadow: 0 0 0 2px rgba(244, 108, 20, 0.12); } .floating-label label { position: absolute; top: 12px; left: 14px; color: #888; background: #fff; padding: 0 4px; font-size: 1rem; pointer-events: none; transition: 0.18s all; border-radius: 4px; } /* Allow interactive hint icons that sit inside the label to receive pointer events */ .floating-label label .eazypay-hint-icon { pointer-events: auto; position: relative; /* keep it in flow */ z-index: 4; } .floating-label input:focus + label, .floating-label input[type="datetime-local"]:focus + label, .floating-label input:not(:placeholder-shown) + label, .floating-label select:focus + label, .floating-label select:not([value=""]) + label, .floating-label textarea:focus + label, .floating-label textarea:not(:placeholder-shown) + label { top: -10px; left: 10px; font-size: 0.92rem; color: #F46C14; background: #fff; padding: 0 6px; } .floating-label select { appearance: none; background: #faf9f7 url('data:image/svg+xml;utf8,') no-repeat right 14px center/18px 18px; } .floating-label input[type="file"] { background: #faf9f7; padding: 14px 12px; border-radius: 8px; } /* Make textarea visually match other floating-label inputs */ .floating-label textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 1rem; background: #faf9f7; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; outline: none; resize: vertical; min-height: 88px; } .floating-label textarea:focus { border-color: #F46C14; box-shadow: 0 0 0 2px rgba(244, 108, 20, 0.12); } .floating-label textarea:focus + label, .floating-label textarea:not(:placeholder-shown) + label { top: -12px; left: 10px; font-size: 0.92rem; color: #F46C14; background: #fff; padding: 0 6px; } .custom-file-input { cursor: pointer; color: #444; } .eazypay-submit-btn { background: #F46C14 !important; color: #fff !important; font-size: 1.15rem; padding: 15px 0; border: none; border-radius: 8px !important; cursor: pointer; font-weight: 700; margin-top: 10px; box-shadow: 0 2px 8px rgba(244, 108, 20, 0.08) !important; transition: background 0.2s, box-shadow 0.2s, outline 0.2s !important; outline: none; } .eazypay-submit-btn:hover, .eazypay-submit-btn:focus { background: #d95a00 !important; box-shadow: 0 4px 16px rgba(244, 108, 20, 0.16); outline: 2px solid #F46C14; border: none; } /* Clear button: outline variant matching donation color. When both buttons are in the same row they should share the same height and width for visual parity. */ .eazypay-clear-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #F46C14; border: 1.5px solid #F46C14; font-size: 1.05rem; padding: 12px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; margin-top: 10px; transition: background 0.18s, color 0.18s, box-shadow 0.18s; min-height: 44px; } .eazypay-clear-btn:hover, .eazypay-clear-btn:focus { background: #fff3ea; color: #d95a00; box-shadow: 0 2px 8px rgba(244,108,20,0.06); outline: 2px solid rgba(244,108,20,0.12); } /* When both Clear and Donate exist in the same group, ensure they are identical width/height */ .eazypay-form-group .eazypay-clear-btn, .eazypay-form-group .eazypay-submit-btn { width: 180px; min-width: 140px; height: 44px; padding: 0 18px; /* vertical padding handled by height */ box-sizing: border-box; } /* On small screens stack them and make full-width */ @media (max-width: 700px) { .eazypay-form-group .eazypay-clear-btn, .eazypay-form-group .eazypay-submit-btn { width: 100% !important; min-width: 0 !important; height: 44px; padding: 12px 0 !important; } .eazypay-form-group { text-align: center; } } .eazypay-form-mode-badge { text-align: center; font-size: 1rem; margin-bottom: 18px; color: #fff; background: #F46C14; display: inline-block; padding: 5px 18px; border-radius: 16px; font-weight: 600; letter-spacing: 0.04em; } /* Hint text for small descriptions under fields */ .eazypay-hint { display: block; margin-top: 6px; color: #666; font-size: 0.875rem; line-height: 1.3; } /* Distinct styling for address hint block is handled via portal tooltip JS/CSS; legacy pseudo-element tooltip removed */ .eazypay-hint-icon:focus-visible { outline: 2px solid rgba(244,108,20,0.25); outline-offset: 3px; } /* Minimal visible styling for hint icon (portal tooltip handles the popup itself) */ .eazypay-hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 18px; font-size: 12px; border-radius: 50%; background: #F46C14; color: #fff; margin-left: 6px; vertical-align: middle; cursor: pointer; } /* Global CSS var for phone select width (used to align floating label with phone input) */ :root { --eazypay-phone-select-width: 56px; } /* Responsive tweaks for datetime inputs and form layout */ .eazypay-form-row { display: flex; gap: 12px; align-items: stretch; } .eazypay-form-group.floating-label { flex: 1 1 auto; min-width: 0; /* allow children to shrink properly */ } /* Make inputs, textarea and select full-width and mobile-friendly Keep visuals consistent with the floating-label styles so textarea and datetime controls inherit the same padding, border-radius and background. */ .eazypay-form-group input, .eazypay-form-group input[type="datetime-local"], .eazypay-form-group input[type="date"], .eazypay-form-group input[type="time"], .eazypay-form-group select, .eazypay-form-group textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #faf9f7; min-height: 44px; } /* Specific visual tuning for datetime-local controls (uniform look across browsers) Keep native picker behavior but ensure control is touch-friendly */ .eazypay-form-group input[type="datetime-local"] { -webkit-appearance: none; appearance: none; line-height: 1.2; } /* On small screens stack the rows and make controls full-width */ @media (max-width: 700px) { .eazypay-form-row { flex-direction: column !important; } .eazypay-form-group.floating-label { width: 100%; } /* tighten spacing for narrow viewports */ .eazypay-form-row + .eazypay-form-row { margin-top: 8px; } .eazypay-form-group label { left: 8px !important; } } .eazypay-message-success { padding: 20px; background: #d4edda; border-left: 4px solid #28a745; } .eazypay-message-error { padding: 20px; background: #f8d7da; border-left: 4px solid #dc3545; } .eazypay-message-warning { padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107; } @media (max-width: 700px) { .eazypay-form-wrapper { padding: 18px 4vw; margin: 18px 0; } .eazypay-form-title { font-size: 1.3rem; } .eazypay-submit-btn { font-size: 1rem; padding: 12px 0; } } /* Remove default select arrow for Chrome */ .floating-label select::-ms-expand { display: none; } .floating-label select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Accessibility: focus outline for all inputs */ .floating-label input:focus, .floating-label select:focus { outline: 2px solid #F46C14; outline-offset: 1px; } /* Admin Table UI/UX Enhancements */ .widefat.fixed.striped { border-collapse: collapse; width: 100%; background: #fff; font-size: 15px; } .widefat.fixed.striped thead th { position: sticky; top: 0; background: #f6f7f7; z-index: 2; border-bottom: 2px solid #e1e1e1; font-weight: 600; } .widefat.fixed.striped tbody tr:nth-child(even) { background: #f9f9f9; } .widefat.fixed.striped tbody tr:hover { background: #f1f7ff; } .widefat.fixed.striped td, .widefat.fixed.striped th { padding: 8px 10px; border: 1px solid #e1e1e1; text-align: left; } @media (max-width: 900px) { .widefat.fixed.striped, .widefat.fixed.striped thead, .widefat.fixed.striped tbody, .widefat.fixed.striped th, .widefat.fixed.striped td, .widefat.fixed.striped tr { display: block; } .widefat.fixed.striped thead { display: none; } .widefat.fixed.striped tr { margin-bottom: 16px; border-bottom: 2px solid #e1e1e1; } .widefat.fixed.striped td { border: none; position: relative; padding-left: 50%; min-height: 36px; } .widefat.fixed.striped td:before { position: absolute; top: 8px; left: 10px; width: 45%; white-space: nowrap; font-weight: 600; color: #888; content: attr(data-label); } } /* Admin Filter Bar UI Enhancements */ .eazypay-admin-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.07); padding: 28px 28px 20px 28px; margin: 36px auto 0 auto; max-width: 98vw; } /* Strong overrides for phone-code select to counter aggressive theme rules Use high-specificity selectors and !important to ensure the small select stays in a single row with the phone input. */ .eazypay-form-wrapper .eazypay-form .eazypay-form-group.phone-inline, .eazypay-form-wrapper .eazypay-form .phone-inline { gap: 6px !important; flex-wrap: nowrap !important; } .eazypay-form-wrapper .eazypay-form .phone-inline select[name="phone_code"], .eazypay-form-wrapper .eazypay-form .phone-inline select#phone_code { width: var(--eazypay-phone-select-width, 56px) !important; min-width: 44px !important; flex: 0 0 var(--eazypay-phone-select-width, 56px) !important; height: 44px !important; padding: 6px 6px !important; font-size: 0.95rem !important; text-align: center !important; box-sizing: border-box !important; border-radius: 8px !important; border: 1.5px solid #e0e0e0 !important; background: #faf9f7 !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; overflow: hidden !important; } .eazypay-form-wrapper .eazypay-form .phone-inline input#payer_mobile, .eazypay-form-wrapper .eazypay-form input#payer_mobile { height: 44px !important; padding: 12px 14px !important; } .eazypay-form-wrapper .eazypay-form .phone-inline > label, .eazypay-form-wrapper .eazypay-form .phone-inline label { left: 14px !important; } /* Ensure floating-label wrapper inside phone-inline occupies remaining space */ .eazypay-form-wrapper .eazypay-form .phone-inline .floating-label { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; /* allow shrinking inside flex */ position: relative !important; } /* Ensure the input inside floating-label fills the available space */ .eazypay-form-wrapper .eazypay-form .phone-inline .floating-label input { width: 100% !important; box-sizing: border-box !important; } /* Prevent select from forcing wrap by ensuring it stays inline-flex */ .eazypay-form-wrapper .eazypay-form .phone-inline select { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .eazypay-admin-filterbar { background: #f6f7f7; border: 1px solid #e1e1e1; border-radius: 8px; padding: 18px 20px 12px 20px; margin-bottom: 18px; display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 14px 18px; align-items: center; } .eazypay-admin-filterbar input[type="text"], .eazypay-admin-filterbar select { height: 38px; border-radius: 20px; border: 1.5px solid #ff5d00; padding: 0 16px; font-size: 16px; background: #fff; min-width: 0; transition: border-color 0.2s; } .eazypay-admin-filterbar input[type="text"]:focus, .eazypay-admin-filterbar select:focus { border-color: #ff5d00; outline: none; } .eazypay-admin-filterbar .button { height: 38px; border-radius: 20px; font-size: 16px; padding: 0 26px; margin-top: 0; background: #ff5d00; color: #fff; border: none; font-weight: 600; transition: background 0.2s; } .eazypay-admin-filterbar .button:hover, .eazypay-admin-filterbar .button:focus { background: #e04e00; color: #fff; } .eazypay-admin-quickfilters { margin-bottom: 18px; display: flex; gap: 8px; } .eazypay-admin-quickfilters .button { background: #fff3ea; color: #ff5d00; border: 1.5px solid #ff5d00; border-radius: 20px; font-size: 15px; padding: 0 20px; height: 34px; font-weight: 600; transition: background 0.2s, color 0.2s; } .eazypay-admin-quickfilters .button.active, .eazypay-admin-quickfilters .button:focus { background: #ff5d00; color: #fff; border-color: #ff5d00; } /* Table tweaks */ .widefat.fixed.striped { background: #fff; border-radius: 10px; box-shadow: 0 1px 8px rgba(255,93,0,0.07); border-collapse: separate; border-spacing: 0; margin-top: 0; font-size: 16px; } .widefat.fixed.striped thead th { background: #fff3ea; color: #ff5d00; font-size: 16px; border-bottom: 2px solid #ff5d00; border-top: none; position: relative; cursor: pointer; font-weight: 700; letter-spacing: 0.01em; height: 48px; } .widefat.fixed.striped thead th.sort-asc:after { content: '▲'; font-size: 13px; position: absolute; right: 8px; color: #ff5d00; } .widefat.fixed.striped thead th.sort-desc:after { content: '▼'; font-size: 13px; position: absolute; right: 8px; color: #ff5d00; } .widefat.fixed.striped tbody tr { transition: background 0.15s; height: 48px; } .widefat.fixed.striped tbody tr:hover { background: #fff3ea; } .widefat.fixed.striped td { font-size: 16px; vertical-align: middle; padding: 10px 12px; letter-spacing: 0.01em; } .widefat.fixed.striped td .eazypay-action-btn { background: #fff3ea; border: 1.5px solid #ff5d00; border-radius: 16px; color: #ff5d00; font-size: 14px; padding: 3px 16px; margin-right: 4px; text-decoration: none; font-weight: 600; transition: background 0.15s, color 0.15s; } .widefat.fixed.striped td .eazypay-action-btn:hover { background: #ff5d00; color: #fff; } .widefat.fixed.striped td input[type="checkbox"] { width: 18px; height: 18px; margin: 0 6px 0 0; } @media (max-width: 1100px) { .eazypay-admin-filterbar { grid-template-columns: 1fr 1fr 1fr auto; } } @media (max-width: 900px) { .eazypay-admin-card { padding: 10px 2vw 10px 2vw; } .eazypay-admin-filterbar { grid-template-columns: 1fr 1fr; flex-direction: column; gap: 10px 0; padding: 10px 6vw 6px 6vw; } } /* Mobile (extra small) - ensure phone code + phone number stack left and fill width This prevents centering caused by theme overrides and ensures the floating label aligns correctly above the phone input. */ @media (max-width: 480px) { .eazypay-form-group .phone-inline, .eazypay-form-wrapper .eazypay-form .phone-inline { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; } .eazypay-form-group .phone-inline select[name="phone_code"], .eazypay-form-wrapper .eazypay-form .phone-inline select#phone_code { width: 100% !important; max-width: none !important; margin: 0 !important; text-align: left !important; padding-left: 12px !important; box-sizing: border-box !important; display: block !important; } .eazypay-form-group .phone-inline .floating-label, .eazypay-form-wrapper .eazypay-form .phone-inline .floating-label { width: 100% !important; min-width: 0 !important; position: relative !important; } .eazypay-form-group .phone-inline .floating-label input#payer_mobile { width: 100% !important; margin: 0 !important; } /* ensure floating label sits near the left edge when stacked */ .phone-inline label { left: 12px !important; } }