/**
 * Gift Cards for FluentCart
 *
 * Every value is a custom property with a neutral default, so a store that is not
 * Everflyht can retheme the whole plugin by overriding these six-or-so variables.
 * Nothing here leaks: all selectors are namespaced under .fcgc-*.
 */

.fcgc-checkout-box,
.fcgc-recipient,
.fcgc-balance {
    --fcgc-ink: #000;
    --fcgc-paper: #fff;
    --fcgc-cream: #fbfaf7;
    --fcgc-line: #e3e1e1;
    --fcgc-line-strong: #c9c6c1;
    --fcgc-muted: #5c5c5c;
    --fcgc-error: #8f2e26;
    --fcgc-error-on-ink: #f0b8b2;
    --fcgc-radius: 8px;
    --fcgc-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* The store's typeface. Left as `inherit` the plugin picks up whatever it sits
       inside, which on a FluentCart checkout is FluentCart's own system stack, not the
       theme's face. A store with a brand font sets --fcgc-font once (see DESIGN.md);
       Everflyht sets it to gill-sans-nova in the child theme, where site typography
       belongs. The plugin itself stays brand-agnostic. */
    font-family: var(--fcgc-font, inherit);
    color: var(--fcgc-ink);
    box-sizing: border-box;
}

.fcgc-checkout-box *,
.fcgc-recipient *,
.fcgc-balance * {
    box-sizing: inherit;
}

/* Shared micro label: the estate's own grammar (uppercase, tracked, small). */
.fcgc-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Checkout: the redemption panel.
   Black, because spending stored value is a different act from a coupon, and
   because it is the same material as the card the customer was sent.
   --------------------------------------------------------------------------- */

/* Sits at the top of the checkout form, spanning both columns. */
.fcgc-checkout-box {
    background: var(--fcgc-ink);
    color: var(--fcgc-cream);
    border-radius: var(--fcgc-radius);
    padding: 1rem 1.25rem;
    margin: 0 0 1.75rem;
}

/* The code is short: an input the full width of the checkout would be absurd. */
.fcgc-apply-row {
    max-width: 26rem;
}

.fcgc-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fcgc-box-head .fcgc-label {
    color: rgba(251, 250, 247, 0.62);
}

.fcgc-toggle {
    appearance: none;
    position: relative;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    margin: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--fcgc-cream);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(251, 250, 247, 0.4);
    cursor: pointer;
    transition: text-decoration-color 160ms var(--fcgc-ease);
}

.fcgc-toggle:hover {
    text-decoration-color: var(--fcgc-cream);
}

.fcgc-toggle:focus-visible {
    outline: 2px solid var(--fcgc-cream);
    outline-offset: 3px;
    border-radius: 2px;
}

/* These two are text controls by design (a button here would shout), but a text
   control still needs a thumb-sized hit area. Expand it without changing the type. */
.fcgc-toggle::before,
.fcgc-remove::before {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

/* Disclosure: animate the grid row, never height:auto. */
.fcgc-apply {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms var(--fcgc-ease);
}

.fcgc-checkout-box[data-open="1"] .fcgc-apply {
    grid-template-rows: 1fr;
}

.fcgc-apply-inner {
    overflow: hidden;
    min-height: 0;
}

.fcgc-apply-row {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.875rem;
}

.fcgc-code-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.875rem;
    font: inherit;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fcgc-cream);
    background: rgba(251, 250, 247, 0.06);
    border: 1px solid rgba(251, 250, 247, 0.28);
    border-radius: var(--fcgc-radius);
    transition: border-color 160ms var(--fcgc-ease), background-color 160ms var(--fcgc-ease);
}

.fcgc-code-input::placeholder {
    color: rgba(251, 250, 247, 0.55);
    letter-spacing: 0.08em;
}

.fcgc-code-input:hover {
    border-color: rgba(251, 250, 247, 0.45);
}

.fcgc-code-input:focus-visible {
    outline: 2px solid var(--fcgc-cream);
    outline-offset: 2px;
    border-color: transparent;
    background: rgba(251, 250, 247, 0.1);
}

/* On black, the primary button inverts: cream fill, black type. */
.fcgc-btn {
    appearance: none;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 1.125rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fcgc-ink);
    background: var(--fcgc-cream);
    border: 1px solid var(--fcgc-cream);
    border-radius: var(--fcgc-radius);
    cursor: pointer;
    transition: background-color 160ms var(--fcgc-ease), color 160ms var(--fcgc-ease);
}

.fcgc-btn:hover {
    background: transparent;
    color: var(--fcgc-cream);
}

