/* =============================================================================
   CDTC Frontend — Offer Sections

   Covers #promo-foundation and #promo-adjustable.

   Semantic classes (.promo__image, .promo__content, .promo__badge,
   .offer_variations, .promo-price, .radio-input, .label, .atc-promo) are
   preserved from the original Kadence markup so any existing theme CSS
   targeting them continues to apply without changes.

   Layout was previously provided by Kadence block classes and inline style
   blocks scoped to hashed IDs. This file replaces that with CSS scoped to
   the plugin container IDs.

   Color values use Kadence global palette variables to stay in sync with the
   active theme palette:
     --global-palette1  Primary (teal) — borders (checked), price text
     --global-palette2  Secondary      — ATC button background
     --global-palette7  Subtle gray    — borders (default)
     --global-palette8  Light bg       — checked card tint
   ============================================================================= */

/* =============================================================================
   Section wrappers
   ============================================================================= */

#promo-foundation,
#promo-adjustable {
    padding-top: var(--global-kb-spacing-sm, 1.5rem);
    padding-bottom: var(--global-kb-spacing-sm, 1.5rem);
}

.cdtc-section__title {
    font-family: Quicksand, sans-serif;
    font-size: var(--global-kb-font-size-lg, 2rem);
    font-weight: 600;
    margin-bottom: 0;
    color: inherit;
}

.cdtc-section__intro {
    font-size: var(--global-kb-font-size-sm, 0.9rem);
    line-height: 1.4;
    margin-top: 8px;
    margin-bottom: 16px;
}

/* =============================================================================
   Cards stack
   ============================================================================= */

.cdtc-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: var(--global-kb-gap-sm, 1rem);
    -webkit-column-gap: var(--global-kb-gap-sm, 1rem);
       -moz-column-gap: var(--global-kb-gap-sm, 1rem);
            column-gap: var(--global-kb-gap-sm, 1rem);
    margin-bottom: 1rem;
}

/* =============================================================================
   Radio card
   The visible border is a ::before pseudo-element so it can use z-index: -1
   and allow the checked background tint to sit behind all card content.
   ============================================================================= */

.radio-input {
    position: relative;
}

.radio-input .label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 85%;
    padding: 0 2rem;
    cursor: pointer;
    height: 100%;
    position: relative;
}

/* Border ring — sits behind card content via z-index: -1 */
.radio-input .label::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 25px;
    border: 2px solid var(--global-palette7);
}

/* Checked state: palette1 border + light palette8 tint */
.radio-input .label:has(input:checked)::before {
    border: 2px solid var(--global-palette1);
    background-color: hsl(from var(--global-palette8) h s l / 0.3);
}

/* Hide the native radio dot — selection is communicated via the border ring */
.radio-input .label input[type="radio"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
}

/* =============================================================================
   Inner card layout: image | content  (badge is absolutely positioned)
   ============================================================================= */

.cdtc-offer-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 32px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5% 0;
    position: relative;
}

/* Image cell
   Background texture bundled at assets/images/product-bg-desat-light.jpg.
   Relative path resolves correctly from assets/css/ to assets/images/. */
.promo__image {
    aspect-ratio: 1 / 1;
    background-image: url('../images/product-bg-desat-light.jpg');
    background-size: cover;
    background-position: center center;
    border-radius: 16px;
    -webkit-box-shadow: inset 0 0 60px -15px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 0 60px -15px rgba(0, 0, 0, 0.2);
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 23.5%;
            flex: 0 0 23.5%;
    height: 100%;
}

.promo__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Content cell */
.promo__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 8px;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 0;
    padding-right: 10%;
    padding-bottom: 0;
    padding-left: 0;
}

.promo__content h3 {
    font-family: Quicksand, sans-serif;
    font-size: var(--global-kb-font-size-lg, 2rem);
    font-weight: 600;
    line-height: 1;
    margin: 0;
    color: var(--global-palette6);
}

.promo__content p {
    font-size: var(--global-kb-font-size-sm, 0.9rem);
    line-height: 1.3;
    margin: 0;
}

.promo-price {
    color: var(--global-palette1);
    font-weight: 600;
    margin: 0;
}

/* Badge — absolutely positioned outside the label's right edge.
   The label is width: 85%, so right: -80px floats the badge into the
   remaining 15% gutter to the right. */
