/* iDEAN design system — inline checkout skin (fluent-extras)
 *
 * Dresses FluentCart's inline/instant checkout in the same system as the
 * AI for Marketers Summit registration form (scripts/summit-form/gen_form.py):
 * Poppins for structure, Lora for anything typed, navy/gold, 10px inputs, a
 * gold full-width primary. Stock FluentCart ships Roboto and a slate button,
 * so on an iDEAN landing page the primary action does not read as the page's
 * primary action.
 *
 * SCOPE: .fct-checkout-type-instant only. That class is on the checkout
 * embedded by [fex_inline_checkout] and ABSENT from the standalone /checkout/
 * page (verified live 2026-09-06), so this sheet cannot reach the normal cart.
 *
 * HOW IT WORKS -- read before adding anything.
 * FluentCart is fully tokenised: checkout.css declares its palette as
 * --fct-checkout-* custom properties on :root. Every COLOUR below is set by
 * redeclaring those variables on our scope, which beats :root for everything
 * inside it. That means no specificity fight, no !important, and it keeps
 * working if the vendor renames a class, because variables are the theming
 * surface they actually document. Only what FluentCart hardcodes -- fonts,
 * radii, the joined-input stack, the grid -- needs a real rule.
 * PREFER A VARIABLE OVER A RULE whenever one exists.
 *
 * WHEN YOU DO NEED A RULE, MIRROR THE VENDOR'S WHOLE SELECTOR and put our
 * scope in front of it. FluentCart writes two-class selectors like
 * `.fct_line_item .fct_line_item_body`, so the obvious
 * `.fct-checkout-type-instant .fct_line_item_body` is a (0,2,0) TIE that comes
 * down to load order -- and this sheet prints BEFORE FluentCart's, so a tie
 * loses. That cost three separate bugs here (the thumbnail size, the line-item
 * alignment, the input radius). Copy their ancestor chain, do not out-guess it.
 * Their `:not(#billing_city,...)` guards are worse still: `:not()` takes the
 * specificity of its most specific argument, so those sit at ID level and are
 * the one place `!important` is warranted.
 *
 * SAFETY RULES. This lands on a page taking live money. A stylesheet cannot
 * break submission logic, but it can make the checkout unusable:
 *   - never display:none / visibility:hidden an interactive node
 *   - never set position, z-index or pointer-events on inputs or the button
 *   - never overflow:hidden a container holding a field or a dropdown
 *   - !important only where vendor specificity demands it, and never on a
 *     property that could hide something
 * Vendor internals read from FluentCart 1.6.3.
 */

.fct-checkout-type-instant {
  /* iDEAN tokens (root DESIGN.json), named as the AMS form names them */
  --navy: #080B41;
  --navy-600: #273272;
  --gold: #FED044;
  --gold-600: #F0BE1F;
  --gold-shelf: #D9A912;
  --ink: #171A26;
  --line: #D5DAEA;
  --muted: #5B6076;
  --err: #A3243B;
  --display: Poppins, "Hind Siliguri", "Segoe UI", system-ui, sans-serif;
  --sans: Lora, "Noto Serif Bengali", Georgia, serif;

  /* FluentCart's own palette, repointed at ours. These are the vendor's
     variable names -- do not rename them. */
  --fct-checkout-primary-text-color: var(--ink);
  --fct-checkout-secondary-text-color: var(--muted);
  --fct-checkout-border-color: var(--line);
  --fct-checkout-active-border-color: var(--navy-600);
  --fct-checkout-input-text-color: var(--ink);
  /* These two ALIAS --fct-checkout-border-color in the vendor's own :root
     block. A custom property that references another resolves at its
     DECLARATION site, so :root captured the vendor default and overriding the
     parent variable here can never reach them. Set every aliased leaf
     directly. */
  --fct-checkout-input-border-color: var(--line);
  --fct-checkout-radio-border-color: var(--line);
  --fct-checkout-input-placeholder-text-color: var(--muted);
  --fct-checkout-btn-bg-color: var(--gold);
  --fct-checkout-btn-text-color: var(--navy);
  --fct-btn-border-color: var(--gold);
  /* The checked checkbox fill and the radio dot both read this one. */
  --fct-checkout-primary-bg-color: var(--navy-600);
  --fct-checkout-radio-active-bg-color: var(--navy-600);
  --fct-checkout-radio-active-border-color: var(--navy-600);
  --fct-checkout-address-active-border-color: var(--navy-600);
}

