/* =========================================================================
   EasySale quick buy - redesigned modal
   Visual language imported from Claude Design ("quick-buy modal").
   NOTE: every selector the PHP renderer or easysale.js relies on is preserved.
   Only the styling is new - markup hooks and option logic are intact.
   ========================================================================= */

:root,
.nias-login-fastsell-modal {
  --nias-fs-primary: #2563eb;
  --nias-fs-primary-grad: linear-gradient(180deg, #2f6bf0, #2152d8);
  --nias-fs-primary-soft: #eef3ff;
  --nias-fs-primary-soft2: #f4f8ff;
  --nias-fs-ink: #161b29;
  --nias-fs-ink-2: #3a4150;
  --nias-fs-muted: #5a6172;
  --nias-fs-muted-2: #7e8595;
  --nias-fs-muted-3: #8b92a2;
  --nias-fs-faint: #9097a5;
  --nias-fs-line: #eaedf2;
  --nias-fs-line-2: #eef0f4;
  --nias-fs-line-3: #e7e9ef;
  --nias-fs-bg: #f4f5f8;
  --nias-fs-bg-2: #f8f9fb;
  --nias-fs-bg-3: #fbfbfc;
  --nias-fs-green: #0e9f6e;
  --nias-fs-red: #e5484d;
  --nias-fs-purple: #7a5af8;
  --nias-fs-purple-soft: #f1edfe;
  --nias-fs-radius-card: 16px;
  --nias-fs-radius-field: 13px;
  --nias-fs-shadow: 0 26px 50px rgba(8, 12, 24, 0.45);
  /* The font is inherited from the theme, so it matches the rest of the site */
  --nias-fs-font: inherit;
}

/* ---------- neutralise theme defaults inside the modal ----------
   Prefixed with the ID so it outranks the theme's default styles. */
#nias-login-fastsell-modal,
#nias-login-fastsell-modal * {
  box-sizing: border-box;
}
#nias-login-fastsell-modal button,
#nias-login-fastsell-modal input,
#nias-login-fastsell-modal select,
#nias-login-fastsell-modal textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  min-height: 0;
  max-width: none;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  background-image: none;
  box-sizing: border-box;
}
#nias-login-fastsell-modal button {
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
#nias-login-fastsell-modal,
#nias-login-fastsell-modal h1,
#nias-login-fastsell-modal h2,
#nias-login-fastsell-modal h3,
#nias-login-fastsell-modal h4,
#nias-login-fastsell-modal p,
#nias-login-fastsell-modal span,
#nias-login-fastsell-modal label,
#nias-login-fastsell-modal a,
#nias-login-fastsell-modal button {
  font-family: var(--nias-fs-font);
}

/* =========================================================================
   1. Modal shell
   ========================================================================= */
.nias-login-fastsell-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  /* The card is centred with margin:auto (see modal-content), not align-items:center:
     a centred flex item that grows taller than the screen overflows upwards, where it
     cannot be scrolled to - taking the close button with it. With margin:auto the
     overflow goes downwards and the modal itself scrolls. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 16px;
  direction: rtl;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nias-login-fastsell-modal-open .nias-login-fastsell-modal {
  visibility: visible;
  opacity: 1;
}
/* Lock scrolling on the page behind the modal.
   body alone is not enough: in most themes, and in Elementor layouts, the
   scrolling element is html, so without locking html the page behind the modal
   still scrolls. */
html.nias-login-fastsell-modal-open,
body.nias-login-fastsell-modal-open {
  overflow: hidden;
}

.nias-login-fastsell-modal-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% -10%,
    rgba(40, 50, 74, 0.82) 0%,
    rgba(19, 24, 38, 0.88) 55%,
    rgba(12, 15, 24, 0.92) 100%
  );
  z-index: 1;
  cursor: pointer;
}

/* this is the positioning wrapper (transparent) */
.nias-login-fastsell-modal-content {
  position: relative;
  z-index: 2;
  width: 470px;
  max-width: 100%;
  margin: auto;
  background: transparent;
  overflow: visible;
  transform: translateY(24px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nias-login-fastsell-modal-open .nias-login-fastsell-modal-content {
  transform: translateY(0);
}

/* the white card with the notch cut at top-center */
.nias-login-fastsell-modal-card {
  position: relative;
  background: #fff;
  /* --nias-fs-vvh is the visible height, kept current by easysale.js. vh ignores the
     mobile address bar and keyboard, so a card sized in vh could outgrow the screen.
     56px = the modal's top and bottom padding. */
  max-height: 90vh;
  max-height: min(90vh, calc(var(--nias-fs-vvh, 100vh) - 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  filter: drop-shadow(var(--nias-fs-shadow));
  -webkit-mask: radial-gradient(
    circle 28px at 50% 0,
    transparent 27px,
    #000 28px
  );
  mask: radial-gradient(circle 28px at 50% 0, transparent 27px, #000 28px);
}

/* close button — sits in the notch */
#nias-login-fastsell-modal button.nias-login-fastsell-modal-close {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #eceef2;
  background: #fff;
  color: var(--nias-fs-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.18);
  transition: all 0.2s ease;
  padding: 0;
}
#nias-login-fastsell-modal button.nias-login-fastsell-modal-close:hover {
  background: var(--nias-fs-primary);
  color: #fff;
  border-color: var(--nias-fs-primary);
  transform: translateX(-50%) rotate(90deg);
}
.nias-login-fastsell-modal-close svg {
  width: 17px;
  height: 17px;
}

/* legacy decorative notch SVG (kept for back-compat, hidden in new design) */
.nias-login-fastsell-modal-content-close {
  display: none;
}

/* =========================================================================
   2. Tabs (was "steps")
   ========================================================================= */
.nias-login-fastsell-steps {
  display: flex;
  gap: 6px;
  background: var(--nias-fs-bg);
  border-radius: var(--nias-fs-radius-card);
  padding: 5px;
  margin: 42px 16px 8px;
}
.nias-login-fastsell-steps .nias-login-fastsell-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border-radius: 12px;
  background: transparent;
  color: var(--nias-fs-faint);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}
.nias-login-fastsell-steps .nias-login-fastsell-step svg {
  width: 19px;
  height: 19px;
}
.nias-login-fastsell-steps .nias-login-fastsell-step.active {
  background: var(--nias-fs-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}
.nias-login-fastsell-steps .nias-login-fastsell-step.active path,
.nias-login-fastsell-steps .nias-login-fastsell-step.active circle,
.nias-login-fastsell-steps .nias-login-fastsell-step.active rect {
  stroke: #fff;
}

/* badge (re-uses .nias-login-fastsell-step-number) */
.nias-login-fastsell-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: #e3e6ec;
  color: var(--nias-fs-muted-3);
  flex-shrink: 0;
}
.nias-login-fastsell-step.active .nias-login-fastsell-step-number {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.nias-login-fastsell-step-title {
  line-height: 1;
}

/* =========================================================================
   3. Scroll body
   ========================================================================= */
.nias-login-fastsell-body {
  flex: 1;
  overflow-y: auto;
  /* At the end of the scroll, further wheel movement must not reach the page behind */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 0;
}

/* Scroll area for the Elementor template.
   The Elementor widget has no modal-card/body structure and its output sits
   directly inside .nias-login-fastsell-modal-content, which has no height cap -
   so there is no scrolling container at all and the wheel goes straight to the
   page. This class only adds scrolling and no visual styling, leaving the
   Elementor design untouched. */
.nias-fastsell-scroll-area {
  max-height: 72vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nias-login-fastsell-body::-webkit-scrollbar {
  width: 8px;
}
.nias-login-fastsell-body::-webkit-scrollbar-thumb {
  background: #d7dae2;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.nias-login-fastsell-body::-webkit-scrollbar-track {
  background: transparent;
}

.nias-login-fastsell-step-content {
  padding-bottom: 0;
}

/* inner containers no longer scroll independently — single scroll body */
.nias-login-fastsell-cart-items,
div#nias-login-fastsell-checkout-container {
  max-height: none;
  overflow: visible;
}

/* =========================================================================
   4. Footer (sticky action area, full-bleed inside the scroll body)
   ========================================================================= */
.nias-login-fastsell-footer {
  position: sticky;
  bottom: 0;
  margin: 16px -18px 0;
  padding: 14px 18px 18px;
  background: #fff;
  border-top: 1px solid var(--nias-fs-line-2);
  z-index: 3;
}

/* =========================================================================
   5. Cart items
   ========================================================================= */
.nias-login-fastsell-cart-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.nias-login-fastsell-cart-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--nias-fs-line-2);
  border-radius: var(--nias-fs-radius-card);
  position: relative;
}
.nias-login-fastsell-item-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 13px;
  overflow: hidden;
  background: var(--nias-fs-primary-soft);
}
.nias-login-fastsell-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nias-login-fastsell-item-details {
  flex: 1;
  min-width: 0;
}
#nias-login-fastsell-modal .nias-login-fastsell-cart-item h4 {
  margin: 0;
  padding-left: 32px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  line-height: 1.55;
}


