/* ==========================================================================
   My Account — WooCommerce + CEV email verification
   Mirrors the contact-form aesthetic: card surfaces, gradient titles,
   gradient CTAs, dark inputs.
   ========================================================================== */

/* ---------- Hide duplicate page-template header ----------
 * page.php renders <article><header class="section-header"><h1>{title}</h1></header>
 * BEFORE the_content() on every standard Page. On /my-account/ and /sign-up/
 * we have our own custom header inside the_content (with eyebrow), so the
 * top-level one is a redundant duplicate. Hide it on both pages.
 *
 * The selector targets only the section-header that is a DIRECT child of
 * the article element — our custom headers live deeper (inside
 * .entry-content > .woocommerce or .bbm-signup-wrap) so they're unaffected.
 */
.woocommerce-account:not(.logged-in) article > header.section-header,
.page-sign-up article > header.section-header,
.woocommerce-account:not(.logged-in) .entry-header,
.woocommerce-account:not(.logged-in) header.entry-header,
.woocommerce-account:not(.logged-in) h1.entry-title {
  display: none !important;
}

/* Logged-in dashboard keeps its default header */
.woocommerce-account.logged-in .entry-header,
.woocommerce-account.logged-in header.entry-header {
  text-align: center;
  padding: var(--space-3xl) var(--space-md) var(--space-xl);
  max-width: 720px;
  margin: 0 auto;
}

.woocommerce-account.logged-in .entry-header .entry-title,
.woocommerce-account.logged-in h1.entry-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-md);
  line-height: 1.1;
}

/* ---------- Section header spacing (Sign In + Sign Up) ----------
 * Ensures eyebrow / title / description have proper breathing room and
 * the gap between header and form is generous.
 *
 * Top padding is small here because the parent .section already provides
 * generous top padding (var(--space-3xl)). Bottom padding gives space
 * before the form card.
 */
.bbm-signin-header,
.page-sign-up .section-header {
  text-align: center;
  padding: 0 var(--space-md) var(--space-2xl);
  max-width: 640px;
  margin: 0 auto;
}

.bbm-signin-header .eyebrow,
.page-sign-up .section-header .eyebrow {
  display: block;
  margin-bottom: var(--space-md);
}

.bbm-signin-header h1,
.page-sign-up .section-header h1 {
  margin: 0 0 var(--space-lg) !important;
  line-height: 1.15 !important;
}

.bbm-signin-header p,
.page-sign-up .section-header p {
  margin: 0 auto !important;
  line-height: 1.7 !important;
  max-width: 520px;
  color: var(--text-secondary);
}

/* Generous gap between section-header and the form card */
.bbm-signin-header + .woocommerce,
.page-sign-up .section-header {
  margin-bottom: var(--space-xl);
}

/* ---------- Container width ---------- */

.woocommerce-account .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-3xl);
}

/* ---------- Login-only layout on /my-account/ (logged out) ----------
 * WC's "Allow account creation on My Account" setting stays enabled so the
 * "send password setup link" option remains available, but registration
 * lives on /sign-up/. We hide WC's register column here and center the
 * login card.
 */

.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
  display: block; /* single-column — register col is hidden below */
  margin: 0 auto;
  max-width: 480px;
}

/* Hide register column entirely on /my-account/ — registration lives on /sign-up/ */
.woocommerce-account:not(.logged-in) .u-column2.col-2 {
  display: none !important;
}

.woocommerce-account:not(.logged-in) .u-column1.col-1 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account:not(.logged-in) .u-column1.col-1 > h2 {
  /* Hide the "Login" sub-heading — page title above already says "My Account" */
  display: none;
}


.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce-account:not(.logged-in) .u-columns,
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ---------- Login + Register cards ---------- */

.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .col-1 > h2,
.woocommerce-account .col-2 > h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--space-md);
}

/* High specificity to override WooCommerce default form border (#d3ced2).
   Login + register + lost-password get the card treatment because they
   render standalone on /my-account/ (logged out) and /sign-up/ — there
   is no .woocommerce-MyAccount-content wrapper around them.

   EditAccountForm and address-fields are EXCLUDED from this rule:
   when logged in, they live inside .woocommerce-MyAccount-content which
   already has the card style. Adding card styling here would stack two
   nested cards and produce the "two boxes" look the catalog owner saw. */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.lost_reset_password,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border); /* matches contact form — subtle, ~6% white on dark surfaces */
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-lg);
  margin: 0;
}