.fcgc-btn:focus-visible {
    outline: 2px solid var(--fcgc-cream);
    outline-offset: 2px;
}

.fcgc-btn:active {
    transform: translateY(1px);
}

.fcgc-btn[disabled] {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.fcgc-btn[disabled]:hover {
    background: var(--fcgc-cream);
    color: var(--fcgc-ink);
}

.fcgc-error {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fcgc-error-on-ink);
    padding-top: 0.625rem;
}

.fcgc-error:empty {
    display: none;
}

/* Applied state: the card becomes a fact of the order. */
.fcgc-applied {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fcgc-rise 180ms var(--fcgc-ease) both;
}

.fcgc-applied-code {
    display: block;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    color: var(--fcgc-cream);
    padding-top: 0.375rem;
}

.fcgc-applied-amount {
    font-size: 0.8125rem;
    color: rgba(251, 250, 247, 0.7);
}

.fcgc-remove {
    appearance: none;
    position: relative;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 160ms var(--fcgc-ease);
}

.fcgc-remove:hover {
    color: var(--fcgc-cream);
}

.fcgc-remove:focus-visible {
    outline: 2px solid var(--fcgc-cream);
    outline-offset: 2px;
    border-radius: 2px;
}

@keyframes fcgc-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Checkout: gift delivery fields.
   Light, quiet, sits in the form flow. Real labels, not placeholder-as-label.
   --------------------------------------------------------------------------- */

.fcgc-recipient {
    border: 1px solid var(--fcgc-line);
    border-radius: var(--fcgc-radius);
    padding: 1.25rem;
    margin-top: 1.25rem;
    background: var(--fcgc-paper);
}

.fcgc-recipient-head {
    margin-bottom: 1rem;
}

.fcgc-recipient-title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    color: var(--fcgc-ink);
}

.fcgc-recipient-note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fcgc-muted);
    margin: 0.375rem 0 0;
    max-width: 60ch;
}

.fcgc-field {
    margin-bottom: 0.875rem;
}

.fcgc-field:last-child {
    margin-bottom: 0;
}

.fcgc-field label {
    color: var(--fcgc-muted);
    margin-bottom: 0.375rem;
}

.fcgc-input,
.fcgc-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.6875rem 0.875rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--fcgc-ink);
    background: var(--fcgc-paper);
    border: 1px solid var(--fcgc-line);
    border-radius: var(--fcgc-radius);
    transition: border-color 160ms var(--fcgc-ease);
}

.fcgc-textarea {
    min-height: 88px;
    line-height: 1.5;
    resize: vertical;
}

.fcgc-input::placeholder,
.fcgc-textarea::placeholder {
    color: var(--fcgc-muted);
}

.fcgc-input:hover,
.fcgc-textarea:hover {
    border-color: var(--fcgc-line-strong);
}

.fcgc-input:focus-visible,
.fcgc-textarea:focus-visible {
    outline: 2px solid var(--fcgc-ink);
    outline-offset: 2px;
    border-color: transparent;
}

.fcgc-counter {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--fcgc-muted);
    padding-top: 0.375rem;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Balance check page.

   The signature: the card IS the interface. The code is typed onto the face where
   the code is printed, and the card turns over to answer. The same object the
   customer met in the email, at checkout, and on the product page, now doing a job.
   It rests on a stone band (the same stone the product artwork sits on) so it lies
   on a surface instead of floating in a white void.
   --------------------------------------------------------------------------- */

.fcgc-balance {
    --fcgc-stone: #efece7;

    /* Break out of the theme's content column: the surface should reach the edges. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(3.5rem, 9vw, 7rem);
    background: var(--fcgc-stone);
}

.fcgc-balance-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 34rem;
    margin: 0 auto;
}

/* The title lives on the surface, above the card. The theme prints its own copy in the
   content column above us; we hide that one so there is still exactly one h1 on the page.
   :has() does the work with no flash of the title in the wrong place; balance.js repeats
   the hide as a fallback for anything that does not support it. */
article:has(> .fcgc-balance) > h1,
main:has(> .fcgc-balance) > h1,
.entry-content:has(> .fcgc-balance) > h1 {
    display: none;
}

.fcgc-balance-title {
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    text-align: center;
    text-wrap: balance;
    color: var(--fcgc-ink);
}

/* The card. Payment-card proportions are a floor, not a cage: it grows with content. */
.fcgc-card {
    width: 100%;
    background: var(--fcgc-ink);
    color: var(--fcgc-cream);
    border-radius: 14px;
    padding: clamp(1.75rem, 5vw, 2.5rem);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.2);
}

