/*
Theme Name:   Astra Child
Theme URI:    https://wpastra.com/
Description:  Astra Child Theme
Author:       Your Name
Author URI:   https://yourwebsite.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

/************************************************
            Imports    
************************************************/

@font-face {
    font-family: 'Gracela';
    src: url('assets/fonts/Gracela-Regular.woff2') format('woff2'),
        url('assets/fonts/Gracela-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('assets/fonts/Gilroy-Medium.woff2') format('woff2'),
        url('assets/fonts/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('assets/fonts/Gilroy-Regular.woff2') format('woff2'),
        url('assets/fonts/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-bold';
    src: url('assets/fonts/Gilroy-Semibold.woff2') format('woff2'),
        url('assets/fonts/Gilroy-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/************************************************
            Variables    
************************************************/

:root {
    --sea: #1999a2;
    --blue: #243046;
    --gold: #ab7638;
    --white: #ffffff;
    --lightgold: #f2ebe1;
    --lightgray: #f7f7f7;
    --red: #dc3232;
}

/************************************************
            Global Styles    
************************************************/

html, body {
    background: #ffffff;
    font-family: 'Gilroy';
    font-weight: 400;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Gracela';
}

strong {
    font-family: 'Gilroy';
    font-weight: 500;
}

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 1.5rem;
    }
}

/* =========================
   Width & Height
========================= */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* =========================
   Text Alignment
========================= */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* =========================
   Text Transform
========================= */
.text-capitalize { text-transform: capitalize; }
.text-uppercase  { text-transform: uppercase; }
.text-lowercase  { text-transform: lowercase; }

/* =========================
   Text Color
========================= */
.text-white { color: #ffffff !important; }
.text-red { color: var(--red) !important; }
.text-black { color: #000000 !important; }
.text-gold { color: var(--gold) !important; }
.text-blue { color: var(--blue) !important; }
.text-sea { color: var(--sea) !important; }
.text-lightgold { color: var(--lightgold) !important; }
.text-gray { color: #808080 !important; }

/* =========================
   Background Color
========================= */
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-sea { background-color: var(--sea) !important; }
.bg-lightgold { background-color: var(--lightgold) !important; }
.bg-gray { background-color: #808080 !important; }
.bg-lightgray { background-color: #f7f7f7 !important; }

/* =========================
   Display
========================= */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* =========================
   Flexbox Utilities
========================= */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }

/* =========================
   Position
========================= */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* =========================
   Overflow
========================= */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

/* =========================
   Visibility
========================= */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* =========================
   Float
========================= */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

/* =========================
   Spacing
========================= */
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 2rem !important; }
.mr-6 { margin-right: 2.5rem !important; }
.mr-7 { margin-right: 3rem !important; }
.mr-8 { margin-right: 3.5rem !important; }
.mr-9 { margin-right: 4rem !important; }
.mr-10 { margin-right: 4.5rem !important; }

/* =========================
   Container styles
========================= */

.full-bleed {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative;
    left: 0;
    right: 0;
    box-sizing: border-box;
}


/* iPad / Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .full-bleed {
        width: 100vw;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .full-bleed {
        width: 100vw;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .full-bleed {
        width: 100vw;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        overflow-x: hidden; /* Prevent horizontal scroll on very small screens */
    }
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}


/* =========================
   Border Styles
========================= */
.border-gold { border-color: var(--gold); border-style: solid; }
.border-blue { border-color: var(--blue); border-style: solid; }
.border-sea { border-color: var(--sea); border-style: solid; }
.border-lightgold { border-color: var(--lightgold); border-style: solid; }
.border-gray { border-color: #808080; border-style: solid; }

/* =========================
Border Size
========================= */
.border-none { border: none; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }
.border-6 { border-width: 6px; }
.border-7 { border-width: 7px; }
.border-8 { border-width: 8px; }
.border-9 { border-width: 9px; }
.border-10 { border-width: 10px; }

/* =========================
   Border Radius
========================= */
.br-0 { border-radius: 0 !important; }
.br-5 { border-radius: 5px !important; }
.br-10 { border-radius: 10px !important; }
.br-20 { border-radius: 20px !important; }

/* =========================
   List Unstyled
========================= */
.list-unstyled {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    gap: inherit;
}


/************************************************
            Reset Styles    
************************************************/

.ast-single-post.ast-page-builder-template .site-main > article, 
.ast-page-builder-template .post-navigation {
    padding: 0 !important;
}
.ast-separate-container #primary, 
.ast-separate-container.ast-left-sidebar #primary, 
.ast-separate-container.ast-right-sidebar #primary,
#primary, article {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    background-color: transparent !important;
}

/**
            ACF Reset Form Styles   
************************************************/

.acf-form-fields, .acf-field-group, .acf-field:not([class*="pb-"]), .acf-fields.-border {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.acf-fields>.acf-field-group.acfe-field-group-layout-block.acfe-seamless-style:not([data-acfe-group-modal="1"])>.acf-input, 
.acf-fields>.acf-field-group.acfe-field-group-layout-row.acfe-seamless-style:not([data-acfe-group-modal="1"])>.acf-input {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/************************************************
            Components    
************************************************/


/* =========================
   Pagination Styles (Reusable)
========================= */

.ast-pagination {
    padding: 2em 0;
}

.hft-pagination-wrapper {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    
    a,
    span {
        display: inline-block;
        padding: 10px 16px;
        border: 1px solid var(--gold) !important;
        color: var(--blue);
        text-decoration: none !important;
        font-weight: 500;
        transition: all 0.3s ease;
        min-width: 42px;
        text-align: center;
        line-height: 1.4;
    }
    
    a:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--white);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .current {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--white);
        pointer-events: none;
    }
    
    .dots {
        border: none;
        background: none;
        color: var(--blue);
        padding: 10px 8px;
        pointer-events: none;
    }
}
@media (max-width: 768px) {
                
    .hft-pagination-wrapper {
        margin-top: 40px;
        gap: 6px;
        
        a,
        span {
            padding: 8px 12px;
            font-size: 0.9rem;
            min-width: 36px;
        }
    }
}

/* =========================
   Image Gallery Styles
========================= */

.hft-image-slider {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    
    .hft-slider-container {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: #f5f5f5;
        cursor: grab;
        user-select: none;
        
        &:active {
            cursor: grabbing;
        }
    }
    
    .hft-slider-track {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    
    .hft-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
        pointer-events: none;
        
        &.active {
            transform: translateX(0);
            pointer-events: auto;
        }
        
        /* Slide in from right (next) */
        &.slide-in-right {
            transform: translateX(100%);
            
            &.active {
                transform: translateX(0);
            }
        }
        
        /* Slide in from left (previous) */
        &.slide-in-left {
            transform: translateX(-100%);
            
            &.active {
                transform: translateX(0);
            }
        }
        
        /* Slide out to left (next) */
        &.slide-out-left {
            transform: translateX(0);
            
            &.active {
                transform: translateX(-100%);
            }
        }
        
        /* Slide out to right (previous) */
        &.slide-out-right {
            transform: translateX(0);
            
            &.active {
                transform: translateX(100%);
            }
        }
        
        a {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
    
    .hft-slide-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        padding: 20px;
        color: white;
        
        a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            display: inline;
            height: auto;
            
            &:hover {
                text-decoration: underline;
            }
        }
    }
    
    .hft-slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        width: auto;
        height: auto;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        z-index: 10;
        font-size: 40px;        
        text-shadow: 0 2px 8px rgba(255,255,255,0.5);

        span {
            font-size: 40px;
            color: #000;
            text-shadow: 0 2px 8px rgba(255,255,255,0.5);
            &:hover {
                text-shadow: 0 4px 12px rgba(255,255,255,0.8);
            }
        }
        
        &:hover {
            color: #000;
            text-shadow: 0 4px 12px rgba(255,255,255,0.8);
            transform: translateY(-50%) scale(1.1);
        }
        
        &:active {
            transform: translateY(-50%) scale(0.95);
        }
        
        &.hft-prev {
            left: 16px;
        }
        
        &.hft-next {
            right: 32px;
        }
    }
    
    .hft-slider-dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
    }
    
    .hft-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        
        &:hover {
            background: rgba(255,255,255,0.8);
            transform: scale(1.2);
        }
        
        &.active {
            background: white;
            width: 32px;
            border-radius: 6px;
        }
    }
    
    /* Responsive styles */
    @media (max-width: 768px) {
        .hft-slider-btn {
            font-size: 32px;
            
            &.hft-prev {
                left: 0px;
            }
            
            &.hft-next {
                right: 16px;
            }
        }
        
        .hft-slide-caption {
            padding: 12px;
            
            a {
                font-size: 16px;
            }
        }
    }
}


/* =========================
   Masonry Gallery Styles
========================= */

.masonry-gallery {
    column-count: 4;
    column-gap: 15px;
  }
  

.masonry-gallery img {
    width: 100%;
    margin-bottom: 15px;
    display: block;
    break-inside: avoid;
    object-fit: cover;
}
  
.masonry-gallery img:nth-child(4n + 1),
.masonry-gallery img:nth-child(4n + 4) {
    height: 180px;
}
  
.masonry-gallery img:nth-child(4n + 2),
.masonry-gallery img:nth-child(4n + 3) {
    height: 360px;
}

/* Mobile styles for masonry gallery */
@media (max-width: 767px) {
    .masonry-gallery {
        column-count: 1;
        column-gap: 0;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 10px;
    }
    
    .masonry-gallery img {
        flex: 0 0 auto;
        width: 80vw;
        max-width: 300px;
        height: 250px;
        margin-bottom: 0;
        scroll-snap-align: center;
    }
    
    .masonry-gallery img:nth-child(4n + 1),
    .masonry-gallery img:nth-child(4n + 4),
    .masonry-gallery img:nth-child(4n + 2),
    .masonry-gallery img:nth-child(4n + 3) {
        height: 250px;
    }
}


/* =========================
   Currency Component
========================= */

.ssh-wp-gadget-currency-selector {
    display: inline-block;
    position: relative;
}

.ssh-wp-gadget-currency-select {
    padding: 8px 35px 8px 15px;
    font-family: 'Gilroy';
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--blue);
    background-color: var(--white);
    border: 2px solid var(--lightgold);
    border-radius: 100px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23243046' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: all 0.2s ease;
    
    &:hover {
        border-color: var(--gold);
        background-color: var(--lightgold);
    }
    
    &:focus {
        outline: none;
        border-color: var(--sea);
        box-shadow: 0 0 0 3px rgba(25, 153, 162, 0.1);
    }
}