/* EditAccountForm + address-fields render INSIDE the MyAccount-content
   card. Strip browser defaults + zero out background/border so they sit
   flat on the parent card surface. */
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

/* Fieldsets — used by EditAccountForm to group "Password change" fields.
   Browsers default to a 2px groove border (white-ish on dark, jarring).
   Replace with a thin themed border + breathing room, and style the
   <legend> as a section heading inside the parent card. */
.woocommerce-account form fieldset {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.woocommerce-account form fieldset legend {
  padding: 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

/* Field wrappers — WC uses .form-row and inline <p> wraps */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  margin: 0 0 var(--space-lg);
  padding: 0;
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-form-login label,
.woocommerce-form-register label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required,
.woocommerce form .form-row label .optional {
  color: var(--accent-light);
  font-weight: var(--font-weight-normal);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  font-size: 0.8rem;
  opacity: 0.8;
  text-decoration: none;
}

/* Inputs + select + textarea */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="url"],
.woocommerce-account input[type="number"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  line-height: 1.4;
}

.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder {
  color: var(--text-muted);
}

/* Hover */
.woocommerce-account input:hover,
.woocommerce-account select:hover,
.woocommerce-account textarea:hover {
  border-color: var(--border-hover);
  background: var(--bg-tertiary);
}

/* Focus */
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-tertiary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Password toggle (eye icon) — sits inside input wrapper */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
  position: relative;
  display: block;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition-base);
}

.woocommerce form .show-password-input.display-password,
.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover {
  color: var(--accent);
}

.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: 900;
  content: "\f06e"; /* fa-eye */
  font-size: 1rem;
}

.woocommerce form .show-password-input.display-password::before {
  content: "\f070"; /* fa-eye-slash */
}

/* Remember me + lost password row */
.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.woocommerce-LostPassword {
  margin: 0;
  font-size: 0.9rem;
}

.woocommerce-LostPassword a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--transition-base);
}

.woocommerce-LostPassword a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Submit buttons (login, register, account) ---------- */

.woocommerce-account button.button,
.woocommerce-account input[type="submit"].button,
.woocommerce form .button[type="submit"],
.woocommerce-form-login .button,
.woocommerce-form-register .button,
form.cev_pin_verification_form button.cev_pin_verify {
  display: inline-block;
  background: var(--gradient-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 36px;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  box-shadow: var(--shadow-md), 0 0 0 0 var(--accent-glow);
  text-decoration: none;
  line-height: 1;
}

.woocommerce-account button.button:hover,
.woocommerce-account input[type="submit"].button:hover,
.woocommerce form .button[type="submit"]:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
form.cev_pin_verification_form button.cev_pin_verify:hover {
  background: var(--gradient-accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  color: #fff !important;
}

.woocommerce-account button.button:active,
.woocommerce-account input[type="submit"].button:active {
  transform: translateY(0);
}

.woocommerce-account button.button:focus-visible,
.woocommerce-account input[type="submit"].button:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* Submit row — center it inside cards */
.woocommerce form.woocommerce-form-login p:has(.button),
.woocommerce form.woocommerce-form-register p:has(.button),
.woocommerce form.lost_reset_password p:has(.button) {
  text-align: center;
  margin-top: var(--space-xl);
}

/* WC privacy / terms note under register button */
.woocommerce-privacy-policy-text,
.woocommerce-form-register__privacy-policy {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: var(--space-md) 0 0;
  line-height: 1.5;
}

.woocommerce-privacy-policy-text a {
  color: var(--accent-light);
  text-decoration: none;
}

.woocommerce-privacy-policy-text a:hover {
  text-decoration: underline;
}

/* ---------- Dashboard (logged in) — sidebar + content ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 0;
  box-shadow: var(--shadow-md);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
  border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 24px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-left-color: var(--accent-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--accent-light);
  background: var(--bg-tertiary);
  border-left-color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--accent-light);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* WC tables (orders, downloads) inside dashboard */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.woocommerce-account table.shop_table th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 12px 16px;
}

.woocommerce-account table.shop_table td {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  color: var(--text-secondary);
}

/* ---------- WC notices (success / info / error) ----------
   Themed dark-surface notices. Replaces WooCommerce's default
   icon-font ::before (which renders as a colorful OS emoji when
   the icon font fails to load and crops the first letter of the
   message) with a clean inline-SVG checkmark via our own ::before. */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-md);
  list-style: none;
  box-shadow: none;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Hide WC's default icon-font glyph so we control the leading mark. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  /* Reset WC defaults that would otherwise paint the emoji on top. */
  font-family: inherit !important;
  color: transparent !important;
  position: static;
  top: auto;
  left: auto;
}

