/* Aeran Bazaar — login / sign-up pop-up.
   Uses the theme's design tokens when present, with safe fallbacks. */

.ab-modal {
  --ab-forest:      var(--forest, #1f4d3a);
  --ab-forest-deep: var(--forest-deep, #123326);
  --ab-wheat:       var(--wheat, #e8a33d);
  --ab-ink:         var(--ink, #191d1a);
  --ab-soft:        var(--ink-soft, #54605a);
  --ab-line:        var(--line, #e4ddc8);
  --ab-surface:     var(--surface, #ffffff);
  --ab-r:           var(--r-lg, 22px);
  --ab-r-sm:        var(--r-sm, 12px);

  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
}
.ab-modal[hidden] { display: none; }
body.ab-modal-open { overflow: hidden; }

.ab-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 51, 38, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ab-modal-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--ab-surface);
  color: var(--ab-ink);
  border-radius: var(--ab-r);
  box-shadow: 0 30px 70px -25px rgba(18, 51, 38, 0.5);
  padding: 30px 28px 26px;
  font-family: var(--wp--preset--font-family--body, 'Work Sans', system-ui, sans-serif);
  animation: ab-modal-in .18s cubic-bezier(.2, .7, .2, 1);
}
@keyframes ab-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ab-modal-card { animation: none; } }

.ab-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--ab-soft);
  cursor: pointer;
  border-radius: 50%;
}
.ab-modal-x:hover { background: rgba(0, 0, 0, 0.06); color: var(--ab-ink); }

.ab-modal-title {
  font-family: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
  font-size: 23px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ab-forest-deep);
}
.ab-modal-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ab-soft); }

.ab-modal-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--ab-line);
  margin-bottom: 18px;
}
.ab-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 6px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ab-soft);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}
.ab-tab.is-active { color: var(--ab-forest-deep); border-bottom-color: var(--ab-wheat); }

.ab-modal-msg { display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--ab-r-sm); font-size: 13px; font-weight: 500; }
.ab-modal-msg.is-error { display: block; background: #fdeae7; color: #a3341f; }
.ab-modal-msg.is-ok    { display: block; background: #e7efe6; color: var(--ab-forest); }

.ab-form { display: flex; flex-direction: column; gap: 14px; }
.ab-field label,
.ab-form .form-row label,
.ab-reg-type .ab-reg-type-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ab-ink);
}
.ab-form input[type="text"],
.ab-form input[type="email"],
.ab-form input[type="password"] {
  width: 100%;
  border: 1.5px solid var(--ab-line);
  border-radius: var(--ab-r-sm);
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  background: var(--ab-surface);
  color: var(--ab-ink);
}
.ab-form input:focus {
  outline: none;
  border-color: var(--ab-forest);
  box-shadow: 0 0 0 4px rgba(47, 107, 79, 0.14);
}
.ab-form .ab-field { margin: 0; }

.ab-reg-type { margin: 0; }
.ab-reg-type .ab-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  font-weight: 400;
  cursor: pointer;
}
.ab-reg-type .ab-radio input,
.ab-check input { width: auto; margin: 0; }
.ab-reg-gstin { margin: 0; }
.ab-reg-gstin .ab-hint,
.ab-fineprint { display: block; font-size: 12px; color: var(--ab-soft); }
.ab-fineprint { margin: 2px 0 0; }

.ab-row-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}
.ab-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.ab-link-small { font-size: 12.5px; color: var(--ab-forest); text-decoration: underline; }

.ab-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: var(--ab-forest);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 2px;
}
.ab-btn:hover { background: var(--ab-forest-deep); }
.ab-btn:disabled { opacity: .7; cursor: default; }

.ab-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Social buttons (Nextend) + divider ---- */
.ab-social { margin: 0 0 14px; }
.ab-social .nsl-container { margin: 0 !important; }
.ab-social .nsl-container-buttons { display: flex; flex-direction: column; gap: 8px; }
.ab-or {
  display: flex; align-items: center; text-align: center;
  color: var(--ab-soft); font-size: 12px; margin: 0 0 16px;
}
.ab-or::before, .ab-or::after {
  content: ""; flex: 1; height: 1px; background: var(--ab-line);
}
.ab-or span { padding: 0 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ---- Password / OTP segmented switch ---- */
.ab-seg {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: var(--paper-dim, #f1ecdd); border-radius: 999px;
}
.ab-seg-btn {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 8px 10px; font: inherit; font-weight: 600; font-size: 13px;
  color: var(--ab-soft); border-radius: 999px;
}
.ab-seg-btn.is-active { background: var(--ab-surface); color: var(--ab-forest-deep); box-shadow: 0 1px 3px rgba(18,51,38,.12); }

.ab-subform { display: flex; flex-direction: column; gap: 14px; }
.ab-subform[hidden] { display: none; }
.ab-otp-step { display: flex; flex-direction: column; gap: 14px; }
.ab-otp-step[hidden] { display: none; }
.ab-otp-code #ab-otp-code {
  letter-spacing: .5em; text-align: center; font-size: 20px; font-weight: 700;
}
.ab-row-inline .ab-link-small {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.ab-row-inline .ab-link-small[disabled] { color: var(--ab-soft); cursor: default; text-decoration: none; }

/* ---- Profile-completion form (inline on My Account) ---- */
.ab-cp-box {
  max-width: 460px; margin: 0 auto 8px;
  background: var(--ab-surface); border: 1px solid var(--ab-line);
  border-radius: var(--ab-r); box-shadow: 0 12px 40px -18px rgba(18,51,38,.35);
  padding: 26px 24px;
  font-family: var(--wp--preset--font-family--body, 'Work Sans', system-ui, sans-serif);
}
.ab-cp-title {
  font-family: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
  font-size: 21px; font-weight: 600; margin: 0 0 4px; color: var(--ab-forest-deep);
}
.ab-cp-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--ab-soft); }
.ab-cp-box .ab-form { display: flex; flex-direction: column; gap: 14px; }

/* While a customer owes the completion step, keep My Account to just the form. */
body.ab-profile-incomplete .woocommerce-MyAccount-navigation,
body.ab-profile-incomplete .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm,
body.ab-profile-incomplete .woocommerce-MyAccount-content > .woocommerce-MyAccount-content,
body.ab-profile-incomplete .woocommerce-MyAccount-content > *:not(.ab-cp-box):not(.woocommerce-notices-wrapper) {
  display: none !important;
}
body.ab-profile-incomplete .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }

@media (max-width: 480px) {
  .ab-modal { padding: 0; align-items: stretch; }
  .ab-modal-card { max-width: none; min-height: 100%; border-radius: 0; padding: 54px 20px 28px; }
}