.ssh-wp-gadget-currency-selector .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (max-width: 768px) {
    .ssh-wp-gadget-currency-select {
        padding: 6px 30px 6px 12px;
        font-size: 0.85rem;
        min-width: 100px;
    }
}

/* =========================
   Search Bar Component
========================= */

.search-bar {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    
    .search-bar__container {
        position: relative;
        width: 100%;
    }
    
    .search-bar__input {
        width: 100%;
        padding: 20px 45px 20px 20px;
        font-family: 'Gilroy';
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--white) !important;
        background: transparent;
        border: 2px solid var(--white);
        border-radius: 100px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        
        &:focus {
            outline: none;
            border: 2px solid var(--white);
            background: transparent;
            box-shadow: 0 2px 8px var(--blue);
        }
        
        &::placeholder {
            color: var(--white);
        }
    }
    
    .search-bar__icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--white);
        pointer-events: none;
        opacity: 0.6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .search-bar__loading {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 10px 20px;
        background: var(--white);
        border: 1px solid var(--lightgold);
        border-top: none;
        border-radius: 14px;
        font-size: 0.9rem;
        color: var(--blue);
        text-align: center;
        z-index: 100;
    }
    
    .search-bar__results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        border: 1px solid var(--lightgold);
        border-top: none;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-height: 400px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
        margin-top: -1px;
        
        &.search-bar__results--active {
            display: block;
        }
        
        .search-bar__results-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .search-bar__result-item {
            margin: 0;
            padding: 0;
            border-bottom: 1px solid var(--lightgold);
            
            &:last-child {
                border-bottom: none;
            }
            
            &.search-bar__result-item--active {
                .search-bar__result-link {
                    background-color: var(--lightgold);
                }
            }
            
            .search-bar__result-link {
                display: block;
                padding: 15px 20px;
                text-decoration: none;
                color: var(--blue);
                transition: background-color 0.2s ease;
                
                &:hover {
                    background-color: var(--lightgold);
                    text-decoration: none;
                }
                
                .search-bar__result-type {
                    display: inline-block;
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    color: var(--sea);
                    margin-bottom: 4px;
                    padding: 2px 8px;
                    background: rgba(25, 153, 162, 0.1);
                    border-radius: 4px;
                }
                
                .search-bar__result-title {
                    display: block;
                    font-family: 'Gracela';
                    font-size: 1.1rem;
                    font-weight: normal;
                    color: var(--blue);
                    margin-bottom: 6px;
                    line-height: 1.4;
                }
                
                .search-bar__result-excerpt {
                    display: block;
                    font-size: 0.875rem;
                    color: #646970;
                    line-height: 1.5;
                    margin-top: 4px;
                }
            }
        }
        
        .search-bar__no-results,
        .search-bar__error {
            padding: 20px;
            text-align: center;
            color: #646970;
            font-size: 0.9rem;
        }
        
        .search-bar__error {
            color: #d63638;
        }
    }
    
    @media (max-width: 768px) {
        max-width: 100%;
        
        .search-bar__input {
            padding: 10px 40px 10px 15px;
            font-size: 0.95rem;
        }
        
        .search-bar__icon {
            right: 12px;
            width: 18px;
            height: 18px;
        }
        
        .search-bar__results {
            max-height: 300px;
            
            .search-bar__result-item {
                .search-bar__result-link {
                    padding: 12px 15px;
                    
                    .search-bar__result-title {
                        font-size: 1rem;
                    }
                    
                    .search-bar__result-excerpt {
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
    
    @media (max-width: 480px) {
        .search-bar__input {
            padding: 8px 35px 8px 12px;
            font-size: 0.9rem;
        }
        
        .search-bar__icon {
            right: 10px;
            width: 16px;
            height: 16px;
        }
        
        .search-bar__results {
            max-height: 250px;
            
            .search-bar__result-item {
                .search-bar__result-link {
                    padding: 10px 12px;
                }
            }
        }
    }
}

/* =========================
   Button Component
========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: 'Gilroy';
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    
    &:hover {
        text-decoration: none;
    }
    
    &:focus {
        outline: 2px solid var(--sea);
        outline-offset: 2px;
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* Button Variants */
.btn-outline {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    
    &:hover {
        background-color: var(--blue);
        color: var(--white);
    }
}

.btn-primary {
    background: var(--gold);
    color: var(--white);
    border-radius: 0;
    
    &:hover {
        background-color: var(--blue);
        border-color: var(--blue);
        color: var(--white);
    }
}

.btn-secondary {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    
    &:hover {
        background-color: var(--sea);
        border-color: var(--sea);
        color: var(--white);
    }
}

/* Button Sizes */
.btn-small {
    padding: 4px 12px;
    font-size: 11px;
}

.btn-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

/* Button Modifiers */
.btn-full {
    width: 100%;
}

.btn-rounded {
    border-radius: 100px;
}

/* Button Link Style - looks like a text link */
.btn-link {
    background: transparent;
    border: none;
    padding: 8px 0;
    margin: 0;
    font-size: 0.9rem;
    text-align: left;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Gilroy';
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-block;
    width: auto;
    border-radius: 0;
    
    &:hover {
        color: var(--gold);
        text-decoration: underline;
        background: transparent;
    }
    
    &:focus {
        outline: 2px solid var(--sea);
        outline-offset: 2px;
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

.favourites-btn {
    background: transparent;
    text-decoration: none !important;       
    
    span {
        font-size: 24px;
        transition: all 0.2s ease;
        position: relative;
        line-height: .7;
        
        &.bold {
            &::before {
                -webkit-text-stroke: 2px var(--white);
            }
        }
        &::before {
            font-family: 'dashicons';
            font-size: 40px;
            -webkit-text-stroke: 1px var(--white);
            -webkit-text-fill-color: transparent;
            transition: all 0.2s ease;
            z-index: 1;
        }
    }

    &:hover {
        transform: scale(1.1);
        background: transparent;
    }
    &:focus {
        outline: none;
        outline-offset: 0;
    }
}
.favourites-btn.rounded-button {
    span {
        font-size: inherit;
        transition: none;
        &::before {
            font-size: 25px;
        }
    }
    .dashicons-heart {
        &::before {
            color: var(--white);
            -webkit-text-stroke: 1px var(--white);
            -webkit-text-fill-color: transparent;
        }
    }
}
.favourites-btn.favourited.rounded-button {
    .dashicons-heart {
        &::before {
            color: var(--white);
            -webkit-text-fill-color: var(--white);
            -webkit-text-stroke: 0;
        }
    }
}
.favourites-btn.favourited:not(.rounded-button), .card.favourited .favourites-btn:not(.rounded-button) {
    border: none;
    .dashicons-heart {
        &::before {
            color: var(--red);
            -webkit-text-stroke: 2px var(--red);
        }
    }
}
.favourites-btn.favourited-filled:not(.rounded-button) {
    border: none;
    .dashicons-heart {
        &::before {
            color: var(--red);
            -webkit-text-fill-color: var(--red);
            -webkit-text-stroke: 0;
        }
    }
}

.currency-symbol-btn {
    background: transparent !important;
    
    > span {
        line-height: 1;
        transition: all 0.2s ease;
        position: relative;
        color: var(--white) !important;
        width: 40px;
        height: 40px;
        &::before {
            color: var(--white) !important;
            /* -webkit-text-stroke: 0; */
            /* -webkit-text-stroke: 1px var(--white); */
            /* -webkit-text-fill-color: transparent; */
            font-size: 40px;
        }
    }

    &:hover {
        transform: scale(1.1);
        background: transparent;
    }
    
    &:focus {
        outline: none;
        outline-offset: 0;
    }
}

.ssh-wp-gadget-currency-selector {
    position: relative;
    display: inline-block;
}

/* Currency select styles inside sideup */
#sideup .ssh-wp-gadget-currency-select-wrapper {
    .ssh-wp-gadget-currency-select {
        width: 100%;
        font-family: 'Gilroy';
        font-size: 1rem;
        font-weight: 500;
        color: var(--blue);
        background-color: var(--white);
        border: 2px solid var(--lightgold);
        border-radius: 100px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23243046' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px;
        transition: all 0.2s ease;
        
        &:hover {
            border-color: var(--gold);
            background-color: var(--lightgold);
        }
        
        &:focus {
            outline: none;
            border-color: var(--sea);
            box-shadow: 0 0 0 3px rgba(25, 153, 162, 0.1);
        }
    }
    
    label {
        display: block;
        margin-bottom: 12px;
        font-family: 'Gilroy';
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--blue);
    }
}

@media (max-width: 768px) {
    #sideup .ssh-wp-gadget-currency-select-wrapper {
        .ssh-wp-gadget-currency-select {
            padding: 10px 35px 10px 15px;
            font-size: 0.95rem;
        }
    }
}

/* =========================
   Badge Component
========================= */

.rounded-button, .badge {
    /* display: inline-block; */
    border-radius: 100px !important;
    font-weight: 500;
    color: var(--white);    

    &.outline {
        border: 1px solid var(--white);
    }
}

.rounded-badge {
    border-radius: 100px !important;
}

.badge {
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.875rem;
    line-height: 1.2;
    z-index: 2;
    text-decoration: none !important;
    &:hover {
        color: var(--white);
    }
}
.position-top-left {
    position: absolute; top: 10px; left: 10px; 
}
.position-top-right {
    position: absolute; top: 10px; right: 10px; 
}   
.position-bottom-left {
    position: absolute; bottom: 10px; left: 10px; 
}
.position-bottom-right {
    position: absolute; bottom: 10px; right: 10px; 
}

/************************************************
            Cards Styles (Unified)
************************************************/

.cards {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-bottom: 30px;
    
    .card {
        height: 100%;
        border: 1px solid rgba(0, 0, 0, .125);
        border-radius: 0;
        transition: all ease-out 0.3s;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        
        &:hover {
            border-color: var(--gold);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .card-image-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: black;
                content: '';
                opacity: 0.1;
                pointer-events: none;
                z-index: 1;
            }
            
            .card-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }
            
            &:hover .card-image {
                transform: scale(1.05);
            }
            
            .card-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
                padding: 20px 15px 50px 15px;
                z-index: 2;
                
                .card-content {
                    position: relative;
                    z-index: 3;
                    
                    .card-title {
                        font-family: 'Gracela';
                        font-size: 1.3rem;
                        margin-bottom: 8px;
                        margin-top: 0;
                        color: var(--white);
                        
                        a {
                            color: white;
                            text-decoration: none;
                            transition: color 0.2s ease;
                            
                            &:hover {
                                color: var(--gold);
                            }
                        }
                    }
                    
                    .card-text {
                        color: var(--white);
                        margin-bottom: 0;
                        font-size: 0.95rem;
                        line-height: 1.6;
                    }
                }
            }
            
            .card-link-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                text-decoration: none;
            }
            .flex-container {
                gap: .5rem;
            }
            .card-quick-view-btn, .add-to-favourites-btn {
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease; 
                span:hover {
                    border: none;
                } 
                &:hover {
                    transform: scale(1.1);
                }
            }
            .card-quick-view-btn {
                border: 1px solid var(--white); 
                background: transparent;
                border-radius: 50%;
                width: 37px;
                height: 36px;
                span {
                    font-size: 22px;   
                    display: inline-table;                 
                }   
            }
            .add-to-favourites-btn {
                span {
                    display: inline-table;
                }
            }

        }
        
        .card-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            
            .card-title {
                font-family: 'Gracela';
                font-size: 1.3rem;
                margin-bottom: 12px;
                color: var(--white);
                
                a {
                    color: var(--blue);
                    text-decoration: none;
                    transition: color 0.2s ease;
                    
                    &:hover {
                        color: var(--sea);
                    }
                }
            }
            
            .card-text {
                color: var(--white);
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 15px;
                flex-grow: 1;
            }
        }
    }
}

