/**
 * Nexcart Express Checkout Component Styles
 *
 * Loaded on every surface that renders the Express Checkout component
 * (product page, cart page, side cart, checkout page). Depends on
 * design tokens declared in nexcart-public.css.
 *
 * The PayPal button container has an explicit reserved min-height so
 * CLS stays at 0 while the PayPal SDK is loading.
 *
 * @package Nexcart
 */

/* ================================================================
   CONTAINER — clean flat card, no accent strip or heavy shadow
   ================================================================ */

.nexcart-express-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-3);
    padding: var(--nexcart-space-4) var(--nexcart-space-5);
    border-radius: var(--nexcart-radius-lg);
    background: var(--nexcart-bg-surface);
    border: 1px solid var(--nexcart-border-subtle);
    margin: var(--nexcart-space-3) 0;
    position: relative;
    box-shadow: var(--nexcart-shadow-subtle);
    animation: nexcart-express-entrance 0.4s var(--nexcart-ease) both;
}

/* Checkout-page variant: match the section-card aesthetic exactly.
   Target: 20px of visual space between the bottom of the rendered
   PayPal button and the bottom edge of the card. Three sources of
   slack get neutralised below so the 20px padding-bottom is the
   only contributor:
     (a) reserved min-height on the button's own container div (was
         45px; the SDK iframe actually renders at 40px, leaving ~5px
         of dead space at the bottom),
     (b) intrinsic bottom whitespace inside the paypal-button /
         venmo-button / apple-pay-button custom elements,
     (c) an occasional empty <paypal-messages> element the SDK may
         append when Pay Later is disabled for this placement.
*/
.nexcart-express-checkout--top {
    margin: 0 0 var(--nexcart-space-5);
    padding: var(--nexcart-space-6) var(--nexcart-space-7) var(--nexcart-space-5);
    gap: var(--nexcart-space-2);
    border-radius: var(--nexcart-radius-lg);
    border: 1px solid var(--nexcart-border);
    background: var(--nexcart-bg-surface);
    box-shadow: var(--nexcart-shadow-subtle);
}

.nexcart-express-checkout--top .nexcart-express-checkout-buttons {
    margin: 0;
    min-height: 40px;
}

/* (a) shrink the reserved button-container slots to the actual
   rendered button height, and zero out any trailing margin. */
.nexcart-express-checkout--top .nexcart-express-checkout-buttons > div[id^="nexcart-"] {
    min-height: 40px;
}

/* Dual-button compact row on desktop.
   When PayPal + one alternative wallet (Google Pay OR Apple Pay) are
   the only active slots, lay them out as a 2-column grid at ≥480px.
   Below that, fall through to the default flex-column stack so the
   buttons don't get squeezed on narrow viewports. When all three slots
   are rendered (edge case: merchants that explicitly enable every
   option) the grid is not activated and the stacked flow keeps them
   from landing in a cramped 3-across row. */
@media (min-width: 480px) {
    .nexcart-express-checkout--top
        .nexcart-express-checkout-buttons:has(> #nexcart-express-paypal):has(> #nexcart-express-googlepay):not(:has(> #nexcart-express-applepay)),
    .nexcart-express-checkout--top
        .nexcart-express-checkout-buttons:has(> #nexcart-express-paypal):has(> #nexcart-express-applepay):not(:has(> #nexcart-express-googlepay)),
    .nexcart-express-checkout--top
        .nexcart-express-checkout-buttons:has(> #nexcart-express-googlepay):has(> #nexcart-express-applepay):not(:has(> #nexcart-express-paypal)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--nexcart-space-2);
        row-gap: 0;
    }
}

.nexcart-express-checkout--top .nexcart-express-checkout-buttons > div[id^="nexcart-"]:last-child,
.nexcart-express-checkout--top .nexcart-express-checkout-buttons > div[id^="nexcart-"]:empty {
    margin-bottom: 0;
}

/* (b) neutralise intrinsic margins on the SDK custom elements. */
.nexcart-express-checkout--top paypal-button,
.nexcart-express-checkout--top venmo-button,
.nexcart-express-checkout--top apple-pay-button {
    margin-bottom: 0;
    min-height: 40px;
}

/* (c) hide any empty messaging container the SDK appends when
   Pay Later is not enabled for this placement. */
.nexcart-express-checkout--top .nexcart-paylater-message:empty,
.nexcart-express-checkout--top paypal-messages:empty {
    display: none;
}

@keyframes nexcart-express-entrance {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Header row: grid layout so the badge sits inline with the
   title, and the description wraps to its own row beneath. ---- */

.nexcart-express-checkout-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--nexcart-space-3);
    row-gap: 2px;
    align-items: center;
    padding-bottom: var(--nexcart-space-3);
    border-bottom: 1px solid var(--nexcart-border-subtle);
}

/* Lightning icon is demoted to a subtle accent glyph inline with
   the title, rather than a large filled square. */
.nexcart-express-checkout-icon {
    grid-row: 1;
    grid-column: 1;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--nexcart-accent);
    box-shadow: none;
    box-sizing: content-box;
    align-self: center;
}

