/* ===== NF Checkout — layout + form styling (scoped) ===== */
.nf-checkout {
  /* Layout */
  --nf-gap: 24px;
  /* Form styling */
  --nf-input-h: 45px;
  --nf-radius: 8px;
  --nf-border: #dcdcdc;
  --nf-border-focus: #111;
  --nf-text: #222;
  --nf-muted: #9aa0a6;
  --nf-ph: #6b6b6b;
  /* Container */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grid: left content + right sidebar (offers/order) */
.nf-checkout .nf-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--nf-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-items: start; /* Required for sticky to work in grid */
  margin-top:30px;
}

/* Hide login form until WooCommerce initializes it to prevent resize flash */
.woocommerce-form.woocommerce-form-login.login {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.woocommerce-form.woocommerce-form-login.login.initialized {
  opacity: 1;
}

/* Updated to div structure (no nested forms) */
.checkout_coupon.woocommerce-form-coupon {
  padding-top: 0;
}

@media (max-width: 1024px) {
  .nf-checkout .nf-checkout-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ======================================================================
   Mobile Responsive Styles - Consolidated @media (max-width: 768px)
   ====================================================================== */
@media (max-width: 768px) {
  /* Main checkout container */
  .nf-checkout {
    padding: 0 1rem;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .nf-checkout .nf-checkout-grid {
    gap: 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html[lang="hu"] .nf-order-review-landing__header {
    display: inline-block;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px;
  }

  .nf-checkout .nf-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .nf-checkout .rf-offers,
  .nf-checkout .rf-shipping-lists {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Offer options - consolidated */
  .rf-offers {
    gap: 12px;
  }

  .nf-checkout .rf-option-container,
  .rf-option-container {
    /*padding: 12px;*/
    /*flex-wrap: wrap;*/
  }

  .nf-checkout .rf-option-image,
  .rf-option-image {
    width: 40px;
    height: 40px;
    margin-left: 8px;
  }

  .nf-checkout .rf-option-left,
  .rf-option-left {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Payment methods */
  .nf-checkout #payment .payment_methods > li {
    padding: 14px;
  }

  .nf-checkout #payment .payment_methods > li .nf-payment-method-header {
    gap: 10px;
  }

  .nf-checkout #payment .payment_methods > li input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px;
  }

  .nf-checkout #payment .payment_methods > li .nf-payment-method-label {
    gap: 10px;
    font-size: 15px;
  }

  .nf-checkout #payment .payment_methods > li .payment-method-title {
    flex-shrink: 0;
    font-size: 16px;
  }

  /* Payment method icons - smaller on mobile */
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_stripe
    label::after,
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_stripe_cc
    label::after,
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_stripe_sepa
    label::after {
    width: 120px !important;
    height: 16px;
    flex-shrink: 0;
  }

  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_paypal
    label::after,
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_ppec_paypal
    label::after,
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_eh_paypal_express
    label::after {
    width: 120px !important;
    height: 12px;
    flex-shrink: 0;
  }

  /* COD icon on mobile */
  .nf-checkout #payment .payment_methods > li.payment_method_cod label::after {
    width: 20px;
    height: 19px;
  }

  /* COD fee on right */
  .nf-checkout
    #payment
    .payment_methods
    > li.payment_method_cod
    label
    .payment-method-fee {
    margin-left: auto;
    font-size: 16px;
    font-weight: 300;
  }



  .nf-checkout
    #payment
    .payment_methods
    .payment_method_mollie_wc_gateway_klarna
    img.mollie-gateway-icon {
    display: block !important;
  }

  /* Payment box - full width, no left margin */
  .nf-checkout #payment .payment_box {
    margin: 12px 0 0 0;
    padding: 14px;
    width: 100%;
  }

  /* Test mode info */
  .nf-checkout #payment .payment_box .testmode-info {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
  }

  .nf-checkout #payment .payment_box .testmode-info strong {
    display: block;
    margin-bottom: 4px;
    color: #856404;
  }

  /* Saved payment methods */
  .nf-checkout #payment .woocommerce-SavedPaymentMethods {
    margin-top: 12px;
  }

  .nf-checkout #payment .woocommerce-SavedPaymentMethods-token,
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .nf-checkout #payment .woocommerce-SavedPaymentMethods-token:last-child,
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-new:last-child {
    margin-bottom: 0;
  }

  .nf-checkout
    #payment
    .woocommerce-SavedPaymentMethods-token
    input[type="radio"],
  .nf-checkout
    #payment
    .woocommerce-SavedPaymentMethods-new
    input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
    width: 18px;
    height: 18px;
  }

  .nf-checkout #payment .woocommerce-SavedPaymentMethods-token label,
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-new label {
    margin: 0;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
  }

  /* Hide icons on saved payment method labels */
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-token label::after,
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-new label::after {
    display: none !important;
  }

  /* Stripe UPE form */
  .nf-checkout #payment .payment_box .wc-upe-form {
    margin-top: 12px;
  }

  /* Save payment method checkbox - input and label in same row */
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-saveNew {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    border-top: 1px solid #e0e0e0;
  }

  .nf-checkout
    #payment
    .woocommerce-SavedPaymentMethods-saveNew
    input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
    width: 18px;
    height: 18px;
  }

  .nf-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label {
    margin: 0;
    font-size: 14px;
    display: inline;
    line-height: 20px;
  }

  /* Hide icon for save payment method checkbox */
  .nf-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label::after,
  .nf-checkout #payment #wc-stripe-new-payment-method + label::after {
    display: none !important;
  }

  /* Place order button */
  .nf-checkout #payment .place-order {
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
  }

  /* Order items */
  .nf-order-item {
    grid-template-columns: 50px 1fr auto;
    gap: 10px;
    padding: 10px;
  }

  .nf-order-item-image {
    width: 50px;
    height: 50px;
  }

  .nf-order-item-name {
    font-size: 13px;
  }

  .nf-order-item-qty,
  .nf-order-item-delivery {
    font-size: 11px;
  }

  .nf-order-item-total {
    font-size: 14px;
  }

  .nf-order-totals tbody th,
  .nf-order-totals tbody td {
    font-size: 13px;
    padding: 8px 0;
  }

  .nf-order-totals .order-total th,
  .nf-order-totals .order-total td {
    font-size: 16px;
  }

  /* Checkout guarantee */
  .nf-checkout-guarantee {
    padding: 10px;
    order: 12;
  }

  .nf-checkout-guarantee-content {
    gap: 12px;
  }

  .nf-checkout-guarantee-badge {
    width: 60px;
    height: 60px;
  }

  .nf-checkout-guarantee-text strong {
    font-size: 14px;
  }

  .nf-checkout-guarantee-text p {
    font-size: 12px;
  }

  .nf-checkout-guarantee-disclaimer {
    margin-top: 12px;
    font-size: 10px;
  }
}

/* Section header bar (Delivery information / Delivery method / Payment method…) */
.nf-checkout .nf-section--customer .woocommerce-billing-fields > h3,
.nf-checkout .nf-section--customer .woocommerce-shipping-fields > h3,
.nf-checkout .nf-section > h3,
.nf-checkout #nf-offers-title,
.nf-checkout .nf-shipping-title {
  padding: 13px 14px;
  background: #2b2b2b;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 10px;
  font-family: "Fira Sans", sans-serif !important;
}

.nf-checkout #nf-offers-title {
  margin-bottom: 5px;
}

section.nf-section.nf-section--shipping h3 {
  margin-bottom: 15px;
}

.woocommerce-billing-fields__field-wrapper {
  padding: 0 !important;
}

/* =========================================================================
   FLOATING LABELS (billing + shipping)
   -------------------------------------------------------------------------
   Labels start INSIDE the field (looking like the old placeholder), then
   animate up to the top-left and shrink as soon as the input is focused or
   contains a value. This keeps the "what is this field?" affordance visible
   at all times without stealing vertical space.

   Requires the input to have a `placeholder` attribute (any value, including
   a space) so `:placeholder-shown` can detect the empty state. All nf-platform
   fields have placeholders set in CheckoutFields.php, so this is covered.
   Checkbox labels are excluded via :not(...) so they keep their inline layout.
   ========================================================================= */

/* 1. Make each applicable form-row a positioning context for its absolutely
      positioned label. Skipped:
      - checkbox rows (labels must stay inline next to the checkbox)
      - rows that contain a <select> (no :placeholder-shown support - we use
        the "label above" pattern for those, see rule 7). */
.woocommerce-billing-fields__field-wrapper
  .form-row:not(.nf-vat-checkbox):not(.create-account):not(:has(select)),
.woocommerce-shipping-fields__field-wrapper
  .form-row:not(.nf-vat-checkbox):not(.create-account):not(:has(select)) {
  position: relative;
}

/* 2. Default (idle) label state: centered vertically inside the field,
      rendered like a muted placeholder. Only targets field labels of rows
      that contain a text input or textarea (NOT checkbox, NOT select rows). */
.woocommerce-billing-fields__field-wrapper
  .form-row:not(:has(select))
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-shipping-fields__field-wrapper
  .form-row:not(:has(select))
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  position: absolute;
  left: 16px;
  /* Idle: sit in the vertical middle of the INPUT, not the form-row. When a
     validation error is appended below the input the form-row grows taller,
     so a `top: 50%` rule would drift the label downward out of the input.
     The input sits at `padding-top` (0.5rem) inside the form-row with a
     fixed height of --nf-input-h, so its vertical center is at
     (0.5rem + --nf-input-h / 2) from the row's border edge. Combined with
     translateY(-50%) this pins the label to the input's center regardless
     of any siblings (errors, hints) that grow the row. */
  top: calc(0.5rem + var(--nf-input-h) / 2);
  transform: translateY(-50%);
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
  color: var(--nf-ph, #6b6b6b);
  font-family: "Fira Sans", sans-serif;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    top 0.15s ease-out,
    transform 0.15s ease-out,
    font-size 0.15s ease-out,
    font-weight 0.15s ease-out,
    color 0.15s ease-out,
    background-color 0.15s ease-out;
}

/* 3. Floated state: input ACTUALLY has a value.
      :has() + :not(:placeholder-shown) covers both text inputs and the
      textarea (order_comments). We deliberately do NOT include :focus -
      that means focusing an empty field keeps the label in its centered
      "big" state, and backspacing all content in a focused field sends
      the label back to the centered state. Only the presence of typed
      content triggers the floated state.

      Stays INSIDE the input at the top. Styled lighter than the typed
      value (same weight and color as the placeholder) so it reads as a
      helper/descriptor rather than competing with the field value.

      The form-row has padding-top: 0.5rem around the input (see the
      "padding-top: 0.5rem !important" rule lower in this file), so an
      absolutely-positioned label measures `top` from the form-row's
      padding edge - i.e. 8px ABOVE the input's top border. We therefore
      add 0.5rem to the offset so the label renders INSIDE the input's
      border instead of floating above it. */
.woocommerce-billing-fields__field-wrapper
  .form-row:not(:has(select)):has(input:not(:placeholder-shown), textarea:not(:placeholder-shown))
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-shipping-fields__field-wrapper
  .form-row:not(:has(select)):has(input:not(:placeholder-shown), textarea:not(:placeholder-shown))
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  top: calc(0.5rem + 6px);
  transform: none;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 300;
  color: var(--nf-ph, #6b6b6b);
  background: transparent;
}