@media (max-width: 768px) {
    .cards {
        .card {
            .card-image-wrapper {
                height: 300px;
            }
            
            .card-overlay {
                .card-content {
                    .card-title {
                        font-size: 1.1rem;
                    }
                }
            }
            
            .card-body {
                .card-title {
                    font-size: 1.1rem;
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .cards {
        .card {
            .card-image-wrapper {
                height: 250px;
            }
        }
    }
}

/**
            Modal Styles   
************************************************/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;

    .modal__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;

        .modal__container {
            background-color: #fff;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            border-radius: 4px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            position: relative;

            .modal__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                border-bottom: 1px solid #ddd;
                position: sticky;
                top: 0;
                background: #fff;
                z-index: 1;
                .modal__title {
                    margin: 0;
                    font-family: 'Gracela';
                    font-size: 1.5rem;
                    color: var(--blue);
                }
                
                .modal__close {
                    background: transparent;
                    border: 0;
                    font-size: 32px;
                    cursor: pointer;
                    padding: 0;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #666;
                    line-height: 1;
                    transition: color 0.2s ease;
                }
                :hover {
                    color: #000;
                }
            }

            .modal__content {
                padding: 20px;
            }

            .modal__footer {
                padding: 20px;
                border-top: 1px solid #ddd;
                background-color: var(--blue) !important;
                position: sticky;
                bottom: 0;
                z-index: 1;
                
                * {
                    color: white;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .modal {
        .modal__overlay {
            padding: 10px;
        
            .modal__container {
                max-width: 95%;
                max-height: 95vh;

                .modal__header {
                    .modal__title {
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
    
}

/************************************************
            Sideup Styles   
************************************************/
.sideup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;

    &.sideup--active {
        opacity: 1;
    }

    .sideup__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
        cursor: pointer;
    }

    .sideup__container {
        background-color: #fff;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        cursor: default;
        pointer-events: auto;

        &.sideup__container--active {
            transform: translateY(0);
        }

        .sideup__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #ddd;
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1;
            
            .sideup__title {
                margin: 0;
                font-family: 'Gracela';
                font-size: 1.5rem;
                color: var(--blue);
            }
            
            .sideup__close {
                background: transparent;
                border: 0;
                font-size: 32px;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;
                line-height: 1;
                transition: color 0.2s ease;
                
                &:hover {
                    color: #000;
                }
            }
        }

        .sideup__content {
            padding: 20px;
        }
    }
}

@media (max-width: 768px) {
    .sideup {
        .sideup__container {
            max-height: 90vh;

            .sideup__header {
                .sideup__title {
                    font-size: 1.2rem;
                }
            }
        }
    }
}

/************************************************
            Form Styles   
************************************************/

.acf-field {
    .acf-label {
        margin-bottom: 0 !important;
        label {
            font-family: 'Gracela';
            /* font-size: 1rem; */
        }
    }
    .acf-input {
        input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='reset'], [type='range']), textarea, select {
            display: block;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            margin-bottom: 20px;
            padding: 10px 20px !important;
            border-radius: 14px;
            background: var(--lightgold);
            border: none;
            color: var(--blue);
            
            &:focus {
                background: var(--lightgold);
                outline: none !important;
                box-shadow: none !important;
                border: none !important;
            }
        }
        input[type='text'], input[type='email'], input[type='tel'], input[type='number'], select {
            min-height: 54px;
        }
        textarea {
            resize: none !important;
        }
    }
}
.acf-field.acf-field-group {
    .acf-label {
        label {
            font-size: 1.2rem;
            margin: 10px 0!important;
        }
    }
    .acf-input {
        .acf-field {
            .acf-label {
                label {
                    margin-top: 0!important;
                    margin-bottom: 3px!important;
                    font-size: 14px;
                }
            }    
        }
        .acf-field-checkbox {
            margin-bottom: 20px!important;
        
            .acf-checkbox-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                list-style: none;
                padding: 0;
                margin: 0;
                
                li {
                    margin: 0 !important;
                    
                    label {
                        display: inline-block;
                        font-size: 13px;
                        border-radius: 100px !important;
                        font-weight: 500;
                        color: var(--blue);
                        background: var(--lightgold);
                        padding: 6px 20px 4px 20px;
                        cursor: pointer;
                        transition: all 0.2s ease;
                        border: 1px solid transparent;
                        
                        input[type="checkbox"] {
                            display: none;
                        }
                        
                        &:hover {
                            background: var(--gold);
                            color: var(--white);
                        }
                    }
                    
                    /* Style checked state using :has() selector */
                    label:has(input[type="checkbox"]:checked) {
                        background: var(--blue);
                        color: var(--white);
                    }
                    
                    /* Handle the "Toggle All" checkbox */
                    label:has(.acf-checkbox-toggle) {
                        background: var(--sea);
                        color: var(--white);
                        
                        &:hover {
                            background: var(--blue);
                        }
                    }
                }
            }
        }
    }
}

/* =========================
   Range Slider Styles
========================= */
.acf-range-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    
    input[type="range"] {
        flex: 1;
        height: 8px;
        border-radius: 5px;
        outline: none;
        -webkit-appearance: none;
        
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--gold);
            cursor: pointer;
            transition: background 0.2s ease;
            
            &:hover {
                background: var(--blue);
            }
        }
        
        &::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--gold);
            cursor: pointer;
            border: none;
            transition: background 0.2s ease;
            
            &:hover {
                background: var(--blue);
            }
        }
    }
    
    input[type="number"] {
        flex-shrink: 0;
        width: 100px !important;
        min-height: 50px;
        text-align: center;
        font-weight: 500;
    }
}