.woocommerce-account .woocommerce-error {
  border-left-color: #ef4444;
}

.woocommerce-account .woocommerce-error::before {
  background-color: #ef4444;
  /* Different glyph for errors — exclamation in a circle. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

/* Hide the "Return to shop" / "View cart" inline link button on success
   notices in account context — they're for cart pages, irrelevant here. */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
  margin-left: auto;
  align-self: center;
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a {
  color: var(--accent-light);
}

/* Notice-group wrapper: tighten spacing if WC stacks multiples. */
.woocommerce-account .woocommerce-NoticeGroup {
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Sign Up page (page-sign-up.php) — single centered card
   ========================================================================== */

.page-sign-up .bbm-signup-wrap {
  max-width: 480px;
  margin: 0 auto;
}

.page-sign-up form.woocommerce-form-register {
  background: var(--bg-card);
  background-image: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-lg);
  margin: 0;
}

.page-sign-up form.woocommerce-form-register .button {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

/* Cross-promotion link under each form ("Need an account?" / "Already have an account?") */
.bbm-auth-altlink {
  text-align: center;
  margin: var(--space-lg) 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.bbm-auth-altlink a {
  color: var(--accent-light);
  font-weight: var(--font-weight-semibold);
  margin-left: 6px;
  text-decoration: none;
  transition: color var(--transition-base);
}

.bbm-auth-altlink a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ==========================================================================
   CEV — Customer Email Verification — OTP popup
   Plugin's own CSS uses !important on .otp-input bg/border/width and on
   #otp-popup background. We have to match its specificity to win.
   ========================================================================== */

#otp-popup,
#otp-popup.cev-authorization-grid__visual {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: var(--space-md) !important;
  animation: bbm-otp-fade 220ms ease-out;
}

/* When JS sets display:flex/block, our align/justify still apply */
#otp-popup[style*="display: flex"],
#otp-popup[style*="display:flex"],
#otp-popup[style*="display: block"],
#otp-popup[style*="display:block"] {
  display: flex !important;
}

@keyframes bbm-otp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#otp-popup .otp_popup_inn {
  background: var(--bg-card) !important;
  background-image: var(--gradient-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 0, 0, 0.5);
  padding: var(--space-2xl) var(--space-xl) !important;
  max-width: 480px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  position: relative;
  animation: bbm-otp-pop 280ms cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0 auto;
}

/* Inner CEV containers — strip white card surfaces, let our outer card show through */
#otp-popup .cev-authorization-grid__holder,
#otp-popup .cev-authorization-grid__inner,
#otp-popup .cev-authorization {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

#otp-popup .cev-authorization__holder {
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: 0 !important;
  text-align: center;
}

@keyframes bbm-otp-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#otp-popup .otp_content {
  background: transparent;
  padding: 0;
  border: none;
  width: 100%;
}

#otp-popup .cev-authorization-grid__holder,
#otp-popup .cev-authorization-grid__inner,
#otp-popup .cev-authorization {
  background: transparent;
  padding: 0;
  width: 100%;
  display: block;
}

/* Close / back button — CEV uses .back_btn (top-left arrow). Style it as
 * a circular themed button in top-left of our card. SVG inherits color via
 * fill="currentColor" set in our auth.php popup template. */
#otp-popup .back_btn {
  position: absolute !important;
  top: 14px;
  left: 14px;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  padding: 8px;
  z-index: 2;
}

#otp-popup .back_btn:hover {
  background: var(--bg-tertiary);
  color: var(--accent-light);
  border-color: var(--accent);
  transform: translateX(-2px);
}

#otp-popup .back_btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor !important;
}

/* Email-verification icon image — CEV ships an SVG; let it inherit theme tone */
#otp-popup .popup_image {
  margin: 0 auto var(--space-md) !important;
  width: 80px !important;
  height: 80px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 16px;
}

#otp-popup .popup_image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  filter: brightness(0.9) saturate(1.1);
}

/* Title above PIN field — gradient accent text */
#otp-popup h2,
#otp-popup h3,
#otp-popup .cev-authorization__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important; /* fallback if background-clip unsupported */
  text-align: center;
  margin: 0 0 var(--space-md) !important;
  line-height: 1.15 !important;
  display: block;
}