/* 4. Row heights + padding for billing/shipping fields live lower in the
      file in the "consolidated styling" block (height: 58px, padding:
      26px 16px 8px) so they override earlier generic .nf-checkout rules.
      Phone prefix dropdown height is kept in sync in its own block below. */

/* Phone-prefix badge height already matches the input via its own rule
   later in the file (height: var(--nf-input-h)); nothing to override
   here now that the input height is back to 45px. */

/* 7. Rows that CAN'T host a floating label inside (native <select>
      elements - which don't support :placeholder-shown - and the phone
      row with a visual prefix badge where a floating label would sit on
      top of the badge): hide the label entirely. The placeholder text
      inside the field is enough affordance for these cases. */
.woocommerce-billing-fields__field-wrapper
  .form-row:has(select)
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-shipping-fields__field-wrapper
  .form-row:has(select)
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-billing-fields__field-wrapper
  .form-row[data-has-visual-prefix="1"]
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-shipping-fields__field-wrapper
  .form-row[data-has-visual-prefix="1"]
  > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  display: none !important;
}

/* Keep the phone row itself in the normal flow. Its label is hidden by
   rule 7 above, so there's no absolutely-positioned label to anchor. */
.woocommerce-billing-fields__field-wrapper
  .form-row[data-has-visual-prefix="1"],
.woocommerce-shipping-fields__field-wrapper
  .form-row[data-has-visual-prefix="1"] {
  position: static;
}

/* Phone input now owns a floating label sibling (.nf-phone-floating-label)
   inside .nf-phone-input-wrap, so it uses the same padding pattern as the
   other fields: balanced when empty, top-heavy when filled. The generic
   rules elsewhere in this file drive both states - no phone-specific
   padding override is needed. */

/* Same for selects: the label is hidden, so the placeholder option (e.g.
   "Select a country / region...") serves as the only in-field label. */
.woocommerce-billing-fields__field-wrapper .form-row:has(select) select,
.woocommerce-shipping-fields__field-wrapper .form-row:has(select) select {
  color: var(--nf-text, #111827);
}
.woocommerce-billing-fields__field-wrapper
  .form-row:has(select)
  select:has(option[value=""]:checked),
.woocommerce-shipping-fields__field-wrapper
  .form-row:has(select)
  select:has(option[value=""]:checked) {
  color: var(--nf-ph, #6b6b6b);
}

/* 5. Hide the native placeholder text since the label is doing that job now.
      The `placeholder` attribute itself must remain on the input for
      :placeholder-shown to keep working. */
.woocommerce-billing-fields__field-wrapper .form-row input::placeholder,
.woocommerce-shipping-fields__field-wrapper .form-row input::placeholder,
.woocommerce-billing-fields__field-wrapper .form-row textarea::placeholder,
.woocommerce-shipping-fields__field-wrapper .form-row textarea::placeholder {
  color: transparent !important;
}

/* 6. Required asterisk / optional marker: subtle, gray. */
.woocommerce-billing-fields__field-wrapper .form-row > label .required,
.woocommerce-shipping-fields__field-wrapper .form-row > label .required,
.woocommerce-billing-fields__field-wrapper .form-row > label .optional,
.woocommerce-shipping-fields__field-wrapper .form-row > label .optional {
  color: #6b7280;
  font-weight: 400;
  text-decoration: none;
  margin-left: 2px;
}

/* Checkbox fields (VAT, ship-to-different, create-account, terms): the label
   is rendered AFTER the input, so keep it inline - NOT stacked above. */
.woocommerce-billing-fields__field-wrapper .form-row.nf-vat-checkbox label,
.woocommerce-billing-fields__field-wrapper
  .form-row.nf-vat-checkbox
  .woocommerce-input-wrapper
  label {
  display: inline-block !important;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

/* Width is set lower in the file inside the .nf-checkout block (calc(50% - 8px))
   so that the flex column-gap math works out to exactly two items per row.
   Previously forced 50% !important here, which combined with a 16px gap
   overflowed the row and dropped .form-row-last onto its own line. */

/* Form rows: spacing */
.nf-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.nf-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
.nf-checkout .nf-section .form-row {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  height:  var(--nf-input-h);
  box-sizing: border-box;
}

/* Labels + inputs */
.nf-checkout .woocommerce-billing-fields label,
.nf-checkout .woocommerce-shipping-fields label,
.nf-checkout .nf-section label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--nf-text);
}

/* Helper text below fields (e.g. phone example) */
.nf-checkout .form-row .description {
  margin-top: 6px;
  font-size: 11px;
  color: var(--nf-muted);
}

/* Order review title in the sidebar */
.nf-checkout .nf-order-review h3 {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
}

/* Optional: make the house-number field a bit tighter on wide screens */
@media (min-width: 1025px) {
  .nf-checkout .house_number-field input {
    max-width: 160px;
  }
}

/* Row layout: flex-wrap so each pair (form-row-first + form-row-last) forms
   its own line. Unlike the old float-based layout, a taller validation error
   under one sibling won't pull the next pair's left field up beside it - the
   next line starts below the TALLER of the two previous siblings.
   NOTE: we do NOT set column-gap here. Pair widths in this checkout don't
   sum to exactly 100% (e.g. 32% + 66% = 98%, 48% + 50% = 98%), so adding a
   column-gap on top would overflow the row and force each sibling onto its
   own line. Instead we use justify-content: space-between, which pushes the
   left sibling to the row's left edge and the right sibling to the right
   edge, and turns the natural 2% slack into the visual gap - matching the
   pre-refactor float+margin behaviour without the overflow risk. */
.nf-checkout .woocommerce-billing-fields__field-wrapper,
.nf-checkout .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 0;
  align-items: flex-start;
}

/* Kill the legacy float clearfix - it would otherwise become an empty flex
   item occupying a full line. */
.nf-checkout .woocommerce-billing-fields__field-wrapper::after,
.nf-checkout .woocommerce-shipping-fields__field-wrapper::after {
  display: none;
}

/* Removed duplicate focus rule - see unified focus styles below (line ~767) */

/* ======================================================================
   NF Checkout — Shipping (card-style options, no tabs)
   Scoped to .nf-checkout
   ====================================================================== */

/* Reset Woo list */
.nf-checkout .nf-section--shipping ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.nf-checkout .nf-section--shipping ul.woocommerce-shipping-methods > li {
  margin: 0;
  display: flex;
  height: 100%;
}

/* Shipping method cards (no tabs, just cards) */
.nf-checkout .rf-option-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #8b8b8b;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  margin: 0;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background-color 0.15s;
  cursor: pointer;
  min-height: 60px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: "Fira Sans", sans-serif;
}

.nf-checkout .rf-option-container:hover {
  border-color: #bfc9c2;
}

.nf-checkout .rf-option-container.is-selected {
  border-color: #46b86a;
  box-shadow:
    0 0 0 1px #46b86a inset,
    0 2px 4px rgba(70, 184, 106, 0.12);
  background: #f6fffa;
}
h3#ship-to-different-address {
  background: transparent;
}

.nf-checkout .rf-option-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.nf-checkout .rf-custom-checkbox {
  margin-top: 3px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
}

/* Style Woo's label content */
.nf-checkout .rf-label {
  display: block;
  cursor: pointer;
  flex: 1;
}

.nf-checkout .rf-label .amount {
  font-weight: 300;
  font-size: 16px;
  color: #111;
  display: block;
  margin: 4px 0;
}

.nf-checkout .rf-label small {
  color: #6f6f6f;
  font-size: 13px;
  display: block;
  margin-top: 4px;
}

/* Method title styling */
.nf-checkout .rf-option-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
  color: #111;
}

.nf-checkout .rf-option-description {
  color: #6f6f6f;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 300;
  font-family: "Fira Sans", sans-serif;
  padding-left: 0 !important;
}

/* Icon on the right (if provided in settings) */
.nf-checkout .rf-option-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 12px;
  max-width: 100%;
}

/* Empty state */
.nf-checkout .rf-empty {
  color: #6f6f6f;
  font-size: 13px;
  padding: 20px;
  text-align: center;
  background: #f9f9f9;
  border-radius: 4px;
}

/* Delivery time display */
.nf-delivery-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 3px 3px 3px;
  border-radius: 8px;
  font-family: "Fira Sans", sans-serif;
}

