/* global */

/* End of Year Sale: popup (promo-popup) + pre-checked pill under Service(s) Needed (promo-chip).
   The popup is a centered card on desktop, laptop & tablet and a slide-in card above the
   mobile bottom bar on mobile. Turn the whole promo on/off with profile.json > promo.active. */

@keyframes promoFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes promoFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes promoPopIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes promoPopOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
}

@keyframes promoSlideIn {
    0% {
        opacity: 0;
        transform: translateY(110%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes promoSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(110%);
    }
}

@keyframes promoPulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes promoGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(237, 190, 84, 0.6);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(237, 190, 84, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(237, 190, 84, 0);
    }
}

/* end of global */

@media(min-width: 1366px) {
    /* popup */
    .promo-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .promo-popup.promo-open {
        display: flex;
    }

    .promo-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(33, 22, 13, 0.6);
        animation: promoFadeIn 0.35s ease-out both;
    }

    .promo-card {
        position: relative;
        width: 540px;
        max-width: 100%;
        padding: 44px 40px 28px 40px;
        background: var(--secondary-color);
        border: 1px solid #e3ddd7;
        border-top: 6px solid var(--button-color);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        text-align: center;
        animation: promoPopIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .promo-closing .promo-backdrop {
        animation: promoFadeOut 0.3s ease-out both;
    }

    .promo-closing .promo-card {
        animation: promoPopOut 0.3s ease-in both;
    }

    .promo-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 100px;
        background: var(--off-color);
        color: var(--font-light);
        font-size: 18px;
        cursor: pointer;
        transition: 0.15s all ease-out;
    }

    .promo-close:hover {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: barlow, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--secondary-color);
        background: var(--accent-color);
        padding: 6px 14px;
        border-radius: 100px;
        margin: 0 0 14px 0;
    }

    .promo-discount {
        font-family: rosewood-std-fill, sans-serif;
        font-size: 76px;
        font-weight: 400;
        line-height: 1;
        color: var(--font-color);
        margin: 0 0 8px 0;
        animation: promoPulse 2.6s infinite ease-out;
    }

    .promo-text {
        font-family: barlow, sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--font-color);
        margin: 0 0 10px 0;
    }

    .promo-text strong {
        color: var(--accent-color);
    }

    .promo-sub {
        font-family: barlow, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--font-light);
        margin: 0 0 22px 0;
    }

    .promo-sub strong {
        color: var(--font-color);
        font-weight: 700;
    }

    .promo-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0 0 16px 0;
    }

    .promo-actions a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: barlow, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 22px;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        transition: 0.2s all ease-out;
    }

    .promo-actions a.promo-claim {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-actions a.promo-call {
        background: var(--button-color);
        color: var(--font-color);
    }

    .promo-actions a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    }

    .promo-fine {
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        color: #8a8a8a;
        margin: 0;
    }

    .promo-fine a {
        color: var(--accent-color);
        font-weight: 700;
        text-decoration: none;
    }

    /* pre-checked pill under Service(s) Needed */
    .promo-unit {
        min-width: 0;
    }

    .chip-label.promo-chip {
        border-color: var(--button-color);
        background-color: #fdf6e3;
        color: var(--font-color);
    }

    .chip-label.promo-chip:hover {
        border-color: #d9a93a;
        color: var(--font-color);
    }

    .chip-input:checked + .chip-label.promo-chip {
        background-color: var(--button-color);
        border-color: var(--button-color);
        color: var(--font-color);
        animation: promoGlow 2.4s infinite ease-out;
    }

    .chip-input:focus-visible + .chip-label.promo-chip {
        box-shadow: 0 0 0 3px rgba(237, 190, 84, 0.45);
    }

    .promo-chip-note {
        display: block;
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #8a8a8a;
        margin: 6px 0 0 0;
    }
}