/* Pass-through wrapper: exposes title + desc as direct grid items
   of the header so they can occupy their own rows/columns. */
.nexcart-express-checkout-header-text {
    display: contents;
}

.nexcart-express-checkout-title {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--nexcart-font-size-base);
    font-weight: var(--nexcart-font-weight-bold);
    color: var(--nexcart-text);
    line-height: 1.3;
    letter-spacing: -0.005em;
    min-width: 0;
}

.nexcart-express-checkout-title--inline {
    font-size: var(--nexcart-font-size-sm);
    text-align: center;
}

.nexcart-express-checkout-desc {
    grid-row: 2;
    grid-column: 2 / -1;
    font-size: var(--nexcart-font-size-sm);
    color: var(--nexcart-text-muted);
    line-height: 1.4;
}

/* ---- "Recommended" / "Fastest" badge pill — subtle, inline ---- */

.nexcart-express-checkout-badge {
    grid-row: 1;
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    background: var(--nexcart-featured-bg);
    color: var(--nexcart-featured-fg);
    border: 1px solid var(--nexcart-featured-border);
    border-radius: var(--nexcart-radius-pill);
    font-size: 10px;
    font-weight: var(--nexcart-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    align-self: center;
    justify-self: end;
    box-shadow: var(--nexcart-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.nexcart-express-checkout-badge svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ================================================================
   BUTTONS CONTAINER (reserved space, CLS 0)
   ================================================================ */

.nexcart-express-checkout-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-2);
    min-height: 52px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Each button target is reserved 45px height (matches the default
   PayPal Smart Button height) so the layout doesn't shift when the
   SDK injects the real iframes. All containers stretch to 100%. */
.nexcart-express-checkout-buttons > div[id^="nexcart-"],
.nexcart-express-checkout-buttons .nexcart-product-paypal-btn,
.nexcart-express-checkout-buttons .nexcart-product-googlepay-btn,
.nexcart-express-checkout-buttons .nexcart-product-applepay-btn {
    display: block;
    width: 100%;
    min-height: 45px;
    box-sizing: border-box;
}

.nexcart-express-checkout-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-2);
    pointer-events: none;
    z-index: 1;
}

.nexcart-express-checkout-skeleton-row {
    height: 45px;
    background: var(--nexcart-bg-surface-alt);
    border-radius: var(--nexcart-radius-md);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--nexcart-border-subtle);
}

.nexcart-express-checkout-skeleton-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 40%,
        rgba(255, 255, 255, 0.55) 60%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: nexcart-shimmer 1.6s infinite var(--nexcart-ease-standard);
}

/* When the SDK has rendered, JS adds .is-ready to the container. */
.nexcart-express-checkout-buttons.is-ready .nexcart-express-checkout-skeleton {
    display: none;
}

/* ================================================================
   PAYPAL SDK v6 CUSTOM ELEMENTS
   ------------------------------------------------------------------
   The Web SDK v6 renders <paypal-button>, <venmo-button>, and
   <apple-pay-button> custom elements. Without explicit styling they
   default to display: inline, which prevents them from filling
   their container (the button iframe ends up narrow and
   left-aligned). Forcing display: block + width: 100% + a locked
   min-height keeps each button perfectly fit inside its container
   on every surface — product, cart, side cart, checkout payment
   section, and the express checkout strip.
   ================================================================ */

paypal-button,
venmo-button,
apple-pay-button,
paypal-messages {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    box-sizing: border-box;
}

paypal-messages {
    min-height: 0;
}

/* Stack multiple buttons inside the same container with a tight
   vertical rhythm. Matches the PayPal Smart Button vertical layout
   spacing, without any horizontal overflow when the container
   becomes narrow (eg. inside a 360px side-cart drawer). */
.nexcart-express-checkout-buttons > div[id^="nexcart-"] > paypal-button + paypal-button,
.nexcart-express-checkout-buttons > div[id^="nexcart-"] > paypal-button + venmo-button,
.nexcart-express-checkout-buttons > div[id^="nexcart-"] > venmo-button + paypal-button {
    margin-top: var(--nexcart-space-2);
}

/* The PayPal SDK places multiple buttons as direct children of the
   container (not wrapped). Make each direct button child stretch to
   the full width of its container regardless of layout mode. */
#nexcart-paypal-button-container > paypal-button,
#nexcart-paypal-button-container > venmo-button,
#nexcart-cart-paypal-btn > paypal-button,
#nexcart-cart-paypal-btn > venmo-button,
[id^="nexcart-express-"] > paypal-button,
[id^="nexcart-express-"] > venmo-button,
[id^="nexcart-drawer-express-"] > paypal-button,
[id^="nexcart-drawer-express-"] > venmo-button,
[id^="nexcart-product-"] > paypal-button,
[id^="nexcart-product-"] > venmo-button {
    display: block;
    width: 100%;
}