#otp-popup p,
#otp-popup .cev-authorization__description,
#otp-popup .cev-authorization__description span,
#otp-popup .cev-authorization__description p {
  color: var(--text-secondary) !important;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center !important;
  margin: 0 0 var(--space-xl);
}

#otp-popup p strong,
#otp-popup p b {
  color: var(--accent-light);
  font-weight: var(--font-weight-semibold);
}

/* PIN input grid — 4 boxes. CEV uses class .otp-input on the four PIN
 * inputs and applies !important to their bg/border/width — we have to
 * out-specific or match with !important. */
#otp-popup .otp-container,
#otp-popup .cev-pin-verification {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  margin: 0;
}

#otp-popup .otp-container {
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  margin-bottom: var(--space-md);
}

#otp-popup .otp-input,
.cev_pin_verification_form .otp-input,
input.otp-input {
  width: 64px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: var(--font-weight-bold) !important;
  background: var(--bg-secondary) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), transform var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--accent);
}

#otp-popup .otp-input:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-tertiary) !important;
}

#otp-popup .otp-input:focus,
.cev_pin_verification_form .otp-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--bg-tertiary) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  #otp-popup .otp-input,
  .cev_pin_verification_form .otp-input,
  input.otp-input {
    width: 54px !important;
    height: 64px !important;
    font-size: 1.65rem !important;
    margin: 0 !important;
  }
  #otp-popup .otp-container { gap: 8px; }
}

form.cev_pin_verification_form button.cev_pin_verify {
  margin-top: 0;
  min-width: 200px;
}

/* Footer area — "Didn't receive an email? Try Again" */
#otp-popup .cev-authorization__footer {
  background: transparent !important;
  color: var(--text-secondary) !important;
  text-align: center !important;
  padding: var(--space-md) 0 0 !important;
  font-size: 0.9rem;
  border: none !important;
}

#otp-popup .cev-link-try-again,
#otp-popup .send_again_link,
#otp-popup .cev-authorization__footer a {
  color: var(--accent-light) !important;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  margin-left: 6px;
  transition: color var(--transition-base);
}

#otp-popup .cev-link-try-again:hover,
#otp-popup .send_again_link:hover,
#otp-popup .cev-authorization__footer a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

#otp-popup .resend_sucsess {
  color: #86efac !important;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 0.9rem;
  text-align: center;
  margin: var(--space-sm) 0 0;
}

/* Error message inside popup (CEV uses .error_mesg — note: CEV's typo).
 * Default to hidden; the .has-text class is added via JS observer when
 * non-empty content arrives. Using :empty alone misses elements with
 * whitespace which shows up as a ghost red pill. */
#otp-popup .error_mesg,
#otp-popup .error_message {
  display: none;
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  text-align: center;
  margin: var(--space-sm) 0 0;
  padding: 8px 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.3px;
}

#otp-popup .error_mesg.has-text,
#otp-popup .error_message.has-text {
  display: block;
  animation: bbm-otp-fade 200ms ease-out;
}

/* Lock body scroll while modal is open — fallback if plugin doesn't */
body.cev-popup-open,
body.otp-popup-open {
  overflow: hidden;
}

/* ==========================================================================
   OTP Verifying overlay — shown when all 4 digits entered, hidden otherwise
   ========================================================================== */

.bbm-otp-loading {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above #otp-popup which is 99999 */
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.bbm-otp-loading.is-active {
  display: flex;
  animation: bbm-otp-fade 180ms ease-out;
}

.bbm-otp-loading__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: bbm-otp-spin 800ms linear infinite;
}

@keyframes bbm-otp-spin {
  to { transform: rotate(360deg); }
}

.bbm-otp-loading__text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0;
}

/* Also style CEV's own loading overlay (.cev_loading_overlay) in case it
 * gets triggered — replaces the plugin's default white spinner */
.cev_loading_overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100001 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  display: none;
  align-items: center;
  justify-content: center;
  /* Stack spinner above text with breathing room — mirrors the
     .bbm-otp-loading verify overlay so both loading states have the
     same visual treatment. Without these the spinner and text render
     inline, no gap, overlapping. */
  flex-direction: column;
  gap: var(--space-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cev_loading_overlay[style*="display: block"],
.cev_loading_overlay[style*="display:block"] {
  display: flex !important;
}

.cev_loading_overlay img {
  filter: brightness(2) saturate(1.5) hue-rotate(220deg); /* tint plugin's gif toward accent */
}