.nf-delivery-time__label {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.nf-delivery-time__value {
  font-size: 16px;
  font-weight: 200;
  color: #000;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
  .nf-checkout .nf-section--shipping ul.woocommerce-shipping-methods {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .nf-checkout .rf-option-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /*padding-top: 4px !important;*/
  }

  .rf-offers .rf-option-left {
    align-items: flex-start !important;
  }
}

/* make it feel clickable */
.nf-section--offers .rf-option-container {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* New structure for offers: checkbox and title in same row, description separate */
.nf-section--offers .rf-option-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nf-section--offers .rf-option-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nf-section--offers .rf-option-title-row .rf-option-title {
  margin-bottom: 0;
  flex: 1;
}

.nf-section--offers .rf-option-description {
  padding-left: 32px;
}

/* =========================
   NF Checkout – Billing UI
   ========================= */

/* Floating-label behavior is defined in the main billing/shipping rule above;
   no extra .nf-checkout overrides needed. */

/* Exception: Checkbox rows keep their inline label (label rendered after
   the checkbox input, not stacked above it). */
.nf-checkout
  .woocommerce-billing-fields__field-wrapper
  .form-row.nf-vat-checkbox
  label,
.nf-checkout
  .woocommerce-billing-fields__field-wrapper
  .form-row.nf-vat-checkbox
  .woocommerce-input-wrapper
  label {
  display: inline-block !important;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

/* Default row width inside the flex-wrap field wrappers: full line. Pair rows
   (form-row-first + form-row-last) override this below. Wrapped in :where()
   so this default has ZERO specificity and never beats the class rules or
   the per-field ID width rules (e.g. #billing_address_1_field: 66%). */
:where(.nf-checkout .woocommerce-billing-fields__field-wrapper,
       .nf-checkout .woocommerce-shipping-fields__field-wrapper) > .form-row {
  width: 100%;
}

/* two-column pairs inside the flex-wrap wrapper. No floats. Each pair item
   defaults to just-under half the row width so the pair sums to ~100% and
   justify-content: space-between on the wrapper pushes them to the row's
   left/right edges with the 16px slack forming the visible gap between them.
   Some fields override these widths by ID (e.g. house_number=32%,
   address_1=66%) and those work with the same mechanism: 32+66=98% leaves 2%
   slack that space-between uses as the gap. */
.nf-checkout .form-row-first,
.nf-checkout .form-row-last {
  float: none;
  width: calc(50% - 8px);
  margin-left: 0;
}
.nf-checkout .form-row-wide {
  width: 100%;
  clear: none;
}

@media (max-width: 782px) {
  .nf-checkout .form-row-first,
  .nf-checkout .form-row-last {
    width: 100%;
  }
}

/* inputs: tall, large text, neutral borders - consolidated base styles */
.nf-checkout input.input-text,
.nf-checkout select,
.nf-checkout textarea {
  width: 100%;
  height: var(--nf-input-h);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  background: #fff;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.3;
  color: #111827;
  box-shadow: none;
}

/* Billing and shipping fields - consolidated styling.
   Height stays at the site-wide --nf-input-h (45px).

   Padding is SYMMETRIC by default so an empty field shows the blinking
   caret centered vertically (looks like a normal placeholder). When the
   input actually has content (`:not(:placeholder-shown)` lower in this
   file), we switch to an asymmetric top-heavy padding so the typed value
   sits below the floated label without overlap. The transition on
   padding below keeps this swap feeling smooth as the user types the
   first character / backspaces to empty.

   Selects keep balanced padding because they use the stacked "label above"
   layout (no floating label inside a native select). */
.nf-checkout .woocommerce-billing-fields__field-wrapper input.input-text,
.nf-checkout .woocommerce-shipping-fields__field-wrapper input.input-text,
.nf-checkout .woocommerce-billing-fields__field-wrapper textarea,
.nf-checkout .woocommerce-shipping-fields__field-wrapper textarea {
  height: var(--nf-input-h);
  padding: 14px 16px;
  font-size: 14px;
  border-radius: var(--nf-radius);
  border-color: #8b8b8b;
  font-weight: 300 !important;
  font-family: "Fira Sans", sans-serif;
  transition: padding 0.15s ease-out;
}

/* When the field has typed content, give it extra top padding so the
   typed text sits below the floated label instead of overlapping it. */
.nf-checkout
  .woocommerce-billing-fields__field-wrapper
  input.input-text:not(:placeholder-shown),
.nf-checkout
  .woocommerce-shipping-fields__field-wrapper
  input.input-text:not(:placeholder-shown),
.nf-checkout
  .woocommerce-billing-fields__field-wrapper
  textarea:not(:placeholder-shown),
.nf-checkout
  .woocommerce-shipping-fields__field-wrapper
  textarea:not(:placeholder-shown) {
  padding-top: 20px;
  padding-bottom: 5px;
}

.nf-checkout .woocommerce-billing-fields__field-wrapper select,
.nf-checkout .woocommerce-shipping-fields__field-wrapper select {
  height: var(--nf-input-h);
  padding: 14px 16px;
  font-size: 14px;
  border-radius: var(--nf-radius);
  border-color: #8b8b8b;
  font-weight: 300 !important;
  font-family: "Fira Sans", sans-serif;
}

/* Prevent iOS auto-zoom on input focus */
@media (max-width: 782px) {
  .nf-checkout .woocommerce-billing-fields__field-wrapper input.input-text,
  .nf-checkout .woocommerce-billing-fields__field-wrapper select,
  .nf-checkout .woocommerce-billing-fields__field-wrapper textarea,
  .nf-checkout .woocommerce-shipping-fields__field-wrapper input.input-text,
  .nf-checkout .woocommerce-shipping-fields__field-wrapper select,
  .nf-checkout .woocommerce-shipping-fields__field-wrapper textarea {
    font-size: 16px;
  }
}

/* textarea specific overrides */
.nf-checkout textarea {
  min-height: 120px;
  height: auto;
  resize: vertical;
}

/* =========================
   NF Checkout – Shipping UI (matches Billing UI)
   ========================= */

/* Floating-label behavior for shipping fields is defined in the main
   billing/shipping rule above; no extra .nf-checkout overrides needed. */

/* placeholders look like the labels in the mock */
.nf-checkout input::placeholder,
.nf-checkout textarea::placeholder {
  color: var(--nf-ph);
  font-size: 14px;
  font-weight: 300;
}

/* focus state: crisp dark border (excludes checkboxes which have their own focus styles) */
.nf-checkout input:not([type="checkbox"]):focus,
.nf-checkout select:focus,
.nf-checkout textarea:focus {
  outline: none;
  border-color: var(--nf-border-focus);
  box-shadow: 0 0 0 1px var(--nf-border-focus) inset;
}

/* helper text under fields (e.g., phone example) */
.nf-checkout .form-row .description {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--nf-muted);
}

/* phone row: keep example on left; optional right note placeholder
   (remove if you don't want it) - only when visual prefix is NOT used */
.nf-checkout
  #billing_phone_field:not([data-has-visual-prefix="1"])
  .woocommerce-input-wrapper {
  display: flex;
  flex-direction: column;
}


/* Hide shipping fields until checkout is initialized (prevents flash) */
.nf-checkout .woocommerce-shipping-fields {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease;
}
.nf-checkout.is-initialized .woocommerce-shipping-fields {
  opacity: 1;
  visibility: visible;
  max-height: none;
  overflow: visible;
}

/* "Deliver to a different address?" checkbox row */
.nf-checkout #ship-to-different-address {
  margin: 8px 0 16px;
}

/* notes field matches rest of inputs */
.nf-checkout .woocommerce-additional-fields textarea {
  border-radius: var(--nf-radius);
}

/* tighten column gutters on very small screens */
@media (max-width: 520px) {
  .nf-checkout {
    --nf-gap: 16px;
  }
}

/* ======================================================================
   Payment Methods Styling
   ====================================================================== */

/* Delivery Offers - Checkbox Style */
.rf-offers {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rf-option-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*padding: 16px;*/
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rf-option-container:hover {
  border-color: #46b86a;
}

.rf-option-container.is-selected {
  border-color: #46b86a;
  background: #f0f9f4;
}

.rf-option-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.rf-custom-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #8b8b8b;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  transition: all 0.2s ease;
}

/* Radio buttons in rf-option-left should be circular */
.rf-option-left input[type="radio"].rf-custom-checkbox {
  border-radius: 50%;
}

.rf-custom-checkbox:checked {
  background-image: url("../../../images/global/selected-check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  border: none;
}

.rf-option-copy {
  flex: 1;
}

.rf-option-title {
  font-size: 16px;
  font-weight: 500;
  color: #2b2b2b;
  margin-bottom: 4px;
}

.rf-option-price {
  font-weight: 200;
  color: #000;
  margin-left: 8px;
}

.rf-option-description {
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.5;
  margin-top: 4px;
}

.rf-option-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  max-width: 100%;
}

/* Payment Methods */
.nf-checkout #payment {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.nf-checkout #payment .payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nf-checkout #payment .payment_methods > li {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #8b8b8b;
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 0;
}

.nf-checkout #payment .payment_methods > li:hover {
  border-color: #46b86a;
}

.nf-checkout #payment .payment_methods > li.payment_method_selected {
  border-color: #46b86a;
  background: #f0f9f4;
}

/* Payment method header - contains input and label */
.nf-checkout #payment .payment_methods > li .nf-payment-method-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nf-checkout
  #payment
  .payment_methods
  > li.wc_payment_method
  input[type="radio"] {
  width: 14px !important;
  height: 14px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #8b8b8b !important;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}

.nf-checkout
  #payment
  .payment_methods
  > li.wc_payment_method
  input[type="radio"]:checked {
  background-image: url("../../../images/global/selected-check.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  border: none !important;
}

.payment_box.payment_method_stripe ul li {
  display: flex;
}

.nf-checkout #payment .payment_methods > li .nf-payment-method-label {
  display: flex;
  align-items: center;
  flex: 1;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  gap: 12px;
  min-width: 0;
}
.nf-checkout #payment .payment_methods > li label img {
  max-height: 24px;
  flex-shrink: 0;
}

.nf-checkout #payment .payment_methods > li label .payment-method-title {
  order: 0;
}

.nf-checkout #payment .payment_methods > li label .payment-method-fee {
  order: 2;
  margin-left: auto;
  font-weight: 300;
  font-size: 16px;
  color: #222;
  flex-shrink: 0;
}

/* Payment method icons */
/* Hide gateway-provided icons (we use our own) */
.nf-checkout #payment .payment_methods > li label .stripe-cards-icon,
.nf-checkout #payment .payment_methods > li label .stripe-icon {
  display: none !important;
}

.nf-checkout #payment .payment_methods > li.payment_method_stripe label::after,
.nf-checkout
  #payment
  .payment_methods
  > li.payment_method_stripe_cc
  label::after,
.nf-checkout
  #payment
  .payment_methods
  > li.payment_method_stripe_sepa
  label::after {
  content: "";
  display: inline-block;
  width: 85px;
  height: 30px;
  background-image: url("../../../images/credit-card-icons.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0;
  flex-shrink: 0;
}

.nf-checkout #payment .payment_methods > li.payment_method_paypal label::after,
.nf-checkout
  #payment
  .payment_methods
  > li.payment_method_ppec_paypal
  label::after {
  content: "";
  display: inline-block;
  width: 183px;
  height: 18px;
  background-image: url("../../../images/paypal-icons.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0;
  flex-shrink: 0;
}

/* COD icon - next to title (after title, before fee) */
.nf-checkout #payment .payment_methods > li.payment_method_cod label::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 22px;
  background-image: url("../../../images/cod-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px;
  flex-shrink: 0;
  order: 1;
}

/* Hide icons on saved payment method items */
.nf-checkout #payment .woocommerce-SavedPaymentMethods-token label::after,
.nf-checkout #payment .woocommerce-SavedPaymentMethods-new label::after {
  display: none !important;
}

/* Saved payment methods - input and label alignment (desktop) */
.nf-checkout #payment .woocommerce-SavedPaymentMethods-token,
.nf-checkout #payment .woocommerce-SavedPaymentMethods-new {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment_box {
  flex-direction: column !important;
  display: flex;
  flex-basis: 100%;
  width: 100%;
}

.nf-checkout #payment .payment_box {
  background: #f9f9f9;
  padding: 0px;
  margin: 12px 0 0 0;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  /* Smooth transitions to prevent jumping */
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin 0.3s ease,
    padding 0.3s ease,
    visibility 0.3s ease;
  overflow: hidden;
  /* Default visible state */
  max-height: 2000px;
  opacity: 1;
  visibility: visible;
}

/* Hidden state - applied via JavaScript for smooth transitions */
.nf-checkout #payment .payment_box[style*="max-height: 0"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.nf-checkout #payment .payment_box p:last-child {
  margin-bottom: 0;
}

/* Hide icon for save payment method checkbox (desktop and mobile) */
.nf-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label::after,
.nf-checkout #payment #wc-stripe-new-payment-method + label::after {
  display: none !important;
}
.woocommerce-checkout #payment div.payment_box {
  padding: 0;
}
/* ======================================================================
   Place Order Button
   ====================================================================== */

.nf-checkout #place_order {
  width: 100%;
  height: 56px;
  background: #35ac5a;
  color: #fff;
  border: none;
  border-radius: 99px;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0 !important;
}

.woocommerce-terms-and-conditions-wrapper {
  background: transparent !important;
}

.nf-checkout #place_order::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 22px;
  background: url("../../../images/place-order-icon.svg") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

.nf-checkout #place_order:hover {
  background: #3da55d;
}

.nf-checkout #place_order:active {
  transform: scale(0.98);
}

.nf-checkout #place_order:disabled,
.nf-checkout #place_order.processing {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Loading state */
.nf-checkout #place_order.processing::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nf-spin 0.6s linear infinite;
}

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

/* ======================================================================
   Terms & Conditions Checkbox
   ====================================================================== */

