/* =====================================================================
   wc-subscribe-save assets/css/frontend.css — "Centered Crest" ledger
   Pairs with plugin-widget-markup.html. Flat, 1px hairlines, radius 0.
   ===================================================================== */

/* Panel container */
.wcss-subscription-box.wcss-purchase-tiles {
    background: #ffffff;
    border: 1px solid rgba(184, 150, 12, 0.45);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 14px;
    display: block;
}

/* Head */
.wcss-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(184, 150, 12, 0.28);
}
.wcss-purchase-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #1a3a2e; margin: 0;
}
.wcss-panel-note {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #8a7430;
}

/* Radio rows */
.wcss-tile {
    position: relative;
    display: grid; grid-template-columns: 20px 1fr auto;
    gap: 14px; align-items: center;
    padding: 18px 20px;
    background: transparent;
    border: 0; border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wcss-tile-subscribe { border-top: 1px solid rgba(184, 150, 12, 0.28); }
.wcss-tile:hover { background: #fcfaf1; border-color: rgba(184, 150, 12, 0.28); box-shadow: none; }
.wcss-tile.is-selected { background: #f6efd8; box-shadow: none; }

.wcss-tile-radio-input { position: absolute; opacity: 0; pointer-events: none; }
.wcss-tile-radio {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid #1a3a2e; background: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wcss-tile.is-selected .wcss-tile-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1a3a2e;
}

.wcss-tile-body { min-width: 0; display: block; }
.wcss-tile-title {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #1a3a2e; line-height: 1.3;
}
.wcss-tile-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px; color: #7d795f; margin-top: 3px; line-height: 1.45;
}

/* Pills — square, outlined, no fill */
.wcss-tile-discount-pill,
.wcss-discount-pill {
    display: inline-block;
    background: transparent;
    border: 1px solid #b8960c;
    color: #8a7430;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 0;
}

/* Row prices */
.wcss-tile-price {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 18px; font-weight: 700; color: #1a3a2e;
    text-align: right; line-height: 1.1; white-space: nowrap;
}
.wcss-tile-price-was {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 400;
    color: #a39d84; text-decoration: line-through; margin-top: 2px;
}

/* Details — indented under the subscribe row's text column */
.wcss-purchase-tiles .wcss-tile-details {
    padding: 2px 20px 20px 54px;
    border: 0; border-radius: 0; background: transparent;
    box-shadow: none; margin: 0;
}
.wcss-purchase-tiles.wcss-collapsed .wcss-tile-details { display: none; }

.wcss-frequency-selector label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #8a8267; margin: 8px 0 6px;
}
.wcss-frequency-dropdown {
    width: 100%; padding: 11px 14px;
    border: 1px solid #c9b97a; border-radius: 0;
    background: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; font-weight: 600; color: #1a3a2e;
    appearance: auto; cursor: pointer;
    transition: border-color 0.15s ease;
}
.wcss-frequency-dropdown:hover,
.wcss-frequency-dropdown:focus {
    border-color: #1a3a2e; outline: 2px solid rgba(26, 58, 46, 0.25); box-shadow: none;
}

/* Ledger */
.wcss-subscription-pricing {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(184, 150, 12, 0.22);
}
.wcss-ledger-row { display: flex; align-items: baseline; padding: 3px 0; }
.wcss-ledger-label { font-family: 'Inter', sans-serif; font-size: 12.5px; color: #7d795f; }
.wcss-leader {
    flex: 1; margin: 0 8px;
    border-bottom: 1px dotted #d6c99a;
    transform: translateY(-3px);
}
.wcss-leader-strong { border-bottom-color: #b8960c; transform: translateY(-4px); }
.wcss-ledger-value { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #1a3a2e; }
.wcss-ledger-per-was { font-weight: 400; color: #a39d84; text-decoration: line-through; margin-left: 4px; }
.wcss-ledger-save { color: #8a7430; }

.wcss-ledger-total { padding: 8px 0 0; margin-top: 6px; border-top: 1px solid rgba(184, 150, 12, 0.22); }
.wcss-subscription-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #1a3a2e;
}
.wcss-price-display { display: flex; align-items: baseline; gap: 8px; }
.wcss-price-discounted {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 21px; font-weight: 700; color: #1a3a2e;
}
.wcss-price-original {
    font-family: 'Inter', sans-serif;
    font-size: 12px; color: #a39d84; text-decoration: line-through;
}

.wcss-price-breakdown { margin: 7px 0 0; }
.wcss-price-breakdown small {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; color: #8a8267; line-height: 1.5;
}

/* Benefits — single wrapped line, no icon circles */
.wcss-benefits-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.wcss-benefit { font-family: 'Inter', sans-serif; font-size: 11.5px; color: #2a5d3a; }
.wcss-check { color: #b8960c; }

/* Footer — single CTA slot */
.wcss-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(184, 150, 12, 0.28);
    background: #fcfaf1;
}
.wcss-cta-button.wcss-subscribe-button {
    width: 100%;
    background: #1a3a2e; color: #fff9e6 !important;
    border: 1px solid #1a3a2e; border-radius: 999px; /* owner call: keep CTAs pill-shaped */
    padding: 16px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer; box-shadow: none;
    transition: background 0.15s ease;
}
.wcss-cta-button.wcss-subscribe-button:hover {
    background: #0f2a1f; transform: none; box-shadow: none;
}

/* CTA swap: subscribe selected (default) shows the subscribe button;
   .wcss-collapsed (one-time) shows the relocated qty + add-to-cart. */
.wcss-onetime-slot { display: none; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.wcss-purchase-tiles.wcss-collapsed .wcss-subscribe-button { display: none !important; }
.wcss-purchase-tiles.wcss-collapsed .wcss-onetime-slot { display: flex; }

/* Mobile */
@media (max-width: 600px) {
    .wcss-tile { grid-template-columns: 16px 1fr; padding: 14px 16px; }
    .wcss-tile-price { grid-column: 1 / -1; text-align: left; margin-left: 30px; }
    .wcss-purchase-tiles .wcss-tile-details { padding-left: 16px; }
    .wcss-panel-head, .wcss-panel-footer { padding-left: 16px; padding-right: 16px; }

    /* The wishlist + qty + add-to-cart row is wider than a phone screen;
       wrap it: wishlist and qty share the first line, the add-to-cart
       pill drops to its own full-width line. Applies both inside the
       widget slot (1kg) and in the native layout (other sizes). */
    .wcss-subscription-box,
    .wcss-purchase-tiles,
    .wcss-panel-footer,
    .wcss-onetime-slot { max-width: 100%; min-width: 0; }
    .wcss-onetime-slot,
    .variations_form.wcss-init .woocommerce-variation-add-to-cart {
        flex-wrap: wrap;
    }
    .wcss-onetime-slot .hvb-wl-btn-product,
    .variations_form.wcss-init .woocommerce-variation-add-to-cart .hvb-wl-btn-product {
        flex: 1 1 auto;
        min-width: 0;
    }
    .wcss-onetime-slot .quantity,
    .variations_form.wcss-init .woocommerce-variation-add-to-cart .quantity {
        flex: 0 0 auto;
    }
    .wcss-onetime-slot .single_add_to_cart_button,
    .variations_form.wcss-init .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        flex: 1 1 100%;
        order: 3;
        min-width: 0;
    }
}

/* =====================================================================
   PRESERVED PRODUCTION RULES (not part of the design handoff)
   ===================================================================== */

/* Hide subscription box for variable products until variation is selected */
.variations_form .wcss-subscription-box { display: none; }
.variations_form.wcss-variation-found .wcss-subscription-box { display: block; }

/* Hide default add to cart when subscription selected (legacy hook) */
.wcss-hide-default-button .single_add_to_cart_button { display: none !important; }

/* AJAX subscribe button states — flat versions of the old spinner */
.wcss-cta-button:disabled { opacity: 0.7; cursor: not-allowed; }
.wcss-cta-button.loading { position: relative; color: transparent !important; }
.wcss-cta-button.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid #fff9e6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wcss-spin 0.8s linear infinite;
}
@keyframes wcss-spin { to { transform: rotate(360deg); } }
.wcss-cta-button.success { background: #2a5d3a !important; }
.wcss-cta-button.wcss-view-cart-button {
    background: #b8960c !important;
    border-color: #b8960c !important;
    color: #fff9e6 !important;
    cursor: pointer;
}
.wcss-cta-button.wcss-view-cart-button:hover { background: #8a7430 !important; }

/* Cart item styles */
.woocommerce-cart-form .cart_item .wcss-subscription-info {
    font-size: 13px;
    color: #495057;
    margin-top: 5px;
}
.woocommerce-cart-form .cart_item .wcss-subscription-badge {
    display: inline-block;
    background: #2a5d3a;
    color: #fff;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 5px;
}

/* No flash-of-unstyled-controls on variable products: qty, Add to Cart,
   and the wishlist button stay hidden until a variation is selected
   (.wcss-variation-found). Applies before any JS runs. Variable-product
   purchase already requires JS in stock WooCommerce, so this hides
   nothing that would otherwise be functional. */
.variations_form:not(.wcss-init) .quantity,
.variations_form:not(.wcss-init) .single_add_to_cart_button,
.variations_form:not(.wcss-init) .hvb-wl-btn-product,
.garuda-sp-summary:has(.variations_form:not(.wcss-init)) .hvb-wl-btn-product {
    display: none !important;
}

/* Native (non-1kg) purchase row: qty + Add to Cart + wishlist share one
   aligned flex row instead of inline-wrapping */
.variations_form.wcss-init .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}