/* variation attributes */
.nias-fastsell-variation-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.nias-fastsell-attr {
  font-size: 10.5px;
  background: var(--nias-fs-bg);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--nias-fs-muted);
}

/* price + qty row */
.nias-fastsell-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.nias-login-fastsell-item-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--nias-fs-primary);
  flex-wrap: wrap;
}
.nias-fastsell-regular-price {
  text-decoration: line-through;
  color: #aeb4c2;
  font-size: 10.5px;
  font-weight: 500;
}
.nias-fastsell-sale-price {
  color: var(--nias-fs-primary);
  font-weight: 800;
  font-size: 13.5px;
}

.nias-login-fastsell-item-quantity {
  display: inline-flex;
  align-items: center;
}
.nias-login-fastsell-qty-static {
  font-size: 12px;
  color: var(--nias-fs-muted-3);
}
.nias-login-fastsell-qty-wrapper {
  display: inline-flex;
  align-items: center;
  background: var(--nias-fs-bg);
  border-radius: 11px;
  padding: 3px;
}
#nias-login-fastsell-modal .nias-login-fastsell-qty-wrapper button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
#nias-login-fastsell-modal button.nias-login-fastsell-qty-plus {
  background: #fff;
  color: var(--nias-fs-primary);
  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.08);
}
#nias-login-fastsell-modal button.nias-login-fastsell-qty-minus {
  background: transparent;
  color: #6b7280;
  font-size: 19px;
}
#nias-login-fastsell-modal .nias-login-fastsell-qty-wrapper button:hover {
  background: var(--nias-fs-primary);
  color: #fff;
}
#nias-login-fastsell-modal .nias-login-fastsell-qty-input {
  width: 36px;
  min-width: 32px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  -moz-appearance: textfield;
  height: auto;
  padding: 0;
}
.nias-login-fastsell-qty-input::-webkit-outer-spin-button,
.nias-login-fastsell-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nias-login-fastsell-item-subtotal {
  display: none; /* price already shown inline, matching the new design */
}

/* remove button */
#nias-login-fastsell-modal button.nias-login-fastsell-remove-item {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  border: none;
  background: #fdecec;
  color: var(--nias-fs-red);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  padding: 0;
}
#nias-login-fastsell-modal button.nias-login-fastsell-remove-item:hover {
  background: var(--nias-fs-red);
  color: #fff;
}

/* qty disabled */
.nias-qty-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================================
   6. Price breakdown (soft card)
   ========================================================================= */
.nias-fastsell-price-breakdown {
  margin-top: 14px;
  background: var(--nias-fs-bg-2);
  border-radius: var(--nias-fs-radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nias-fastsell-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.nias-fastsell-total-line > span:first-child {
  color: var(--nias-fs-muted-2);
}
.nias-fastsell-original-price span:last-child,
.nias-fastsell-strikethrough {
  color: var(--nias-fs-muted);
  font-weight: 600;
}
.nias-fastsell-strikethrough {
  text-decoration: line-through;
}
.nias-fastsell-product-discount .nias-fastsell-discount-val,
.nias-fastsell-coupon-discount .nias-fastsell-discount-val,
.nias-fastsell-discount-val {
  color: var(--nias-fs-green);
  font-weight: 700;
}

/* =========================================================================
   7. Order summary (shipping selector + totals)
   ========================================================================= */
.nias-fastsell-order-summary,
div#nias-fastsell-order-summary {
  background: #fff;
  margin-top: 16px;
}
.nias-fastsell-shipping-section {
  margin-bottom: 14px;
}
.nias-fastsell-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin-bottom: 11px;
}
#nias-login-fastsell-modal .nias-fastsell-shipping-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 14px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-shipping-option:hover {
  border-color: #c9d4ec;
}
#nias-login-fastsell-modal .nias-fastsell-shipping-option:has(input:checked) {
  border-color: var(--nias-fs-primary);
  background: var(--nias-fs-primary-soft2);
}
.nias-fastsell-shipping-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nias-fs-ink);
}
.nias-fastsell-shipping-cost {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nias-fs-primary);
}
.nias-fastsell-no-shipping {
  font-size: 12px;
  color: var(--nias-fs-faint);
  margin: 0;
}

.nias-fastsell-totals-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nias-fastsell-shipping-cost-line {
  font-size: 12.5px;
}
.nias-fastsell-shipping-cost-line > span:first-child {
  color: var(--nias-fs-muted-2);
}
.nias-fastsell-shipping-cost-line > span:last-child {
  color: var(--nias-fs-muted);
  font-weight: 600;
}
.nias-fastsell-grand-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px dashed var(--nias-fs-line-3);
}
.nias-fastsell-grand-total > span:first-child {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nias-fs-ink-2);
}
.nias-fastsell-grand-total-val {
  font-size: 19px;
  font-weight: 800;
  color: var(--nias-fs-ink);
}
.nias-fastsell-free-label {
  color: var(--nias-fs-green);
  font-weight: 800;
}

/* =========================================================================
   8. Coupon
   ========================================================================= */
.nias-login-fastsell-coupon {
  display: flex;
  gap: 9px;
  margin-bottom: 13px;
}
#nias-login-fastsell-modal .nias-login-fastsell-coupon input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: var(--nias-fs-radius-field);
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--nias-fs-ink);
  background: var(--nias-fs-bg-3);
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-login-fastsell-coupon input:focus {
  outline: none;
  border-color: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-login-fastsell-coupon button {
  flex-shrink: 0;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--nias-fs-radius-field);
  background: var(--nias-fs-primary-soft);
  color: var(--nias-fs-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
#nias-login-fastsell-modal .nias-login-fastsell-coupon button:hover {
  background: var(--nias-fs-primary);
  color: #fff;
}

/* =========================================================================
   9. Checkout form
   ========================================================================= */
.nias-login-fastsell-checkout-fields {
  overflow: visible;
}
span.nias-login-fastsell-billing-fields-title {
    min-width: 100%;
    margin: 0!important;
}
.nias-login-fastsell-checkout-fields .woocommerce-form-coupon-toggle,
.nias-login-fastsell-checkout-fields .woocommerce-form-login-toggle {
  display: none !important;
}
#nias-login-fastsell-modal .nias-login-fastsell-billing-fields-title,
#nias-login-fastsell-modal .nias-login-fastsell-shipping-methods-title,
#nias-login-fastsell-modal .nias-login-fastsell-payment-methods-title,
#nias-login-fastsell-modal .nias-login-fastsell-ship-to-different-address-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 0 0 13px;
}