.nf-checkout .woocommerce-terms-and-conditions-wrapper {
  padding: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.woocommerce-privacy-policy-text {
  order: 2;
}

.nf-checkout .woocommerce-terms-and-conditions-wrapper label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.nf-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  /* Width and height inherited from unified checkbox styling */
}

/* Hide the default WooCommerce "I have read and agree to the terms..." label
   text. On landing pages only the checkbox is shown next to the
   .woocommerce-privacy-policy-text paragraph, which serves as the implicit
   consent copy. This rule MUST live in checkout.css (not landing.css) because
   the mobile @media rule `.woocommerce-terms-and-conditions-wrapper .form-row
   { width: 25px }` below depends on the label text being hidden — otherwise
   on first landing-page load the width rule lands before landing.css and the
   full label text is forced to wrap one word per line inside the 25px column. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
  display: none;
}

/* ======================================================================
   Error Messages
   ====================================================================== */

.nf-checkout .woocommerce-error,
.nf-checkout .woocommerce-NoticeGroup-checkout {
  background: #fee;
  margin: 0 0 20px;
  border-radius: 4px;
}

.nf-checkout .woocommerce-error li {
  list-style: none;
  margin: 6px 0;
}

.nf-checkout .woocommerce-error a {
  color: #d32f2f;
  text-decoration: underline;
}

/* Inline per-field validation error text. Woo injects this as
   <div class="checkout-inline-error-message"> inside the .form-row when the
   field fails validation (older installs emit <span class="woocommerce-error">
   - both are covered below). The generic .woocommerce-error rule above is
   meant for the top-of-page notice pill; inside a form-row we want a compact
   line of red helper text directly under the input, with tight line-height
   so multi-word messages don't balloon the row height. */
.nf-checkout .form-row .checkout-inline-error-message,
.nf-checkout .form-row .woocommerce-error,
.nf-checkout .form-row > .woocommerce-error {
  display: block;
  margin: 2px 0 0 !important;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #d32f2f;
  font-size: 12px;
  line-height: 1em !important;
}

/* Force tight line-height on whatever inner element (p/span/li) Woo renders
   the message text in - otherwise a higher-specificity theme rule on the
   inner element can re-expand the line spacing. */
.nf-checkout .form-row .checkout-inline-error-message,
.nf-checkout .form-row .checkout-inline-error-message *,
.nf-checkout .form-row .woocommerce-error *,
.nf-checkout .form-row > .woocommerce-error * {
  line-height: 1em !important;
}

.nf-checkout .form-row .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Field validation errors */
.nf-checkout .woocommerce-invalid input,
.nf-checkout .woocommerce-invalid select,
.nf-checkout .woocommerce-invalid textarea {
  border-color: #d32f2f !important;
  background: #fff5f5;
}

/* Field validation hints (real-time feedback) - Tooltip style */
.nf-field-hint {
  position: absolute;
  bottom: calc(100% + 8px); /* Position above the input field */
  left: 0;
  right: 0;
  max-width: 300px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  background: #d32f2f;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  animation: nf-hint-fadein 0.2s ease-in;
  pointer-events: none; /* Allow clicking through the tooltip */
}

/* Tooltip arrow pointing down to the field */
.nf-field-hint::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #d32f2f;
}

/* Ensure parent has position context for absolute positioning */
.nf-checkout .form-row {
  position: relative;
}

/* Alternative: Show tooltip below the field (for fields near top of page) */
.form-row[data-hint-position="below"] .nf-field-hint {
  bottom: auto;
  top: calc(100% + 8px); /* Position below instead */
}

.form-row[data-hint-position="below"] .nf-field-hint::after {
  top: auto;
  bottom: 100%; /* Arrow points up */
  border-top: none;
  border-bottom: 6px solid #d32f2f;
}

@keyframes nf-hint-fadein {
  from {
    opacity: 0;
    transform: translateY(3px); /* Slide up instead of down */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== FRENCH ADDRESS SUGGESTIONS (INFORMATIONAL) ========== */
/* Non-blocking friendly hints for French address format - matches span.description styling but blue */

.nf-address-suggestion {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #1565c0; /* Blue color for informational suggestions */
}

/* Optional: Add subtle animation for suggestion appearance */
.nf-address-suggestion {
  animation: nf-suggestion-fadein 0.3s ease-in;
}

@keyframes nf-suggestion-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Optional: Make France-specific field descriptions more prominent */
.woocommerce-billing-fields [data-country="FR"] .description,
.woocommerce-shipping-fields [data-country="FR"] .description {
  color: #1565c0;
  font-weight: 500;
}

.nf-checkout .woocommerce-invalid label {
  color: #d32f2f;
}

/* ======================================================================
   Order Summary (Right Column) - Collapsible with inline total
   ====================================================================== */

/* Order summary header with inline total */
.nf-checkout .nf-order-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #dfdfdf;
  cursor: pointer;
  user-select: none;
}

/* When collapsed, keep all borders including bottom */
.nf-checkout .nf-order-review.is-collapsed .nf-order-review-header {
  border: 1px solid #dfdfdf;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
}

/* When open, remove bottom border so it connects with content */
.nf-checkout .nf-order-review:not(.is-collapsed) .nf-order-review-header {
  border-bottom: none;
}

.nf-checkout .woocommerce-form-coupon {
  border: none !important;
}
.nf-checkout .nf-order-review-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 22px;
}

/* Hide the original h3 - we'll create our own header */
.nf-checkout .nf-order-review > h3 {
  display: none;
}

.nf-checkout .nf-order-review h3.nf-order-review-header-title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--nf-text);
}

/* Toggle arrow */
.nf-checkout .nf-order-review-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 15px;
  height: 15px;
  padding: 0;
  flex-shrink: 0;
  order: -1;
  background-image: url("../../../images/expand-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.nf-checkout .nf-order-review.is-collapsed .nf-order-review-toggle {
  transform: rotate(0deg); /* Collapsed: arrow pointing up */
}

/* Inline total display */
.nf-checkout .nf-order-review-total {
  font-size: 18px;
  font-weight: 500;
  color: var(--nf-text);
}

/* Order summary content (collapsible) */
.nf-checkout .nf-order-review-content {
  overflow: hidden;
  transition:
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  padding-top: 16px;
  will-change: height, opacity;
  border-left: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

/* Collapsed state */
.nf-checkout .nf-order-review.is-collapsed .nf-order-review-content {
  height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
}

/* Expanded state */
.nf-checkout .nf-order-review:not(.is-collapsed) .nf-order-review-content {
  opacity: 1;
  padding-top: 16px;
}

/* Loading state - prevents flash of content on page load */
.nf-checkout .nf-order-review.is-loading {
  position: relative;
  min-height: 120px;
}

/* Hide all direct children during loading */
.nf-checkout .nf-order-review.is-loading > *:not(.nf-order-review-loader) {
  opacity: 0;
  visibility: hidden;
}

/* Loading skeleton/spinner */
.nf-checkout .nf-order-review.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--nf-primary, #4caf50);
  border-radius: 50%;
  animation: nf-order-review-spin 0.8s linear infinite;
}

@keyframes nf-order-review-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Smooth fade-in when loading is removed */
.nf-checkout .nf-order-review:not(.is-loading) {
  animation: nf-order-review-fade-in 0.3s ease-in-out;
}

@keyframes nf-order-review-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Right column loading state - covers entire sidebar */
.nf-checkout .nf-col--right.is-loading {
  position: relative;
  min-height: 400px;
}

/* Hide all content in right column during loading */
.nf-checkout .nf-col--right.is-loading > * {
  opacity: 0;
  visibility: hidden;
}

/* Right column loading spinner - centered in sidebar */
.nf-checkout .nf-col--right.is-loading::after {
  content: "";
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--nf-primary, #4caf50);
  border-radius: 50%;
  animation: nf-sidebar-spin 0.8s linear infinite;
}

@keyframes nf-sidebar-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Smooth fade-in for right column when loading is removed */
.nf-checkout .nf-col--right:not(.is-loading) {
  animation: nf-sidebar-fade-in 0.4s ease-in-out;
}

@keyframes nf-sidebar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Override WooCommerce default blockUI loader */
.nf-checkout .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
}

.nf-checkout .blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--nf-primary, #4caf50);
  border-radius: 50%;
  animation: nf-sidebar-spin 0.8s linear infinite;
}

/* Hide default WooCommerce loader image */
.nf-checkout .blockUI.blockMsg,
.nf-checkout .woocommerce-checkout-payment .blockUI.blockMsg {
  display: none !important;
}

/* Order Items - Product List with Images */
.nf-order-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.nf-order-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #eee;
}

tr.shipping-method th,
tr.shipping-method td {
  padding: 0 !important;
}

.nf-order-item:last-child {
  border-bottom: none;
}

.nf-order-item-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-order-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-order-item-details {
  display: flex;
  flex-direction: column;
}

.nf-order-item-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--nf-text);
  line-height: 1.4;
}

.nf-order-item-qty {
  font-size: 12px;
  color: var(--nf-muted);
}

.nf-order-item-delivery {
  font-size: 12px;
  color: var(--nf-muted);
  line-height: 1.1;
}

.nf-order-item-total {
  font-size: 14px;
  font-weight: 500;
  color: var(--nf-text);
  text-align: right;
  white-space: nowrap;
}

/* Order Totals Table */
.nf-order-totals {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

div#order_review .nf-order-item-total .tax_label,
table.nf-order-totals tr.cart-subtotal .tax_label {
  display: none;
}

.nf-order-review-content {
  padding: 16px;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.nf-checkout .nf-order-review.is-collapsed .nf-order-review-content {
  padding: 0 !important;
}

.nf-order-totals tbody th,
.nf-order-totals tbody td {
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.nf-order-totals tbody th {
  text-align: left;
  font-weight: 300;
  color: #000;
  font-size: 14px;
}

.nf-order-totals tbody td {
  text-align: right;
  font-weight: 300;
  font-size: 14px;
  color: var(--nf-text);
}

/* Shipping Method Display - Simple style */
.nf-order-totals .shipping-method td {
  text-align: right;
  font-weight: 300;
  font-size: 14px;
  color: var(--nf-text);
}

.nf-order-totals .shipping-method-label {
  display: none; /* Hide the method name, only show price */
}

.nf-order-totals .shipping-method-cost {
  font-weight: 300;
  font-size: 14px;
}

.nf-order-totals .shipping-free {
  color: #46b86a;
}

/* Order Total Row */
.nf-order-totals .order-total th,
.nf-order-totals .order-total td {
  font-size: 18px;
  font-weight: 500;
  padding-top: 16px;
  border-top: 2px solid var(--nf-border);
  border-bottom: none;
  color: var(--nf-text);
}

/* Order total td - flex column to stack price and tax */
.nf-order-totals .order-total td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Tax information below price */
.nf-order-totals .order-total td .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--nf-muted);
}

table.nf-order-totals * {
  border: none !important;
  background: transparent !important;
}
section.nf-order-review.nf-section {
  background: #f6f6f6;
  border: none;
}

#order_review.woocommerce-checkout-review-order {
  padding: 0 !important;
}

/* Coupon/Discount Rows */
.nf-order-totals .cart-discount th {
  color: #46b86a;
}