.promo__badge {
    position: absolute;
    right: -80px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 6vw;
    min-width: 56px;
}

.cdtc-badge--free {
    display: block;
    width: 100%;
    height: auto;
}

/* =============================================================================
   Offer variations (height select + ATC button)
   Hidden until the radio card is selected.
   ============================================================================= */

.offer_variations {
    display: none;
    margin-bottom: 1.5rem;
}

.radio-input .label:has(input:checked) .offer_variations {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    row-gap: var(--global-kb-gap-sm, 1rem);
    -webkit-column-gap: var(--global-kb-gap-sm, 1rem);
       -moz-column-gap: var(--global-kb-gap-sm, 1rem);
            column-gap: var(--global-kb-gap-sm, 1rem);
}

.offer_variations > * {
    margin-top: 0;
    margin-bottom: 0;
}

#f-height {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}

.atc-promo {
    font-size: 14px;
    background-color: var(--global-palette2);
    width: 100%;
}

.atc-promo:hover {
    background-color: var(--global-palette1);
}

/* =============================================================================
   Mobile
   ============================================================================= */

@media (max-width: 767px) {
    .cdtc-section__title {
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .promo__badge {
        right: -48px;
        width: 10vw;
    }
}

/* =============================================================================
   Promo Banner (#cdtc-promo-banner)

   Horizontal layout desktop: badge image left, content right.
   Stacks vertically on tablet/mobile.
   Matches original Kadence kb-section-dir-horizontal kb-section-md-dir-vertical
   pattern.
   ============================================================================= */

#cdtc-promo-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--global-row-gutter-md, 2rem);
    padding: 2rem;
    margin-bottom: var(--global-kb-spacing-sm, 1.5rem);
}

#cdtc-promo-banner {
    border-top: 2px dashed rgba(251, 75, 67, 0.22);
    border-right: 2px dashed rgba(251, 75, 67, 0.22);
    border-bottom: 2px dashed rgba(251, 75, 67, 0.22);
    border-left: 2px dashed rgba(251, 75, 67, 0.22);
    border-radius: 16px;
}

.cdtc-banner__badge {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

/* Starburst badge. id="promoBadge" preserved from the original Kadence markup.
   Mask shape from assets/images/0000sale-mask.png — relative path resolves
   correctly from assets/css/ to assets/images/. */
.cdtc-banner__badge-shape {
    width: 100%;
    background: #FB4B43;
    color: white;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    aspect-ratio: 1 / 1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    mask-image: url('../images/0000sale-mask.png');
    -webkit-mask-image: url('../images/0000sale-mask.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);
    font-size: 24px;
    line-height: 1;
    padding: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.cdtc-banner__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0px;
}

.cdtc-banner__heading {
    font-family: Quicksand, sans-serif;
    font-size: var(--global-kb-font-size-lg, 2rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: inherit;
}

.cdtc-banner__body {
    font-size: var(--global-kb-font-size-sm, 0.9rem);
    line-height: 1.6;
    margin: 8px 0 16px;
}

.cdtc-banner__coupon-label {
    font-size: var(--global-kb-font-size-sm, 0.9rem);
    font-weight: 700;
    margin: 0;
    color: #fc4b43;
    text-transform: uppercase;
}

.cdtc-banner__coupon-btn {
    -ms-flex-item-align: start;
        align-self: flex-start;
    background-color: var(--global-palette1);
    font-size: 14px;
    margin-top: 16px;
}

.cdtc-banner__coupon-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Cart Page CSS */
.wc-block-components-totals-fees {
    font-weight: 600;
    color: rgb(77,185,77);
}

@media (max-width: 1024px) {
    #cdtc-promo-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    #cdtc-promo-banner .cdtc-banner__badge {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .cdtc-offer-card {
        display: -ms-grid;
        display: grid;
        grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
        grid-auto-rows: minmax(min-content, max-content);
        -ms-grid-columns: minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
    }

    .cdtc-banner__coupon-btn {
        width: 100%;
    }

    .cdtc-cards .radio-input .label {
        width: 100%;
    }

    .promo__content {
        padding: 0;
    }
}

@media (min-width: 1025px) {
    #cdtc-promo-banner .cdtc-banner__badge {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 104px;
                flex: 0 1 104px;
    }
}