/************************************************
            Whatsapp & call Button Styles   
************************************************/

.hft-enquire-widget {
    display: flex;
    align-items: stretch;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    max-width: 100%;

    .hft-enquire-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        padding: 15px 20px;
        border-right: 3px solid rgba(159, 207, 203, 0.26);
        background-color: #1999a2;
        color: #ffffff;
        text-decoration: none;
        column-gap: 0.5em;
        transition: all 0.3s ease;
        cursor: pointer;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;

        &:last-child {
            border-right: none;
        }
        &:hover,
        &:active,
        &:focus {
            color: #ffffff;
            background-color: var(--blue);
            text-decoration: none;
        }
        &:focus {
            outline: 3px solid var(--sea);
            outline-offset: 2px;
        }
        svg {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
        }
    }
    .ssh-wp-gadget-call-btn {
        border-radius: 15px 0 0 15px;
    }
    
    .ssh-wp-gadget-whatsapp-btn {
        border-radius: 0 15px 15px 0;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    body {
        padding-bottom: 40px;
    }
    .hft-enquire-widget {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        flex-direction: row;

        .hft-enquire-btn {
            padding: 12px 15px;
            font-size: 14px;
            width: 50%;
            padding: 15px 20px;
            font-size: 16px;
            border-radius: 0;
            svg {
                width: 20px;
                height: 20px;
            }
        }
    }  
}

/* Print styles */
@media print {
    .hft-enquire-widget {
        display: none;
    }
}


/************************************************
            HEADER STYLES   
************************************************/

#ast-desktop-header {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 1, 0.4) 100%, transparent 100%);
    .favourites-btn {
        margin-right: 10px;
    }
}

/************************************************
            Menu STYLES   
************************************************/

.main-header-menu .menu-item .sub-menu .menu-item > .menu-link {
    color: var(--blue);
    &:hover {
        color: var(--gold);
    }
}

/************************************************
            FOOTER STYLES   
************************************************/

footer.site-footer {
    > div {
        border: none !important;
    }
    
    * {
        color: white;
    }
    
    .site-primary-footer-wrap,
    .site-below-footer-wrap {
        background-color: var(--blue) !important;
    }

    .footer-widget-area {
        .footer-nav-wrap {
            text-align: center;
            ul {
                padding: 0;
                margin: 0;
                li {
                    list-style: none;
                }
            }
        }
    }
}



/**
            Footer MID-CTA STYLES   
************************************************/

footer.site-footer  {
    
    .site-above-footer-wrap {
        position: relative;
        
        .site-above-footer-inner-wrap {
            height: 100%;
            min-height: 100%;
        
            h1, h4 {
                margin-bottom: 10px;
            }
            
            h4 div {
                font-size: 1.5rem;
                color: white;
                font-family: 'Gilroy';
                font-weight: normal;
            }
            
            .container .row:last-child {
                display: flex;
                flex-wrap: wrap;
                
                .col-md-4 {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;                    
                    
                    .rounded-button {
                        position: relative;
                        right: auto;
                        top: auto;
                        width: 100%;
                        padding: 3px 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        box-sizing: border-box;
                        flex-grow: 1;                        
                        
                        strong {
                            display: block;
                            font-size: 1.2em;
                        }
                        
                        small {
                            display: block;
                            font-size: 1em;
                        }
                    }
                }
            }
            
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: black;
                content: '';
                opacity: 0.4;
                pointer-events: none;
                z-index: 1;
            }
            
            > * {
                position: relative;
                z-index: 2;
            }
        }
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    footer.site-footer  {    
        .site-above-footer-wrap {            
            .site-above-footer-inner-wrap {                
                .container .row:last-child {                                        
                    .col-md-4 {
                        .rounded-button {
                            margin-bottom: 15px;                   
                        }
                    }
                }  
            }
        }
    }
}

/************************************************
            Editorial Page Styles   
************************************************/