.nf-order-totals .cart-discount td {
  color: #46b86a;
}

/* Legacy table support (if any old templates still render) */
.nf-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.nf-checkout .woocommerce-checkout-review-order-table thead th {
  padding: 10px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nf-muted);
  border-bottom: 1px solid var(--nf-border);
}

.nf-checkout .woocommerce-checkout-review-order-table tbody td {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.nf-checkout .woocommerce-checkout-review-order-table tbody .product-name {
  font-weight: 500;
}

.nf-checkout .woocommerce-checkout-review-order-table tbody .product-total {
  text-align: right;
  font-weight: 600;
}

.nf-checkout .woocommerce-checkout-review-order-table tfoot th,
.nf-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: 12px 0;
  font-size: 14px;
  border-top: 1px solid var(--nf-border);
}

.nf-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.nf-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 18px;
  font-weight: 700;
  padding-top: 16px;
  color: var(--nf-text);
}

/* ======================================================================
   Coupon Section
   ====================================================================== */

/* Updated from form to div */
.nf-checkout-coupon-desktop .checkout_coupon {
  border-radius: 0 !important;
}

.nf-checkout .woocommerce-form-coupon {
  background: #f6f6f6;
  margin: 0 0 20px;
  border-radius: 4px;
  border: 1px solid var(--nf-border);
}

.nf-checkout .woocommerce-form-coupon input[type="text"] {
  width: 100%;
  margin-right: 10px;
  height: 40px !important;
  box-sizing: border-box;
}

.nf-checkout .woocommerce-form-coupon button {
  min-width: 50px;
  background-color: #fff !important;
  border: 1px solid #8b8b8b;
  height: 40px !important;
  font-size: 16px;
  font-weight: 300;
  color: #000;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-checkout .woocommerce-form-coupon button.processing,
.nf-checkout .woocommerce-form-coupon button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Updated to class selector for multiple coupon inputs */
.coupon-code-input {
  border-color: #8b8b8b !important;
  border-radius: 5px !important;
}

/* Updated to div structure (no nested forms) */
.checkout_coupon.woocommerce-form-coupon {
  border: none !important;
}

form#woocommerce-checkout-form-coupon .form-row-first {
  width: 52% !important;
}

form#woocommerce-checkout-form-coupon .form-row-last {
  width: 46% !important;
}

/* ======================================================================
   Loading Overlay
   ====================================================================== */

.nf-checkout.processing {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.nf-checkout.processing::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999;
}

/* ======================================================================
   Accessibility & Focus States
   ====================================================================== */

.nf-checkout input[type="checkbox"]:focus,
.nf-checkout .woocommerce-form__input-checkbox:focus,
.nf-checkout .input-checkbox:focus {
  border: 1px solid #8b8b8b !important;
}

/* Hide focus border for text inputs, selects, and textareas - but NOT checkboxes */
.nf-col.nf-col--left
  .woocommerce-billing-fields__field-wrapper
  .form-row
  input:not([type="checkbox"]):focus,
.nf-col.nf-col--left
  .woocommerce-billing-fields__field-wrapper
  .form-row
  textarea:focus,
.nf-col.nf-col--left
  .woocommerce-billing-fields__field-wrapper
  .form-row
  select:focus {
  border: none !important;
}

.payment_box.payment_method_stripe {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nf-checkout .screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ======================================================================
   Mobile Optimizations
   ====================================================================== */

@media (max-width: 782px) {
  .nf-checkout {
    padding: 0 1rem;
    overflow-x: hidden;
  }

  .nf-checkout .nf-checkout-grid {
    gap: 20px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .nf-checkout .nf-col--left,
  .nf-checkout .nf-col--right {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .nf-checkout .nf-section > h3 {
    font-size: 16px;
    padding: 13px 12px;
  }

  .nf-checkout .nf-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .nf-checkout input.input-text,
  .nf-checkout select {
    font-size: 16px; /* Prevent iOS zoom */
    max-width: 100%;
    box-sizing: border-box;
  }

  .nf-checkout #place_order {
    height: 52px;
    font-size: 20px;
    width: 100%;
    max-width: 100%;
  }

  .nf-checkout .nf-order-review {
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ======================================================================
   Print Styles (for order confirmation)
   ====================================================================== */

@media print {
  .nf-checkout .nf-col--left,
  .nf-checkout #payment,
  .nf-checkout #place_order {
    display: none !important;
  }

  .nf-checkout .nf-order-review {
    border: none;
    box-shadow: none;
  }
}

aside.nf-col.nf-col--right {
  padding-top: 0rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  aside.nf-col.nf-col--right {
    position: sticky;
    top: 28px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow: hidden;
  }
}

.nf-checkout .nf-col--left,
.nf-checkout .nf-col--right {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wc_payment_method * {
  background: transparent !important;
  border: none !important;
}

.payment_box.payment_method_stripe * {
  border: none !important;
  padding-left: 0 !important;
}

.payment_box.payment_method_stripe:before,
.payment_box.payment_method_cod:before,
.payment_box.payment_method_bacs:before {
  display: none !important;
}

.payment_box.payment_method_stripe {
  padding-left: 0 !important;
}
p#billing_house_number_field,
p#shipping_house_number_field {
  width: 32% !important;
}
p#billing_address_1_field,
p#shipping_address_1_field {
  width: 66% !important;
}
p#billing_postcode_field,
p#shipping_postcode_field {
  width: 32% !important;
}
p#billing_city_field,
p#shipping_city_field {
  width: 66% !important;
}
/* State field - full width like country field */
p#billing_state_field,
p#shipping_state_field {
  width: 100% !important;
  clear: both;
}
p#billing_first_name_field,
p#shipping_first_name_field {
  width: 48% !important;
}
/* Pair partner for first_name - explicit width so the pair sums to 98%
   (matching the 32+66 pairs above). Without this, last_name falls back to
   the generic .form-row-last rule (calc(50% - 8px)), making the pair sum to
   ~90-96% depending on viewport and giving Ime/Priimek a visibly bigger gap
   than the other pairs under justify-content: space-between. */
p#billing_last_name_field,
p#shipping_last_name_field {
  width: 50% !important;
}

/* Address 2 fields (optional) - full width */
p#billing_address_2_field,
p#shipping_address_2_field {
  width: 100% !important;
  clear: both;
}

.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.form-row.place-order {
  padding: 0 !important;
}

/* ======================================================================
   Checkout Layout Reordering - Desktop & Mobile
   ====================================================================== */

/* Hide all default WooCommerce coupon toggles and forms */
.nf-checkout .woocommerce-form-coupon-toggle {
  display: none !important;
}

/* Coupon toggle link */
.nf-checkout-coupon-toggle {
  margin-bottom: 0;
  padding: 0.5rem 0;
}

.nf-checkout-coupon-toggle-link {
  display: block;
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: color 0.2s;
}

.nf-checkout-coupon-toggle-link:hover {
  color: #35ac5a;
  text-decoration: underline;
}

/* Coupon form wrapper */
.nf-checkout-coupon-form-wrapper {
  display: none;
}

/* Show coupon only in our custom wrapper locations */
.nf-checkout .nf-checkout-coupon-desktop .woocommerce-form-coupon,
.nf-checkout .nf-checkout-coupon-mobile .woocommerce-form-coupon {
  display: block !important;
}

/* Desktop: Hide coupon from left column (it's in order review) */
@media (min-width: 1025px) {
  .nf-checkout .nf-checkout-coupon-mobile {
    display: none !important;
  }

  /* Show coupon outside collapsible order review on desktop */
  .nf-checkout .nf-checkout-coupon-desktop {
    display: block;
    margin-bottom: 0;
  }

  .nf-checkout .nf-checkout-coupon-desktop .nf-checkout-coupon-form-wrapper {
    background: #f6f6f6;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid var(--nf-border);
    margin-bottom: 0;
    margin-top: 0.5rem !important;
  }

  .nf-checkout .nf-checkout-coupon-desktop .woocommerce-form-coupon {
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    border: none;
  }

  /* Ensure coupon is not affected by collapsible section */
  .nf-checkout .nf-col--right > .nf-checkout-coupon-desktop {
    width: 100%;
  }

  /* Desktop order: upsells at top, then order review, then coupon */
  .nf-checkout .nf-col--right {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .nf-checkout .nf-section--upsells,
  .nf-checkout .nf-upsells-slider {
    order: 3;
  }

  .nf-checkout .nf-order-review {
    order: 1;
  }

  .nf-checkout .nf-checkout-coupon-desktop {
    order: 2;
  }
}

/* Mobile: Reorder elements */
@media (max-width: 1024px) {
  .nf-checkout .nf-checkout-grid {
    display: flex;
    flex-direction: column;
  }

  /* Left column becomes flex container for ordering */
  .nf-checkout .nf-col--left {
    display: flex;
    flex-direction: column;
    order: 2;
  }

  /* Right column: only show order review */
  .nf-checkout .nf-col--right {
    order: 1;
    position: static;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
  }

  /* Hide ALL upsells from right column on mobile */
  .nf-checkout .nf-col--right .nf-section--upsells,
  .nf-checkout .nf-col--right .nf-upsells-slider {
    display: none !important;
  }

  /* Hide coupon from order review on mobile */
  .nf-checkout .nf-checkout-coupon-desktop {
    display: none !important;
  }

  /* Order on mobile (within left column):
     1. Billing fields
     2. Coupon field
     3. Upsells slider
     4. Shipping methods
     5. Upgrade delivery
     6. Payment methods
     7. Complete order
  */

  .nf-checkout .nf-section--customer {
    order: 1;
  }

  .nf-checkout .nf-checkout-coupon-mobile {
    order: 2;
    display: block !important;
  }

  .nf-checkout .nf-checkout-coupon-mobile .woocommerce-form-coupon {
    display: block !important;
  }

  /* Mobile upsells - show and position below coupon */
  .nf-checkout .nf-upsells-mobile,
  .nf-checkout .nf-col--left .nf-section--upsells,
  .nf-checkout .nf-col--left .nf-upsells-slider {
    order: 3;
    display: block !important;
  }

  .nf-checkout .nf-section--shipping {
    order: 4;
  }

  .nf-checkout .nf-section--offers {
    order: 5;
  }

  .nf-checkout #nf-offers-title {
    order: 6;
  }

  /* Flatten #payment structure so children can be reordered */
  .nf-checkout #payment {
    display: contents;
  }

  .nf-checkout #payment .payment_methods {
    order: 7;
  }

  .nf-checkout .nf-order-review-landing,
  .single-landing-page #place_order_wrapper,
  .single-landing-page .woocommerce-privacy-policy-text {
    order: 8;
  }

  .nf-checkout #payment .form-row.place-order,
  .nf-checkout .form-row.place-order {
    display: flex;
    flex-direction: column;
    order: 9;
  }

  .elementor-shortcode .nf-checkout #payment .form-row.place-order,
  .nf-checkout .form-row.place-order {
    display: flex;
    flex-direction: column;
    order: 7;
  }

  /* Terms and conditions appear before place order button */
  .nf-checkout .woocommerce-terms-and-conditions-wrapper {
    order: 1;
  }

  .nf-checkout #place_order {
    order: 2;
  }

  .nf-checkout .nf-checkout-guarantee {
    order: 10;
  }

  .nf-checkout-coupon-mobile .nf-checkout-coupon-form-wrapper {
    background-color: #f6f6f6;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dfdfdf !important;
    margin-top: 0.5rem !important;
  }

  /* Coupon form label - "Have a discount code? Enter it here" */
  .nf-checkout-coupon-mobile .woocommerce-form-coupon > label {
    display: block !important;
    font-size: 14px;
    color: #000;
  }

  /* Coupon form row container */
  .nf-checkout-coupon-mobile .woocommerce-form-coupon {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  /* Input field - 60% width */
  .nf-checkout-coupon-mobile .form-row.form-row-first {
    width: 60% !important;
    flex: 0 0 60%;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Button - fills remaining space */
  .nf-checkout-coupon-mobile .form-row.form-row-last {
    width: 38% !important;
    flex: 0 0 35%;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Input and button same height alignment */
  .nf-checkout-coupon-mobile .woocommerce-form-coupon input.input-text {
    height: 48px !important;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
  }

  .nf-checkout-coupon-mobile .woocommerce-form-coupon button {
    height: 48px !important;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #8b8b8b !important;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }

  div#woocommerce-checkout-form-coupon-mobile {
    border: none !important;
  }

  .nf-checkout-coupon-mobile .woocommerce-form-coupon button:hover {
    background-color: #f5f5f5 !important;
  }

  /* Clear div spacing */
  .nf-checkout-coupon-mobile .woocommerce-form-coupon .clear {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }

  /* Border below coupon section */
  .nf-checkout-coupon-mobile .nf-checkout-coupon-form-wrapper::after {
    content: "";
    display: block;
    margin-top: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .nf-checkout-coupon-mobile .form-row-last button.button {
    min-width: 50px;
    background-color: #fff !important;
    border: 1px solid #8b8b8b;
    height: 50px;
    font-size: 16px;
    font-weight: 300;
  }
}

/* Mobile upsells: hidden by default, shown only on mobile */
.nf-checkout .nf-upsells-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .nf-checkout .nf-upsells-mobile {
    display: block !important;
  }

  .nf-col.nf-col--left p#billing_company_invoice_field {
    padding-bottom: 0 !important;
  }
}

/* ======================================================================
   Landing Page Checkout Modifications
   ====================================================================== */

/* Mobile/Landing Order Review Visibility Control
   - Regular checkout desktop: hidden
   - Regular checkout mobile: visible (below form)
   - Landing checkout desktop: visible (below form)
   - Landing checkout mobile: visible (below form)
   ====================================================================== */

/* Hide by default on regular checkout desktop */
.nf-order-review-landing {
  display: none;
}

/* Show on mobile for all checkouts */
@media (max-width: 1024px) {
  .nf-order-review-landing {
    display: block !important;
  }
}

/* Show on desktop for landing pages */
body.nf-landing-page .nf-order-review-landing {
  display: block !important;
}

/* Make checkout not full width on landing pages */
body.nf-landing-page .nf-checkout {
  max-width: 800px;
  margin: 0 auto;
}

body.nf-landing-page .nf-checkout .nf-checkout-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Hide upsells slider on landing pages */
body.nf-landing-page .nf-section--upsells,
body.nf-landing-page .nf-upsells-slider,
body.nf-landing-page .nf-upsells-mobile {
  display: none !important;
}

/* Hide place order button in payment section on landing pages (it's moved after order summary) */
body.nf-landing-page .nf-checkout #payment #place_order_wrapper,
body.nf-landing-page .nf-checkout #payment #place_order {
  display: none !important;
}