/* ---------------------------------------------------------------- type */

.fct-checkout-type-instant .fct-input,
.fct-checkout-type-instant .fct_input_label,
.fct-checkout-type-instant .fct_item_title,
.fct-checkout-type-instant .fct_summary_label,
.fct-checkout-type-instant .fct_payment_method,
.fct-checkout-type-instant .fct_form_error {
  font-family: var(--sans);
}

.fct-checkout-type-instant .fct_form_section_header_label,
.fct-checkout-type-instant #order_summary_label,
.fct-checkout-type-instant #payment_methods_label,
.fct-checkout-type-instant .fct_line_item_total,
.fct-checkout-type-instant .fct_summary_value,
.fct-checkout-type-instant .fct_summary_toggle_total,
.fct-checkout-type-instant .fct_place_order_btn {
  font-family: var(--display);
}

.fct-checkout-type-instant .fct_form_section_header_label,
.fct-checkout-type-instant #order_summary_label,
.fct-checkout-type-instant #payment_methods_label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* ---------------------------------------------------------------- fields */

/* Stock joins the inputs into one stack: 8px radius on the outer corners only,
   hairline borders shared between neighbours. The AMS form uses separate
   fields, so give each its own box and its own breathing room. Radius is
   hardcoded per-position in checkout.css, which is why this is a rule and not
   a variable. */
.fct-checkout-type-instant .fct_input_wrapper {
  margin-bottom: 14px;
}

.fct-checkout-type-instant .fct_checkout_input_group .fct_input_wrapper input,
.fct-checkout-type-instant .fct-input-text,
.fct-checkout-type-instant .fct-input-tel {
  font-size: 16px;
  line-height: 1.4;
  padding: 13px 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  caret-color: var(--navy-600);
}

/* The top corners need their own selector. FluentCart rounds the first field
   of the stack with
     .fct_checkout_input_group .fct_input_wrapper:first-child .fct-input
   which is (0,4,0) -- a pseudo-class counts at class weight -- and therefore
   outranks the (0,3,1) rule above. Matching its shape with our scope in front
   makes this (0,5,0), so it wins on specificity rather than on load order. */
.fct-checkout-type-instant .fct_checkout_input_group .fct_input_wrapper:first-child .fct-input,
.fct-checkout-type-instant .fct_checkout_input_group .fct_input_wrapper:last-child .fct-input {
  /* !important is unavoidable here and is the narrow kind. FluentCart rounds
     the first field with
       .fct_checkout_input_group .fct_input_wrapper:first-child
         input:not(#billing_city,#shipping_city,#allow_create_account)
     and :not() carries the specificity of its most specific argument -- those
     are IDs, so the rule sits at ID level and no sane class selector reaches
     it. border-radius is paint-only: it cannot hide a control or move it out
     of reach, which is the line this file draws around !important. */
  border-radius: 10px !important;
}

.fct-checkout-type-instant .fct-input:focus,
.fct-checkout-type-instant .fct-input:focus-visible {
  border-color: var(--navy-600);
  outline: 3px solid rgba(0, 29, 196, .45);
  outline-offset: 2px;
}

/* First + last share a row from 600px up, as on the AMS form. Everything else
   spans the full width, so a field FluentCart adds later lands full-width
   instead of orphaned in half a row. */
@media (min-width: 600px) {
  .fct-checkout-type-instant .fct_checkout_input_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .fct-checkout-type-instant .fct_checkout_input_group > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .fct-checkout-type-instant #fct_wrapper_billing_first_name,
  .fct-checkout-type-instant #fct_wrapper_billing_last_name {
    grid-column: span 1;
  }
}