#nias-login-fastsell-modal .woocommerce-billing-fields,
#nias-login-fastsell-modal .woocommerce-additional-fields,
#nias-login-fastsell-modal .nias-login-fastsell-shipping-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 11px;
}
#nias-login-fastsell-modal .woocommerce-billing-fields {
  margin-bottom: 14px;
  margin-top: 0;
}

#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields .form-row {
  margin: 0;
  flex: 1 1 100%;
  max-width: 100%;
  padding: 0;
  float: none;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields .form-row-first,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields .form-row-last,
#nias-login-fastsell-modal p#billing_first_name_field,
#nias-login-fastsell-modal p#billing_last_name_field,
#nias-login-fastsell-modal p#billing_state_field,
#nias-login-fastsell-modal p#billing_city_field,
#nias-login-fastsell-modal p#billing_phone_field,
#nias-login-fastsell-modal p#billing_email_field {
  flex: 1 1 calc(50% - 6px);
}
label.required_field {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--nias-fs-muted-2);
  margin-bottom: 7px;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields .required {
  color: var(--nias-fs-red);
  border: none;
  text-decoration: none;
}

#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input[type="text"],
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input[type="email"],
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input[type="tel"],
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input[type="number"],
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input[type="password"],
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields select,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: var(--nias-fs-radius-field);
  padding: 0 14px;
  font-size: 13.5px;
  color: var(--nias-fs-ink);
  background: #fff;
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea {
  height: auto;
  min-height: 84px;
  padding: 12px 14px;
  resize: vertical;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input:focus,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields select:focus,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea:focus {
  outline: none;
  border-color: var(--nias-fs-primary);
}

/* ship to different address */
.woocommerce-shipping-fields {
  margin-top: 14px;
}
.nias-login-fastsell-ship-to-different-address-title {
  display: none;
}
.nias-login-fastsell-ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
#nias-login-fastsell-modal .nias-login-fastsell-ship-to-different-address input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #cdd2dd;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
#nias-login-fastsell-modal .nias-login-fastsell-ship-to-different-address input[type="checkbox"]:checked {
  border-color: var(--nias-fs-primary);
  background: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-login-fastsell-ship-to-different-address input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.nias-login-fastsell-ship-to-different-address span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nias-fs-ink-2);
}
.nias-login-fastsell-shipping-fields {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed #d6dbe6;
  border-radius: 14px;
  background: #fbfcfe;
}

/* =========================================================================
   10. Shipping & payment method cards
   ========================================================================= */
.nias-login-fastsell-shipping-methods,
.nias-login-fastsell-payment-methods {
  margin-top: 18px;
}
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option,
#nias-login-fastsell-modal label.nias-login-fastsell-payment-method-option {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: #fff;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-wrap: wrap;
}
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option:hover,
#nias-login-fastsell-modal label.nias-login-fastsell-payment-method-option:hover {
  border-color: #c9d4ec;
}
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option:has(input:checked),
#nias-login-fastsell-modal label.nias-login-fastsell-payment-method-option:has(input:checked) {
  border-color: var(--nias-fs-primary);
  background: var(--nias-fs-primary-soft2);
}

/* custom radio dot */
#nias-login-fastsell-modal .nias-fastsell-shipping-option input[type="radio"],
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option input[type="radio"],
#nias-login-fastsell-modal .nias-login-fastsell-payment-method-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cdd2dd;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-shipping-option input[type="radio"]:checked,
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option input[type="radio"]:checked,
#nias-login-fastsell-modal .nias-login-fastsell-payment-method-option input[type="radio"]:checked {
  border-color: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-fastsell-shipping-option input[type="radio"]:checked::after,
#nias-login-fastsell-modal .nias-login-fastsell-shipping-method-option input[type="radio"]:checked::after,
#nias-login-fastsell-modal .nias-login-fastsell-payment-method-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--nias-fs-primary);
}

.nias-login-fastsell-shipping-method-option > span:first-of-type,
.nias-login-fastsell-payment-method-option > span:first-of-type {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
}
.nias-login-fastsell-method-cost {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nias-fs-primary);
}
.nias-login-fastsell-payment-methods img {
  aspect-ratio: 1/1;
  object-fit: contain;
  max-width: 36px!important;
  border-radius: 9px;
}
.nias-login-fastsell-payment-box {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--nias-fs-bg);
  border-radius: 11px;
}
.nias-login-fastsell-payment-box p {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  color: var(--nias-fs-muted);
  text-align: justify;
}
.nias-login-fastsell-no-payment-methods {
  font-size: 12.5px;
  color: var(--nias-fs-faint);
  margin: 0;
}

/* free order notice */
.nias-fastsell-free-order-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fff6;
  border: 1px solid #bdebd3;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--nias-fs-green);
  font-size: 13px;
  font-weight: 600;
}

/* installment / login notices (legacy, retheme) */
.nias-login-fastsell-installment-notice,
.nias-login-fastsell-payment-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.nias-login-fastsell-installment-notice,
.nias-login-fastsell-payment-warning {
  background: rgba(229, 72, 77, 0.07);
  border: 1px solid rgba(229, 72, 77, 0.4);
  color: var(--nias-fs-red);
}
a.nias-login-fastsell-login-button,
.nias-login-fastsell-login-btn {
  text-decoration: none;
  color: var(--nias-fs-red);
  border: 1px solid rgba(229, 72, 77, 0.5);
  background: rgba(229, 72, 77, 0.12);
  padding: 6px 14px;
  border-radius: 9px;
  font-weight: 600;
}
@media only screen and (max-width: 560px) {
  .nias-login-fastsell-installment-notice {
    justify-content: center;
  }
}

/* =========================================================================
   11. Empty cart
   ========================================================================= */
.nias-fastsell-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 26px;
  text-align: center;
}
.nias-fastsell-empty-cart svg {
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: 50%;
  background: var(--nias-fs-bg);
  color: #b6bcc9;
  margin-bottom: 14px;
}
.nias-fastsell-empty-cart p {
  font-size: 14px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 0;
}

/* =========================================================================
   12. Primary action buttons
   ========================================================================= */
