/**
 * CheckoutWC customizations for Cult + King.
 *
 * This was previously maintained by hand in CheckoutWC -> Design -> Advanced -> Custom CSS,
 * which is not version controlled and had no history. It now ships with the plugin; that box
 * should be left empty. If a rule stops working after a CheckoutWC update, its history is in
 * git rather than gone.
 *
 * Loaded site-wide, not just on checkout, because the side cart, cart icon shortcode and the
 * login/product modals all appear on ordinary pages -- see ife_cui_enqueue_styles(), which
 * also makes this depend on CheckoutWC's own stylesheet wherever that is present, so these
 * overrides always win the cascade rather than relying on !important alone.
 */

/* ==========================================================================
   Panel & heading overrides
   ========================================================================== */

.cfw-panel h3 {
    display: none !important;
}

.woocommerce .checkout h3,
.woocommerce h2,
h2 {
    display: block !important;
    color: black;
    font-size: 20px;
    font-weight: 400;
}

/* ==========================================================================
   Buttons, inputs & controls
   ========================================================================== */

/* Place order button */
.cfw-place-order-wrap button {
    color: white !important;
}

/* Select arrow fix */
.select-arrow {
    display: none !important;
}

/* Floatable label padding */
.checkoutwc .form-row label.cfw-floatable-label {
    padding: 0 2.16em;
}

/* Radio button resets */
#shipping_method input[type="radio"],
.input-radio {
    appearance: unset;
}

/* Payment method radio alignment */
ul.payment_methods li[class*="payment_method"] input[name="payment_method"] {
    margin: 0 10px 0 5px;
    float: none;
}

/* Accordion label padding */
.cfw-accordion .cfw-radio-reveal-label {
    padding: 0 15px !important;
}

/* Accordion content font size */
.cfw-accordion .cfw-radio-reveal-content p {
    font-size: inherit !important;
}

/* ==========================================================================
   Side cart
   ========================================================================== */

/* Cart icon shortcode (side cart trigger) */
.cfw_cart_icon_shortcode {
    --cfw-side-cart-icon-color: #ffffff !important;
    --cfw-side-cart-icon-width: 20px;
    --cfw-side-cart-icon-text-color: #fff !important;
}

/* Side cart close button */
.cfw-side-cart-close-btn svg path {
    stroke: #fff !important;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */

/* Totals */
.cfw-totals-list table tr.order-total {
    color: #fff;
}

/* Headings, review pane, footer */
body.checkout-wc form h1,
body.checkout-wc h2,
body.checkout-wc h3,
body.checkout-wc h4,
main.checkoutwc form h1,
main.checkoutwc h2,
main.checkoutwc h3,
main.checkoutwc h4,
.woocommerce .checkout h3,
.woocommerce h2,
h2,
#cfw-totals-list table tr.order-total,
.cfw-review-pane li .cfw-review-pane-content,
#cfw-footer {
    color: #fff !important;
}

/* Review pane links */
.cfw-review-pane li .cfw-review-pane-link a,
.cfw-review-pane li .cfw-review-pane-label {
    color: #ddd9d9;
}

/* Quantity stepper SVG fill */
.cfw-quantity-stepper .cfw-quantity-stepper-btn-minus svg,
.cfw-quantity-stepper .cfw-quantity-stepper-btn-plus svg,
#cfw-side-cart .cfw-quantity-stepper .cfw-quantity-stepper-btn-minus svg,
#cfw-side-cart .cfw-quantity-stepper .cfw-quantity-stepper-btn-plus svg {
    fill: #fff;
}

/* ==========================================================================
   Light-background areas -- force dark text
   ========================================================================== */

/* Payment methods & billing toggle */
.cfw-payment-methods-wrap label,
.cfw-payment-methods-wrap p,
#cfw-shipping-same-billing label,
#cfw-shipping-same-billing p {
    color: #000 !important;
}

/* Stripe card form */
.p-CardForm .Label {
    color: #000 !important;
}

.p-Input {
    background-color: #fff !important;
}

/* Modal containers */
.cfw-modal-container h4,
.cfw-modal-container .variations,
.cfw-modal-container .cfw-product-form-modal-title,
.cfw-modal-container .cfw-product-form-modal-price,
#cfw_login_modal_form,
#cfw_login_modal_form h3 {
    color: #000 !important;
}

/* Terms & conditions modal (white modal background) */
.cfw-modal:has( > h1 ),
.cfw-modal:has( > h1 ) *:not( a ) {
    color: #000 !important;
}

/* ==========================================================================
   Mobile: order summary dropdown
   ========================================================================== */

@media (max-width: 991.98px) {
    #cfw-cart-summary #cfw-cart-summary-content,
    #cfw-cart-summary #cfw-cart-summary-totals,
    #cfw-cart-summary #cfw-cart-summary-totals .order-total,
    #cfw-cart-summary .cfw-quantity-stepper a,
    #cfw-cart-summary .cfw-quantity-stepper button,
    #cfw-cart-summary .cfw-quantity-stepper svg,
    #cfw-cart-summary .cfw-quantity-stepper .cfw-quantity-stepper-value-label {
        color: #000 !important;
        fill: #000;
    }
}