.page-editorial {
        
    .editorial-layout {
        margin-bottom: 20px;
    }
    
    /* Hero Layout */
    .editorial-layout-hero {

        .editorial-hero-post {
            position: relative;
            min-height: 600px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.no-image {
                background: linear-gradient(135deg, var(--blue) 0%, #2a5a7f 100%);
                
                .editorial-hero-overlay {
                    background: rgba(0, 0, 0, 0.2);
                }
            }
            
            .editorial-hero-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
                display: flex;
                align-items: flex-end;
                padding: 60px 20px;
                
                .editorial-hero-content {
                    max-width: 800px;
                    width: 100%;
                    color: var(--white);
                    z-index: 2;
                    text-align: center;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    
                    .editorial-category {
                        margin-bottom: 15px;
                        color: var(--white);
                        background: rgba(255, 255, 255, 0.2);
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                        a {
                            color: var(--white);
                        }
                    }
                    
                    .editorial-title {
                        font-size: 2.5rem;
                        margin-bottom: 20px;
                        line-height: 1.2;
                        text-align: center;
                        width: 100%;
                        
                        a {
                            color: var(--white);
                            text-decoration: none;
                            transition: color 0.3s ease;
                            
                            &:hover {
                                color: var(--gold);
                            }
                        }
                    }
                    
                    .editorial-excerpt {
                        font-size: 1.1rem;
                        line-height: 1.6;
                        color: var(--white);
                        text-align: center;
                        width: 100%;
                        
                        p {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    
    /* Three Cards Layout */
    .editorial-layout-three-cards {
        padding-bottom: 10px;
        .row {
            gap: 0;
            margin: 0;
        }
        
        .col-md-4 {
            padding: 0;
                        
            .editorial-card {
                border: none;
            }
        }
        
        .editorial-card-overlay {
            border-radius: 0;
            
            .editorial-card-image {
                position: relative;
                height: 500px;
                aspect-ratio: auto;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                
                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
                    content: '';
                    z-index: 1;
                }
                
                .editorial-card-overlay-content {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 30px 20px;
                    z-index: 2;
                    color: var(--white);
                    text-align: center;
                    
                    .editorial-category {
                        color: var(--white);
                        background: rgba(255, 255, 255, 0.2);
                        margin-bottom: 12px;
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                    }
                    
                    .editorial-title {
                        margin-bottom: 10px;
                        
                        a {
                            color: var(--white);
                            
                            &:hover {
                                color: var(--gold);
                            }
                        }
                    }
                    
                    .editorial-excerpt {
                        color: rgba(255, 255, 255, 0.9);
                        font-size: 0.9rem;
                        line-height: 1.5;
                    }
                    
                    .editorial-read-more {
                        margin-top: 15px;
                        align-self: center;
                        width: 30px !important;
                        height: 30px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        border-radius: 50%;
                        
                        .dashicons {
                            font-size: 1.3rem;
                            width: 1.3rem;
                            height: 1.3rem;
                            line-height: 1;
                            color: var(--white);
                        }
                        
                        &:hover {
                            .dashicons {
                                transform: translateX(5px);
                                transition: transform 0.3s ease;
                            }
                        }
                    }
                }
            }
        }
        
        .editorial-card-no-image {
            background: var(--lightgold);
            border: 1px solid var(--gold);
            min-height: 500px;
            display: flex;
            flex-direction: column;
            
            .editorial-card-content {
                padding: 40px 30px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                
                .editorial-category {
                    color: var(--blue);
                    margin-bottom: 15px;
                }
                
                .editorial-title {
                    font-size: 1.8rem;
                    margin-bottom: 20px;
                    color: var(--blue);
                    
                    a {
                        color: var(--blue);
                        text-decoration: none;
                        transition: color 0.3s ease;
                        
                        &:hover {
                            color: var(--gold);
                        }
                    }
                }
                
                .editorial-excerpt {
                    color: var(--blue);
                    font-size: 1rem;
                    line-height: 1.6;
                    margin-bottom: 25px;
                }
                
                .editorial-read-more {
                    align-self: center;
                    margin-top: auto;
                }
            }
        }
    }
    
    /* Image Right/Left Layouts */
    .editorial-layout-image-right,
    .editorial-layout-image-left {
        
        .container {
            padding: 0;
            max-width: 100%;
        }
        
        .row {
            align-items: stretch;
            margin: 0;
            gap: 0;
            min-height: 600px;
            
            .col-md-6 {
                display: flex;
                flex-direction: column;
                padding: 0;
                min-height: 600px;
            }
        }
        
        .editorial-image {
            padding: 0;
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            border-radius: 0;
            
            a {
                display: flex;
                width: 100%;
                height: 100%;
            }
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 0;
            }
        }
        
        .editorial-content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            min-height: 0;
            background-color: var(--lightgold);
            height: 100%;

            .frame {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100%;

                .editorial-content-inner {
                    padding: 30px;
                    border-radius: 0;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    
                    .editorial-category {
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                        color: var(--white);
                        background-color: var(--gold);
                        border-radius: 0;
                        a {
                            color: var(--white);
                        }
                    }
                    
                    .editorial-title {
                        text-align: center;
                    }
                    
                    .editorial-excerpt {
                        text-align: center;
                    }
                    
                    .editorial-read-more {
                        margin-top: auto;
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                        border-radius: 0;
                    }
                }
            }
            
        }
    }
    
    .editorial-layout-image-right {
        .row {
            .col-md-6:last-child {
                padding: 0;
            }
        }
        
        &.no-image {
            .row {
                min-height: 400px;
            }
            
            .editorial-content {
                max-width: 1200px;
                margin: 0 auto;
                
                .frame {
                    max-width: 900px;
                    margin: 0 auto;
                }
            }
        }
    }
    
    .editorial-layout-image-left {
        .row {
            .col-md-6:first-child {
                padding: 0;
            }
        }
        
        &.no-image {
            .row {
                min-height: 400px;
            }
            
            .editorial-content {
                max-width: 1200px;
                margin: 0 auto;
                
                .frame {
                    max-width: 900px;
                    margin: 0 auto;
                }
            }
        }
    }
    
    /* Two Cards Layout */
    .editorial-layout-two-cards {
        
        .container {
            padding: 0;
            max-width: 100%;
        }
        
        .row {
            margin: 0;
            background-color: var(--lightgold);

            
            .col-md-8,
            .col-md-4 {
                padding: 0;
            }

            .col-md-8:first-child {
                padding-right: 10px;
            }            
        }
        
        .editorial-card {
            border-radius: 0;
            border: none;
            background-color: transparent;
            
            .editorial-card-content {
                display: flex;
                text-align: center;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .editorial-content-inner {
                    padding: 30px;
                    border-radius: 0;
                    display: flex;
                    flex-direction: column;
                    text-align: center;

                    .editorial-category {
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                    }
                    
                    .editorial-title {
                        text-align: center;
                        width: 100%;
                    }
                    
                    .editorial-excerpt {
                        text-align: center;
                        width: 100%;
                        
                        p {
                            text-align: center;
                        }
                    }
                    
                    .editorial-read-more {
                        align-self: center;
                        width: auto !important;
                        display: inline-flex;
                    }
                }                
            }
        }
    }
    
    /* Card Styles */
    .editorial-card {
        background: var(--white);
        border: 1px solid var(--lightgold);
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        
        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--gold);
            transform: translateY(-5px);
            
            .editorial-card-image img {
                transform: scale(1.05);
            }
        }
        
        .editorial-card-image {
            position: relative;
            width: 100%;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }
        }
        
        .editorial-card-content {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        &.editorial-card-large {
            min-height: 500px;
        }
        
        &.editorial-card-small {
            min-height: 500px;
            display: flex;
            flex-direction: column;
            
            .editorial-card-content {
                order: 1;
            }
            
            .editorial-card-image {
                order: 2;
                margin-top: auto;
            }
        }
        
        &.no-image {
            background: linear-gradient(135deg, var(--lightgold) 0%, rgba(199, 175, 126, 0.3) 100%);
            justify-content: center;
            
            .editorial-card-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 40px 30px;
                
                .editorial-category {
                    background: var(--blue);
                    color: var(--white);
                    align-self: flex-start;
                }
                
                .editorial-title {
                    font-size: 1.8rem;
                    margin-bottom: 20px;
                }
                
                .editorial-excerpt {
                    margin-bottom: 25px;
                }
            }
        }
    }
    
    /* Category, Title, Excerpt */
    .editorial-category {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        padding: 4px 12px;
        color: var(--white);
        background: var(--gold);
    }
    
    .editorial-title {
        font-family: 'Gracela';
        font-size: 1.5rem;
        margin-bottom: 15px;
        line-height: 1.3;
        
        a {
            color: var(--blue);
            text-decoration: none;
            transition: color 0.3s ease;
            
            &:hover {
                color: var(--sea);
            }
        }
    }
    
    .editorial-excerpt {
        color: #646970;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0;
        flex-grow: 1;
        
        p {
            margin-bottom: 0;
        }
    }
    
    /* Image Styles */
    .editorial-image {
        position: relative;
        overflow: hidden;
        
        img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }
        
        &:hover img {
            transform: scale(1.05);
        }
    }
    
    /* Content Styles */
    .editorial-content {
        padding: 20px 0;
        
        .editorial-title {
            font-size: 2rem;
            margin-bottom: 20px;
        }
        
        .editorial-excerpt {
            font-size: 1rem;
            margin-bottom: 25px;
        }
    }
    
    .editorial-read-more {
        margin-top: 10px;
    }

    .editorial-read-more.circle {
        margin-top: 15px;
        align-self: center;
        width: 30px !important;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        
        .dashicons {
            font-size: 1.3rem;
            width: 1.3rem;
            height: 1.3rem;
            line-height: 1;
            color: var(--white);
        }
        
        &:hover {
            .dashicons {
                transform: translateX(5px);
                transition: transform 0.3s ease;
            }
        }
    }    
    
    
    /* No Posts */
    .editorial-no-posts {
        text-align: center;
        padding: 60px 20px;
        color: var(--blue);
        font-size: 1.1rem;
    }
    
    /* Responsive Styles */
    @media (max-width: 992px) {
        .editorial-layout-hero {
            .editorial-hero-post {
                .editorial-hero-overlay {
                    .editorial-hero-content {
                        .editorial-title {
                            font-size: 2rem;
                        }
                    }
                }
            }
        }
        
        .editorial-content {
            .editorial-title {
                font-size: 1.5rem;
            }
        }
        
        .editorial-layout-image-right,
        .editorial-layout-image-left {
            .row {
                flex-direction: column;
                
                .col-md-6:first-child {
                    order: 2;
                    margin-top: 20px;
                }
                
                .col-md-6:last-child {
                    order: 1;
                }
            }
        }
    }
    
    @media (max-width: 768px) {
        
        .editorial-layout {
            margin-bottom: 40px;
        }
        
        .editorial-layout-hero {
            .editorial-hero-post {
                min-height: 400px;
                
                .editorial-hero-overlay {
                    padding: 40px 15px;
                    
                    .editorial-hero-content {
                        .editorial-title {
                            font-size: 1.5rem;
                        }
                        
                        .editorial-excerpt {
                            font-size: 1rem;
                        }
                    }
                }
            }
        }
        
        .editorial-layout-three-cards {
            .row {
                gap: 0;
            }
            
            .col-md-4 {
                margin-bottom: 20px;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .editorial-card {
                    border-radius: 8px !important;
                    border: 1px solid var(--lightgold) !important;
                }
            }
            
            .editorial-card-overlay {
                .editorial-card-image {
                    height: 300px;
                }
            }
        }
        
        .editorial-card {
            .editorial-card-content {
                padding: 20px;
            }
        }
        
        .editorial-title {
            font-size: 1.3rem;
        }
        
        .editorial-card-large,
        .editorial-card-small {
            min-height: auto;
        }
        
        .editorial-layout-two-cards {
            .row {
                gap: 20px;
            }
        }        
    }
    
    @media (max-width: 480px) {
        .editorial-layout-hero {
            .editorial-hero-post {
                min-height: 350px;
                
                .editorial-hero-overlay {
                    .editorial-hero-content {
                        .editorial-title {
                            font-size: 1.3rem;
                        }
                        
                        .editorial-excerpt {
                            font-size: 0.95rem;
                        }
                    }
                }
            }
        }
        
        .editorial-layout-three-cards {
            .editorial-card-overlay {
                .editorial-card-image {
                    height: 250px;
                    
                    .editorial-card-overlay-content {
                        padding: 15px 12px;
                        
                        .editorial-title {
                            font-size: 1.1rem;
                            margin-bottom: 8px;
                        }
                        
                        .editorial-excerpt {
                            font-size: 0.85rem;
                        }
                    }
                }
            }
        }
        
        .editorial-card {
            .editorial-card-content {
                padding: 15px;
            }
        }
        
        .editorial-title {
            font-size: 1.2rem;
        }
        
        .editorial-excerpt {
            font-size: 0.9rem;
        }
        
        .editorial-content {
            padding: 15px 0;
            
            .editorial-title {
                font-size: 1.3rem;
            }
        }
    }
}