/* Ensure guarantee appears at the end on landing pages (desktop) */
body.nf-landing-page .nf-checkout .nf-col--left {
  display: flex;
  flex-direction: column;
}

body.nf-landing-page .nf-checkout .nf-section--customer {
  order: 1;
}

body.nf-landing-page .nf-checkout .nf-section--shipping {
  order: 2;
}

body.nf-landing-page .nf-checkout .nf-section--offers {
  order: 3;
}

body.nf-landing-page .nf-checkout #nf-offers-title {
  order: 4;
}

body.nf-landing-page .nf-checkout #payment {
  display: contents; /* Allow children to participate in flex ordering */
}

body.nf-landing-page .nf-checkout #payment .payment_methods {
  order: 5;
  margin-top: -10px !important;
}

body.nf-landing-page .nf-checkout .nf-order-review-landing {
  order: 6;
}

body.nf-landing-page .nf-checkout #place_order_wrapper {
  order: 7;
  display: flex;
  flex-direction: column;
}

body.nf-landing-page .nf-checkout #place_order {
  order: 2;
}

body.nf-landing-page .nf-checkout .nf-checkout-guarantee {
  order: 8;
}

/* Hide coupon field on landing pages */
body.nf-landing-page .nf-checkout .nf-checkout-coupon-desktop,
body.nf-landing-page .nf-checkout .nf-checkout-coupon-mobile,
body.nf-landing-page .nf-checkout .woocommerce-form-coupon-toggle,
body.nf-landing-page .nf-checkout .woocommerce-form-coupon {
  display: none !important;
}

/* ======================================================================
   Landing Page Order Review - Collapsible Toggle
   ====================================================================== */

/* Styling for order review landing (display controlled above) */
.nf-order-review-landing {
  margin: 0 0 20px;
  background: var(--nf-white);
}

.nf-order-review-landing__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
}

.nf-order-review-landing__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--nf-text);
}

.nf-order-review-landing__toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--nf-text);
  text-decoration: underline;
  text-decoration-color: var(--nf-muted);
  text-underline-offset: 3px;
}

.nf-order-review-landing__toggle:hover {
  color: var(--nf-primary);
  text-decoration-color: var(--nf-primary);
}

.nf-order-review-landing__toggle-text {
  font-size: 14px;
  color: #000 !important;
  font-weight: 300;
}

.nf-order-review-landing__total-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 18px;
  font-weight: 600;
  color: var(--nf-text);
}

.nf-order-review-landing__tax-info {
  text-align: end;
  margin-top: 4px;
}

.nf-order-review-landing__tax-note {
  display: block;
  font-size: 14px;
  font-weight: 300;
  color: #000;
}

.nf-order-review-landing__details {
  padding: 20px;
}

.nf-order-review-landing__details[hidden] {
  display: none;
}

.nf-order-review-landing__details .nf-order-items {
  margin-bottom: 20px;
}

.nf-order-review-landing__details .nf-order-totals {
  width: 100%;
  border-collapse: collapse;
}

.nf-order-review-landing__details .nf-order-totals tr {
  border-bottom: 1px solid var(--nf-border);
}

.nf-order-review-landing__details .nf-order-totals th,
.nf-order-review-landing__details .nf-order-totals td {
  padding: 8px 0;
  text-align: left;
  font-size: 14px;
}

.nf-order-review-landing__details .nf-order-totals th {
  font-weight: 300;
  color: var(--nf-text);
}

.nf-order-review-landing__details .nf-order-totals td {
  text-align: right;
  font-weight: 300;
  color: var(--nf-text);
}

.nf-order-review-landing__details .nf-order-totals .order-total {
  border-top: 2px solid var(--nf-border);
  margin-top: 8px;
}

.nf-order-review-landing__details .nf-order-totals .order-total th,
.nf-order-review-landing__details .nf-order-totals .order-total td {
  padding-top: 12px;
  font-weight: 500;
  font-size: 18px;
}

/* Landing order total td - flex column to stack price and tax */
.nf-order-review-landing__details .nf-order-totals .order-total td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Landing tax information below price */
.nf-order-review-landing__details
  .nf-order-totals
  .order-total
  td
  .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: var(--nf-muted);
}

div#nf-order-review-landing-details * {
  background: transparent !important;
}
button.nf-order-review-landing__toggle:hover {
  background: transparent;
  text-decoration: underline;
}
button.nf-order-review-landing__toggle:active {
  background-color: transparent;
}

/* Custom validation class - NF Platform controls this, WooCommerce cannot interfere */
/* Ensure invalid shows red border and overrides any woocommerce-validated green */
.nf-platform-invalid input,
.nf-platform-invalid select,
.nf-platform-invalid textarea,
.nf-checkout .woocommerce-invalid input,
.nf-checkout .woocommerce-invalid select,
.nf-checkout .woocommerce-invalid textarea {
  border-color: #d63638 !important;
  border-width: 1px !important;
}

/* Optional: Add subtle background tint for invalid fields */
.nf-platform-invalid input:focus,
.nf-platform-invalid select:focus,
.nf-platform-invalid textarea:focus {
  border-color: #d63638 !important;
  box-shadow: 0 0 0 1px rgba(214, 54, 56, 0.2) !important;
}

.nf-checkout-coupon-desktop .woocommerce-message {
  border-top-color: #4a9f52;
  background-color: #e2f4e8;
}

.woocommerce-message::before {
  content: "\e015";
  color: #4b9f52 !important;
}

label.rf-label .tax_label {
  display: none !important;
}

.nf-col.nf-col--right {
  border-radius: 5px;
}

@media (max-width: 900px) {
  /*.nf-checkout .nf-order-review.is-collapsed .nf-order-review-header {*/
  /*  border-bottom: 1px solid #dfdfdf !important;*/
  /*}*/

  section.nf-order-review.nf-section.is-collapsed {
    border: none;
  }

  section.nf-order-review.nf-section {
    border-radius: 5px !important;
  }

  .nf-checkout .nf-order-review-content {
    border: none;
  }

  .nf-checkout .nf-order-review-header {
    border-left: none;
    border-right: none;
  }

  .nf-checkout-coupon-mobile .nf-checkout-coupon-form-wrapper::after {
    display: none;
  }

  .woocommerce-billing-fields .form-row input::placeholder {
    font-size: 12px;
  }
}

.nf-order-review-landing__total-price small {
  display: none;
}

button.nf-order-review-landing__toggle {
  background: transparent !important;
}

.alg-wc-eu-vat-valid {
  color: #2f964b;
}

.alg-wc-eu-vat-not-valid {
  color: #e74c3c;
}

/* VAT Field Checkbox Toggle - Match WooCommerce standard checkbox styling */
#billing_company_invoice_field {
  display: block !important;
  visibility: visible !important;
  margin-bottom: 1em;
}

/* Unified label styling for all checkout checkboxes */
.nf-checkout .woocommerce-form__label-for-checkbox,
.nf-checkout
  #billing_company_invoice_field
  .woocommerce-form__label-for-checkbox,
.nf-checkout #ship-to-different-address label,
.nf-checkout .create-account label {
  display: flex;
  align-items: anchor-center;
  gap: 5px;
  font-weight: 300;
  cursor: pointer;
  font-size: 16px;
  color: #111827;
  margin: 0;
  padding-top: 5px;
}

/* Unified checkbox styling - all checkboxes on checkout page */
.nf-checkout input[type="checkbox"],
.nf-checkout .woocommerce-form__input-checkbox,
.nf-checkout .input-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #8b8b8b;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
  vertical-align: middle;
  outline: none;
  box-shadow: none;
}

.nf-checkout input[type="checkbox"]:focus,
.nf-checkout .woocommerce-form__input-checkbox:focus,
.nf-checkout .input-checkbox:focus {
  border: 1px solid #8b8b8b !important;
}