#nias-login-fastsell-modal button.nias-login-fastsell-btn-next,
#nias-login-fastsell-modal button.nias-login-fastsell-btn-submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 15px;
  background: var(--nias-fs-primary-grad);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
  transition: transform 0.15s ease;
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-next svg,
#nias-login-fastsell-modal button.nias-login-fastsell-btn-submit svg {
  width: 18px;
  height: 18px;
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-next:hover,
#nias-login-fastsell-modal button.nias-login-fastsell-btn-submit:hover {
  transform: translateY(-1px);
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-submit:disabled {
  background: #c8ceda;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

#nias-login-fastsell-modal .nias-login-fastsell-actions {
  display: flex;
  gap: 10px;
  margin-top: 0;
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-back {
  flex-shrink: 0;
  height: 52px;
  padding: 0 22px;
  border: 1.5px solid var(--nias-fs-line-3);
  border-radius: 15px;
  background: #fff;
  color: var(--nias-fs-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-back:hover {
  background: #f6f7f9;
}
#nias-login-fastsell-modal button.nias-login-fastsell-btn-submit {
  flex: 1;
}

/* =========================================================================
   13. Buy-now mode — hide cart tab/coupon/next
   ========================================================================= */
body.nias-fastsell-buynow-mode .nias-login-fastsell-steps,
body.nias-fastsell-buynow-mode .nias-login-fastsell-coupon,
body.nias-fastsell-buynow-mode button.nias-login-fastsell-btn-next,
body.nias-fastsell-buynow-mode .nias-login-fastsell-btn-back {
  display: none !important;
}
body.nias-fastsell-buynow-mode .nias-login-fastsell-body {
  padding-top: 24px;
}

/* =========================================================================
   14. Loading overlay
   ========================================================================= */
.nias-login-fastsell-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  z-index: 10;
  backdrop-filter: blur(1px);
}
.nias-login-fastsell-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid #e9ecf4;
  border-top-color: var(--nias-fs-primary);
  border-radius: 50%;
  animation: nias-fs-spin 0.9s linear infinite;
}
@keyframes nias-fs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Linear loader for the payment step - replaces the spinner while the order is processed */
.nias-fastsell-loading--progress .nias-login-fastsell-spinner {
  display: none;
}
.nias-fastsell-progress {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(320px, 78%);
}
.nias-fastsell-loading--progress .nias-fastsell-progress {
  display: flex;
}
.nias-fastsell-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--nias-fs-ink-2);
  text-align: center;
}
.nias-fastsell-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e9ecf4;
  overflow: hidden;
}
.nias-fastsell-progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--nias-fs-primary-grad, var(--nias-fs-primary));
  transition: width 0.25s ease;
  overflow: hidden;
}
.nias-fastsell-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: nias-fs-progress-shine 1.2s linear infinite;
}
@keyframes nias-fs-progress-shine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* =========================================================================
   14.5. Mobile number verification before checkout (OTP)
   ========================================================================= */
.nias-fastsell-otp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  margin: 22px auto;
  padding: 26px 20px;
  text-align: center;
  background: var(--nias-fs-bg-3);
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 16px;
}
.nias-fastsell-otp-icon {
  color: var(--nias-fs-primary);
  background: var(--nias-fs-primary-soft);
  border-radius: 50%;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nias-fastsell-otp-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--nias-fs-ink);
}
.nias-fastsell-otp-desc {
  font-size: 12.5px;
  color: var(--nias-fs-muted);
  line-height: 1.9;
  margin: 0;
}
.nias-fastsell-otp-step {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
  margin-top: 8px;
}
#nias-login-fastsell-modal .nias-fastsell-otp input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: var(--nias-fs-radius-field);
  padding: 0 14px;
  font-size: 14px;
  color: var(--nias-fs-ink);
  background: #fff;
  text-align: center;
  letter-spacing: 1px;
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-otp input:focus {
  outline: none;
  border-color: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-step > button {
  flex-shrink: 0;
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: var(--nias-fs-radius-field);
  background: var(--nias-fs-primary-grad, var(--nias-fs-primary));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-step > button:hover {
  opacity: 0.9;
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-step > button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nias-fastsell-otp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-meta button {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nias-fs-primary);
  cursor: pointer;
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-meta button:disabled {
  color: var(--nias-fs-muted-2);
  cursor: default;
}

/* Step two: depending on the "behaviour" settings, either password/OTP tabs or just one of them */
.nias-fastsell-otp-step2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.nias-fastsell-otp-panel {
  width: 100%;
}
.nias-fastsell-otp-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 4px;
  background: var(--nias-fs-bg-2, #f4f5f7);
  border-radius: var(--nias-fs-radius-field);
}
#nias-login-fastsell-modal .nias-fastsell-otp .nias-fastsell-otp-tabs button {
  flex: 1;
  height: 38px;
  border: none;
  border-radius: calc(var(--nias-fs-radius-field) - 2px);
  background: transparent;
  color: var(--nias-fs-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
#nias-login-fastsell-modal
  .nias-fastsell-otp
  .nias-fastsell-otp-tabs
  button.is-active {
  background: #fff;
  color: var(--nias-fs-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Manual password block - shown by JavaScript for new users only */
.nias-fastsell-otp-manual {
  width: 100%;
}
.nias-fastsell-otp-manual .nias-fastsell-otp-desc {
  margin-top: 6px;
}
.nias-fastsell-otp-forgot-row {
  justify-content: flex-end;
}
/* The confirm button is the only item in its row, so it takes the full width */
#nias-login-fastsell-modal
  .nias-fastsell-otp
  .nias-fastsell-otp-submit-row
  > button {
  flex: 1;
}

/* =========================================================================
   14.6. Shipping methods during an address update
   ========================================================================= */
.nias-fastsell-shipping-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.nias-fastsell-no-shipping {
  margin: 6px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--nias-fs-muted);
  background: var(--nias-fs-bg-2);
  border: 1px dashed var(--nias-fs-line);
  border-radius: var(--nias-fs-radius-field);
}

/* =========================================================================
   15. Field error state
   ========================================================================= */
input.nias-fastsell-field-error,
select.nias-fastsell-field-error,
textarea.nias-fastsell-field-error,
.select2-selection.nias-fastsell-field-error {
  border-color: var(--nias-fs-red) !important;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.15) !important;
  outline: none;
}
input.nias-fastsell-field-error:focus,
select.nias-fastsell-field-error:focus,
textarea.nias-fastsell-field-error:focus {
  border-color: var(--nias-fs-green) !important;
  box-shadow: 0 0 0 2px rgba(14, 159, 110, 0.15) !important;
}

/* =========================================================================
   16. select2 / selectWoo inside the modal
   ========================================================================= */
#nias-login-fastsell-modal .select2-container {
  width: 100% !important;
}
#nias-login-fastsell-modal .select2-container .select2-selection {
  height: 46px;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: var(--nias-fs-radius-field);
  display: flex;
  align-items: center;
}
#nias-login-fastsell-modal
  .select2-container
  .select2-selection__rendered {
  line-height: 44px;
  padding: 0 14px;
  color: var(--nias-fs-ink);
  font-size: 13.5px;
}
#nias-login-fastsell-modal .select2-selection__arrow {
  height: 44px !important;
  width: 28px !important;
}
.nias-login-fastsell-modal-open
  span.select2-container.select2-container--open {
  z-index: 9999999;
}

/* Dropdown results list.
   select2 attaches the dropdown to <body>, not inside the modal, so none of the
   "#nias-login-fastsell-modal .select2-*" rules above reach it - they only style
   the closed box. The list's height cap comes from WooCommerce's own select2 file
   and depends on its theme class (select2-container--default); if another plugin
   mounts select2 with a different theme, that rule never matches, the city list
   opens to the full item count and, having nothing to scroll, sends the wheel
   straight to the page - the "cannot scroll between city and province items"
   symptom. Height cap and scrolling are guaranteed here regardless of theme,
   scoped to when the modal is open or the inline block is on the page, so the
   rest of the site is untouched. */
html.nias-login-fastsell-modal-open
  .select2-container--open
  .select2-results
  > .select2-results__options,
html.nias-fastsell-inline-active
  .select2-container--open
  .select2-results
  > .select2-results__options {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   17. Toast message (global)
   ========================================================================= */
#nias-message {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483647;
  padding: 14px 40px 16px 16px;
  min-width: 260px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--nias-fs-line);
  border-radius: 14px;
  color: var(--nias-fs-ink);
  font-family: var(--nias-fs-font);
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: 0 14px 34px rgba(8, 12, 24, 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-110%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#nias-message.nias-message--visible {
  opacity: 1;
  transform: translateX(0);
}
#nias-message.nias-message--hiding {
  opacity: 0;
  transform: translateX(-110%);
}
#nias-message::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  transform-origin: right center;
  transform: scaleX(1);
}
#nias-message.nias-message--visible::after {
  transform: scaleX(0);
  transition: transform var(--msg-duration, 4s) linear;
}
.nias-message__close {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 0;
  color: inherit;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.nias-message__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

/* =========================================================================
   18. Responsive
   ========================================================================= */
@media (max-width: 600px) {
  .nias-login-fastsell-modal {
    padding: 0;
  }
  /* Bottom sheet: pushed to the bottom by margin-top:auto (not align-items:flex-end,
     which let a too-tall card run off the top of the screen) */
  .nias-login-fastsell-modal-content {
    width: 100%;
    margin: auto 0 0;
    transform: translateY(60px);
  }
  .nias-login-fastsell-modal-card {
    max-height: 94vh;
    /* The usual 94vh, but never more than the visible height - 28px, which keeps
       the close button (it overhangs the card by 19px) on screen */
    max-height: min(94vh, calc(var(--nias-fs-vvh, 100vh) - 28px));
    border-radius: 26px 26px 0 0;
    -webkit-mask: none;
    mask: none;
  }
  button.nias-login-fastsell-modal-close {
    top: 10px;
    left: 14px;
    transform: none;
    width: 38px;
    height: 38px;
  }
  button.nias-login-fastsell-modal-close:hover {
    transform: rotate(90deg);
  }
  .nias-login-fastsell-steps {
    margin-top: 16px;
  }
  .nias-login-fastsell-loading {
    border-radius: 26px 26px 0 0;
  }
}

/* =========================================================================
   18. Inline mode - output of the [nias_fastsell] shortcode
   -------------------------------------------------------------------------
   The outer container carries the modal's ID, so all 100+
   "#nias-login-fastsell-modal ..." rules apply to the inline version without
   being repeated; only the modal shell (fixed, overlay, height lock, entry
   animation) is neutralised here. The selectors use id+class so they outrank the
   rules above and the mobile media query.
   ========================================================================= */
#nias-login-fastsell-modal.nias-login-fastsell-inline {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  z-index: auto;
  display: block;
  padding: 0;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transition: none;
}