/************************************************
            Home Page Styles   
************************************************/

/************************************************
            Search Page Styles   
************************************************/

.search.search-results, 
.archive.category,
.archive.tag {
    .content-area {

        /* Search bar area  */
        section {
            margin-bottom: 0;
        }

        .post-content {
            .entry-title {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 50px;
                max-height: 50px;
                line-height: 1.2;
                margin-bottom: .5rem;
            }
            .ast-excerpt-container p {
                display: -webkit-box;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 120px;
                line-height: 1.5;
                margin-bottom: 0;
            }
        }
    }
}
/************************************************
            Destination Page Styles   
************************************************/
.tax-destination {
    .experiences {
        .cards {
            .card {
                min-height: 500px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center !important;
                padding: 40px 20px;
                color: var(--white);
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
                background-size: cover;
                background-position: center;

                &::before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: black;
                    content: '';
                    opacity: 0;
                    pointer-events: none;
                    z-index: 1;
                    transition: opacity 0.3s ease;
                }

                h3 {
                    text-align: center !important;
                    color: var(--white) !important;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 2;
                    transition: margin-bottom 0.3s ease, background 0.3s ease, padding 0.3s ease;
                    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0) 100%);
                    padding: 15px 25px;
                }
                
                .entry-content {
                    font-size: 1rem;
                    position: relative;
                    z-index: 2;
                    opacity: 0;
                    max-height: 0;
                    overflow: hidden;
                    transition: opacity 0.3s ease, max-height 0.3s ease;
                    margin-top: 0;
                }

                &:hover {
                    &::before {
                        opacity: 0.6;
                    }

                    h3 {
                        margin-bottom: 15px;
                        background: transparent;
                        padding: 0;
                    }

                    .entry-content {
                        opacity: 1;
                        max-height: 500px;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}

/************************************************
            Wellness Hotel Page Styles   
************************************************/
.page-wellness-hotels {
    background-color: var(--lightgold);
}


/**
            Hotel Filter Shortcode Styles   
************************************************/

.hft-hotel-filter-container {
    
    .hft-hotel-filters {
        /* background: var(--white);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
        position: sticky;
        top: 20px;
        
        .hft-filter-title {
            font-family: 'Gracela';
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--blue);
        }
        
        .hft-filter-group {
            margin-bottom: 25px;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .hft-filter-group-title {
                font-family: 'Gilroy';
                font-weight: 600;
                font-size: 1rem;
                margin-bottom: 12px;
                color: var(--gold);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            
            .hft-filter-options {
                display: flex;
                flex-direction: column;
                gap: 8px;
                
                .hft-filter-option {
                    display: flex;
                    align-items: center;
                    padding: 8px 12px;
                    cursor: pointer;
                    border-radius: 4px;
                    transition: background-color 0.2s ease;
                    font-size: 0.95rem;
                    
                    &:hover {
                        background-color: var(--lightgold);
                    }
                    
                    .hft-filter-checkbox {
                        margin-right: 10px;
                        cursor: pointer;
                        width: 18px;
                        height: 18px;
                        flex-shrink: 0;
                    }
                    
                    span:not(.hft-filter-count) {
                        flex-grow: 1;
                        color: var(--blue);
                    }
                    
                    .hft-filter-count {
                        font-size: 0.85rem;
                        margin-left: auto;
                    }
                }
                
                /* Nested continent/country structure */
                .hft-filter-continent-wrapper {
                    display: flex;
                    flex-direction: column;
                    
                    .hft-filter-continent-header {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        
                        .hft-filter-continent {
                            flex: 1;
                            margin: 0;
                        }
                        
                        .hft-toggle-continent {
                            width: 24px;
                            height: 24px;
                            min-width: 24px;
                            padding: 0;
                            font-size: 18px;
                            line-height: 1;
                            flex-shrink: 0;
                            margin-left: auto;
                            
                            .hft-toggle-icon {
                                display: inline-block;
                                font-weight: 600;
                                user-select: none;
                            }
                        }
                    }
                    
                    .hft-filter-countries {
                        margin-left: 32px;
                        margin-top: 4px;
                        padding-left: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 6px;
                        
                        .hft-filter-country {
                            padding-left: 12px;
                            font-size: 0.9rem;
                            
                            span:not(.hft-filter-count) {
                                color: var(--blue);
                            }
                        }
                    }
                }
                
                /* Hidden filter items */
                .hft-filter-item-hidden {
                    display: none;
                }
                
                /* Show More / Show Less buttons - uses btn-link component */
                .hft-show-more-btn,
                .hft-show-less-btn {
                    margin-top: 8px;
                    width: 100%;
                }
            }
        }
        
        /* Filter button specific styles - uses base .btn component */
        .hft-clear-filters {
            margin-top: 20px;
        }
    }
    
    .hft-hotel-results {
        min-height: 400px;
        
        .cards.row {
            --bs-gutter-x: .5rem;
            --bs-gutter-y: .5rem;
        }
        
        .hft-results-header {
            margin-bottom: 20px;
            border-bottom: 2px solid var(--lightgold);
            
            .hft-results-count {
                font-family: 'Gilroy';
                font-size: 1.1rem;
                color: var(--blue);
                
                .hft-results-number {
                    font-weight: 600;
                    color: var(--sea);
                }
            }
        }
    }
    
    .hft-no-results {
        text-align: center;
        padding: 40px 20px;
        color: #646970;
        font-size: 1.1rem;
    }
    
    .hft-error {
        padding: 15px 20px;
        background-color: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 4px;
        color: #856404;
        margin: 20px 0;
    }
    
    .hft-hotel-list-container {
        margin: 30px 0;
    }
    
    @media (max-width: 768px) {
        .hft-hotel-filters {
            position: static;
            margin-bottom: 30px;
            
            .hft-filter-title {
                font-size: 1.3rem;
            }
        }
        .hft-hotel-results { 
            min-height: auto;
        }
    }
    
    @media (max-width: 480px) {
        .hft-hotel-filter-container {
            margin: 20px 0;
        }
        
        .hft-hotel-filters {
            padding: 15px;
            
            .hft-filter-title {
                font-size: 1.2rem;
                margin-bottom: 15px;
            }
            
            .hft-filter-group {
                margin-bottom: 20px;
            }
        }
    }
}