/* Sibling buttons inside the same container need vertical spacing. */
#nexcart-paypal-button-container > paypal-button + *,
#nexcart-paypal-button-container > venmo-button + *,
#nexcart-cart-paypal-btn > paypal-button + *,
#nexcart-cart-paypal-btn > venmo-button + *,
[id^="nexcart-express-"] > paypal-button + *,
[id^="nexcart-express-"] > venmo-button + *,
[id^="nexcart-drawer-express-"] > paypal-button + *,
[id^="nexcart-drawer-express-"] > venmo-button + *,
[id^="nexcart-product-"] > paypal-button + *,
[id^="nexcart-product-"] > venmo-button + * {
    margin-top: var(--nexcart-space-2);
}

@media (prefers-color-scheme: dark) {
    .nexcart-express-checkout-skeleton-row::after {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%
        );
    }
}

/* ================================================================
   TRUST INDICATORS — security badges beneath the buttons
   ================================================================ */

.nexcart-express-checkout-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nexcart-space-5);
    padding-top: var(--nexcart-space-3);
    margin-top: var(--nexcart-space-1);
    border-top: 1px solid var(--nexcart-border-subtle);
    color: var(--nexcart-text-subtle);
    font-size: 11px;
    font-weight: var(--nexcart-font-weight-medium);
    line-height: 1;
    letter-spacing: 0.04em;
}

.nexcart-express-checkout-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.nexcart-express-checkout-trust-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.65;
}

/* ================================================================
   PAY LATER MESSAGING
   ================================================================ */

.nexcart-paylater-message {
    min-height: 24px;
    margin: var(--nexcart-space-2) 0;
}

/* ================================================================
   ERROR STATE — SDK failed to load
   ================================================================ */

.nexcart-express-checkout-error {
    display: flex;
    align-items: flex-start;
    gap: var(--nexcart-space-3);
    padding: var(--nexcart-space-3) var(--nexcart-space-4);
    background: var(--nexcart-warning-bg);
    border: 1px solid var(--nexcart-warning-border);
    border-radius: var(--nexcart-radius-md);
    color: var(--nexcart-warning-fg);
    font-size: var(--nexcart-font-size-sm);
}

.nexcart-express-checkout-error svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.nexcart-express-checkout-error-dismiss {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: var(--nexcart-font-size-lg);
    cursor: pointer;
    padding: 0 var(--nexcart-space-2);
    line-height: 1;
}

/* ================================================================
   DIVIDER ("or pay by card")
   ================================================================ */

.nexcart-express-divider {
    display: flex;
    align-items: center;
    gap: var(--nexcart-space-3);
    margin: var(--nexcart-space-5) 0;
    color: var(--nexcart-text-muted);
    font-size: var(--nexcart-font-size-xs);
    font-weight: var(--nexcart-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--nexcart-letter-spacing-wide);
}

.nexcart-express-divider::before,
.nexcart-express-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nexcart-border);
}

.nexcart-express-divider span {
    padding: 0 var(--nexcart-space-1);
    background: transparent;
    color: var(--nexcart-text-muted);
}

/* ================================================================
   PRODUCT-PAGE EXPRESS BUTTONS (reuses this stylesheet)
   ================================================================ */

.nexcart-product-smart-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--nexcart-space-2);
    min-height: 45px;
    margin-top: var(--nexcart-space-3);
    width: 100%;
    box-sizing: border-box;
}

.nexcart-product-smart-buttons > div[id^="nexcart-product-"] {
    display: block;
    width: 100%;
    min-height: 45px;
    box-sizing: border-box;
}

/* ================================================================
   RESPONSIVE — NARROW VIEWPORTS
   ================================================================ */

@media (max-width: 599px) {
    .nexcart-express-checkout {
        padding: var(--nexcart-space-3) var(--nexcart-space-4);
        gap: var(--nexcart-space-3);
    }

    .nexcart-express-checkout-icon {
        width: 14px;
        height: 14px;
    }

    .nexcart-express-checkout-title {
        font-size: var(--nexcart-font-size-sm);
    }

    .nexcart-express-checkout-desc {
        font-size: var(--nexcart-font-size-xs);
    }

    .nexcart-express-checkout-badge {
        font-size: 9px;
        padding: 2px 7px;
    }

    .nexcart-express-checkout-buttons {
        padding: 0;
    }

    .nexcart-express-checkout-skeleton {
        inset: 0;
    }

    .nexcart-express-checkout-trust {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--nexcart-space-3);
        font-size: 10px;
    }

    .nexcart-express-divider {
        margin: var(--nexcart-space-4) 0;
    }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .nexcart-express-checkout {
        animation: none;
    }

    .nexcart-express-checkout-skeleton-row::after {
        animation: none;
    }
}