@media(max-width: 1366px) and (min-width: 1024px) {
    /* popup */
    .promo-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .promo-popup.promo-open {
        display: flex;
    }

    .promo-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(33, 22, 13, 0.6);
        animation: promoFadeIn 0.35s ease-out both;
    }

    .promo-card {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 40px 36px 26px 36px;
        background: var(--secondary-color);
        border: 1px solid #e3ddd7;
        border-top: 6px solid var(--button-color);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        text-align: center;
        animation: promoPopIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .promo-closing .promo-backdrop {
        animation: promoFadeOut 0.3s ease-out both;
    }

    .promo-closing .promo-card {
        animation: promoPopOut 0.3s ease-in both;
    }

    .promo-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 100px;
        background: var(--off-color);
        color: var(--font-light);
        font-size: 18px;
        cursor: pointer;
        transition: 0.15s all ease-out;
    }

    .promo-close:hover {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: barlow, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--secondary-color);
        background: var(--accent-color);
        padding: 6px 14px;
        border-radius: 100px;
        margin: 0 0 14px 0;
    }

    .promo-discount {
        font-family: rosewood-std-fill, sans-serif;
        font-size: 70px;
        font-weight: 400;
        line-height: 1;
        color: var(--font-color);
        margin: 0 0 8px 0;
        animation: promoPulse 2.6s infinite ease-out;
    }

    .promo-text {
        font-family: barlow, sans-serif;
        font-size: 21px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--font-color);
        margin: 0 0 10px 0;
    }

    .promo-text strong {
        color: var(--accent-color);
    }

    .promo-sub {
        font-family: barlow, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--font-light);
        margin: 0 0 20px 0;
    }

    .promo-sub strong {
        color: var(--font-color);
        font-weight: 700;
    }

    .promo-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0 0 16px 0;
    }

    .promo-actions a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: barlow, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 22px;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        transition: 0.2s all ease-out;
    }

    .promo-actions a.promo-claim {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-actions a.promo-call {
        background: var(--button-color);
        color: var(--font-color);
    }

    .promo-actions a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    }

    .promo-fine {
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        color: #8a8a8a;
        margin: 0;
    }

    .promo-fine a {
        color: var(--accent-color);
        font-weight: 700;
        text-decoration: none;
    }

    /* pre-checked pill under Service(s) Needed */
    .promo-unit {
        min-width: 0;
    }

    .chip-label.promo-chip {
        border-color: var(--button-color);
        background-color: #fdf6e3;
        color: var(--font-color);
    }

    .chip-label.promo-chip:hover {
        border-color: #d9a93a;
        color: var(--font-color);
    }

    .chip-input:checked + .chip-label.promo-chip {
        background-color: var(--button-color);
        border-color: var(--button-color);
        color: var(--font-color);
        animation: promoGlow 2.4s infinite ease-out;
    }

    .chip-input:focus-visible + .chip-label.promo-chip {
        box-shadow: 0 0 0 3px rgba(237, 190, 84, 0.45);
    }

    .promo-chip-note {
        display: block;
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #8a8a8a;
        margin: 6px 0 0 0;
    }
}

@media(max-width: 1024px) and (min-width: 769px) {
    /* popup */
    .promo-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .promo-popup.promo-open {
        display: flex;
    }

    .promo-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(33, 22, 13, 0.6);
        animation: promoFadeIn 0.35s ease-out both;
    }

    .promo-card {
        position: relative;
        width: 480px;
        max-width: 100%;
        padding: 38px 30px 24px 30px;
        background: var(--secondary-color);
        border: 1px solid #e3ddd7;
        border-top: 6px solid var(--button-color);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        text-align: center;
        animation: promoPopIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .promo-closing .promo-backdrop {
        animation: promoFadeOut 0.3s ease-out both;
    }

    .promo-closing .promo-card {
        animation: promoPopOut 0.3s ease-in both;
    }

    .promo-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 100px;
        background: var(--off-color);
        color: var(--font-light);
        font-size: 17px;
        cursor: pointer;
        transition: 0.15s all ease-out;
    }

    .promo-close:hover {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--secondary-color);
        background: var(--accent-color);
        padding: 6px 14px;
        border-radius: 100px;
        margin: 0 0 12px 0;
    }

    .promo-discount {
        font-family: rosewood-std-fill, sans-serif;
        font-size: 62px;
        font-weight: 400;
        line-height: 1;
        color: var(--font-color);
        margin: 0 0 8px 0;
        animation: promoPulse 2.6s infinite ease-out;
    }

    .promo-text {
        font-family: barlow, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--font-color);
        margin: 0 0 10px 0;
    }

    .promo-text strong {
        color: var(--accent-color);
    }

    .promo-sub {
        font-family: barlow, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--font-light);
        margin: 0 0 18px 0;
    }

    .promo-sub strong {
        color: var(--font-color);
        font-weight: 700;
    }

    .promo-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0 0 14px 0;
    }

    .promo-actions a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: barlow, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        padding: 13px 20px;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        transition: 0.2s all ease-out;
    }

    .promo-actions a.promo-claim {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-actions a.promo-call {
        background: var(--button-color);
        color: var(--font-color);
    }

    .promo-actions a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    }

    .promo-fine {
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        color: #8a8a8a;
        margin: 0;
    }

    .promo-fine a {
        color: var(--accent-color);
        font-weight: 700;
        text-decoration: none;
    }

    /* pre-checked pill under Service(s) Needed */
    .promo-unit {
        min-width: 0;
    }

    .chip-label.promo-chip {
        border-color: var(--button-color);
        background-color: #fdf6e3;
        color: var(--font-color);
    }

    .chip-label.promo-chip:hover {
        border-color: #d9a93a;
        color: var(--font-color);
    }

    .chip-input:checked + .chip-label.promo-chip {
        background-color: var(--button-color);
        border-color: var(--button-color);
        color: var(--font-color);
        animation: promoGlow 2.4s infinite ease-out;
    }

    .chip-input:focus-visible + .chip-label.promo-chip {
        box-shadow: 0 0 0 3px rgba(237, 190, 84, 0.45);
    }

    .promo-chip-note {
        display: block;
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #8a8a8a;
        margin: 6px 0 0 0;
    }
}