/***********************************************
        Term Page Styles   
************************************************/

body {    
    &.archive[class*=" tax-"] {
        .site-header {
            position: absolute;
            left: 0;
            right: 0;

            #ast-desktop-header {
                background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 1, 0.4) 100%, transparent 100%);
                
                .ast-above-header.ast-above-header-bar, 
                .ast-primary-header-bar {
                    background: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                }
            }
        }
        section.ast-single-entry-banner[data-post-type="page"] {
            display: flex;
            flex-direction: column;
            text-align: center;
            position: relative;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center center;
            background-size: cover;
            justify-content: center;
            min-height: 500px;
            width: 100%;
            padding-top: 3em;
            padding-right: 3em;
            padding-bottom: 3em;
            padding-left: 3em;       

            .ast-container {
                display: block;
                width: 100%;
                
                > *:not(:last-child) {
                    margin-bottom: 10px;
                }
                
                > *:last-child {
                    margin-bottom: 0;
                }
            }
            
            .read-more {
                margin-bottom: 10px;
                
                .ast-button {
                    margin-top: 0.5em;
                    display: inline-block;
                }
            }
            
            .entry-title {
                color: var(--ast-global-color-4);
                font-weight: 600;
                font-size: 32px;
                font-size: 2rem;
            }
            
            > .entry-title {
                margin-bottom: 0;
            }
            
            .post-thumb img,
            .ast-single-post-featured-section img {
                aspect-ratio: 16/9;
                width: 100%;
                height: 100%;
            }
            
            
        }
    }
}
@media (min-width: 922px) {
    section.ast-single-entry-banner .ast-container {
        max-width: 750px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 921px) {
    .ast-container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 544px) {
    .ast-container {
        min-height: 470px;
    }
}


/************************************************
            Single Hotel Page Styles   
************************************************/

.single-hotel {
    .hotel-enquiry {
        .row {
            align-items: stretch;
        }
        
        .featured-image-wrapper {
            height: 100%;
            display: flex;
            align-items: center;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 4px;
            }
        }
    }
}

.hotel-content-sections {
    .hotel-content-section {
        margin-bottom: 40px;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .hotel-section-image {
            margin-bottom: 20px;
            
            img {
                border-radius: 4px;
            }
        }
        
        .hotel-section-content {
            .hotel-section-title {
                font-family: 'Gracela';
                color: var(--blue);
                margin-bottom: 15px;
            }
            
            .hotel-section-text {
                color: var(--blue);
                line-height: 1.6;
            }
        }
    }
    
    @media (min-width: 768px) {
        .hotel-content-section {
            .hotel-section-image {
                margin-bottom: 0;
            }
        }
    }
}

/************************************************
            Programme Page Styles   
************************************************/

.single-programme {
    .programme {
        padding-bottom: 0;
        
        .programme-enquiry {
            .row {
                align-items: stretch;
            }
            
            .featured-image-wrapper {
                height: 100%;
                display: flex;
                align-items: center;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 4px;
                }
            }
        }
        
        .entry-content + div {
            .featured-image-wrapper {
                img {
                    width: 100%;
                    border-radius: 4px;
                }
            }
        }

        /* Styling for the sticky card */
        .programme-hotels {
            .hotel {
                background: var(--white);
                padding: 1.5rem;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 100%;
                    height: auto;
                    border-radius: 8px;
                    margin-bottom: 1rem;
                    display: block;
                }
            
                h3 {
                    margin: 1rem 0;
                    font-size: 1.5rem;
                }
            
                p {
                    line-height: 1.6;
                    color: #666;
                }
            }
        }
    }
}

/**
            Programme Pricing Styles   
************************************************/

.programme-durations {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;

    .programme-durations-header {
        .col-md-6 {
            display: flex;
            padding: 0;
            h4 {
                text-align: center;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }
            &:first-child h4 {
                background-color: var(--gold);
                color: var(--ast-global-color-4);
                font-family: 'Gilroy-bold' !important;
                padding: 15px 20px;
                margin: 0;
            }
            &:last-child h4 {
                background-color: var(--lightgold);
                color: var(--blue);
                font-family: 'Gilroy-bold' !important;
                padding: 15px 20px;
                margin: 0;
                
                .other-programmes-link {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    text-decoration: none;
                    color: inherit;
                    
                    .arrow-icon {
                        font-size: 1.2em;
                        transition: transform 0.3s ease;
                    }
                    
                    &:hover .arrow-icon {
                        transform: translateX(5px);
                    }
                }
            }
        }
    }
    .programme-pricing-container {    
        background: var(--blue) !important;
        color: var(--white) !important;
        font-family: 'Gilroy-bold' !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px;

        .programme-pricing-header {
            padding: 15px 20px !important;
            margin: 0 !important;
            border-bottom: 1px solid var(--lightgold) !important;
            
            .season-toggle-buttons {
                display: flex;
                gap: 5px;
                margin-top: 8px;
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .season-toggle-btn {
                background: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.3);
                color: var(--white);
                
                &:hover {
                    background: rgba(255, 255, 255, 0.3);
                }
                
                &.active {
                    background: var(--gold);
                    border-color: var(--gold);
                    color: var(--white);
                }
            }
        }
        
        .programme-pricing-row {
            padding: 15px 20px !important;
            margin: 0 !important;
            transition: background-color 0.2s ease;
            font-family: 'Gilroy';
            cursor: pointer;         
            
            &:hover {
                background-color: var(--gold) !important;
            }
            
            &.active {
                background-color: var(--gold) !important;
            }
            
            strong {
                font-weight: 500;
            }
            
            .price-not-available {
                color: #999;
                font-style: italic;
            }
            
            .duration-text {
                display: block;
                margin-bottom: 4px;
                font-weight: 500;
            }
            
            .season-label {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                padding: 2px 8px;
                border-radius: 4px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                
                &.season-low {
                    background-color: rgba(255, 255, 255, 0.2);
                    color: var(--white);
                }
                
                &.season-high {
                    background-color: rgba(255, 255, 255, 0.3);
                    color: var(--white);
                }
            }
        }
    }
}

/**
        Selected Duration Content Styles   
************************************************/

.selected-duration-content-container {
    .duration-content-wrapper {
        background: var(--white);
        border-radius: 14px;
        padding: 20px;
        font-family: 'Gilroy';
        color: var(--blue);
        line-height: 1.6;
        margin-bottom: 20px;
        
        * {
            color: var(--blue);
        }
    }
}


@media (max-width: 768px) {
    .programme-pricing-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        .programme-pricing-header,
        .programme-pricing-row {
            font-size: 11px;
            padding: 8px 5px !important;
            min-width: 100%;
            flex-wrap: nowrap;
        }
        
        .programme-pricing-header {
            .col-3 {
                padding: 0 3px;
                text-align: center;
                flex: 0 0 25%;
                max-width: 25%;
            }
            
            .season-toggle-buttons {
                gap: 3px;
                margin-top: 5px;
            }
            
            .season-toggle-btn {
                padding: 3px 8px;
                font-size: 9px;
            }
        }
        
        .programme-pricing-row {
            .col-3 {
                padding: 0 3px;
                text-align: center;
                flex: 0 0 25%;
                max-width: 25%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .duration-text {
                font-size: 10px;
                display: block;
            }
            
            .season-label {
                font-size: 9px;
                padding: 2px 4px;
            }
        }
    }
}

