
/* ==========================================
   UPSTATE VACATIONS - COOKIEYES DESIGN
   ========================================== */

:root {
    --cky-bg: #B5BB69;
    --cky-green: #4B5B33;
    --cky-green-hover: #3C4929;
    --cky-white: #FFFFFF;
    --cky-border: rgba(75, 91, 51, 0.25);
}

/* MAIN BANNER */

.cky-consent-container.cky-banner-bottom,
.cky-consent-container.cky-banner-top {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.cky-consent-container.cky-banner-bottom {
    bottom: 0 !important;
}

.cky-consent-container .cky-consent-bar {
    width: 100% !important;
    background: var(--cky-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
}

.cky-consent-container .cky-notice {
    background: var(--cky-bg) !important;
    padding: 30px 4% !important;
    margin: 0 !important;
}

/* TITLE */

.cky-consent-container .cky-title {
    display: block !important;
    color: var(--cky-green) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: -0.44px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

/* DESCRIPTION */

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
    color: var(--cky-green) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* BUTTON BASE */

.cky-consent-container .cky-btn {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* CUSTOMIZE BUTTON */

.cky-consent-container .cky-btn-customize {
    background: transparent !important;
    border: 1px solid var(--cky-green) !important;
    color: var(--cky-green) !important;
}

.cky-consent-container .cky-btn-customize:hover,
.cky-consent-container .cky-btn-customize:focus {
    background: rgba(75, 91, 51, 0.08) !important;
    color: var(--cky-green) !important;
}

/* CUSTOMIZE ARROW */

.cky-consent-container .cky-btn-customize svg {
    width: 14px !important;
    height: 14px !important;
}

.cky-consent-container .cky-btn-customize svg path {
    stroke: var(--cky-green) !important;
}

/* ACCEPT AND REJECT BUTTONS */

.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject {
    background: var(--cky-green) !important;
    border: 1px solid var(--cky-green) !important;
    color: var(--cky-white) !important;
}

.cky-consent-container .cky-btn-accept:hover,
.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-accept:focus,
.cky-consent-container .cky-btn-reject:focus {
    background: var(--cky-green-hover) !important;
    border-color: var(--cky-green-hover) !important;
    color: var(--cky-white) !important;
}

/* ==========================================
   DESKTOP - TEXT LEFT, BUTTONS RIGHT
   ========================================== */

@media (min-width: 1200px) {

    .cky-consent-container .cky-notice {
        position: relative !important;
        min-height: 146px !important;
        padding: 30px 500px 30px 4% !important;
    }

    .cky-consent-container .cky-notice-des {
        max-width: 700px !important;
    }

    .cky-consent-container .cky-notice-btn-wrapper {
        position: absolute !important;
        right: 4% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        display: grid !important;
        grid-template-columns: repeat(3, 142px) !important;
        gap: 8px !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cky-consent-container .cky-btn {
        width: 142px !important;
    }
}

/* ==========================================
   TABLET
   ========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .cky-consent-container .cky-notice {
        position: static !important;
        padding: 25px 30px !important;
    }

    .cky-consent-container .cky-notice-btn-wrapper {
        position: static !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 20px 0 0 !important;
        padding: 0 !important;
    }

    .cky-consent-container .cky-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .cky-consent-container .cky-notice {
        position: static !important;
        padding: 20px 16px
            calc(20px + env(safe-area-inset-bottom))
            !important;
    }

    .cky-consent-container .cky-title {
        font-size: 22px !important;
        line-height: 28px !important;
        margin-bottom: 8px !important;
    }

    .cky-consent-container .cky-notice-des,
    .cky-consent-container .cky-notice-des p {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    .cky-consent-container .cky-notice-btn-wrapper {
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
    }

    .cky-consent-container .cky-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        border-radius: 4px !important;
    }
}

/* ==========================================
   COOKIE PREFERENCE CENTER
   ========================================== */

.cky-preference-center {
    background: var(--cky-bg) !important;
    color: var(--cky-green) !important;
    max-height: 90dvh !important;
}
.cky-preference-center .cky-preference{ padding: 0 !important;}

.cky-preference-center .cky-preference-header,
.cky-preference-center .cky-preference-body-wrapper,
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-accordion-wrapper,
.cky-preference-center .cky-accordion-item,
.cky-preference-center .cky-accordion-header,
.cky-preference-center .cky-accordion-body,
.cky-preference-center .cky-footer-wrapper {
    background: var(--cky-bg) !important;
}

.cky-preference-center .cky-preference-title,
.cky-preference-center .cky-accordion-btn,
.cky-preference-center .cky-accordion-body,
.cky-preference-center .cky-accordion-body p,
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-preference-content-wrapper p,
.cky-preference-center .cky-always-active,
.cky-preference-center .cky-show-desc-btn {
    color: var(--cky-green) !important;
}

.cky-preference-center .cky-preference-body-wrapper {
    overflow-y: auto !important;
    min-height: 0 !important;
}

.cky-preference-center .cky-accordion-item {
    border-color: var(--cky-border) !important;
}

.cky-preference-center .cky-switch input:checked + .cky-slider {
    background: var(--cky-green) !important;
}

.cky-preference-center .cky-footer-wrapper {
    border-top: 1px solid var(--cky-border) !important;
    box-shadow: none !important;
}

.cky-preference-center .cky-btn {
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.cky-preference-center .cky-btn-accept,
.cky-preference-center .cky-btn-reject,
.cky-preference-center .cky-btn-preferences {
    background: var(--cky-green) !important;
    border: 1px solid var(--cky-green) !important;
    color: var(--cky-white) !important;
}

.cky-preference-center .cky-btn-accept:hover,
.cky-preference-center .cky-btn-reject:hover,
.cky-preference-center .cky-btn-preferences:hover {
    background: var(--cky-green-hover) !important;
    border-color: var(--cky-green-hover) !important;
    color: var(--cky-white) !important;
}

@media (max-width: 767px) {

    .cky-preference-center {
        max-height: 85dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .cky-preference-center .cky-preference-body-wrapper {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
    }

    .cky-preference-center .cky-footer-wrapper {
        flex: 0 0 auto !important;
    }

    .cky-preference-center .cky-prefrence-btn-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .cky-preference-center .cky-prefrence-btn-wrapper .cky-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        margin: 0 !important;
    }
}

/* ==========================================
   COOKIE REVISIT BUTTON
   ========================================== */

.cky-btn-revisit-wrapper {
    background: var(--cky-green) !important;
    border-radius: 50% !important;
}

.cky-btn-revisit-wrapper:hover {
    background: var(--cky-green-hover) !important;
}


/* CookieYes top wave image */
.cky-consent-container .cky-consent-bar {
    position: relative !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

/* Add wave above cookie banner */
.cky-consent-container .cky-consent-bar::before {
    content: "" !important;
    position: absolute !important;
    top: -5%;
    left: 0;
    width: 100%;
    height: 14px;
    background-image: url("../images/Mask%20group.png");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 14px;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 767px) {
    .cky-consent-container .cky-consent-bar::before {
        top: -2%;
        height: 10px;
        background-size: auto 10px;
    }
}

/* ==========================================
   FIGMA TYPOGRAPHY AND COLOR REFINEMENTS
   Existing banner, responsive layout, and wave retained.
   ========================================== */

.cky-consent-container .cky-title,
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p,
.cky-consent-container .cky-btn,
.cky-preference-center,
.cky-preference-center .cky-preference-title,
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-accordion-btn,
.cky-preference-center .cky-accordion-body,
.cky-preference-center .cky-btn,
.cky-preference-center .cky-always-active {
    font-family: "AcuminVariable", Sans-serif !important;
    font-style: normal !important;
}

/* Main notice title: 22 / 28 */
.cky-consent-container .cky-title {
    color: #4B5B33 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: -0.44px !important;
}

/* Notice body: 14 / 22 */
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
    color: #4B5B33 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

/* Preference heading (from Figma screenshot). */
.cky-preference-center .cky-preference-title {
    color: #4B5B33 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

/* Preference paragraphs: 14 / 22 */
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-preference-content-wrapper p,
.cky-preference-center .cky-accordion-body,
.cky-preference-center .cky-accordion-body p,
.cky-preference-center .cky-accordion-body span,
.cky-preference-center .cky-accordion-header-des {
    color: #4B5B33 !important;
    font-family: "AcuminVariable", Sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

/* Accordion category headings: 16 / 22 */
.cky-preference-center .cky-accordion-btn {
    color: #4B5B33 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

/* Cookie preference 'Always Active' control: 142 x 48. */
.cky-preference-center .cky-always-active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 142px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 1px solid #4B5B33 !important;
    border-radius: 4px !important;
    color: #4B5B33 !important;
    font-size: 14px !important;
}

/* Filled consent buttons: keep existing layout dimensions. */
.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject,
.cky-preference-center .cky-btn-accept,
.cky-preference-center .cky-btn-reject,
.cky-preference-center .cky-btn-preferences {
    background: #4B5B33 !important;
    border-color: #4B5B33 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
}

.cky-preference-center .cky-btn {
    font-size: 14px !important;
    border-radius: 4px !important;
}

/* =========================================================
   UPSTATE VACATIONS - PREFERENCE PANEL FINAL REFINEMENTS
   Added to the user's latest working CSS. Banner and wave unchanged.
   ========================================================= */

/* Match the 4% horizontal inset used by the original notice. */
.cky-preference-center .cky-preference-content-wrapper,
.cky-preference-center .cky-accordion-wrapper {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
}

/* Figma accordion separators: #4B5B33 at 16% opacity, 1px. */
.cky-preference-center .cky-accordion-wrapper {
    border-top: 1px solid rgba(75, 91, 51, 0.16) !important;
}
.cky-preference-center .cky-accordion-item {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(75, 91, 51, 0.16) !important;
    box-shadow: none !important;
}
.cky-preference-center .cky-accordion-header,
.cky-preference-center .cky-accordion-header-des {
    border-color: rgba(75, 91, 51, 0.16) !important;
    box-shadow: none !important;
}

/* Remove the white/faded strip and line above the action footer. */
.cky-preference-center .cky-footer-shadow,
.cky-preference-center .cky-footer-wrapper .cky-footer-shadow,
.cky-preference-center .cky-footer-wrapper::before,
.cky-preference-center .cky-footer-wrapper::after {
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.cky-preference-center .cky-footer-wrapper {
    box-sizing: border-box !important;
    border-top: 0 !important;
    background: #B5BB69 !important;
    background-image: none !important;
    box-shadow: none !important;
    padding-left: 4% !important;
    padding-right: calc(4% + 56px) !important;
}
.cky-preference-center .cky-preference-body-wrapper::after {
    background-image: none !important;
    box-shadow: none !important;
}

/* Save My Preferences: let text set the width, leave room for accessibility widget. */
.cky-preference-center .cky-btn-preferences,
.cky-preference-center .cky-prefrence-btn-wrapper .cky-btn-preferences {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    flex: 0 0 auto !important;
    white-space: normal !important;
    border-radius: 4px !important;
}
.cky-preference-center .cky-prefrence-btn-wrapper {
    box-sizing: border-box !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding-right: 0 !important;
}

@media (max-width: 767px) {
    /* Match the 16px mobile inset of the main cookie banner. */
    .cky-preference-center .cky-preference-content-wrapper,
    .cky-preference-center .cky-accordion-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .cky-preference-center .cky-footer-wrapper {
        padding-left: 16px !important;
        padding-right: 40px !important;
    }
    .cky-preference-center .cky-prefrence-btn-wrapper .cky-btn-preferences {
        width: 100% !important;
        max-width: 100% !important;
        align-self: flex-end !important;
    }
}


/* ==========================================
   COOKIEYES - PREFERENCE SCREEN FIX
   Based on actual HTML structure
   ========================================== */

/* Preference screen background */
.cky-preference-wrapper,
.cky-preference-center,
.cky-preference {
    background: #B5BB69 !important;
}

/* Match main notice horizontal spacing */
.cky-preference-center .cky-preference-header {
    padding: 20px 4% 10px !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cky-preference-center .cky-preference-content-wrapper {
    padding: 0 4% 20px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}

/* Accordion container alignment */
.cky-preference-center .cky-accordion-wrapper {
    padding: 0 4% !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Accordion separator colour */
.cky-preference-center .cky-accordion {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(75, 91, 51, 0.16) !important;
    box-shadow: none !important;
}

.cky-preference-center .cky-accordion:first-child {
    border-top: 1px solid rgba(75, 91, 51, 0.16) !important;
}

/* Remove additional separator borders */
.cky-preference-center .cky-accordion-item,
.cky-preference-center .cky-accordion-header,
.cky-preference-center .cky-accordion-header-wrapper,
.cky-preference-center .cky-accordion-header-des {
    border: 0 !important;
    box-shadow: none !important;
}

/* Accordion title and descriptions */
.cky-preference-center .cky-accordion-btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    color: #4B5B33 !important;
}

.cky-preference-center .cky-accordion-header-des,
.cky-preference-center .cky-accordion-header-des p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    color: #4B5B33 !important;
}

/* Remove white footer fade */
.cky-preference-center .cky-footer-shadow {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Remove line above footer */
.cky-preference-center .cky-footer-wrapper {
    border: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
    background: #B5BB69 !important;
    padding: 16px 4% 20px 4% !important;
}

/* Prevent any additional footer lines */
.cky-preference-center .cky-footer-wrapper::before,
.cky-preference-center .cky-footer-wrapper::after {
    display: none !important;
}

/* Position footer buttons */
.cky-preference-center .cky-prefrence-btn-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    border-top: 0 !important;
}

/* Save button - natural width */
.cky-preference-center .cky-btn-preferences {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    background: #4B5B33 !important;
    border: 1px solid #4B5B33 !important;
    color: #FFFFFF !important;
}

/* Accordion audit table */
.cky-preference-center .cky-audit-table {
    background: transparent !important;
    border-color: rgba(75, 91, 51, 0.16) !important;
    color: #4B5B33 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {

    .cky-preference-center .cky-preference-header {
        padding: 16px 16px 10px !important;
    }

    .cky-preference-center .cky-preference-content-wrapper {
        padding: 0 16px 18px !important;
    }

    .cky-preference-center .cky-accordion-wrapper {
        padding: 0 16px !important;
    }

    .cky-preference-center .cky-footer-wrapper {
        padding: 12px 40px 16px 16px !important;
    }

    .cky-preference-center .cky-prefrence-btn-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cky-preference-center .cky-btn-preferences {
        width: 100% !important;
        white-space: normal !important;
    }
}
