/* ── GS Header Login Popup ─────────────────────────────────────────────────── */ .gs-header-account-wrap { position: relative; } /* ── Dropdown panel (desktop) ────────────────────────────────────────────────── */ #gs-header-login-dropdown, #gs-header-account-menu { position: absolute; top: calc(100% + 12px); right: -10px; background: #292828; border: 1px solid #866600; border-radius: 4px; z-index: 9999; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); } #gs-header-login-dropdown { width: 310px; } #gs-header-account-menu { width: 200px; } /* ── Arrow pointing up at the account icon ──────────────────────────────────── */ #gs-header-login-dropdown::before, #gs-header-account-menu::before { content: ''; position: absolute; top: -7px; right: 18px; width: 12px; height: 12px; background: #292828; border-left: 1px solid #866600; border-top: 1px solid #866600; transform: rotate(45deg); } /* ── Close (cross) button ─────────────────────────────────────────────────────── */ .gs-popup-close { position: absolute; top: 6px; right: 8px; z-index: 2; background: none; border: none; color: #aaa; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; transition: color 0.2s; } .gs-popup-close:hover { color: #fff; } /* ── Mobile-number country picker (intl-tel-input) ────────────────────────────── */ .gs-header-otp-form .iti { display: block; width: 100%; } /* Leave room for the flag selector; overrides the shared tel padding rule. */ .gs-header-otp-form .iti input#gs-otp-phone { padding-left: 52px !important; } /* Selected-flag button matches the dark field. */ .gs-header-otp-form .iti__selected-flag { background: transparent; } .gs-header-otp-form .iti__selected-flag:hover, .gs-header-otp-form .iti--allow-dropdown input + .iti__flag-container:hover .iti__selected-flag { background: rgba(255, 255, 255, 0.06); } /* Country dropdown is appended to ; keep it above the popup. */ .iti--container { z-index: 99999; } /* ── Logged-in account menu list ──────────────────────────────────────────────── */ .gs-account-menu-list { list-style: none !important; margin: 0 !important; padding: 6px 0 !important; } .gs-account-menu-list li { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; } .gs-account-menu-list li + li { border-top: 1px solid #3e3e3e !important; } /* id-scoped so it beats the white-header rule `.whiteHead .mylinks a { color:#0c0c0c }`, which otherwise turns this dark-panel menu text dark-on-dark. */ #gs-header-account-menu .gs-account-menu-list a { display: block !important; padding: 11px 18px !important; margin: 0 !important; color: #ddd !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 500 !important; text-decoration: none !important; letter-spacing: 0.3px; border: 0 !important; transition: background 0.2s, color 0.2s; } #gs-header-account-menu .gs-account-menu-list a:hover { background: #866600 !important; color: #fff !important; } /* ── Mobile backdrop ──────────────────────────────────────────────────────────── */ #gs-popup-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 9997; } /* ── Mobile: centered fixed modal ────────────────────────────────────────────── */ @media ( max-width: 768px ) { #gs-header-login-dropdown { position: fixed; top: 50%; left: 12px; right: 12px; width: auto; transform: translateY(-50%); max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 9999; border-radius: 6px; } #gs-header-login-dropdown::before { display: none; } body.gs-popup-open { overflow: hidden; } } /* ── Inner form wrapper ──────────────────────────────────────────────────────── */ .gs-header-otp-form { display: flex; flex-direction: column; padding: 20px 0 8px; } /* Enforce correct visual order regardless of any theme flex interference */ .gs-header-otp-form > h3 { order: 1; } .gs-header-otp-form > .gs-otp-alert { order: 2; } .gs-header-otp-form > .gs-otp-method-tabs { order: 3; } .gs-header-otp-form > .gs-otp-step { order: 4; } .gs-header-otp-form > .gs-header-login-footer { order: 5; } .gs-header-otp-form h3 { color: #fff; font-size: 16px; text-align: center; margin: 0 0 16px; padding: 0 20px 16px; border-bottom: 1px solid #3e3e3e; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; width: 100%; box-sizing: border-box; } /* ── Reuse plugin form styles (scoped to popup) ─────────────────────────────── */ .gs-header-otp-form .gs-otp-alert { margin: 0 20px 12px; } .gs-header-otp-form .gs-otp-method-tabs { padding: 0 20px 14px; } .gs-header-otp-form .woocommerce-form-row, .gs-header-otp-form .form-row { padding: 4px 20px; margin: 0; width: 100%; box-sizing: border-box; } .gs-header-otp-form label { color: #ccc !important; font-size: 13px !important; font-weight: 500; display: block; margin-bottom: 4px; } .gs-header-otp-form input[type="tel"], .gs-header-otp-form input[type="email"], .gs-header-otp-form input[type="text"], .gs-header-otp-form input[type="password"] { height: 38px !important; padding: 0 12px !important; background: transparent !important; border-radius: 4px !important; font-size: 14px !important; border: 1px solid #555 !important; color: #fff !important; width: 100% !important; box-sizing: border-box; } .gs-header-otp-form input[type="tel"]:focus, .gs-header-otp-form input[type="email"]:focus, .gs-header-otp-form input[type="text"]:focus, .gs-header-otp-form input[type="password"]:focus { border-color: #d6bf36 !important; outline: none; } .gs-header-otp-form input::placeholder { color: #555 !important; } .gs-header-otp-form .gs-otp-code-input { letter-spacing: 10px !important; font-size: 22px !important; font-weight: 700 !important; text-align: center !important; } .gs-header-otp-form .formBtn, .gs-header-otp-form .woocommerce-button { display: block; width: 100%; background-color: #866600 !important; border: 1px solid #866600 !important; color: #fff !important; text-transform: uppercase; padding: 10px 0 !important; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; border-radius: 0; transition: background 0.25s, color 0.25s; text-align: center; margin-top: 4px; box-sizing: border-box; position: unset; height: auto; } .gs-header-otp-form .formBtn:hover, .gs-header-otp-form .woocommerce-button:hover { background-color: #d6bf36 !important; border-color: #d6bf36 !important; color: #000 !important; } .gs-header-otp-form .formBtn:disabled, .gs-header-otp-form .woocommerce-button:disabled { background-color: #444 !important; border-color: #444 !important; color: #888 !important; cursor: not-allowed; display: flex; align-items: center; justify-content: center; gap: 8px; } .gs-header-otp-form .gs-otp-sent-note { color: #aaa; font-size: 13px; padding: 0 20px 8px; margin: 0; } .gs-header-otp-form .gs-otp-sent-note strong { color: #d6bf36; } .gs-header-otp-form .gs-otp-intro-note { color: #aaa; font-size: 13px; padding: 0 20px 12px; margin: 0; line-height: 1.5; } .gs-header-otp-form .gs-otp-resend-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 20px 0 !important; margin: 0 !important; } .gs-header-otp-form .gs-otp-link-btn { background: none; border: none; color: #d6bf36; cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; } .gs-header-otp-form .gs-otp-link-btn:disabled { color: #555; cursor: not-allowed; text-decoration: none; } .gs-header-otp-form .gs-otp-timer { font-size: 11px; color: #777; } /* ── Footer: forgot password + register link ─────────────────────────────────── */ .gs-header-login-footer { display: flex !important; flex-direction: column; align-items: center; gap: 0; text-align: center; padding: 12px 20px 16px; margin: 8px 0 0; border-top: 1px solid #3e3e3e; color: #666; font-size: 12px; } .gs-header-login-footer > a, .gs-header-login-footer > span a { color: #d6bf36 !important; font-size: 12px !important; text-decoration: none; letter-spacing: 0.3px; } .gs-header-login-footer > a:hover, .gs-header-login-footer > span a:hover { color: #fff !important; text-decoration: underline; } .gs-header-login-footer .gs-register-link { display: flex !important; /* width: 100%; */ padding-top: 8px; margin-top: 6px; border-top: 1px solid #2e2e2e; color: #888 !important; font-size: 12px !important; } .gs-header-login-footer .gs-register-link a { color: #d6bf36 !important; font-weight: 600; font-size: 12px !important; }