/* intl-tel-input floats its country button over the field */
.fct-checkout-type-instant .iti input[type="tel"] {
  padding-left: 52px;
}

/* The dial code is a sibling of the input, not part of it, so it never picked
   up the field's typography: "+880" rendered Roboto 18px near-black next to a
   Lora 16px --ink number, inside one box. Three mismatches reading as one
   broken field. The country button and the wrapper are set too, since the
   dial code inherits from them.
   The country dropdown list is deliberately left alone -- intl-tel-input can
   append it to <body>, outside this scope, so styling it from here would work
   in one configuration and silently not in another. */
.fct-checkout-type-instant .fct_input_wrapper_tel .iti,
.fct-checkout-type-instant .fct_input_wrapper_tel .iti__selected-country,
.fct-checkout-type-instant .fct_input_wrapper_tel .iti__selected-dial-code {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}

/* ---------------------------------------------------------------- terms */

/* The consent row is a REQUIRED gate -- Place Order refuses with "You must
   agree to the terms and conditions" -- but stock renders it as a bare 16px
   native checkbox on white, which is easy to miss entirely. Someone had
   already noticed and put a "<-" arrow in the label copy to point at it; that
   is the tell. An invisible mandatory control costs registrations: the visitor
   fills everything in, taps the CTA, gets an error and some of them leave.
   So the row is a panel and the box is deliberately oversized.

   FluentCart already sets appearance:none on this input and draws the tick
   itself as a :before pseudo-element, hardcoded at top:1px/left:4.5px for a
   16px box. Enlarging the box therefore strands the tick where the centre of
   a 16px box used to be -- it has to be re-centred here, which is why the
   :before override below exists. */
.fct-checkout-type-instant .fct_checkout_agree_terms {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: #EEF0FA;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fct-checkout-type-instant .fct_input_label {
  font-size: 16px;
  line-height: 1.6;
}

.fct-checkout-type-instant .fct_input_label a {
  color: var(--navy-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Selector shape is load-bearing. FluentCart styles this control as
     .fct_checkout input[type=checkbox]
   which is (0,2,1) -- one class, one type, one attribute -- and that quietly
   beats the obvious (0,2,0) ".fct-checkout-type-instant .fct-input-checkbox".
   Matching the vendor's shape with our scope in front makes it (0,3,2).
   The symptom when this is wrong is subtle: `width` appeared to apply while
   `height` did not, because our min-width had no competitor but the vendor's
   `min-height:auto` outranked ours, leaving a 24x16 lozenge with the tick
   stranded off-centre. Same family as the :first-child input radius above --
   in this stylesheet, always beat the vendor on specificity, never on order. */
.fct-checkout-type-instant .fct_checkout input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-width: 2px;
  border-color: var(--navy-600);
  border-radius: 8px;
  cursor: pointer;
  /* The label is an INLINE box here -- FluentCart's own display:flex on it
     does not survive, so align-items/align-self are inert and this control is
     positioned by inline layout, i.e. vertical-align. Left at the default
     baseline the 24px box hangs 4px above the middle of the text it sits
     beside; `middle` overshoots the other way by the same 4px, because it
     measures from the baseline plus half an x-height rather than from the
     glyph box. -0.25em lands it dead centre on the first line (measured
     residual: 0.25px) and, being relative, survives a change of label size. */
  vertical-align: -0.25em;
}

/* Re-centre the vendor's tick for the bigger box.
   FluentCart positions it absolutely at top:1px/left:4.5px, sized 9x5, tuned
   for a 16px square -- so enlarging the box strands it where the centre of a
   16px box used to be. It does declare display:flex on the input, but that
   does NOT survive on this page (something upstream leaves the control
   inline-block), so flex centring is not available and absolute offsets are
   what actually place this tick. Every value below is therefore the vendor's
   own, multiplied by the same 24/16 = 1.5 the box grew by, which preserves
   the proportions they already tuned. top/left resolve against the padding
   box, so the thicker border needs no correction.

   The offsets are then corrected, because scaling alone does not centre this.
   The glyph is a 7.5x13.5 element showing only its right and bottom borders --
   an L -- rotated 45deg. Its INK centroid is not its box centre: weighting the
   two strips gives a centroid 1.69 right and 2.01 below the element centre,
   which after the 45deg rotation lands 0.23 left and 2.62 below. Net, the mark
   painted 0.27 right and 0.87 low inside the 20x20 padding box, which is what
   reads as "not centred". Subtracting that, and then sitting it a hair high
   because a check mark looks centred slightly above true centre, gives the
   values below. Verified at 6x magnification on the clone. */
.fct-checkout-type-instant .fct_checkout input[type="checkbox"]::before {
  top: 0.5px;
  left: 6.5px;
  height: 13.5px;
  width: 7.5px;
  border-right-width: 2.25px;
  border-bottom-width: 2.25px;
}

.fct-checkout-type-instant .fct_checkout input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(0, 29, 196, .45);
  outline-offset: 3px;
}