/* The overlay and close button are meaningless inline */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-modal-overlay,
#nias-login-fastsell-modal.nias-login-fastsell-inline button.nias-login-fastsell-modal-close,
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-modal-content-close {
  display: none;
}

#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-modal-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
  transition: none;
}

/* No height cap and no clipping of the close button.
   The card's heavy shadow was designed to float above a dark overlay; against the
   page's light background it is softened. */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-modal-card {
  max-height: none;
  overflow: visible;
  border-radius: var(--nias-fs-radius-card, 16px);
  border: 1px solid var(--nias-fs-line, #eaedf2);
  filter: drop-shadow(0 8px 22px rgba(8, 12, 24, 0.07));
  -webkit-mask: none;
  mask: none;
}

/* Scrolling belongs to the page itself; the inner container has none of its own.
   With these areas open, selectWoo's scroll lock is moot as well. */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-body,
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-fastsell-scroll-area {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

/* The top spacing on the tabs existed to make room for the close button */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-steps {
  margin-top: 16px;
}

/* A sticky footer only makes sense inside a scrolling container */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-footer {
  position: static;
}

#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-loading {
  position: absolute;
  border-radius: var(--nias-fs-radius-card, 18px);
}

/* "Single quick buy" mode belongs to the add-to-cart flow on the product page;
   the inline block must not lose the cart and coupon tabs
   (in this mode the script also does not put the buynow class on body) */
#nias-login-fastsell-modal.nias-login-fastsell-inline .nias-login-fastsell-body {
  padding-top: 0;
}

/* =========================================================================
   19. Fatal transport error - no response from the server
   -------------------------------------------------------------------------
   The modal opens before the response arrives. If the request comes back 404,
   403 or 5xx, or the response is not JSON at all (a firewall block page or a
   VPN), there is no content for the tabs. The class below lands on the modal
   root and hands the tabs' and body's space to the message. A class is used
   rather than inline styles, because parts of the modal are re-rendered after
   every AJAX call.
   ========================================================================= */
.nias-fastsell-fatal {
  display: none;
}
#nias-login-fastsell-modal.nias-fastsell-has-fatal .nias-login-fastsell-steps,
#nias-login-fastsell-modal.nias-fastsell-has-fatal .nias-login-fastsell-step-content,
#nias-login-fastsell-modal.nias-fastsell-has-fatal .nias-login-fastsell-footer {
  display: none !important;
}
#nias-login-fastsell-modal.nias-fastsell-has-fatal .nias-fastsell-fatal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 38px 24px 34px;
}
.nias-fastsell-fatal svg {
  width: 46px;
  height: 46px;
  color: var(--nias-fs-red);
  flex-shrink: 0;
}
.nias-fastsell-fatal .nias-fastsell-fatal-text {
  margin: 0;
  color: var(--nias-fs-ink-2);
  font-size: 14px;
  line-height: 2.1;
  max-width: 340px;
}
#nias-login-fastsell-modal button.nias-fastsell-fatal-retry {
  padding: 11px 26px;
  border-radius: var(--nias-fs-radius-field);
  background: var(--nias-fs-primary-grad);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease;
}
#nias-login-fastsell-modal button.nias-fastsell-fatal-retry:hover {
  filter: brightness(1.08);
}

/* =========================================================================
   Shortcode add-to-cart button - [nias_fastsell_add_to_cart]
   Rendered outside the modal, so it is styled without the modal ID prefix.
   ========================================================================= */