.nf-checkout input[type="checkbox"]:checked,
.nf-checkout .woocommerce-form__input-checkbox:checked {
  background-image: url("../../../images/global/selected-check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  border: none;
  background-color: transparent;
}

.nf-checkout input[type="checkbox"]:hover,
.nf-checkout .woocommerce-form__input-checkbox:hover {
  border-color: #9aa5ad;
}

.nf-checkout input[type="checkbox"]:focus,
.nf-checkout input[type="checkbox"]:focus-visible,
.nf-checkout input[type="checkbox"]:active,
.nf-checkout .woocommerce-form__input-checkbox:focus,
.nf-checkout .woocommerce-form__input-checkbox:focus-visible,
.nf-checkout .woocommerce-form__input-checkbox:active {
  outline: none;
  box-shadow: none;
  border-color: #8b8b8b;
}

/* Mobile-specific checkbox improvements */
@media (max-width: 768px) {
  /* Increase touch target size for better mobile UX and visibility */
  .nf-checkout input[type="checkbox"],
  .nf-checkout .woocommerce-form__input-checkbox,
  .nf-checkout .input-checkbox {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin-top: 0;
    border: 1px solid #8b8b8b; /* Thicker border for better visibility */
  }

  .nf-checkout input[type="checkbox"]:checked,
  .nf-checkout .woocommerce-form__input-checkbox:checked {
    background-size: 14px 14px;
    border: none; /* Remove border when checked since icon is visible */
  }

  /* Ensure focus state is visible on mobile */
  .nf-checkout input[type="checkbox"]:focus,
  .nf-checkout .woocommerce-form__input-checkbox:focus,
  .nf-checkout .input-checkbox:focus {
    border: 1px solid #46b86a !important; /* Green border on focus for better visibility */
  }

  /* Increase gap between checkbox and label for easier tapping */
  .nf-checkout .woocommerce-form__label-for-checkbox,
  .nf-checkout
    #billing_company_invoice_field
    .woocommerce-form__label-for-checkbox,
  .nf-checkout #ship-to-different-address label,
  .nf-checkout .create-account label,
  .nf-checkout .woocommerce-terms-and-conditions-wrapper label {
    gap: 12px;
    display: flex !important;
  }

  /* Add padding around entire checkbox row for larger touch area */
  .nf-checkout #billing_company_invoice_field,
  .nf-checkout #ship-to-different-address,
  .nf-checkout .create-account,
  .nf-checkout .woocommerce-terms-and-conditions-wrapper {
    padding-bottom: 8px !important;
  }

  /* Improve visual feedback on touch */
  .nf-checkout input[type="checkbox"]:active {
    transform: scale(0.95);
    border-color: #46b86a;
  }

  /* Mobile-specific tooltip adjustments */
  .nf-field-hint {
    max-width: 100%;
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Hide VAT + company name fields by default (JS shows them when checkbox is checked) */
#billing_eu_vat_number_field,
#billing_company_field {
  display: none;
}

/* VAT billing validation error */
.nf-vat-billing-warning {
  background-color: #fef1f1;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #c0392b;
}

.nf-vat-billing-warning p {
  margin: 0 0 4px;
}

.nf-vat-billing-warning p:last-child {
  margin-bottom: 0;
}

h3#ship-to-different-address {
  padding: 0;
}

.woocommerce-billing-fields h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.payment_box.payment_method_eh_paypal_express:before {
  display: none !important;
}

/* ======================================================================
   60-Day Money-Back Guarantee Section
   ====================================================================== */
.nf-checkout-guarantee {
  padding: 10px;
  background: #fff;
  border-radius: var(--nf-radius);
}

.nf-checkout-guarantee-content {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.nf-checkout-guarantee-badge {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.nf-checkout-guarantee-text strong {
  display: block;
  font-size: 14px;
  font-weight: 400 !important;
  color: var(--nf-text);
}

.nf-checkout-guarantee-text p {
  margin: 0;
  font-size: 12px;
  color: var(--nf-text);
  line-height: 1.4;
}

.nf-checkout-guarantee-disclaimer {
  margin: 16px 0 0 0;
  padding: 0;
  font-size: 10px;
  color: #000;
  line-height: 1.5;
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
}

/* Phone example notice (billing and shipping) */
#billing_phone_field .description,
#shipping_phone_field .description {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.4;
  background-color: transparent;
}

span#billing_phone-description {
  padding: 0 !important;
}

#billing_phone_field .description:before,
#shipping_phone_field .description:before {
  display: none;
}

.nf-phone-example-left {
  flex: 0 0 auto;
}

.nf-phone-example-right {
  flex: 0 0 auto;
  text-align: right;
}

/* Hide when validation hint is showing */
#billing_phone_field .nf-field-hint ~ .description,
#shipping_phone_field .nf-field-hint ~ .description {
  display: none !important;
}

p#order_comments_field label {
  display: none;
}

label.nf-coupon-label,
.nf-coupon-label {
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 300;
}

p#billing_company_invoice_field {
  padding-bottom: 0 !important;
  margin-bottom: 0px !important;
  padding-left: 0;
  padding-top: 0 !important;
}

/*.woocommerce-privacy-policy-text {*/
/*  display: none !important;*/
/*}*/

/*.woocommerce-terms-and-conditions-wrapper .form-row.validate-required {*/
/*  order: 7 !important;*/
/*}*/

.elementor-shortcode .nf-checkout .form-row.place-order {
  order: 7;
}

#shipping_method .rf-option-container {
  height: 45px !important;
}

.woocommerce-billing-fields h3,
h3#nf-shipping-title,
textarea#order_comments {
  padding-left: 16px !important;
}

/* Country and State field border consistency */
select#billing_country,
select#shipping_country,
select#billing_state,
select#shipping_state {
  padding-left: 16px !important;
  border-color: #8b8b8b !important;
  border-radius: var(--nf-radius) !important;
}

/* State field Select2 styling - match other checkout inputs */
.nf-checkout #billing_state_field .select2-container,
.nf-checkout #shipping_state_field .select2-container {
  width: 100% !important;
}

.nf-checkout #billing_state_field .select2-selection--single,
.nf-checkout #shipping_state_field .select2-selection--single {
  height: var(--nf-input-h) !important;
  border: 1px solid #8b8b8b !important;
  border-radius: var(--nf-radius) !important;
  background: #fff !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}

.nf-checkout #billing_state_field .select2-selection__rendered,
.nf-checkout #shipping_state_field .select2-selection__rendered {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  font-family: "Fira Sans", sans-serif !important;
  line-height: 1.3 !important;
  padding: 0 !important;
}

.nf-checkout #billing_state_field .select2-selection__arrow,
.nf-checkout #shipping_state_field .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.nf-checkout #billing_state_field .select2-selection__arrow b,
.nf-checkout #shipping_state_field .select2-selection__arrow b {
  border-color: #6b7280 transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

/* State field Select2 focus state */
.nf-checkout #billing_state_field .select2-container--focus .select2-selection--single,
.nf-checkout #shipping_state_field .select2-container--focus .select2-selection--single,
.nf-checkout #billing_state_field .select2-container--open .select2-selection--single,
.nf-checkout #shipping_state_field .select2-container--open .select2-selection--single {
  border-color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* State field Select2 validation states */
.nf-checkout #billing_state_field.woocommerce-invalid .select2-selection--single,
.nf-checkout #shipping_state_field.woocommerce-invalid .select2-selection--single {
  border-color: #d63638 !important;
}

.nf-checkout #billing_state_field.woocommerce-validated .select2-selection--single,
.nf-checkout #shipping_state_field.woocommerce-validated .select2-selection--single {
  border-color: #34a958 !important;
}

/* State field placeholder styling */
.nf-checkout #billing_state_field .select2-selection__placeholder,
.nf-checkout #shipping_state_field .select2-selection__placeholder {
  color: #9ca3af !important;
  font-weight: 300 !important;
}

/* Show label above state field (matches other fields) */
/* State field uses Select2 (no :placeholder-shown), so the floating-label
   pattern can't drive it. Override the floating rule back to a plain
   "label above the field" layout so the label is always visible. */
.nf-checkout #billing_state_field > label,
.nf-checkout #shipping_state_field > label {
  position: static;
  transform: none;
  display: block;
  max-width: none;
  margin: 0 0 6px 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--nf-text, #111827);
  font-family: "Fira Sans", sans-serif;
  background: transparent;
}

/* Select2 dropdown menu styling */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: #e5e7eb !important;
  color: #111827 !important;
}

.select2-dropdown {
  border: 1px solid #8b8b8b !important;
  border-radius: var(--nf-radius) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #8b8b8b !important;
  border-radius: var(--nf-radius) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: "Fira Sans", sans-serif !important;
}

.select2-results__option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-family: "Fira Sans", sans-serif !important;
}

/* Mobile responsive - prevent iOS zoom */
@media (max-width: 782px) {
  .nf-checkout #billing_state_field .select2-selection__rendered,
  .nf-checkout #shipping_state_field .select2-selection__rendered {
    font-size: 16px !important;
  }
}

textarea#order_comments::placeholder {
  font-weight: 400;
}

.woocommerce-billing-fields__field-wrapper input::placeholder {
  font-weight: 300;
  font-size: 14px !important;
}

textarea#order_comments {
  font-size: 14px;
  padding-top: 16px;
  border-radius: var(--nf-radius) !important;
  border-color: #8b8b8b !important;
  height: 50px !important;
  min-height: 50px !important;
  margin-top: 10px;
}

ul#shipping_method span.woocommerce-Price-amount.amount {
  font-weight: 300;
  font-size: 16px;
}

label.rf-label {
  font-size: 16px;
}

section.nf-section.nf-section--offers label.rf-option-container {
  padding-top: 15px !important;
}

h3.nf-order-review-landing__title {
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 900px) {
  /*.nf-checkout .woocommerce-terms-and-conditions-wrapper {*/
  /*  flex-direction: column !important;*/
  /*}*/

  label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox
    abbr.required {
    display: none !important;
  }

  .nf-order-review-landing__title {
    font-size: 16px;
  }
}

.woocommerce-privacy-policy-text p {
  font-size: 10px !important;
  font-weight: 300;
  margin-bottom: 0 !important;
}

.woocommerce ul#shipping_method li label {
  display: flex;
  align-items: center;
  gap: 10px;
}

label.rf-label {
  font-size: 16px !important;
}

input#billing_company_invoice,
input#createaccount {
  margin: 0 !important;
}

p.form-row.form-row-wide.create-account.woocommerce-validated {
  padding: 0 20px;
}

@media (max-width: 900px) {
  p.form-row.form-row-wide.create-account.woocommerce-validated {
    padding: 0 16px;
  }

  .rf-option-price {
    margin-left: 0 !important;
  }
}

.nf-checkout #ship-to-different-address {
  margin: -5px 0 5px;
}

@media (min-width: 1000px) {
  .nf-landing__step-progress {
    display: none;
  }
}

textarea#order_comments::placeholder {
  font-weight: 300;
}