/* =========================
   Favourites List Component
========================= */

.favourites-list-container {
    margin-top: 20px;
    
    #favourites-grid {
        min-height: 200px;
    }
    
    #favourites-loading,
    #favourites-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--blue);
    }
}

/************************************************
            Start Planning Quiz Styles   
************************************************/

body.start-planning-quiz-page {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    #masthead,
    #colophon,
    .site-header,
    .site-footer {
        display: none !important;
    }

    #page {
        margin: 0;
        padding: 0;
    }
}

.start-planning-quiz {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;

    .site-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        height: 100vh;
    }

    .quiz-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100vh;
        width: 100%;
    }

    .quiz-step {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: center;
        padding: 80px 20px 20px;
        animation: fadeIn 0.3s ease-in-out;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        z-index: 1;
        overflow-y: hidden;
        overflow-x: hidden;

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(171, 118, 56, 0.6);
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(171, 118, 56, 0.8);
        }

        &.active {
            display: flex;
        }

        .quiz-step-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .quiz-step-content {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
            padding: 2rem 1.5rem;
            border-radius: 0;
            box-shadow: none;
            background: rgba(0, 0, 0, 0.65);
            min-height: fit-content;
        }
    }

    .quiz-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--white);
    }

    .quiz-subtitle {
        font-size: 1.25rem;
        font-weight: 500;
        margin-bottom: 1rem;
        color: var(--lightgold);
    }

    .quiz-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        color: var(--lightgold);
    }

    .quiz-step-title {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: var(--white);
    }

    .quiz-field-label {
        font-size: 1.25rem;
        font-weight: 500;
        margin-bottom: 1rem;
        color: var(--white);
    }

    .quiz-options {
        margin-bottom: 2rem;
    }

    .quiz-field-group {
        margin-bottom: 1.5rem;
    }

    .quiz-range-input {
        width: 100%;
        height: 8px;
        border-radius: 5px;
        background: #e0e0e0;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        margin: 1rem 0;

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--gold);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;

            &:hover {
                background: #b8941f;
                transform: scale(1.1);
            }
        }

        &::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--gold);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;

            &:hover {
                background: #b8941f;
                transform: scale(1.1);
            }
        }
    }

    .quiz-range-value {
        text-align: center;
        margin-top: 1rem;
    }

    .quiz-range-display {
        display: inline-block;
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold);
        padding: 0.5rem 1.5rem;
        background: rgba(212, 175, 55, 0.1);
        border-radius: 8px;
        min-width: 80px;
    }

    .quiz-field-error {
        color: #dc3545;
        font-style: italic;
        padding: 1rem;
        background: #fff3cd;
        border-radius: 4px;
    }

    .quiz-options-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        justify-content: center;

        @media (min-width: 768px) {
            gap: 0.75rem;
        }
    }

    .quiz-option {
        display: inline-flex;
        position: relative;
        cursor: pointer;
        padding: 0.25rem .5rem;
        transition: all 0.3s ease;
        text-align: left;
        align-items: center;
        margin: 0;

        &:hover {
            border-color: var(--gold);
            box-shadow: 0 4px 12px rgba(188, 181, 158, 0.15);
            transform: translateY(-2px);
        }

        input[type="radio"],
        input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;

            & + .quiz-option-label {
                display: inline-block;
                font-size: 0.95rem;
                font-weight: 500;
                color: var(--white);
                padding-left: 1.75rem;
                position: relative;
                margin: 0;
                line-height: 1.4;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    border: 2px solid #ccc;
                    border-radius: 4px;
                    background: #fff;
                    transition: all 0.3s ease;
                }
            }

            &[type="radio"] + .quiz-option-label::before {
                border-radius: 50%;
            }

            &:checked + .quiz-option-label {
                &::before {
                    border-color: var(--gold);
                    background: var(--gold);
                }
            }

            &[type="radio"]:checked + .quiz-option-label::after {
                content: '';
                position: absolute;
                left: 5px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #fff;
            }

            &[type="checkbox"]:checked + .quiz-option-label::after {
                content: '✓';
                position: absolute;
                left: 4px;
                top: 50%;
                transform: translateY(-50%);
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            &[type="radio"]:checked ~ .quiz-option-label,
            &[type="checkbox"]:checked ~ .quiz-option-label {
                color: var(--gold);
                font-weight: 600;
            }

            &[type="radio"]:checked ~ .quiz-option,
            &[type="checkbox"]:checked ~ .quiz-option {
                border-color: var(--gold);
                background: #fff9e6;
            }
        }
    }

    .quiz-option-label {
        display: inline-block;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--white);
        padding-left: 1.75rem;
        position: relative;
        margin: 0;
        line-height: 1.4;
    }

    .quiz-navigation {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1.5rem;
        align-items: center;

        .quiz-nav-left {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
    }

    .quiz-btn-next,
    .quiz-btn-prev,
    .quiz-btn-restart {
        padding: 12px 30px;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .quiz-btn-next,
    .quiz-btn-restart {
        background: var(--gold);
        color: #fff;
        margin-left: auto;

        &:hover {
            background: #b8941f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
        }
    }

    .quiz-btn-prev {

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
        }
    }

    .quiz-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        background: #e0e0e0;
        z-index: 1000;

        .quiz-progress-bar {
            height: 100%;
            background: var(--gold);
            transition: width 0.3s ease;
            width: 0%;
        }
    }

    .quiz-btn-home {
        

        .quiz-btn-home-icon {
            display: inline-block;
            margin-right: 0.5rem;
            font-size: 1.2rem;
            line-height: 1;
            font-weight: 600;
        }
    }

    .quiz-results {
        margin-top: 2rem;
        text-align: left;
        color: var(--lightgold);
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.5rem;

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(171, 118, 56, 0.6);
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(171, 118, 56, 0.8);
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;

            > div {
                padding: 0;
                margin: 0;
            }
        }
    }

    .quiz-loading,
    .quiz-error {
        text-align: center;
        padding: 3rem;
        font-size: 1.1rem;
        color: #666;
    }

    .quiz-error {
        color: #dc3545;
    }

    /* Mobile Responsive */
    @media (max-width: 767px) {
        .quiz-step {
            padding: 70px 10px 20px;
            align-items: flex-start;
            overflow-y: auto;
            overflow-x: hidden;

            .quiz-step-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
            }

            .quiz-step-content {
                padding: 1.5rem 1rem;
                margin: 0 1rem;
            }
        }

        .quiz-title {
            font-size: 2rem;
        }

        .quiz-step-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .quiz-subtitle {
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
        }

        .quiz-options-grid {
            gap: 0.5rem;
            justify-content: flex-start;
        }

        .quiz-option {
            padding: 0.6rem 1rem;
            font-size: 0.9rem;
        }

        .quiz-option-label {
            font-size: 0.9rem;
            padding-left: 1.5rem;
        }

        .quiz-navigation {
            flex-direction: column;
            margin-top: 1rem;
        }

        .quiz-btn-next,
        .quiz-btn-prev,
        .quiz-btn-restart {
            width: 100%;
            margin-left: 0;
        }

        .quiz-results {
            max-height: 50vh;

            .cards {
                grid-template-columns: 1fr;
            }
        }

        .quiz-field-group {
            margin-bottom: 1rem;
        }

        .quiz-field-label {
            margin-bottom: 0.75rem;
            font-size: 1.1rem;
        }

        .quiz-btn-home {
            padding: 10px 20px;
            font-size: 0.9rem;
        }

        .quiz-nav-left {
            flex-direction: column;
            gap: 0.75rem;
            width: 100%;
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
                 Sticky Style
   ============================================================================= */

/* Step 1: Fix all parent containers - they CANNOT have overflow hidden/auto */
body,
#page,
#content,
.site-content,
.ast-container,
article {
    overflow: visible !important;
    contain: none !important;
}

/* Step 2: Simple sticky on the element */
@media (min-width: 768px) {
    .sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 20px !important;
        z-index: 100 !important;
        will-change: transform;
    }
}

/* Mobile: no sticky */
@media (max-width: 767px) {
    .sticky {
        position: relative !important;
        top: auto !important;
    }
}