.fcgc-card-mark {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--fcgc-cream);
    margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
}

.fcgc-label-on-ink {
    color: rgba(251, 250, 247, 0.62);
}

/* Fields are engraved into the card, not boxes dropped on top of it. */
.fcgc-engraved {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.25rem 0 0.625rem;
    font: inherit;
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fcgc-cream);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(251, 250, 247, 0.3);
    border-radius: 0;
    transition: border-color 160ms var(--fcgc-ease);
}

.fcgc-engraved-sm {
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* 0.55 is the floor here: at 0.42 the placeholder measured 3.82:1 against the card,
   under the 4.5 bar. Placeholders get the same contrast as body text, not less. */
.fcgc-engraved::placeholder {
    color: rgba(251, 250, 247, 0.55);
}

.fcgc-engraved:hover {
    border-bottom-color: rgba(251, 250, 247, 0.5);
}

.fcgc-engraved:focus,
.fcgc-engraved:focus-visible {
    outline: none;
    border-bottom-color: var(--fcgc-cream);
    box-shadow: 0 1px 0 0 var(--fcgc-cream);
}

.fcgc-balance-form .fcgc-field {
    margin-bottom: 1.75rem;
}

.fcgc-balance-form .fcgc-btn {
    width: 100%;
}

/* The reverse of the card: the answer. */
.fcgc-bc-result {
    display: block;
}

.fcgc-bc-amount {
    display: block;
    font-size: clamp(3rem, 9vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--fcgc-cream);
    margin-top: 0.75rem;
}

.fcgc-bc-meta {
    display: block;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(251, 250, 247, 0.72);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(251, 250, 247, 0.18);
    max-width: 40ch;
}

/* Knowing the balance is not the goal; spending it is. */
.fcgc-bc-cta {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fcgc-cream);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(251, 250, 247, 0.45);
    transition: text-decoration-color 160ms var(--fcgc-ease);
}

.fcgc-bc-cta:hover {
    color: var(--fcgc-cream);
    text-decoration-color: var(--fcgc-cream);
}

.fcgc-bc-cta:focus-visible {
    outline: 2px solid var(--fcgc-cream);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Errors sit on the face, above the fields being corrected. */
.fcgc-bc-error {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fcgc-error-on-ink);
    background: rgba(240, 184, 178, 0.08);
    border: 1px solid rgba(240, 184, 178, 0.35);
    border-radius: var(--fcgc-radius);
    padding: 0.75rem 0.875rem;
    margin: 0 0 1.75rem;
}

/* balance.js moves focus to whichever answer came back, so a screen reader reads it
   instead of dumping the user back at the top of the document. These regions are
   tabindex="-1": no keyboard user can tab to them, so a focus ring communicates
   nothing. The interactive control inside keeps its own. */
.fcgc-bc-result:focus,
.fcgc-bc-result:focus-visible,
.fcgc-bc-error:focus,
.fcgc-bc-error:focus-visible {
    outline: none;
}

.fcgc-balance-note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--fcgc-muted);
    text-align: center;
    max-width: 42ch;
    margin: 1.75rem auto 0;
    text-wrap: pretty;
}

.fcgc-again {
    appearance: none;
    position: relative;
    background: none;
    border: 0;
    margin: 1.75rem 0 0;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--fcgc-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 160ms var(--fcgc-ease);
}

.fcgc-again:hover {
    color: var(--fcgc-ink);
}