/* Only `cursor` is live here. display/align-items/gap were declared once and
   never applied -- the vendor's label styling outranks a single-class selector,
   so the row stays inline layout. Leaving the dead declarations in would
   suggest this row is a flex container, which is exactly the wrong mental
   model for anyone editing the alignment above. */
.fct-checkout-type-instant .fct_input_label_checkbox {
  cursor: pointer;
}

/* Refused state. FluentCart adds .show_error to the message span when Place
   Order is rejected; there is no class on the wrapper, so :has() is the only
   way to colour the whole row from a descendant. Turning the entire panel red
   -- not just the sentence under it -- is the point: the visitor has already
   looked at the CTA, and a red sentence below a lavender box is easy to skim
   past when you are hunting for what went wrong.

   Tints are mixed from --err rather than written as new hex values, so there
   is exactly one red in this file and it stays in step if the token moves.
   If a browser lacks :has() or color-mix() these declarations are simply
   dropped: the panel keeps its normal styling and the red error sentence is
   still there, which is the stock behaviour and no worse than before. */
.fct-checkout-type-instant .fct_checkout_agree_terms:has(.show_error) {
  background: color-mix(in srgb, var(--err) 7%, #fff);
  border-color: color-mix(in srgb, var(--err) 30%, #fff);
}

.fct-checkout-type-instant .fct_checkout_agree_terms:has(.show_error) input[type="checkbox"] {
  border-color: var(--err);
}

/* ---------------------------------------------------------------- boxes */

.fct-checkout-type-instant .fct_payment_method {
  font-size: 16px;
  border-radius: 10px;
  padding: 14px 16px;
}

.fct-checkout-type-instant .fct_summary_box {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
}

/* The line item reads as one object: a bigger thumbnail with the name and the
   price centred against it. Stock is a 50px image with both text columns
   top-aligned (align-items:flex-start on the row, nothing on the info group),
   which leaves the price floating above the middle of the image and the row
   looking like three unrelated things. */
.fct-checkout-type-instant .fct_line_item .fct_line_item_body,
.fct-checkout-type-instant .fct_line_item .fct_line_item_info {
  align-items: center;
}

/* .fct_line_item is in the selector because the vendor's own sizing rule is
   `.fct_line_item .fct_item_image` -- (0,2,0), a tie with the obvious
   two-class override, which then comes down to load order. Ours prints before
   FluentCart's, so a tie loses. Matching their ancestor makes it (0,3,0) and
   the question of order stops mattering. */
.fct-checkout-type-instant .fct_line_item .fct_item_image,
.fct-checkout-type-instant .fct_line_item .fct_item_image img {
  width: 64px;
  height: 64px;
}

.fct-checkout-type-instant .fct_line_item .fct_item_image img {
  border-radius: 8px;
}

/* Keep the line-item price inside the card on a narrow screen.
   .fct_line_item_body is a nowrap flex row whose children default to
   min-width:auto, so they refuse to shrink below their content: at 375px the
   title + gap + price measure 195px inside a 160px row and the price is
   pushed straight out of the card, visibly clipped mid-number. Stock only
   escapes this because the box has no padding of its own -- the padding added
   above for the card treatment is what tips it over, so this rule is part of
   the same change, not an unrelated fix.
   Letting the title shrink (min-width:0) and pinning the price (flex:0 0 auto)
   fixes it without touching the vendor's markup or the padding: the price
   always renders whole and the title takes whatever is left. */
.fct-checkout-type-instant .fct_line_item_info {
  min-width: 0;
}

.fct-checkout-type-instant .fct_line_item_price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.fct-checkout-type-instant .fct_summary_items_total .fct_summary_label,
.fct-checkout-type-instant .fct_summary_items_total .fct_summary_value {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

/* ------------------------------------------------------------- narrow screens */

/* At 375px the nested padding was eating 132px -- 35% of the screen -- before
   a single field was drawn: 28px from the section gutter, 18px from the
   landing page's card, 20px from FluentCart's own wrapper, each doubled. The
   result was a 243px column in which the product title broke over four lines
   and the phone placeholder truncated mid-word.
   Trimming those three to 16/16/8 returns 52px, so the column is 295px and the
   title fits on one line.

   Two of these selectors reach OUTSIDE the .fct-checkout-type-instant scope,
   which is deliberate. .adw-wrap and .adw-checkout-card belong to the landing
   page's own stylesheet, but that lives in Kirki page meta and would put this
   change outside the fex_checkout_skin gate -- a live edit to a page taking
   money, reversible only by another Kirki deploy. Scoping them with :has()
   keeps the whole change inside this one gated file, so `wp option delete`
   still undoes every part of it. Both are constrained to a container that
   actually holds this checkout, so no other section moves. */
@media (max-width: 599px) {
  .adw-wrap:has(.fct-checkout-type-instant),
  .adw-checkout-card:has(.fct-checkout-type-instant) {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fct-checkout-type-instant {
    padding-left: 8px;
    padding-right: 8px;
  }

  .fct-checkout-type-instant .fct_summary_box {
    padding: 16px;
  }

  /* Even with the extra room, let the price drop to its own line rather than
     fight the title for it -- the row is nowrap by default. */
  .fct-checkout-type-instant .fct_line_item_body {
    flex-wrap: wrap;
  }

  .fct-checkout-type-instant .fct_line_item_price {
    margin-left: auto;
  }
}

/* ---------------------------------------------------------------- primary */

/* Vendor paints the button as `linear-gradient(180deg,#fff3,#fff0), var(bg)`.
   That white sheen is tuned for a dark slate fill and washes gold out, so the
   gradient is flattened here while the colour itself still comes from the
   variable above. */
.fct-checkout-type-instant .fct_place_order_btn {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 17px 32px;
  border: 0;
  border-radius: 10px;
  background-image: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--gold-shelf), 0 12px 24px rgba(8, 11, 65, .2);
  transition: background-color 150ms cubic-bezier(.22, .61, .36, 1);
}

.fct-checkout-type-instant .fct_place_order_btn:hover,
.fct-checkout-type-instant .fct_place_order_btn:focus {
  background-color: var(--gold-600);
  background-image: none;
  color: var(--navy);
}

.fct-checkout-type-instant .fct_place_order_btn_wrap {
  margin-top: 20px;
}

/* ---------------------------------------------------------------- errors */

.fct-checkout-type-instant .fct_form_error,
.fct-checkout-type-instant .fct_form_error * {
  font-size: 14px;
  line-height: 1.5;
  color: var(--err);
}

@media (prefers-reduced-motion: reduce) {
  .fct-checkout-type-instant .fct_place_order_btn {
    transition: none;
  }
}