/*
Frontend styles for Lean Cart Share and Save.

Table of contents:
==================
0. Design tokens
1. Button wrapper
   1a. Base
   1b. Position modifiers (default, after_table, before_totals)
   1c. WooCommerce compat overrides
   1d. States
2. Popup overlay and modal
3. Form elements
4. Responsive design
*/

/* 0. Design tokens
================================================== */

/*
 * Spacing uses --lex-space-* from lex-tokens.css (loaded as a dep in class-assets-manager.php).
 * Mapping: xs=--lex-space-1(4px), sm=--lex-space-2(8px), md=--lex-space-3(12px),
 *          lg=--lex-space-4(16px), xl=--lex-space-6(24px)
 *
 * Colors use --wp-color-* primitives from lex-tokens.css directly.
 * Only tokens with no lex/wp primitive equivalent are defined below.
 */
:root {
    /* Popup width scale */
    --lean-csns-popup-sm: 320px;
    --lean-csns-popup-md: 480px;
    --lean-csns-popup-lg: 640px;

    /* Brand — references lex semantic brand token so all plugins stay in sync */
    --lean-csns-brand:               var(--lex-color-brand-primary);
    --lean-csns-brand-light:         var(--lex-color-brand-primary-light);

    /* Popup shell values — no primitive equivalent */
    --lean-csns-popup-overlay-bg:    rgba(0, 0, 0, 0.5);
    --lean-csns-popup-shadow:        0 10px 30px rgba(0, 0, 0, 0.3);
    --lean-csns-popup-hover-overlay: rgba(0, 0, 0, 0.06);

    /* Transition — 12+ uses across both CSS files */
    --lean-csns-transition:          var(--lex-transition-fast);
}

/* 1. Button wrapper
================================================== */

/* 1a. Base
   ---------------------------------------- */

.lean-csns-buttons-wrapper {
    display: inline-flex;
    gap: var(--lex-space-2);
    text-align: left;
}

/* 1b. Position modifiers
   ----------------------------------------
   The wrapper always carries one position class driven by the admin setting:
     lean-csns-position--default        Inline in the coupon row (shortcode) / after items (block)
     lean-csns-position--after_table    Below the cart table (shortcode) / after items (block)
     lean-csns-position--before_totals  First child inside the totals container (both)
*/

/* default: left margin separates the wrapper from the coupon form in the
   shortcode cart. Block cart has no coupon form so the margin is removed there. */
.lean-csns-buttons-wrapper.lean-csns-position--default {
    margin: 0 0 0 var(--lex-space-2);
}
.wp-block-woocommerce-cart-items-block .lean-csns-buttons-wrapper.lean-csns-position--default {
    margin-left: 0;
}

/* before_totals: buttons render as the first child of the totals container and
   need space below before the totals content.
   .cart_totals          = shortcode cart (woocommerce_before_cart_totals hook)
   .wp-block-woocommerce-cart-totals-block = block cart (prepended via JS) */
.cart_totals .lean-csns-buttons-wrapper,
.wp-block-woocommerce-cart-totals-block .lean-csns-buttons-wrapper {
    margin-bottom: var(--lex-space-4);
}

/* 1c. WooCommerce compat overrides
   ----------------------------------------
   These rules exist solely to win specificity battles against WC's own CSS.
   Do not add cosmetic rules here. */

/* WC shortcode cart: td.actions applies margin-left to all .button at 0,4,2.
   Adding our wrapper class into the same selector chain raises us to 0,5,2. */
.woocommerce table.cart td.actions .lean-csns-buttons-wrapper button,
.woocommerce-page table.cart td.actions .lean-csns-buttons-wrapper button,
.woocommerce-page #content table.cart td.actions .lean-csns-buttons-wrapper button {
    margin-left: 0;
}

/* WC FSE compat stylesheets (twenty-twenty-two.css, twenty-twenty-three.css) apply
   padding: .5rem 1rem and margin-bottom: 1rem to all td > button at 0,2,4.
   WC's own submit buttons escape via [type="submit"] at 0,3,1.
   Our type="button" buttons use their class in the same table path to reach 0,3,1. */
.woocommerce-page table.shop_table_responsive .lean-csns-share-btn,
.woocommerce-page table.shop_table_responsive .lean-csns-save-btn {
    /* padding: 1rem 2rem; */
    margin-bottom: 0;
}

/* 1d. States
   ---------------------------------------- */