.fcgc-again:focus-visible {
    outline: 2px solid var(--fcgc-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.fcgc-again::before {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

/* The one orchestrated moment: the card turns over to show the answer. It has two
   sides in the world, so it earns the turn. Once, on arrival, never on idle. */
@keyframes fcgc-turn {
    from { transform: perspective(1200px) rotateY(-14deg) translateY(6px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.fcgc-balance[data-answered="1"] .fcgc-card {
    animation: fcgc-turn 520ms var(--fcgc-ease) both;
    transform-origin: 50% 50%;
}

/* ---------------------------------------------------------------------------
   Narrow screens: most gift buying happens on a phone. Stack the row so the code
   is never clipped and both targets run the full width.
   --------------------------------------------------------------------------- */

@media (max-width: 30rem) {
    .fcgc-apply-row {
        flex-wrap: wrap;
    }

    .fcgc-code-input,
    .fcgc-apply-row .fcgc-btn {
        flex: 1 1 100%;
    }

    .fcgc-applied {
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Host defence.
   FluentCart's checkout stylesheet styles bare `button` elements (slate fill, a
   white gradient overlay, its own padding and font stack) and the Everflyht child
   theme leans on !important. Both outrank a single class, so our controls need
   an explicit reset. Scoped to .fcgc-* only: nothing here can touch the host.
   --------------------------------------------------------------------------- */

.fcgc-checkout-box .fcgc-toggle,
.fcgc-checkout-box .fcgc-remove,
.fcgc-checkout-box .fcgc-btn,
.fcgc-balance .fcgc-btn {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--fcgc-font, inherit) !important;
    line-height: 1 !important;
    width: auto;
    min-width: 0;
}

.fcgc-checkout-box .fcgc-toggle,
.fcgc-checkout-box .fcgc-remove {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.fcgc-checkout-box .fcgc-toggle {
    color: var(--fcgc-cream) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.fcgc-checkout-box .fcgc-remove {
    color: rgba(251, 250, 247, 0.7) !important;
    font-size: 0.75rem !important;
}

.fcgc-checkout-box .fcgc-remove:hover {
    color: var(--fcgc-cream) !important;
}

.fcgc-checkout-box .fcgc-btn {
    background-color: var(--fcgc-cream) !important;
    color: var(--fcgc-ink) !important;
    border: 1px solid var(--fcgc-cream) !important;
    border-radius: var(--fcgc-radius) !important;
    padding: 0 1.125rem !important;
    min-height: 44px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.fcgc-checkout-box .fcgc-btn:hover:not([disabled]) {
    background-color: transparent !important;
    color: var(--fcgc-cream) !important;
}

.fcgc-balance .fcgc-btn {
    background-color: var(--fcgc-cream) !important;
    color: var(--fcgc-ink) !important;
    border: 1px solid var(--fcgc-cream) !important;
    border-radius: var(--fcgc-radius) !important;
    padding: 0 1.5rem !important;
    min-height: 48px !important;
    width: 100% !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.fcgc-balance .fcgc-btn:hover:not([disabled]) {
    background-color: transparent !important;
    color: var(--fcgc-cream) !important;
}

/* The engraved fields: the host themes bare inputs, and a box would break the card. */
.fcgc-balance .fcgc-engraved {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--fcgc-cream) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(251, 250, 247, 0.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--fcgc-font, inherit) !important;
    padding: 0.25rem 0 0.625rem !important;
    height: auto !important;
}

.fcgc-balance .fcgc-engraved:focus,
.fcgc-balance .fcgc-engraved:focus-visible {
    outline: none !important;
    border-bottom-color: var(--fcgc-cream) !important;
    box-shadow: 0 1px 0 0 var(--fcgc-cream) !important;
}

.fcgc-balance .fcgc-again {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    color: var(--fcgc-muted) !important;
    font-family: var(--fcgc-font, inherit) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.fcgc-balance .fcgc-again:hover {
    color: var(--fcgc-ink) !important;
}

/* Inputs: the host also themes bare inputs on checkout. */
.fcgc-checkout-box .fcgc-code-input {
    background-color: rgba(251, 250, 247, 0.06) !important;
    color: var(--fcgc-cream) !important;
    border: 1px solid rgba(251, 250, 247, 0.28) !important;
    border-radius: var(--fcgc-radius) !important;
    font-family: var(--fcgc-font, inherit) !important;
    box-shadow: none !important;
}

.fcgc-checkout-box .fcgc-code-input:focus,
.fcgc-checkout-box .fcgc-code-input:focus-visible {
    border-color: transparent !important;
    background-color: rgba(251, 250, 247, 0.1) !important;
    outline: 2px solid var(--fcgc-cream) !important;
    outline-offset: 2px !important;
}

.fcgc-recipient .fcgc-input,
.fcgc-recipient .fcgc-textarea {
    font-family: var(--fcgc-font, inherit) !important;
    box-shadow: none !important;
    background-color: var(--fcgc-paper) !important;
    border: 1px solid var(--fcgc-line) !important;
    border-radius: var(--fcgc-radius) !important;
    color: var(--fcgc-ink) !important;
}

.fcgc-recipient .fcgc-input:focus,
.fcgc-recipient .fcgc-textarea:focus {
    border-color: transparent !important;
    outline: 2px solid var(--fcgc-ink) !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   Motion is state, never decoration. Honour the OS setting.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fcgc-checkout-box *,
    .fcgc-recipient *,
    .fcgc-balance * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .fcgc-apply {
        transition: none;
    }

    /* The card still arrives, it just does not turn: a crossfade, no rotation. */
    .fcgc-balance[data-answered="1"] .fcgc-card,
    .fcgc-balance .fcgc-card {
        animation: none !important;
        transform: none !important;
    }
}