.nias-fastsell-atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border: none;
  border-radius: var(--nias-fs-radius-field);
  background: var(--nias-fs-primary-grad);
  color: #fff;
  font-family: var(--nias-fs-font);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
  transition:
    transform 0.15s ease,
    filter 0.2s ease;
}
.nias-fastsell-atc:hover,
.nias-fastsell-atc:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.nias-fastsell-atc--disabled,
.nias-fastsell-atc[disabled] {
  background: #c8ceda;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* A field disabled in the settings whose removal would break checkout (country).
   Its value still submits with the form; it is only hidden from the user. */
.nias-login-fastsell-modal .nias-fastsell-field-hidden,
.nias-login-fastsell-checkout-fields .nias-fastsell-field-hidden {
  display: none !important;
}

/* ---------- checkout field placeholders ----------
   The "show placeholder" option writes the field title inside the field itself;
   it has to be clearly fainter than real text or users think the field is
   already filled. Input text is --nias-fs-ink (#161b29), so --nias-fs-faint is
   used here. The prefixed selectors must stay separate: one invalid selector
   kills the whole rule in browsers that do not know that prefix. */
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input::placeholder,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea::placeholder,
.nias-fastsell-wc-compat input::placeholder,
.nias-fastsell-wc-compat textarea::placeholder {
  color: var(--nias-fs-faint, #9097a5);
  opacity: 0.75;
  font-weight: 400;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input::-webkit-input-placeholder,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea::-webkit-input-placeholder,
.nias-fastsell-wc-compat input::-webkit-input-placeholder,
.nias-fastsell-wc-compat textarea::-webkit-input-placeholder {
  color: var(--nias-fs-faint, #9097a5);
  opacity: 0.75;
  font-weight: 400;
}
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input::-moz-placeholder,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea::-moz-placeholder,
.nias-fastsell-wc-compat input::-moz-placeholder,
.nias-fastsell-wc-compat textarea::-moz-placeholder {
  color: var(--nias-fs-faint, #9097a5);
  opacity: 0.75;
  font-weight: 400;
}
/* Fades a little on focus, keeping attention on what is being typed */
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields input:focus::placeholder,
#nias-login-fastsell-modal .nias-login-fastsell-checkout-fields textarea:focus::placeholder,
.nias-fastsell-wc-compat input:focus::placeholder,
.nias-fastsell-wc-compat textarea:focus::placeholder {
  opacity: 0.45;
}

/* ============================================================
   Full-compatibility mode - matching the real WooCommerce form to the plugin

   In this mode the [woocommerce_checkout] output renders inside the modal. Its
   wrapper also carries the nias-login-fastsell-checkout-fields class, so fields,
   labels and inputs pick up the plugin styling automatically. This section only
   covers elements the plugin's own form does not have: the customer_details
   columns, the order review table, the WooCommerce gateway list, the place-order
   button and the terms.
   ============================================================ */

/* WooCommerce's two-column layout makes no sense inside a narrow modal */
#nias-login-fastsell-modal .nias-fastsell-wc-compat #customer_details,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #customer_details .col-1,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #customer_details .col-2 {
  display: block;
  width: 100%;
  max-width: 100%;
  float: none;
  padding: 0;
  margin: 0;
}

/* WooCommerce headings match the plugin's headings */
#nias-login-fastsell-modal .nias-fastsell-wc-compat h3,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review_heading {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 18px 0 13px;
  padding: 0;
  border: none;
  line-height: 1.6;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat #customer_details h3:first-child {
  margin-top: 0;
}

/* The main form: no theme border or background */
#nias-login-fastsell-modal .nias-fastsell-wc-compat form.checkout,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Order review table -> matches the plugin's total box */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table {
  /* The table layout becomes block-level - see the "shipping method row" section for why */
  display: block;
  width: 100%;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 15px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--nias-fs-bg-3);
  margin: 0 0 14px;
  font-size: 13px;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table td {
  border: none;
  border-bottom: 1px solid var(--nias-fs-line-2);
  padding: 11px 14px;
  text-align: start;
  color: var(--nias-fs-ink-2);
  font-weight: 500;
  background: transparent;
}
/* Rows: title at the start, value at the end - no table column grid.
   Each row can then lay itself out independently (the shipping row goes to two
   lines, for instance) without disturbing the column widths. */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table thead,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tbody,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tfoot {
  display: block;
  width: 100%;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr > *:first-child {
  flex: 1 1 auto;
  text-align: start;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr > *:last-child {
  flex: 0 1 auto;
  text-align: end;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr > *:only-child {
  flex: 1 1 100%;
}

#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr:last-child th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr:last-child td {
  border-bottom: none;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table td {
  text-align: end;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table .order-total th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table .order-total td {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--nias-fs-ink);
  background: #fff;
}

/* ------------------------------------------------------------
   Shipping method row inside the order review table

   WooCommerce prints the shipping methods in a td of this table as
   ul.woocommerce-shipping-methods > li with a bare radio; with the table's
   text-align:end the options stick to the edge and look nothing like the
   .nias-login-fastsell-shipping-method-option cards in the plugin's own form.
   Here the row opens into two lines (title + cards) and each option gets the
   same quick-buy radio card.

   Important: display:block on the tr itself does not work. The browser wraps it
   in an anonymous cell in the table's first column, so the cards only reach the
   title column's width and the amount column stays empty. That is why the whole
   review table is switched to block/flex above - with no column grid, this row
   can go full width.

   The styling hangs off WooCommerce's own markup and relies on no class added by
   JavaScript, because checkout.js rebuilds this row on every update_checkout.
   ------------------------------------------------------------ */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.woocommerce-shipping-totals,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.shipping {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.woocommerce-shipping-totals th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.woocommerce-shipping-totals td,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.shipping th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.shipping td {
  display: block;
  width: 100%;
  text-align: start;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.woocommerce-shipping-totals th,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.shipping th {
  padding-bottom: 0;
  border-bottom: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.woocommerce-shipping-totals td,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table tr.shipping td {
  padding-top: 10px;
}

/* Method list -> a column, no bullets */
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method li,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 13px 15px;
  background: #fff;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method li:hover,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods li:hover {
  border-color: #c9d4ec;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method li:has(input:checked),
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--nias-fs-primary);
  background: var(--nias-fs-primary-soft2);
}

/* Custom radio - the same circle as the plugin's shipping and gateway cards */
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method input[type="radio"],
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cdd2dd;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method input[type="radio"]:checked,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods input[type="radio"]:checked {
  border-color: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method input[type="radio"]:checked::after,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--nias-fs-primary);
}

/* Label: method name at the start, amount at the end of the row */
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method label,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--nias-fs-ink);
  cursor: pointer;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method label .woocommerce-Price-amount,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods label .woocommerce-Price-amount {
  margin-inline-start: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nias-fs-primary);
}

/* Single rate: WooCommerce prints only the method text (no radio) -
   a card with no choice is meaningless, so it renders plain and unframed */
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul#shipping_method li:not(:has(input[type="radio"])),
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.woocommerce-shipping-methods li:not(:has(input[type="radio"])) {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: default;
  font-size: 13px;
  font-weight: 600;
  color: var(--nias-fs-ink-2);
}

/* Shipping destination and the calculator link - small and faint under the cards */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-destination,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shipping-calculator-button {
  display: block;
  margin: 10px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--nias-fs-muted-2);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shipping-calculator-button {
  color: var(--nias-fs-primary);
  text-decoration: none;
}

/* WooCommerce gateway list -> matches the plugin's gateway cards */
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  position: relative;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 15px 13px 15px;
  padding-inline-start: 47px;
  background: #fff;
  border: 1.5px solid var(--nias-fs-line);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 0;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > label:hover {
  border-color: #c9d4ec;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method:has(input:checked) > label {
  border-color: var(--nias-fs-primary);
  background: var(--nias-fs-primary-soft2);
}

/* WooCommerce's radio sits outside the label, so it is positioned onto it */
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 16px;
  inset-inline-start: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cdd2dd;
  background: #fff;
  cursor: pointer;
  margin: 0;
  z-index: 2;
  transition: border-color 0.18s ease;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > input[type="radio"]:checked {
  border-color: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--nias-fs-primary);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method img {
  max-height: 26px;
  width: auto;
  margin: 0 4px;
  float: none;
}

/* Gateway description - the plugin's own expanding panel */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--nias-fs-bg-2);
  border: 1px solid var(--nias-fs-line-2);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--nias-fs-muted);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .payment_box::before {
  display: none;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .payment_box p:last-child {
  margin-bottom: 0;
}

/* Terms and conditions */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-terms-and-conditions-wrapper {
  font-size: 12.5px;
  color: var(--nias-fs-muted);
  margin-bottom: 12px;
  padding-top: 0;
  border-top: none;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-terms-and-conditions-wrapper label {
  font-size: 12.5px;
  display: inline;
}

/* WooCommerce place-order button -> the plugin's pay button */
#nias-login-fastsell-modal .nias-fastsell-wc-compat #place_order {
  width: 100%;
  height: 52px;
  min-height: 52px;
  border: none;
  border-radius: 15px;
  background: var(--nias-fs-primary-grad);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
  transition: transform 0.15s ease;
  padding: 0;
  margin: 4px 0 0;
  float: none;
  text-transform: none;
  line-height: normal;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat #place_order:hover {
  transform: translateY(-1px);
  background: var(--nias-fs-primary-grad);
  color: #fff;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat #place_order:disabled {
  background: #c8ceda;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* "Ship to a different address" */
#nias-login-fastsell-modal .nias-fastsell-wc-compat #ship-to-different-address {
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 4px 0 10px;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nias-fs-ink);
  margin: 0;
}

/* WooCommerce notices inside the modal */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-error,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-message,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-info {
  border-radius: 12px;
  padding: 11px 14px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.9;
  list-style: none;
  border: 1px solid var(--nias-fs-line);
  background: var(--nias-fs-bg-2);
  color: var(--nias-fs-ink-2);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-error {
  border-color: rgba(229, 72, 77, 0.35);
  background: rgba(229, 72, 77, 0.06);
  color: var(--nias-fs-red);
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-error::before,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-message::before,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-info::before {
  display: none;
}

/* WooCommerce loader during update_checkout */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .blockUI.blockOverlay {
  border-radius: 15px;
}

/* ------------------------------------------------------------
   Single-column layout (compatibility mode) - at every size

   WooCommerce loads woocommerce-smallscreen.css only with
   media="only screen and (max-width: 768px)" and collapses the columns there,
   which means the two-column layout is a desktop-only thing. The modal is narrow
   on desktop too, so it goes single column at any size here.

   Sources of horizontal layout that get neutralised:
     - WooCommerce's own col2-set / col-1 / col-2 (float and 48% width)
     - WooCommerce's form-row-first / form-row-last (float and 47% width)
     - the plugin's own 50% form rule, which reaches this form through the shared
       nias-login-fastsell-checkout-fields class
     - a two-column grid or float some themes put on order_review

   important is required: these rules have to outrank both the theme's CSS and
   WooCommerce's, and there is no telling what specificity a theme will use. The
   scope is limited to inside the quick-buy modal.
   ------------------------------------------------------------ */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set .col-1,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set .col-2,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review_heading,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-billing-fields,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-fields,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-additional-fields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both;
  padding-inline: 0;
  margin-inline: 0;
}

/* Every field on its own row - including WooCommerce's form-row-first/last and
   the ID-based rules the plugin's own form has for name, city and phone */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .form-row,
#nias-login-fastsell-modal .nias-fastsell-wc-compat.nias-login-fastsell-checkout-fields .form-row-first,
#nias-login-fastsell-modal .nias-fastsell-wc-compat.nias-login-fastsell-checkout-fields .form-row-last,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_first_name_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_last_name_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_state_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_city_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_phone_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#billing_email_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#shipping_first_name_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#shipping_last_name_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#shipping_state_field,
#nias-login-fastsell-modal .nias-fastsell-wc-compat p#shipping_city_field {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  margin-inline: 0;
}

/* A hidden field must not take up layout space */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .nias-fastsell-field-hidden {
  display: none !important;
}

/* ------------------------------------------------------------
   Optional sections of WooCommerce's default form

   These are controlled by the same quick-buy settings. Removing them from the
   DOM is not an option: WooCommerce's checkout.js rebuilds this table on every
   update_checkout and, without them, total calculation and shipping selection
   break. So they are only hidden.
   ------------------------------------------------------------ */

/* "Order summary" off -> the review table's heading and product list */
#nias-login-fastsell-modal .nias-fs-compat-no-summary #order_review_heading,
#nias-login-fastsell-modal .nias-fs-compat-no-summary .woocommerce-checkout-review-order-table thead,
#nias-login-fastsell-modal .nias-fs-compat-no-summary .woocommerce-checkout-review-order-table tbody {
  display: none;
}