/* ==========================================================================
   Advanced Coupons -- store credit redeem form
   --------------------------------------------------------------------------
   Advanced Coupons ships the accordion with light-theme chrome (#f5f5f5 header,
   #fcfcfc panel) that clashes with the dark cart summary. This restyles it to match
   CheckoutWC's own "Have a promo code? Click here." affordance.

   Every rule is scoped to BOTH mounts:

     #cfw-cart-summary-coupons  -- CheckoutWC's own coupon module, in the order summary
     #ife-store-credit-copy     -- the copy ife-checkout-ui.php mirrors into CheckoutWC's
                                   mobile "Your Cart" summary

   Keep both in the :is() list on every selector. Scoping a rule to the first alone --
   how this started life, before the mobile copy existed -- silently leaves the mobile
   form with the plugin's default light chrome.

   Panel colours deliberately use `inherit`, because the two mounts sit on different
   backgrounds: CheckoutWC renders the order summary light (#fafafa) on mobile, while the
   "Your Cart" summary follows the site's dark theme.
   ========================================================================== */

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block {
    margin: .35em 0 0;
    font-size: inherit;
}

/* Strip the plugin's light-theme chrome */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion:last-child,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion-inner {
    background: transparent;
    border: 0;
}

/* Toggle styled like "Have a promo code? Click here." */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion > h3 {
    display: flex !important;
    align-items: center;
    gap: .4em;
    margin: 0;
    padding: .25em 0;
    background: transparent;
    border: 0;
    color: var( --cfw-cart-summary-link-color, #e7a83d ) !important;
    font-family: var( --cfw-body-font-family );
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion > h3:hover {
    text-decoration: underline;
}

/* Swap the plugin's dark caret image for a themed chevron */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion > h3 .caret {
    top: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion > h3 .caret img {
    display: none;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion > h3 .caret::after {
    content: "";
    width: .45em;
    height: .45em;
    margin-bottom: .15em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate( -45deg );
    transition: transform .25s ease;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion.show > h3 .caret::after {
    margin-bottom: 0;
    transform: rotate( 45deg );
}

/* The plugin sets an inline max-height on open; let the panel size itself so the
   "Please enter a valid price" message isn't clipped when it's appended. */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion.show .acfw-accordion-inner {
    max-height: none !important;
}

/* Panel content */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-accordion-content {
    padding: .8em 0 .2em;
    font-size: 1em;
    color: inherit;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-store-credit-user-balance,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-store-credit-instructions {
    margin: 0 0 .5em;
    color: inherit;
    line-height: 1.45;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-store-credit-user-balance strong,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-store-credit-user-balance .woocommerce-Price-amount {
    color: inherit;
    font-weight: 600;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-checkout-ui-block .acfw-store-credit-instructions {
    font-size: .9em;
    opacity: .75;
}

/* Amount + Apply on one row, matching the promo code row */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5em;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field > p.form-row {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field > p.form-row:first-child {
    flex: 1 1 8em;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field > p.form-row:last-child {
    flex: 0 0 auto;
}

/* Both labels are empty and only add height */
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field label {
    display: none !important;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field input.input-text {
    width: 100%;
    height: auto;
    margin: 0;
    padding: .82em;
    font-size: 1em;
    line-height: normal;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field button.button,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field button.button.alt {
    width: auto;
    min-width: 5.5em;
    height: 100%;
    margin: 0;
    padding: .82em 1em;
    background: var( --cfw-buttons-secondary-background-color, #999 ) !important;
    background-image: none !important;
    border: 1px solid var( --cfw-buttons-secondary-background-color, #999 ) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: var( --cfw-buttons-secondary-text-color, #fff ) !important;
    font-size: 1em;
    font-weight: 400;
    line-height: normal;
    text-transform: none;
    transition: all .1s ease-in-out;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field button.button:hover,
:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field button.button.alt:hover {
    background: var( --cfw-buttons-secondary-hover-background-color, #666 ) !important;
    border-color: var( --cfw-buttons-secondary-hover-background-color, #666 ) !important;
    color: var( --cfw-buttons-secondary-hover-text-color, #fff ) !important;
}

:is( #cfw-cart-summary-coupons, #ife-store-credit-copy ) .acfw-redeem-store-credit-form-field p.invalid-message {
    flex: 1 0 100%;
    margin: .35em 0 0;
    color: #e2401c;
    font-size: .85em;
}

/* Totals rows once credit is applied.
   Both totals containers are listed for the same reason as the two mounts above: the mobile
   "Your Cart" summary renders its own totals into #cfw-mobile-cart-summary-totals, so rules
   scoped to #cfw-cart-summary-totals alone never reach the applied-credit row there. */
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-store-credits-balance-row,
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-store-credits-balance-row th,
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-store-credits-balance-row td,
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-order-total,
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-order-total th,
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-order-total td {
    color: inherit;
}

:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-store-credits-balance-row a.acfw-remove-store-credits {
    margin-left: .4em;
    color: var( --cfw-cart-summary-link-color, #e7a83d );
    font-size: .85em;
    text-decoration: none;
    white-space: nowrap;
}

/* Optional: ACFW prints its own "Order Total" (pre-credit) row above the credit row.
   Uncomment to hide it if you find it redundant next to Total.
:is( #cfw-cart-summary-totals, #cfw-mobile-cart-summary-totals ) tr.acfw-order-total { display: none; }
*/