p#billing_email_field {
  /* Extra breathing room above the email field (below the "Customer
     information" heading). Use margin-top instead of padding-top so the
     form-row's internal positioning context (used by the floating label)
     matches the rest of the billing fields - padding-top here would shift
     the input inside the form-row and push the absolutely-positioned
     floated label outside the input border. */
  margin-top: 0.5rem !important;
}

.woocommerce ul#shipping_method li {
  margin-bottom: 0 !important;
}

.rf-offers {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

form#woocommerce-checkout-form-coupon .nf-coupon-label {
  font-size: 14px !important;
  font-weight: 300 !important;
  padding-left: 4px;
}

.nf-checkout-coupon-desktop table.nf-order-totals,
.nf-order-review.nf-section tr.order-total,
.nf-order-review.nf-section table.nf-order-totals {
  border-top: 1px solid #dfdfdf !important;
}

.nf-order-review.nf-section h3#nf-order-review-title {
  display: none !important;
}

p.woocommerce-shipping-contents {
  padding-left: 16px;
}

section.nf-order-review.nf-section.is-collapsed {
  padding-bottom: 0;
}

a.woocommerce-remove-coupon {
  font-weight: 300;
  text-decoration: none;
}

#header-spacer {
  display: none !important;
}

p.woocommerce-shipping-contents {
  display: none !important;
}

input#wc-stripe-new-payment-method {
  border: 1px solid #8b8b8b !important;
  width: 14px !important;
  height: 14px !important;
}

input#wc-stripe-new-payment-method:checked {
  background-image: url("../../../images/global/selected-check.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  border: none !important;
  background-color: transparent !important;
  width: 20px !important;
  height: 20px !important;
}

small.includes_tax {
  text-transform: lowercase !important;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: #34a958 !important;
}

@media (max-width: 900px) {
  textarea#order_comments {
    font-size: 14px;
    padding-top: 16px;
    border-radius: var(--nf-radius) !important;
    border-color: #8b8b8b !important;
    height: 70px !important;
    min-height: 50px !important;
  }

  .rf-offers {
    display: flex;
    flex-direction: column !important;
  }

  /* Narrow the form-row to just the checkbox width. This only makes sense
     because .woocommerce-terms-and-conditions-checkbox-text is hidden globally
     (see rule above, next to the other terms-wrapper styles). Keep that hide
     rule in THIS stylesheet — if it lives in landing.css, on first landing-page
     load the width applies before the hide rule is parsed and the full label
     text is forced to wrap one word per line inside this 25px column. */
  .woocommerce-terms-and-conditions-wrapper .form-row {
    width: 25px;
  }
}

#shipping_method .rf-option-title-row {
  display: flex;
  align-items: center;
}

.woocommerce-privacy-policy-text p {
  line-height: 15px;
}
.woocommerce form .form-row .input-checkbox {
  display: inline-block;
}

div#custom_checkout_dropdowns select {
  height: 55px !important;
}

div#custom_checkout_dropdowns h3 {
  font-weight: 600;
}

p.form-row.form-row-wide.create-account.woocommerce-validated {
  display: none;
}

a#mmLink {
  color: #000;
  font-weight: 300 !important;
  font-size: 15px !important;
}

/* ======================================================================
   Mollie Credit Card Components Styling
   ====================================================================== */

/* Main container for Mollie card fields */
.payment_method_mollie_wc_gateway_creditcard .mollie-components {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin-top: 4px;
}

/* Individual field containers */
.payment_method_mollie_wc_gateway_creditcard #cardHolder,
.payment_method_mollie_wc_gateway_creditcard #cardNumber,
.payment_method_mollie_wc_gateway_creditcard #expiryDate,
.payment_method_mollie_wc_gateway_creditcard #verificationCode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
}

/* Expiry and CVC side by side */
.payment_method_mollie_wc_gateway_creditcard .mollie-components {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cardholder"
    "cardnumber"
    "expiry-cvc";
  gap: 12px;
}

.payment_method_mollie_wc_gateway_creditcard #cardHolder {
  grid-area: cardholder;
}

.payment_method_mollie_wc_gateway_creditcard #cardNumber {
  grid-area: cardnumber;
}

/* Wrapper for expiry and CVC to sit side by side */
.payment_method_mollie_wc_gateway_creditcard #expiryDate,
.payment_method_mollie_wc_gateway_creditcard #verificationCode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Use CSS to create side-by-side layout for expiry and CVC */
.payment_method_mollie_wc_gateway_creditcard .mollie-components {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.payment_method_mollie_wc_gateway_creditcard #cardHolder,
.payment_method_mollie_wc_gateway_creditcard #cardNumber {
  flex: 0 0 100%;
}

.payment_method_mollie_wc_gateway_creditcard #expiryDate {
  flex: 1 1 calc(60% - 8px);
  min-width: 140px;
}

.payment_method_mollie_wc_gateway_creditcard #verificationCode {
  flex: 1 1 calc(40% - 8px);
  min-width: 100px;
}

/* Labels styling */
.payment_method_mollie_wc_gateway_creditcard .mollie-component-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  font-family: "Fira Sans", sans-serif;
}

/* Input container styling - the div wrapping the iframe */
.payment_method_mollie_wc_gateway_creditcard .mollie-component {
  background: #fff !important;
  border: 1px solid #8b8b8b !important;
  border-radius: var(--nf-radius) !important;
  padding: 12px 14px !important;
  height: 44px !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

.payment_method_mollie_wc_gateway_creditcard .mollie-component:hover {
  border-color: #6b6b6b !important;
}

.payment_method_mollie_wc_gateway_creditcard .mollie-component:focus-within {
  border-color: var(--nf-border-focus) !important;
  box-shadow: 0 0 0 1px var(--nf-border-focus) inset !important;
}

/* Error state for Mollie components */
.payment_method_mollie_wc_gateway_creditcard .mollie-component.is-invalid,
.payment_method_mollie_wc_gateway_creditcard .mollie-component--error {
  border-color: #d32f2f !important;
}

/* Error messages */
.payment_method_mollie_wc_gateway_creditcard #cardHolder-errors,
.payment_method_mollie_wc_gateway_creditcard #cardNumber-errors,
.payment_method_mollie_wc_gateway_creditcard #expiryDate-errors,
.payment_method_mollie_wc_gateway_creditcard #verificationCode-errors {
  font-size: 12px;
  color: #d32f2f;
  margin-top: 4px;
  min-height: 0;
}

.payment_method_mollie_wc_gateway_creditcard #cardHolder-errors:empty,
.payment_method_mollie_wc_gateway_creditcard #cardNumber-errors:empty,
.payment_method_mollie_wc_gateway_creditcard #expiryDate-errors:empty,
.payment_method_mollie_wc_gateway_creditcard #verificationCode-errors:empty {
  display: none;
}

/* Iframe inside the component */
.payment_method_mollie_wc_gateway_creditcard .mollie-component iframe {
  height: 20px !important;
}

/* Secure payment description styling */
.payment_method_mollie_wc_gateway_creditcard .mollie-components-description {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f8faf9;
  border-radius: var(--nf-radius);
  border: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  font-family: "Fira Sans", sans-serif;
}

.payment_method_mollie_wc_gateway_creditcard
  .mollie-components-description
  svg {
  flex-shrink: 0;
}

/* Mollie gateway icon in payment method label */
.payment_method_mollie_wc_gateway_creditcard .mollie-gateway-icon {
  height: 22px;
  width: auto;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
  .payment_method_mollie_wc_gateway_creditcard #expiryDate,
  .payment_method_mollie_wc_gateway_creditcard #verificationCode {
    flex: 0 0 100%;
  }

  .payment_method_mollie_wc_gateway_creditcard .mollie-components-description {
    flex-wrap: wrap;
    font-size: 12px;
    padding: 10px 12px;
  }
}

@media (max-width: 767px) {
  html[lang^="el"] .nf-order-review-landing__header {
    display: inline-grid;
  }
}

html[lang="nl-NL"] .woocommerce form .form-row::after,
html[lang="nl-NL"] .woocommerce-page form .form-row::after {
  clear: unset;
}

/* ===== Visual Phone Prefix Dropdown ===== */
/* Dropdown and input are separate elements side by side */

.nf-checkout [data-has-visual-prefix="1"] .woocommerce-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

/* Dropdown container - matches input height */
.nf-phone-prefix-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid #8b8b8b;
  border-radius: var(--nf-radius, 8px);
  height: var(--nf-input-h, 56px);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: default;
}

/* Inner display: flag + prefix text together */
.nf-phone-prefix-display {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Flag image */
.nf-phone-prefix-flag {
  display: block;
  border-radius: 2px;
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  object-fit: cover;
}

/* Prefix text */
.nf-phone-prefix-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--nf-text, #222);
  line-height: 1.3;
  white-space: nowrap;
}

/* The .nf-phone-input-wrap is now the flex child that hosts the input + a
   floating label positioned only over the input area (so it never overlaps
   the prefix badge). */
[data-has-visual-prefix="1"] .woocommerce-input-wrapper .nf-phone-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: block;
}

/* Input: fills the wrap, keeps its own full border and radius. */
[data-has-visual-prefix="1"] .woocommerce-input-wrapper input.input-text {
  width: 100%;
  border-radius: var(--nf-radius, 8px);
}

/* Floating label: same two-state pattern as the rest of the checkout
   fields (see rules 2 + 3 higher in this file).
   - Idle: centered vertically inside the input, styled like a muted
     placeholder. The native input placeholder is hidden by rule 5.
   - Filled: shrinks and moves to the top-left of the input. */
.nf-phone-floating-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
  color: var(--nf-ph, #6b6b6b);
  font-family: "Fira Sans", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  background: transparent;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    top 0.15s ease-out,
    transform 0.15s ease-out,
    font-size 0.15s ease-out,
    font-weight 0.15s ease-out,
    color 0.15s ease-out;
}

/* Filled state: anchor near the top of the input (same 6px inset the
   other fields use in rule 3). */
.nf-phone-input-wrap:has(input:not(:placeholder-shown))
  > .nf-phone-floating-label {
  top: 6px;
  transform: none;
  font-size: 10px;
}

/* Description wraps below the row */
[data-has-visual-prefix="1"] .woocommerce-input-wrapper .description {
  flex-basis: 100%;
}

/* Validation states */
.woocommerce
  form
  .form-row.woocommerce-validated[data-has-visual-prefix="1"]
  .nf-phone-prefix-dropdown {
  border-color: #34a958;
}
.woocommerce
  form
  .form-row.woocommerce-invalid[data-has-visual-prefix="1"]
  .nf-phone-prefix-dropdown {
  border-color: #e2401c;
}

/* Order notes character counter */
.nf-order-notes-counters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nf-order-notes-counter { font-size: 12px; color: #666; }
.nf-order-notes-counter.over-limit { color: #e2401c; font-weight: 600; }


.payment_box.payment_method_ppcp-gateway:before {
  display: none !important;
}

/* KCO shipping data — keep in DOM for JS but take up zero layout space */
#kco_shipping_data_field {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.woocommerce-info {
  margin-bottom: 0 !important;
}

#shipping_phone-description {
  padding: 0;
}

/* Subscription cart: non-recurring gateway notice inside payment box */
.nf-subs-onetime-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #5c4a00;
  background: #fff8e1;
  border: 1px solid #e6d08a;
  border-radius: 6px;
}