@media(max-width: 769px) {
    /* slide-in card above the mobile bottom bar (no backdrop on mobile) */
    .promo-popup {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 48px;
        z-index: 100;
        padding: 0 3%;
        pointer-events: none;
    }

    .promo-popup.promo-open {
        display: block;
    }

    .promo-backdrop {
        display: none;
    }

    .promo-card {
        pointer-events: auto;
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 14px 44px 12px 16px;
        background: var(--secondary-color);
        border: 1px solid #e3ddd7;
        border-left: 6px solid var(--button-color);
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        text-align: left;
        animation: promoSlideIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .promo-closing .promo-card {
        animation: promoSlideOut 0.3s ease-in both;
    }

    .promo-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 100px;
        background: var(--off-color);
        color: var(--font-light);
        font-size: 15px;
        cursor: pointer;
        transition: 0.15s all ease-out;
    }

    .promo-close:hover {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-kicker {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: barlow, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--secondary-color);
        background: var(--accent-color);
        padding: 4px 10px;
        border-radius: 100px;
        margin: 0 0 6px 0;
    }

    .promo-discount {
        font-family: rosewood-std-fill, sans-serif;
        font-size: 36px;
        font-weight: 400;
        line-height: 1;
        color: var(--font-color);
        margin: 0 0 4px 0;
        animation: none;
    }

    .promo-text {
        font-family: barlow, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--font-color);
        margin: 0 0 4px 0;
    }

    .promo-text strong {
        color: var(--accent-color);
    }

    .promo-sub {
        font-family: barlow, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--font-light);
        margin: 0 0 10px 0;
    }

    .promo-sub strong {
        color: var(--font-color);
        font-weight: 700;
    }

    .promo-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        margin: 0 0 8px 0;
    }

    .promo-actions a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: barlow, sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
        transition: 0.2s all ease-out;
    }

    .promo-actions a.promo-claim {
        background: var(--accent-color);
        color: var(--secondary-color);
    }

    .promo-actions a.promo-call {
        background: var(--button-color);
        color: var(--font-color);
    }

    .promo-actions a:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    }

    .promo-fine {
        font-family: barlow, sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        color: #8a8a8a;
        margin: 0;
    }

    .promo-fine a {
        color: var(--accent-color);
        font-weight: 700;
        text-decoration: none;
    }

    /* pre-checked pill under Service(s) Needed */
    .promo-unit {
        min-width: 0;
    }

    .chip-label.promo-chip {
        border-color: var(--button-color);
        background-color: #fdf6e3;
        color: var(--font-color);
    }

    .chip-label.promo-chip:hover {
        border-color: #d9a93a;
        color: var(--font-color);
    }

    .chip-input:checked + .chip-label.promo-chip {
        background-color: var(--button-color);
        border-color: var(--button-color);
        color: var(--font-color);
        animation: promoGlow 2.4s infinite ease-out;
    }

    .chip-input:focus-visible + .chip-label.promo-chip {
        box-shadow: 0 0 0 3px rgba(237, 190, 84, 0.45);
    }

    .promo-chip-note {
        display: block;
        font-family: barlow, sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: #8a8a8a;
        margin: 6px 0 0 0;
    }
}