/* "Line amounts" off -> the subtotal, discount and fee rows.
   The shipping and order-total rows deliberately stay: the first is the shipping
   choice and the second is the final amount due. */
#nias-login-fastsell-modal .nias-fs-compat-no-breakdown .woocommerce-checkout-review-order-table tfoot .cart-subtotal,
#nias-login-fastsell-modal .nias-fs-compat-no-breakdown .woocommerce-checkout-review-order-table tfoot .cart-discount,
#nias-login-fastsell-modal .nias-fs-compat-no-breakdown .woocommerce-checkout-review-order-table tfoot .fee,
#nias-login-fastsell-modal .nias-fs-compat-no-breakdown .woocommerce-checkout-review-order-table tfoot .tax-rate,
#nias-login-fastsell-modal .nias-fs-compat-no-breakdown .woocommerce-checkout-review-order-table tfoot .tax-total {
  display: none;
}

/* "Different shipping address" off -> the whole shipping section.
   The checkbox stays unticked, so WooCommerce treats the billing address as the
   destination - the same behaviour as the plugin's own form. */
#nias-login-fastsell-modal .nias-fs-compat-no-shipping-address .woocommerce-shipping-fields {
  display: none;
}

/* Some themes use a two-column grid on the form itself instead of floats;
   that is returned to normal flow here too */
#nias-login-fastsell-modal .nias-fastsell-wc-compat form.checkout,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-checkout-review-order {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* ------------------------------------------------------------
   Inner areas of WooCommerce's markup - full width

   There are several more layers between col-1/col-2 and the fields themselves
   (the __field-wrapper elements, shipping_address, the #payment container and
   the shortcode's own wrapper). Without full width on these, the content bunches
   into half the modal even once the columns collapse.
   ------------------------------------------------------------ */
#nias-login-fastsell-modal .nias-fastsell-wc-compat > .woocommerce,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-notices-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-billing-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-additional-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shipping_address,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #payment,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-checkout-payment,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .form-row.place-order {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-inline: 0;
  margin-inline: 0;
}

/* Field container: the same vertical rhythm as the plugin's own form.
   form-row itself has no margin in the plugin styles, so without this rule the
   fields would sit flush against each other. */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-billing-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* WooCommerce's payment container has its own grey background and corner radius */
#nias-login-fastsell-modal .nias-fastsell-wc-compat #payment {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-block: 0;
}

/* ------------------------------------------------------------
   max-width across every compatibility-mode area

   Themes often put a pixel max-width on the checkout containers (for the site
   container, say). Inside the modal that stops the areas reaching full width.
   They are all forced to 100% here at high priority.

   Deliberately scoped to the areas (containers and blocks) rather than applied
   to *, so the size of small elements - the custom gateway radio, icons and
   gateway logos - stays untouched.
   ------------------------------------------------------------ */