/* Loading: class-based so WooCommerce button[disabled] styles never interfere. */
.lean-csns-buttons-wrapper button.lean-csns-is-loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* 2. Popup overlay and modal
================================================== */

.lean-csns-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--lean-csns-popup-overlay-bg);
    z-index: 999999;
    display: none;
}

.lean-csns-popup-overlay.is-open {
    display: block;
}

.lean-csns-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: var(--wp-color-white);
    border-radius: var(--lex-radius-sm);
    max-width: var(--lean-csns-popup-md); /* sm/md/lg via modifier classes below */
    width: 90%;
    z-index: 1000000;
    display: none;
    box-shadow: var(--lean-csns-popup-shadow);
}

.lean-csns-popup.is-open {
    display: block;
}

.lean-csns-popup--sm { max-width: var(--lean-csns-popup-sm); }
.lean-csns-popup--lg { max-width: var(--lean-csns-popup-lg); }

/* Pro popup: clip to rounded corners; no padding override needed — base has none */
.lean-csns-popup--pro {
    border-radius: var(--lex-radius-lg);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

/* Header — same layout for free and pro */
.lean-csns-pm-header {
    padding: var(--lex-space-3) var(--lex-space-4);
    border-bottom: 1px solid var(--wp-color-gray-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Body — same padding for free and pro */
.lean-csns-pm-body {
    padding: var(--lex-space-3) var(--lex-space-4) var(--lex-space-4);
}

.lean-csns-popup-title {
    margin: 0;
    font-size: var(--lex-font-size-lg);
    font-weight: 700;
    color: var(--wp-color-gray-90);
    line-height: 1.3;
}

/* all: unset strips any theme button styles; we own every pixel */
.lean-csns-close-popup {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: var(--lex-font-size-3xl);
    line-height: 1;
    color: var(--wp-color-gray-10);
    cursor: pointer;
    border-radius: var(--lex-radius-sm);
    -webkit-transition: color var(--lean-csns-transition), background-color var(--lean-csns-transition);
    transition: color var(--lean-csns-transition), background-color var(--lean-csns-transition);
}

.lean-csns-close-popup:hover {
    color: var(--wp-color-gray-50);
    background-color: var(--lean-csns-popup-hover-overlay);
}

.lean-csns-close-popup:focus-visible {
    outline: 2px solid var(--lex-color-apple-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.lean-csns-popup-content {
    text-align: left;
}

/* 3. Form elements
================================================== */

/* Scoped to :not(--pro) — pro popup manages its own input styles in pro-frontend.css */
.lean-csns-popup:not(.lean-csns-popup--pro) input[type="text"],
.lean-csns-popup:not(.lean-csns-popup--pro) input[type="url"] {
    width: 100%;
    padding: var(--lex-space-2);
    margin: var(--lex-space-2) 0;
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-xs);
    font-size: var(--lex-font-size-base);
    box-sizing: border-box;
}

.lean-csns-popup:not(.lean-csns-popup--pro) input[type="text"]:focus,
.lean-csns-popup:not(.lean-csns-popup--pro) input[type="url"]:focus {
    border-color: var(--lex-color-apple-blue);
    outline: none;
    box-shadow: 0 0 0 1px var(--lex-color-apple-blue);
}

.lean-csns-popup-buttons {
    text-align: right;
    margin-top: var(--lex-space-3);
}

.lean-csns-popup-buttons button {
    margin-left: var(--lex-space-2);
    padding: var(--lex-space-2) var(--lex-space-4);
    border: none;
    border-radius: var(--lex-radius-xs);
    cursor: pointer;
    font-size: var(--lex-font-size-base);
    -webkit-transition: background-color var(--lex-transition-base);
    transition: background-color var(--lex-transition-base);
}

.lean-csns-popup-buttons button[type="button"] {
    background: var(--lex-color-apple-blue);
    color: var(--wp-color-white);
}

.lean-csns-popup-buttons button[type="button"]:hover {
    background: var(--wp-color-blue-70);
}

/* lean-csns-free-close-btn and lean-csns-free-cancel-btn use the default blue — no override needed */

/* 4. Responsive design
================================================== */

@media (max-width: 480px) {
    .lean-csns-popup {
        width: 95%;
    }

    .lean-csns-popup-buttons {
        text-align: center;
    }

    .lean-csns-popup-buttons button {
        margin: var(--lex-space-1);
        display: block;
        width: 100%;
    }

    .lean-csns-buttons-wrapper button {
        display: block;
        width: 100%;
        margin: var(--lex-space-1) 0;
    }
}