#nias-login-fastsell-modal .nias-fastsell-wc-compat,
#nias-login-fastsell-modal .nias-fastsell-wc-compat > .woocommerce,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-notices-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat form.checkout,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set .col-1,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .col2-set .col-2,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-billing-fields,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-fields,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-additional-fields,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-billing-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-shipping-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-additional-fields__field-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shipping_address,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .form-row,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-checkout-review-order,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .shop_table,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #payment,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-checkout-payment,
#nias-login-fastsell-modal .nias-fastsell-wc-compat ul.wc_payment_methods,
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method,
#nias-login-fastsell-modal .nias-fastsell-wc-compat li.wc_payment_method > label,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .payment_box,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-terms-and-conditions-wrapper,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-privacy-policy-text,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #ship-to-different-address,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #order_review_heading,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .form-row.place-order,
#nias-login-fastsell-modal .nias-fastsell-wc-compat #place_order,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-error,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-message,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .woocommerce-info,
#nias-login-fastsell-modal .nias-fastsell-wc-compat input,
#nias-login-fastsell-modal .nias-fastsell-wc-compat select,
#nias-login-fastsell-modal .nias-fastsell-wc-compat textarea,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .select2-container {
  max-width: 100% !important;
}

/* ------------------------------------------------------------
   Themes that override form-checkout.php

   Some themes (Woodmart, for one) drop WooCommerce's default structure: instead
   of col2-set/col-1/col-2 they build customer-details and checkout-order-review
   areas and make the form itself flex:

       form.woocommerce-checkout { display: flex; flex-wrap: wrap }
       form.woocommerce-checkout > :is(.customer-details, .checkout-order-review)
           { flex: 1 0 0; width: auto; max-width: 50% }

   So the two-column layout comes from here, not from WooCommerce's floats. The
   customer-details area is covered by ID as well, but checkout-order-review has
   only a class and has to be neutralised separately.
   ------------------------------------------------------------ */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .checkout-order-review,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .customer-details,
#nias-login-fastsell-modal .nias-fastsell-wc-compat form.checkout > * {
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-inline: 0;
}

/* The order area's decorative frame (grey background, 30px padding and the
   ::before/::after zigzag edges) adds a second frame around the plugin's card
   inside the modal */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .checkout-order-review {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none;
}
#nias-login-fastsell-modal .nias-fastsell-wc-compat .checkout-order-review::before,
#nias-login-fastsell-modal .nias-fastsell-wc-compat .checkout-order-review::after {
  display: none !important;
}

/* The theme's table wrapper - horizontal scrolling stays, the extra frame goes */
#nias-login-fastsell-modal .nias-fastsell-wc-compat .wd-table-wrapper {
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================================
   iOS: stop Safari zooming the page when a field takes focus
   -------------------------------------------------------------------------
   Mobile Safari zooms into any form control whose font-size computes below
   16px and never zooms back out, leaving the page wider than the screen with
   the modal half off it. At least 16px is the only reliable cure; see the same
   block in assets/css/style.css for why the viewport tag is not an option.

   @supports (-webkit-touch-callout: none) is true only on iOS, so every other
   platform keeps this file's designed sizes (12.5px - 14px, all of which are
   below the threshold - there is no control here that a flat 16px would shrink).

   The select2 search box is matched separately: select2 appends its dropdown to
   <body>, outside the modal, so it is scoped by the html class instead - the
   same pattern the dropdown height rules above use.
   ========================================================================= */
@supports (-webkit-touch-callout: none) {
  #nias-login-fastsell-modal input:not([type="checkbox"]):not([type="radio"]),
  #nias-login-fastsell-modal select,
  #nias-login-fastsell-modal textarea,
  html.nias-login-fastsell-modal-open .select2-container--open .select2-search__field,
  html.nias-fastsell-inline-active .select2-container--open .select2-search__field {
    font-size: 16px !important;
  }
}

/* Cart line the customer already owns - marked when the checkout step refuses the
   order, cleared by the next cart render. */
.nias-login-fastsell-cart-item.nias-fastsell-item-blocked {
  border: 1px solid var(--nias-fs-red, #e5484d);
  background: rgba(229, 72, 77, .07);
  border-radius: 10px;
}

/* =========================================================================
   20. Elementor widget (templates built with the "خرید سریع نیاس" widget)
   -------------------------------------------------------------------------
   The widget prints the same card as templates/modal.php, inside .nias-fs-el.
   On the site, Elementor's sections/containers sit between the modal and that
   card; here they are made transparent to the layout so the widget alone sets
   the width and position, and the close button belongs to the card.
   ========================================================================= */

/* The template layer spans the screen and lets clicks through it, so a click
   beside the card still lands on the overlay and closes the modal */
#nias-login-fastsell-modal .nias-login-fastsell-modal-content.elementor-template {
  width: 100%;
  max-width: 100%;
  pointer-events: none;
}
#nias-login-fastsell-modal .nias-login-fastsell-modal-content.elementor-template .elementor-widget,
#nias-login-fastsell-modal .nias-fs-el {
  pointer-events: auto;
}

/* Elementor's wrappers around the widget: no padding, margin or boxed width */
/* min-width:0 - as flex items they would otherwise refuse to shrink below the
   card's own width, and on a phone the card would run off the screen */
#nias-login-fastsell-modal .elementor-template :is(.e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap, .elementor-widget, .elementor-widget-container):has(.nias-fs-el) {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  background: none;
  border: 0;
}

/* The card's positioning box - width lives here, so the widget's width control
   is never capped by the 470px of the plugin's own modal */
#nias-login-fastsell-modal .nias-fs-el {
  position: relative;
  width: 470px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  direction: rtl;
  text-align: right;
}

/* Close button: placed by variables, so the widget can move it to a corner or
   nudge it without the hover rotation pulling it back to the centre */
#nias-login-fastsell-modal .nias-fs-el button.nias-login-fastsell-modal-close {
  transform: translate(calc(var(--nias-fs-close-tx, -50%) + var(--nias-fs-close-x, 0px)), var(--nias-fs-close-y, 0px));
}
#nias-login-fastsell-modal .nias-fs-el button.nias-login-fastsell-modal-close:hover {
  transform: translate(calc(var(--nias-fs-close-tx, -50%) + var(--nias-fs-close-x, 0px)), var(--nias-fs-close-y, 0px)) rotate(var(--nias-fs-close-rot, 90deg));
}
#nias-login-fastsell-modal .nias-fs-el button.nias-login-fastsell-modal-close i {
  font-size: 17px;
  line-height: 1;
}
#nias-login-fastsell-modal .nias-fs-el button.nias-login-fastsell-modal-close svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 600px) {
  #nias-login-fastsell-modal .nias-fs-el {
    width: 100%;
  }
  /* Bottom sheet has no notch: the button moves into the corner, as in the
     plugin's own modal */
  #nias-login-fastsell-modal .nias-fs-el button.nias-login-fastsell-modal-close {
    top: 10px;
    left: 14px;
    right: auto;
    width: 38px;
    height: 38px;
    --nias-fs-close-tx: 0px;
  }
}

/* ---------- editor preview ----------
   In the Elementor editor the widget prints the modal shell itself (same ID),
   static instead of fixed, with the overlay as its backdrop. */
#nias-login-fastsell-modal.nias-fs-el-preview {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  z-index: auto;
  display: block;
  padding: 44px 16px 28px;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transition: none;
}
#nias-login-fastsell-modal.nias-fs-el-preview .nias-login-fastsell-modal-overlay {
  cursor: default;
  pointer-events: none;
}
#nias-login-fastsell-modal.nias-fs-el-preview .nias-login-fastsell-modal-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
  transition: none;
}
/* Controls are inert in the editor: a click selects the widget instead of
   running quick-buy actions against the sample content */
#nias-login-fastsell-modal.nias-fs-el-preview .nias-fs-el :is(button, input, select, textarea, label, a, .nias-login-fastsell-step) {
  pointer-events: none;
}