/*~~~~~~~~~~~~~~~~~~~~ GLOBAL RESET ~~~~~~~~~~~~~~~~~~~~*/
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*~~~~~~~~~~~~~~~~~~~~ GLOBAL VARIABLES ~~~~~~~~~~~~~~~~~~~~*/
/*-- Light Mode Variables --*/
:root {
    /* Brand colors */
    --kiche-ochre: #fb6837;
    --kiche-yellow: #fac234;
    --kiche-brown: #e28d61;
    --kiche-green: #cee88a;
    --kiche-white: #eeeeee;

    --kiche-dark-green: #0c4c2a;
    --kiche-light-green: #2f9947;
    --kiche-dark-orange: #ea6a24;
    --kiche-light-orange: #f58020;

    --hero-gradient-overlay-tint: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25), rgba(67, 20, 7, 0.2));

    /* --badge-bg-yellow: #fef9c3; */
    --badge-bg-yellow: #f8f8ee;

    /*~~~~~~~~~~~~~~~~  Light Base ~~~~~~~~~~~~~~~~*/
    --row-max-width: 1280px;
    --banner-transition-speed: 0.4s;
    --banner-bezier-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --brand-yellow-ochre-gradient: linear-gradient(90deg, #cee88a, #fb6837);

    --drawer-backdrop-color: rgba(0, 0, 0, 0.4);
    --modal-overlay-bg: rgba(179, 39, 39, 0.5);

    /*~~~~~~~~~~~~~~~~ Light Theme Interface Specific Options Mapping ~~~~~~~~~~~~~~~~*/
    --banner-border-top: #e5e7eb;
    --banner-text-accent: #000000;
    --banner-close-btn-border: #e5e7eb;
    --banner-close-btn-hover-bg: #f3f4f6;

    /*~~~~~~~~~~~~~~~~ navigation header ~~~~~~~~~~~~~~~~*/
    --system-animation-speed: 0.3s;
    --menu-transition-speed: 5ms;
    --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /*~~~~~~~~~~~~~~~~ Mobile-First Theme Style Configuration Variables ~~~~~~~~~~~~~~~~*/
    --canvas-panel-width: clamp(280px, 35vw, 00px);
    --system-animation-speed: 0.3s;
    --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /*~~~~~~~~~~~~~~~~ WORLD BEST TOURS ~~~~~~~~~~~~~~~~*/
    --featured-heading-size: clamp(1.75rem, 4vw, 2.25rem);
    --featured-transition-speed: 0.3s;
    --featured-card-radius: 0.75rem;
    --featured-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --card-surface-bg: #ffffff;
    --card-surface-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --card-surface-hover-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.15);
    --card-border-line: #e5e7eb;
    --card-heading-text: #111827;
    --card-body-text: #4b5563;
    --card-label-support: #6b7280;

    --badge-yellow-bg: #fef9c3;
    --badge-yellow-text: #854d0e;


    /*~~~~~~~~~~~~~~~~ WHAT IS TRENDING ~~~~~~~~~~~~~~~~*/
    --offers-heading-clamp: clamp(1.75rem, 4vw, 2.25rem);
    --offers-transition-speed: 0.3s;
    --offers-card-radius: 1.5rem;
    --offers-bezier: cubic-bezier(0.4, 0, 0.2, 1);
    --whatsapp-green-gradient: linear-gradient(135deg, #4ade80, #22c55e, #16a34a);

    --offer-surface-bg: #ffffff;
    --offer-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
    --offer-surface-hover-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.12);
    --offer-border-line: #e5e7eb;
    --offer-text-heading: #111827;
    --offer-text-supporting: #6b7280;

    --ribbon-bg-white-glass: rgba(255, 255, 255, 0.9);
    --ribbon-text-dark: #334155;

    /*~~~~~~~~~~~~~~~~ WHY KICHE ~~~~~~~~~~~~~~~~*/
    --marquee-scrolling-speed: 15s;

    --why-us-bg-card: #f9fafb;
    --why-us-border: #d2af9a;
    --why-us-text-main: #111827;
    --why-us-text-muted: #4b5563;
    --why-us-text-support: #6b7280;
    --marquee-mask-gradient-left: linear-gradient(to right, #ffffff, transparent);
    --marquee-mask-gradient-right: linear-gradient(to left, #ffffff, transparent);

    /*~~~~~~~~~~~~~~~~ Main Section Variables Config ~~~~~~~~~~~~~~~~*/
    --hero-matte-dim-color: rgba(15, 23, 42, 0.35);
    --hero-gradient-overlay-tint: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25), rgba(67, 20, 7, 0.2));
    --filter-pane-bg: rgba(255, 255, 255, 0.12);
    --filter-pane-border: rgba(255, 255, 255, 0.2);
    --filter-select-dropdown-bg: rgba(255, 255, 255, 0.95);
    --text-white-pure: #ffffff;
    --text-gray-muted: #e2e8f0;

    /*~~~~~~~~~~~~~~~~ WhatsApp Widget Variables Config ~~~~~~~~~~~~~~~~*/
    --wa-brand-green: #cee88a;
    --wa-brand-green-hover: #f3ddd9;
    --wa-panel-width: clamp(300px, 90vw, 360px);
    --wa-curve-radius: 24px;
    --wa-widget-bezier: cubic-bezier(0.4, 0, 0.2, 1);
    --wa-widget-speed: 0.3s;

    --wa-bg-panel-body: #edf4f0;
    --wa-bg-bubble-card: #ffffff;
    --wa-text-bubble-main: #334155;
    --wa-border-panel: #bbf7d0;
    --wa-input-border: #e2e8f0;

    --bg-primary: #21211e;
    --bg-secondary: #f9fafb;
    --bg-header-glass: rgba(255, 255, 255, 0.85);
    --border-color: #e5e7eb;
    --text-main: #111827;
    /* --text-muted: #4b5563; */
    /* --text-muted: var(--kiche-green); */
    --text-support: #6b7280;
    --input-focus-shadow: rgba(239, 68, 68, 0.12);

    /*~~~~~~~~~~~~~~~~ Category Component Variables Config ~~~~~~~~~~~~~~~~*/
    --category-heading-clamp: clamp(1.75rem, 4vw, 2.25rem);
    --category-transition-speed: 0.3s;
    --category-ease-curve: cubic-bezier(0.4, 0, 0.2, 1);

    --category-card-bg-gradient: linear-gradient(135deg, #fff7ed, #fef3c7, #fff1f2);
    --category-border-line: #e5e7eb;
    --category-text-heading: #111827;
    --category-text-muted: #6b7280;

    /*~~~~~~~~~~~~~~~~ Gallery Component Variable Tokens Config ~~~~~~~~~~~~~~~~*/
    /* --gallery-heading-clamp: clamp(1rem, 3vw + 0.5rem, 2.5rem); */
    --gallery-heading-clamp: clamp(1rem, 3vw + 0.5rem, 2rem);
    --gallery-transition-speed: 0.3s;
    --gallery-ease-curve: cubic-bezier(0.4, 0, 0.2, 1);

    --tabs-track-bg: #ffffff;
    --tabs-track-border: #f3f4f6;
    --tabs-marker-bg: #f3f4f6;
    --tabs-btn-text-default: #6b7280;
    --tabs-btn-text-active: #374151;
    --tabs-btn-active-gradient: linear-gradient(135deg, #fff7ed, #fef3c7, #fff1f2);

    --gallery-card-bg: #ffffff;
    --gallery-card-border: #ffedd5;
    --gallery-text-main: #0f172a;


    /*~~~~~~~~~~~~~~~~ Find Us | FAQs Component Variable Tokens Config ~~~~~~~~~~~~~~~~*/
    --find-us-heading-clamp: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);

    --faq-card-bg: #ffffff;
    --faq-card-border: #e5e7eb;
    --faq-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --faq-text-heading: #1f2937;
    --faq-text-body: #4b5563;
    --faq-text-muted: #6b7280;

    /*~~~~~~~~~~~~~~~~ Editorual Variables Configurations ~~~~~~~~~~~~~~~~*/
    --rail-btn-speed: 0.3s;
    --rail-btn-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    --prose-bg-card: #ffffff;
    --prose-border-line: #e5e7eb;
    --prose-text-main: #334155;
    --prose-text-heading: #0f172a;
    --prose-text-links: #fb6837;
    --rail-bg-container: rgba(255, 255, 255, 0.85);
    --rail-border-line: #e5e7eb;
    --rail-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);

    /* ITINERARY */
    --cb-size: 1.25rem;
    --cb-checked-bg: #f97316;
    /* Primary Accent Theme */
    --cb-border-color: #d1d5db;
    --cb-border-hover: #9ca3af;
    --cb-focus-ring: #fba16c;
    --max-width-content: 80rem;
    --text-main: #111827;
    --text-muted: #4b5563;

    /* Brand colors */
    --kiche-ochre: #fb6837;
    --kiche-yellow: #fac234;
    --kiche-brown: #e28d61;
    --kiche-green: #cee88a;
    --kiche-white: #eeeeee;

    --kiche-dark-green: #0c4c2a;
    --kiche-light-green: #2f9947;
    --kiche-dark-orange: #ea6a24;
    --kiche-light-orange: #f58020;

    --primary: #d97706;
    --primary-hover: #b45309;
    --dark: #1f2937;
    --light: #f3f4f6;
    --white: #ffffff;
    --gray: #6b7280;
    --border: #0d7374;
    --radius: o.5rem;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --transition: all 0.2s ease-in-out;
    /* background 0.2s; */

    --radius: 0.5rem;


    /* Light Mode Defaults */
    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-error-bg: #fef2f2;
    --color-error-border: #fca5a5;

    --text-primary: #171717;
    --text-secondary: #525252;
    --text-inverse: #ffffff;

    /* Layout & Borders */
    --form-input-border: #d4d4d4;
    --form-input-border-focus: #4f46e5;

 
    /* Consent form */
    color-scheme: light dark;
    --color-default-medium: light-dark(#d1d5db, #4b5563);
    --color-neutral-secondary-medium: light-dark(#f9fafb, #374151);
    --color-brand: #0c4c2a;
    --color-brand-soft: rgb(234 179 8 / 0.35);
    --color-heading: light-dark(#111827, #ffffff);
}



/* ==========================================================================
   1. Base Mobile Styles (Default: 0px to 575px)
   ========================================================================== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

/* 
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--dark);
    margin: 0;
    padding: 0;
    background-color: #f9fafb;
} 
*/

/*~~~~~~~~~~~~~~~~~~~~ FLIGHT SCHEDULE UPDATE ~~~~~~~~~~~~~~~~~~~~*/
.disclaimer-banner-shelf {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 250;

    /* background: var(--brand-yellow-ochre-gradient); */
    background: var(--kiche-green);
    border-top: 1px solid var(--banner-border-top);
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    color: #ffffff;

    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    will-change: transform, opacity;
    transition: opacity var(--banner-transition-speed) var(--banner-bezier-curve),
        transform var(--banner-transition-speed) var(--banner-bezier-curve),
        visibility var(--banner-transition-speed);

    &.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .banner-grid-layout {
        max-width: var(--row-max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        align-items: center;
    }
}

/*~~~~~~~~~~~~~~~~~~~~ Typography Alignment for Internal Column Blocks ~~~~~~~~~~~~~~~~~~~~*/
.banner-title-column {
    font-size: 1rem;
    color: var(--banner-text-accent);
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.banner-title-column .alert-icon-matte {
    font-style: normal;
}

.banner-title-column strong {
    color: #ffffff;
    font-weight: 700;
}

.banner-message-column p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
}

.banner-message-column p strong {
    font-weight: 700;
    color: #ffffff;
}

/* Close Trigger Button Structural Setup */
.banner-dismiss-column {
    display: flex;
    justify-content: flex-end;

}

.btn-banner-close-trigger {
    background: none;
    border: 1px solid var(--banner-close-btn-border);
    border-radius: 9999px;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-banner-close-trigger:hover {
    background-color: var(--banner-close-btn-hover-bg);
    color: #dc2626;
    /* Highlights crisp warning exit states */
}

.btn-banner-close-trigger svg {
    display: block;
}

/*~~~~~~~~~~~~~~~~~~~~~~ MAIN WRAPPER ~~~~~~~~~~~~~~~~~~~~~~*/
.main-content {
    width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~ HERO WRAPPER ~~~~~~~~~~~~~~~~~~~~~~*/
.main-hero-showcase-section {
    position: relative;
    width: 100%;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgb(250 194 52/ 0.25);
    padding: 2rem 1rem;
    /* box-sizing: border-box; */
}

.main-hero-showcase-section.home {
    margin-bottom: 0;
}

.hero-media-canvas-wrapper {
    position: absolute;
    inset: 0;
    /* z-index: 1; */
}

.hero-poster-fallback-img,
.hero-background-video {
    position: absolute;
    /* position: fixed; */
    inset: 0;
    width: 100%;
    /* width: 100vw; */
    height: 100%;
    /* height: 100vh; */
    /* z-index: -2; */
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.1);

    pointer-events: none;
    /* opacity: 0; */
    transition: opacity 0.8s ease-in-out;
}

.media-overlay-dim-matte {
    position: absolute;
    inset: 0;
    /* background-color: var(--hero-matte-dim-color); */
    /* z-index: 2; */
}

.media-overlay-gradient-tint {
    position: absolute;
    inset: 0;
    /* background: var(--hero-gradient-overlay-tint); */
    /* z-index: 3; */
}

.hero-background-video--ready {
    opacity: 1 !important;
}

.hero-editorial-center-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 1rem;
}

.hero-editorial-center-container.home {
    background-color: #eefbf3;
}




.hero-display-headline {
    font-size: clamp(1.5rem, 0.281rem + 4.06vw, 3.75rem);
    /* font-size: clamp(1.125rem, 1.25vw + 0.5rem, 1.75rem); */
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-block: 1rem;
}

.gradient-accent-text-span {
    background: var(--brand-yellow-ochre-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    -webkit-text-fill-color: transparent;
}

.hero-editorial-subtext {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.25rem 0;
    max-width: 40rem;
    /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); */
    text-align: center;
    padding: 0.25rem;
}

.hero-editorial-supporting-tagline {
    font-size: 1rem;
    font-weight: 400;
    color: var(--kiche-light-orange, --text-gray-muted);
    margin: 0 0 1.5rem 0;
    max-width: 42rem;
    line-height: 1.5;
    opacity: 0.9;
}

/*~~~~~~~~~~~~~~~~~~~~ WORLD BEST TOURS ~~~~~~~~~~~~~~~~~~~~*/
.about-us-section,
.featured-packages-section {
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    padding: clamp(1rem, 6.9vw - 1.41rem, 2.5rem) 7.5%;
    background-color: #f8f8ee;
    /* background-color: var(--badge-bg-yellow); */
    /* background-color: rgb(250 194 52 / 0.95); */
    width: 100%;
    /* width: 100vw; */
}

featured-packages-section.home,
.featured-packages-section.wild {
    margin-top: 0;
}

.section-title-header-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--kiche-brown);
}

.showcase-main-heading {
    /* font-size: var(--featured-heading-size, 2rem); */
    font-weight: 700;
    color: var(--kiche-dark-green, --card-heading-text);
    margin: 0;
}

/*  */
.view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 0 0;
    padding: 0.5rem 0;
    /* Added micro-padding for clickable target safety */
    gap: 0.5rem;
    background-color: var(--kiche-brown);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: transform var(--featured-transition-speed, 0.2s) var(--featured-ease, ease);
}

.view-all:hover {
    transform: scale(1.05);
    background-color: var(--kiche-yellow);
    cursor: pointer;
}

.view-all-action-trigger {
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
    background-color: var(--kiche-white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

.view-all-action-trigger:hover {
    transform: scale(1.1);
    /* color: var(--kiche-ochre);
        transition: 5ms ease-in-out;
        cursor: pointer; */
}

.view-all .arrow-right-svg {
    color: var(--kiche-white);
    display: block;
}

.packages-display-outer-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/*  */
.package-display-card-node {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    background-color: var(--card-surface-bg);
    border-radius: var(--featured-card-radius, 0.5rem);
    /* box-shadow: var(--card-surface-shadow); */
    box-shadow: var(--card-surface-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    transition: transform var(--featured-transition-speed, 0.2s) var(--featured-ease, ease),
        box-shadow var(--featured-transition-speed, 0.2s) var(--featured-ease, ease);
}

.package-display-card-node:hover {
    transform: translateY(-4px) scale(1.005);
    /* box-shadow: var(--card-surface-hover-shadow); */
    box-shadow: var(--card-surface-hover-shadow, 0 10px 15px rgba(0, 0, 0, 0.1));

}

.card-media-top-canvas {
    position: relative;
    height: 14rem;
    width: 100%;
    background-color: var(--kiche-brown);
}

.card-media-top-canvas .card-surface-featured-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Structural Category Label Badges Components */
.badge-label-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    z-index: 5;
}

.badge-label-pill.variant-yellow {
    background-color: var(--badge-yellow-bg);
    color: var(--badge-yellow-text);
}

/* Interior Editorial Core Body Typography Design */
.card-profile-info-body {
    padding: 1.5rem;
}

.card-title-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--card-heading-text);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-excerpt-summary-paragraph {
    /* font-size: var(--card-excerpt-font-size, 0.875rem); */
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    color: var(--card-body-text);
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    font-weight: 300;
    transition: color 0.15s ease;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lower Section Action Buttons Container Row alignment */
.card-action-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--card-border-line);
    padding-top: 1rem;
}

.pricing-label-block .pricing-prefix-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--card-label-support);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-amount-display-value {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--brand-yellow-ochre-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Asynchronous Layout Button Handling System */
.async-loading-anchor-wrapper {
    display: inline-block;
}

.btn-card-details-trigger-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* background: var(--brand-yellow-ochre-gradient); */
    background: var(--kiche-ochre);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
    transition: opacity 0.2s, transform 0.1s;
}

.btn-card-details-trigger-link:hover {
    opacity: 0.95;
}

.btn-card-details-trigger-link:active {
    transform: scale(0.98);
}

.native-spinner-element {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.3);
    fill: #fde047;
    animation: spinningLoaderLoop 1s linear infinite;
}

.btn-card-details-trigger-link.is-loading {
    pointer-events: none;
}

.btn-card-details-trigger-link {
    opacity: 0.85;
}

.native-spinner-element {
    display: block;
}

@keyframes spinningLoaderLoop {
    to {
        transform: rotate(360deg);
    }
}


/*~~~~~~~~~~~~~~~~~~~~ WHAT IS TRENDING ~~~~~~~~~~~~~~~~~~~~*/
.travel-offers-section {
    /* max-width: var(--offers-row-max-width); */
    margin: 0.5rem 0;
    /* margin: 2.5rem auto; */
    padding: 2.5rem 7.5%;
    /* padding: 4% 2.5rem; */
    background-color: #e9e6c3;
    /* background-color: rgb(227 141 97 / 0.95); */
    width: 100%;
    /* width: 100vw; */
}

/* 
.section-title-header-bar {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--kiche-brown);
} 

.showcase-main-heading {
    font-size: var(--offers-heading-clamp);
    font-weight: 700;
    color: var(--offer-text-heading);
    margin: 0;
}
*/
.showcase-supporting-paragraph {
    padding: 0.5rem 0;
    font-size: 1.2rem;
    color: var(--offer-text-supporting);
    margin: 0.25rem 0 0 0;
}

.offers-display-outer-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* grid-template-columns: 1fr; */
    gap: 2rem;
}

.offer-display-card-node {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;

    background-color: var(--offer-surface-bg);
    border: 1px solid var(--offer-border-line);
    border-radius: var(--offers-card-radius);
    box-shadow: var(--offer-surface-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--offers-transition-speed) var(--offers-bezier),
        box-shadow var(--offers-transition-speed) var(--offers-bezier);
}

.offer-display-card-node:hover {
    transform: translateY(-4px);
    box-shadow: var(--offer-surface-hover-shadow);
}

.offer-display-card-node:hover .card-surface-featured-img {
    transform: scale(1.03);
}

.card-media-top-canvas {
    position: relative;
    height: 14rem;
    width: 100%;
    background-color: #020617;
    overflow: hidden;
}

.card-surface-featured-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--offers-transition-speed) var(--offers-bezier);
}

/*~~~~~~~~~~~~~~~~~~~~ Floating Status ~~~~~~~~~~~~~~~~~~~~*/
.card-status-ribbons-shelf {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 5;
}

.status-badge-pill {
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-badge-pill.is-active {
    background-color: #22c55e;
}

.status-badge-pill.is-upcoming {
    background-color: #3b82f6;
}

.expiry-date-tag {
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--ribbon-bg-white-glass);
    color: var(--ribbon-text-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/*~~~~~~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~~~*/
.card-profile-info-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-editorial-block {
    margin-bottom: 1.25rem;
    text-align: center;
}

.card-title-heading {
    font-size: 1.35rem;
    font-weight: 700;
    /* color: var(--offer-text-heading); */
    color: var(--kiche-dark-green);
    margin: 0;
    line-height: 1.3;
    /* text-align: center; */

    display: block;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*~~~~~~~~~~~~~~~~~~~~ WhatsApp Button ~~~~~~~~~~~~~~~~~~~~*/
.card-action-row-footer {
    width: 100%;
    margin-top: auto;
}

.btn-whatsapp-booking-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--whatsapp-green-gradient);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
    /* transition: transform 0.1s ease, box-shadow 0.2s; */
    transition: transform 0.1s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-whatsapp-booking-action:hover {
    background: var(--kiche-light-orange);
    box-shadow: 0 6px 12px -1px rgba(12, 76, 42, 0.35);
}

.btn-whatsapp-booking-action:active {
    transform: scale(0.98);
    /* Native mobile tactile press sensation */
}

.btn-whatsapp-booking-action img {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}


.main-hero-showcase-section.about {
    background-color: transparent;
}

.about-us-section {
    background-color: #f8f8ee;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/*~~~~~~~~~~~~~~~~~~~~ WHY KICHE ~~~~~~~~~~~~~~~~~~~~*/
.why-us-showcase-section {
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    /* margin: 2.5rem auto; */
    padding: 2.5rem 7.5%;
    /* padding: 4% 2.5rem; */
    /* background-color: #faf7dc; */
    background-color: #f8f8ee;

    /* background-color: rgba(151, 196, 239, 0.95); */
    width: 100%;
    /* width: 100vw; */
}

/* .why-us-container {
    max-width: var(--row-max-width);
    margin: 0 auto;
    padding: 0 1rem;
} */
.why-us-header-row {
    margin-bottom: 0.5rem;
}

.why-us-main-heading {
    font-size: clamp(1rem, 3vw + 0.5rem, 2.25rem);
    /*
    font-size: clamp(1.75rem, 0.2083vw + 0.9375rem, 3.75rem); 
    font-size: clamp(1rem, 1rem + (2.5 - 1) * ((100vw - 480px) / (1200 - 480)), 2.5rem);
    font-size: clamp(1rem, 1rem + 1.5 * ((100vw - 480px) / 720), 2.5rem); 
    */
    font-weight: 700;
    color: var(--kiche-dark-green);
}

.why-us-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Left aligned item */
.why-us-editorial-column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem;
    /*
    background-color: rgb(30 27 75/ 0.25);
    width: 100vw;
    padding-inline: 5rem;
    margin: 0;
    */
}

.why-us-lead-paragraph {
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    line-height: clamp(1rem, 2vw + 1rem, 1.6rem);
    hyphens: auto;
    color: var(--kiche-dark-green);
    /* margin: 0 0 2rem 0; */
}

.partners-marquee-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.divider-line-side {
    flex-grow: 1;
    height: 0.1px;
    background-color: rgb(251 104 55 / 0.5);
}

.divider-label-title {
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    font-weight: 600;
    color: var(--kiche-dark-green);
    margin: 0;
}

.why-us-features-subgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.subgrid-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.subgrid-feature-item img {
    display: block;
    flex-shrink: 0;
    height: clamp(25px, 4vw, 100px);
    width: auto;
    padding: 0 0.5rem 0 0;
}

.item-text-wrapper h3 {
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    font-weight: 700;
    color: var(--why-us-text-main);
    margin: 0 0 0.25rem 0;
}

.item-text-wrapper p {
    font-size: 0.875rem;
    color: var(--why-us-text-muted);
    margin: 0;
    line-height: 1.4;
}

.why-us-awards-shelf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.why-us-awards-shelf img {
    display: block;
    object-fit: contain;
}

.why-us-cta-action-row .btn-why-us-learn-more {
    display: inline-block;
    background: var(--brand-yellow-ochre-gradient);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
    transition: opacity 0.2s;
}

.why-us-cta-action-row .btn-why-us-learn-more:hover {
    opacity: 0.95;
}

/* Right Column Statistics Panels Content */
.why-us-analytics-column {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.partners-marquee-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* margin-bottom: 1rem; */
}

.divider-line-side {
    flex-grow: 1;
    height: 0.1px;
    background-color: rgb(251 104 55 / 0.5);
    /* background-color: var(--why-us-border);  */
}

.divider-label-title {
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    font-weight: 600;
    color: var(--kiche-dark-green);
    margin: 0;
}

.stats-counter-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-counter-card {
    background-color: var(--why-us-bg-card);
    border: 1px solid var(--why-us-border);
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-numeric-display {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--why-us-text-main);
    margin: 0 0 0.25rem 0;
    line-height: 1;
}

.gradient-accent-symbol {
    background: var(--brand-yellow-ochre-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.stat-label-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--why-us-text-main);
    margin: 0.5rem 0 0.25rem 0;
}

.stat-supporting-desc {
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--why-us-text-support);
    margin: 0;
}

/* Marque Module */
.partners-marquee-wrapper {
    width: 100%;
}

.partners-marquee-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.divider-line-side {
    flex-grow: 1;
    height: 3px;
    background-color: var(--why-us-border);
}

.divider-label-title {
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    font-weight: 600;
    color: var(--kiche-dark-green);
    margin: 0;
}

.marquee-track-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0.5rem 0;
}

.marquee-fade-overlay-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6rem;
    background: var(--marquee-mask-gradient-left);
    z-index: 2;
    pointer-events: none;
}

.marquee-fade-overlay-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6rem;
    background: var(--marquee-mask-gradient-right);
    z-index: 2;
    pointer-events: none;
}

.marquee-movement-axis-track {
    display: flex;
    width: max-content;

    animation: infiniteMarqueeScroll var(--marquee-logos-speed, var(--marquee-scrolling-speed)) linear infinite;
    will-change: transform;
}

.marquee-movement-axis-track:hover {
    animation-play-state: paused;
}

.marquee-logos-group-node {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4rem;
    padding-right: 4rem;
}

.marquee-logos-group-node img {
    display: block;
    object-fit: contain;
    max-height: 3.5rem;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.2s;
}

.marquee-logos-group-node img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes infiniteMarqueeScroll {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/*~~~~~~~~~~~~~~~~~~~~ GALLERY ~~~~~~~~~~~~~~~~~~~~*/
.gallery-highlights-section {
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    padding: 2.5rem 7.5%;
    background-color: #e2e4df;
    /* background-color: rgba(204, 239, 151, 0.95); */
    /* width: 100vw; */
}

.section-container {
    /* max-width: var(--row-max-width); */
    width: 100%;
    max-width: var(--row-max-width, 1400px);
    margin-inline: auto;
    /* margin: 0 auto;
    padding: 0 0.25rem; */
}

.section-title-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--tabs-track-border);
}

.showcase-main-heading {
    /* font-size: var(--gallery-heading-clamp);
    font-weight: 700;
    color: var(--gallery-text-main);
        */
    margin: 0;
    color: var(--kiche-dark-green, --gallery-text-main);
    font-size: var(--gallery-heading-clamp);
    font-weight: 700;
}

/* Main slideshow */
.slides-container {
    position: relative;
    overflow: hidden;
}

.slides-container .slide {
    display: none;
    position: relative;
}

.slides-container .slide.active {
    display: block;
}

.slides-container .slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.slides-container .slide .numbertext {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.45);
}

/* Next & previous controls */
.slides-container .prev,
.slides-container .next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.35);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transform: translateY(-50%);
    transition: background-color 0.2s ease,
        opacity 0.2s ease;

    /*                 
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none; 
    */
}

/* "prev button" aligned to the left */
.slides-container .prev {
    left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* "next button" aligned to the right */
.slides-container .next {
    right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
}

.slides-container .prev:hover,
.slides-container .next:hover,
.slides-container .prev:focus-visible,
.slides-container .next:focus-visible {
    background-color: rgba(0, 0, 0, 0.75);
    outline: none;
}

/* Caption */
.caption-container {
    padding: 0.75rem 1rem;
    color: #ffffff;
    text-align: center;
    background-color: #222;
}

.caption-container p {
    margin: 0;
    font-size: 0.95rem;
}

/* Thumbnail grid */
.slides-container .row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* gap: 0.4rem; */
    /* margin-top: 0.5rem; */
}

.slides-container .row .column {
    min-width: 0;
    /* float: left;
    width: 16.66%; */
}

/* 
.slides-container .row.cursor{
    cursor: pointer;
}

.slides-container .row:after {
    content: "";
    display: table;
    clear: both;
} */
.slides-container .row .demo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: 0.375;
    /* opacity: 0.6; */
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* transition: opacity 0.3s ease, transform 0.3s ease; */
}

.demo:hover {
    opacity: 0.8;
}

.slides-container .row .demo.active {
    opacity: 1;
    transform: scale(1.01);
    outline: 2px solid var(--kiche-ochre);
}

.demo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* Gallery link */
.view-gallery-action-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-top: 1rem;
    color: #0066cc;
    font-weight: 600;
    transition: gap var(--gallery-transition-speed) var(--gallery-ease-curve);
    /* transition: gap 0.2s ease; */
}

.view-gallery-action-trigger span {
    font-size: 1rem;
    font-weight: 500;
    background: var(--brand-yellow-ochre-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.view-gallery-action-trigger .arrow-right-svg {
    color: #fb6837;
    transition: transform 0.2s ease;
}

.view-gallery-action-trigger:hover,
.view-gallery-action-trigger:focus-visible {
    color: #004499;
    gap: 0.75rem;

}

.view-gallery-action-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.view-gallery-action-trigger:focus-visible .arrow-right-svg {
    transform: translateX(4px);
}


/*~~~~~~~~~~~~~~~~~~~~ FIND US | FAQs ~~~~~~~~~~~~~~~~~~~~*/
.find-us-faq-section {
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    padding: 2.5rem 7.5%;
    background-color: #f8f8ee;
    /* background-color: rgba(7, 38, 111, 0.95); */
    width: 100%;
    /* width: 100vw; */

}

/* 
.section-container {
    max-width: var(--row-max-width);
    margin: 0 auto;
    padding: 0 1rem;
} */
.find-us-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* Left aligned item */
/* .location-profile-column {
} */
.location-main-heading {
    font-size: var(--find-us-heading-clamp);
    font-weight: 700;
    color: var(--kiche-dark-green, --faq-text-heading);
    margin: 0 0 1.25rem 0;
    line-height: 1.2;
}

.location-description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kiche-dark-green, --faq-text-body);
    margin: 0 0 1.5rem 0;
}

.map-iframe-viewport-box {
    position: relative;
    width: 100%;
    height: 320px;
    /* background-color: var(--faq-card-bg); */
    border: 1px solid var(--faq-card-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    /* padding: 0.5rem; */
}

.map-iframe-embedded-element {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: calc(100% - 0.25rem);
    height: calc(100% - 0.25rem);
    border: none;
    border-radius: 0.5rem;
}

/*  */
.btn-centering-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
}

.btn-centering-action-row a {
    text-decoration: none;
}

.btn-location-primary-action {
    display: inline-block;
    width: 10rem;
    box-sizing: border-box;
    background: var(--brand-yellow-ochre-gradient);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
    transition: opacity 0.2s, transform 0.1s;

}

.btn-location-primary-action:hover {
    opacity: 0.95;
}

.btn-location-primary-action:active {
    transform: scale(0.98);
}

/* Right aligned item */

/* .faq-accordion-column {} */
.faq-pre-header-tagline {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--brand-yellow-ochre-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem 0;
}

.faq-main-display-title {
    font-size: var(--find-us-heading-clamp);
    font-weight: 700;
    color: var(--kiche-dark-green, --faq-text-heading);
    margin: 0 0 2.5rem 0;
    line-height: 1.2;
}

.faq-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-informational-card-node {
    background-color: var(--faq-card-bg);
    border: 1px solid var(--faq-card-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: var(--faq-card-shadow);
}

.faq-card-question-title {
    font-size: 1.125rem;
    font-weight: 700;
    background: var(--brand-yellow-ochre-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.faq-card-answer-paragraph {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--kiche-dark-green, --faq-text-body);
    margin: 0;
    font-weight: 400;
}

/*~~~~~~~~~~~~~~~~~~~~ TOAST BANNER ~~~~~~~~~~~~~~~~~~~~*/

/* Closed/Hidden State */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    width: calc(100% - 48px);
    max-width: 380px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px) scale(0.98);
    transition:
        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 200ms;
}

/* Open/Visible Active State */
.toast-container.show-toast {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.toast-content {
    background-color: #222222;
    color: #ffffff;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--kiche-dark-green, #567437);
}

#toast-message {
    margin: 0;
    font-family: inherit;
    font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1.1rem);
    line-height: 1.5;
    font-weight: 500;
}


/*~~~~~~~~~~~~~~~~~~~~ ABOUT US ~~~~~~~~~~~~~~~~~~~~*/
.about-us-hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 56rem;
    /* margin-top: clamp(1.5rem, 0.281rem + 4.06vw, 3.75rem); */
    /* margin-top: clamp(2rem, -0.499rem + 6.66vw, 3.75rem); */
    margin-top: clamp(2rem, 1.167rem + 2.78vw, 2.5rem);
    /* margin: 0.25rem auto; */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 1rem;
    padding-block: 1rem;
    background-color: #f8f8ee;
    box-shadow: 0 4px 15px rgb(0 0 0 / 10%);
    /* box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.75), 0 10px 15px -3px rgba(0, 0, 0, 0.35); */
}

/*
.hero-editorial-subtext {
    font-size: 1.125rem;
    color: #0949e0;
    color: var(--text-gray-muted);
    margin: 1.25rem 0;
    margin: 0.75rem 0 1.25rem 0;
    max-width: 40rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 5px;
} 
*/
.hero-display-headline.about {
    font-size: clamp(1.5rem, 0.281rem + 4.06vw, 3.75rem);
    color: var(--kiche-dark-green);
}

.hero-editorial-subtext.about {
    /* font-size: clamp(1.125rem, 1.25vw + 0.5rem, 1.75rem); */
    font-size: clamp(1.125rem, 1.25vw + 0.375rem, 2rem);
    color: var(--kiche-light-green);
}

.hero-editorial-subtext.about-hero-sec-para {
    /* font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.75rem); */
    font-size: clamp(1.125rem, 1.25vw + 0.375rem, 2rem);
    font-style: italic;
    color: var(--kiche-dark-orange);
}

.hero-editorial-supporting-tagline {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--kiche-light-orange, --text-gray-muted);
    margin: 0 0 1.5rem 0;
    /* margin: 0 0 2rem 0; */
    max-width: 42rem;
    line-height: 1.5;
    opacity: 0.9;
}

.about-display-outer-grid {
    /* margin-top: 1.5rem; */
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

.about-info-body {
    /* padding: 1.5rem; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    color: var(--kiche-dark-green);
}

.about-summary-paragraph {
    /* font-size: var(--card-excerpt-font-size, 0.875rem); */
    font-size: clamp(1rem, 1.125vw + 0.5rem, 1.25rem);
    /* color: var(--card-body-text); */
    color: var(--kiche-dark-green, --card-body-text);
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    font-weight: 300;
    transition: color 0.15s ease;
}

/*~~~~~~~~~~~~~~~~~~~~ BEACH BREAKS ~~~~~~~~~~~~~~~~~~~~*/
/* Hero Banner */
.hero-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;

    min-height: 45vh;
    padding: 3rem 1.5rem;

    border-bottom: 1px solid #e5e7eb;
    /* border-bottom-left-radius: 0.5rem; */
    /* border-bottom-right-radius: 0.5rem; */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #f0d4c0;
    overflow: hidden;
}

.hero-content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    background-color: #f9fcf8;
    box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.9);
}

.hero-title {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 3rem);
    /* font-size: clamp(2rem, 4vw, 3rem);  */
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1.25rem;
    letter-spacing: -0.025em;
    color: var(--kiche-dark-green);
}

.hero-description {
    font-size: clamp(0.875rem, 1.5vw + 0.5rem, 1.25rem);
    line-height: 1.625;
    opacity: 0.95;
    color: var(--kiche-light-green, --badge-yellow-bg);
}




/*~~~~~~~~~~~~~~~~~~~~ FREQUENTLY ASKED QUESTIONS ~~~~~~~~~~~~~~~~~~~~*/
:root {
    --color-bg-base: #f9fafb;
    --color-bg-surface: #ffffff;
    --color-border: #e5e7eb;

    --color-text-main: #111827;
    --color-text-muted: #4b5563;

    --gradient-primary: linear-gradient(135deg, #ec4899, #f43f5e);
    --gradient-accent: linear-gradient(135deg, #a855f7, #6366f1);

    --radius-box: 12px;
    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base resets mapped to layout */
.faq-section {
    padding: 5rem 1.5rem;
    background-color: var(--color-bg-base);
    font-family: system-ui, -apple-system, sans-serif;
}

.faq-container {
    max-width: 768px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-tagline {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.faq-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
}

.text--main {
    color: var(--color-text-main);
}

.text--muted {
    color: var(--kiche-light-orange, --color-text-muted);
}

.bg--surface {
    background-color: var(--color-bg-surface);
}

.text--gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-item {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    transition: border-color var(--transition-smooth);
}

.faq-item:hover {
    border-color: #d1d5db;
}

.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 600;
    transition: color var(--transition-smooth);
}
/* .faq-question:hover {
    color: var(--kiche-light-orange);
} */

.faq-trigger:hover .faq-question {
    background: var(--kiche-light-orange, --gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-smooth), color var(--transition-smooth);
}

.faq-icon svg {
    width: 100%;
    height: 100%;
}

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-smooth);
    /* background-color: var(--text-gray-muted); */
}

.faq-content {
    overflow: hidden;
    transition: visibility var(--transition-smooth);
    visibility: hidden;
}

.faq-content p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.faq-item.is-active .faq-panel {
    grid-template-rows: 1fr;
}

.faq-item.is-active .faq-content {
    visibility: visible;
}

.faq-item.is-active .faq-icon {
    transform: rotate(180deg);
    color: var(--kiche-light-orange);
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* MAIN SECTION */
.main-content {
    width: 100%;
}

.content-container {
    /* max-width: var(--max-width-content); */
    /* margin: 0 auto; */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 1.5rem 5%;
    /* padding: clamp(1rem, 6.9vw - 1.41rem, 1.25rem) 7.5%; */
    /* padding: 1.5rem clamp(1rem, 6.9vw - 1.41rem, 3rem); */

    background: #e2e4df;
    width: 100%;
}

.page-header {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* --- BREADCRUMB --- */
.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.25rem 0.875rem;
    margin: 0 0 1.5rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease, transform 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--text-main);
    text-decoration: underline;
    background-color: #c4c0c0;
    transform: scale(1.25);
}

/* custom inline chevron */
.breadcrumb-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8.013l4 4-4 4'/%3E%3C/svg%3E");
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8.013l4 4-4 4'/%3E%3C/svg%3E"); */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.active-breadcrumb {
    color: var(--text-main);
    font-weight: 500;
}

/* --- TITLE & VALIDITY GRID --- */
.title-row-grid {
    /* display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
}

.package-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-main);
    margin: 0;
    line-height: 1.2;
}

.validity-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.validity-label {
    color: var(--text-muted);
}

.validity-date {
    font-weight: 700;
    font-size: 1.125rem;
}

/* --- WHATSAPP BOUNCE ANIMATION --- */
@keyframes whatsapp-cta-bounce {

    0%,
    76%,
    100% {
        transform: translateY(0);
    }

    84% {
        transform: translateY(-12px);
    }

    90% {
        transform: translateY(0);
    }

    95% {
        transform: translateY(-6px);
    }
}

.whatsapp-cta-bounce {
    /* animation: whatsapp-cta-bounce 3s ease-in-out infinite; */
    animation: whatsapp-cta-bounce 3s ease-in-out 1;
    transform-origin: center bottom;
    will-change: transform;
}

.whatsapp-cta-bounce a span {
    align-items: center;
    text-decoration: none;
}

/* Continuous Bounce Animation Class */
.whatsapp-cta-bounce {
    animation: ctaBounce 2s infinite ease-in-out;
}

@keyframes ctaBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* --- Pulse Animation Class  --- */
.whatsapp-keyframe-pulse img {
    animation: iconPulse 1.5s infinite ease-in-out;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* --- GLOBAL DYNAMIC TOAST NOTIFICATION STYLING --- */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    width: 20rem;

    /* Smooth CSS hardware opacity transitions */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.toast-container.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toast-content {
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

.toast-content p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Status Type Overrides */
.toast-container[data-toast-type="success"] .toast-content {
    background-color: var(--color-success);
    color: var(--text-white);
}

.toast-container[data-toast-type="error"] .toast-content {
    background-color: var(--color-error);
    color: var(--text-white);
}

.toast-container[data-toast-type="info"] .toast-content {
    background-color: var(--color-info);
    color: var(--text-white);
}

.toast-container[data-toast-type="warning"] .toast-content {
    background-color: var(--color-warning);
    color: var(--text-white);
}

/* Decorative Demo button */
.demo-btn {
    /* margin-top: 1.2rem; */
    /* padding: 0.75rem 1.5rem; */
    background-color: #25d366;
    color: white;
    border: none;
    font-weight: 600;
    /* border-radius: 0.375rem; */
    cursor: pointer;
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* HERO SECTION */

/* Responsive Structural Master Layout Grid */
.package-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}


/* --- IMAGE GALLERY MODULE --- */
.gallery-column {
    width: 100%;
}

.gallery-main-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #f3f4f6;
}

.gallery-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-thumbnail-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.thumb-btn {
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.thumb-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-btn:hover {
    transform: translateY(-2px);
}

.thumb-btn.is-active {
    border-color: #fb923c;
    /* Replaces Tailwind'ring-orange-400' */
}

/* --- INFORMATION & PRICING SYSTEMS --- */
.info-column {
    display: flex;
    flex-direction: column;
}

.info-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.meta-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge {
    font-size: 0.875rem;
    color: #4b5563;
    background-color: #fef9c3;
    /* Matches yellow-50 custom spec */
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.price-container {
    display: flex;
    flex-direction: column;
}

.price-lead-label {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: #1f2937;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-amount {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ea580c;
    /* Matches text-orange-600 baseline */
}

/* --- SEO & ACCESSIBLE EXPANDABLE BLOCKS --- */
.expandable-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.description-text {
    color: #4b5563;
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    /* Keeps your custom text newline formatting (\n) */
}

.btn-toggle-read {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(to right, #f97316, #ef4444);
    /* from-orange-500 to-red-500 */
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.btn-toggle-read:hover {
    opacity: 0.95;
}

.btn-icon-bubble {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.btn-icon-bubble::before {
    content: attr(data-sign);
}


/* %%%%%%%%%% HERO SECTION SHOWCASE %%%%%%%%%%*/
.beyond-showcase-grid,
.package-showcase-grid,
.package-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    padding: 0 5%;
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* --- IMAGE GALLERY SHOWCASE --- */
.gallery-wrapper,
.gallery-column {
    width: 100%;
    margin: 1.25rem 0;
}

.gallery-view-port,
.gallery-main-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #f3f4f6;
}

.gallery-display-node,
.gallery-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-thumbnail-tray,
.gallery-thumbnail-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.thumb-node,
.thumb-btn {
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.thumb-node img,
.thumb-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-node:hover,
.thumb-btn:hover {
    transform: translateY(-2px);
}

.thumb-node.active,
.thumb-btn.is-active {
    border-color: var(--kiche-dark-orange);
    /* border-color: var(--ring-focus-color); */
}

/* --- META AND PRICING SPECIFICATION TRACKS --- */
.package-profile-column,
.info-column {
    width: 100%;
}

.profile-content-stack,
.info-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.badge-cluster-row,
.meta-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    /* gap: 0.5rem; */
}

.pill-badge,
.badge {
    font-size: 0.875rem;
    color: var(--text-muted);
    background-color: var(--badge-bg-yellow);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.pill-badge {
    border: 1px solid var(--border);
}

.beyond-pill-badge {
    font-size: 0.875rem;
    color: var(--kiche-dark-green);
    background-color: var(--badge-bg-yellow);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
}

.beyond-pill-badge i {
    color: var(--kiche-dark-orange);
}

.pricing-index-wrapper,
.price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.price-action-label,
.price-lead-label {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: #1f2937;
    /* color: var(--text-charcoal); */
}

.price-tag-group,
.price-row {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 0.5rem;
}

.main-currency-value,
.range-currency-value,
.price-amount {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--kiche-ochre);
}

/* --- SEO & ACCESSIBLE EXPANDABLE BLOCK --- */
.accordion-text-wrapper,
.expandable-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    /* padding-left: 2rem; */
}

.summary-body-copy,
.description-text {
    color: var(--text-muted);
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
    /* white-space: pre-wrap;  */
}

/* Custom indentation
ul,
ol {
    padding-left: 3.75rem;
}
*/

.toggle-action-btn,
.btn-toggle-read {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(to right, var(--kiche-light-orange), var(--kiche-ochre));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


.toggle-action-btn:hover,
.btn-toggle-read:hover {
    opacity: 0.95;
}

.btn-icon-marker,
.btn-icon-bubble {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.btn-icon-marker::before,
.btn-icon-bubble::before {
    content: attr(data-sign);
}

/* --- FOOTER CTA --- */
.action-button-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Footer Container 
.action-button-cluster {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    box-sizing: border-box;
    z-index: 999;
} 
*/

/* Buttons & Links */
.cta-booking-btn,
.form-submit-action-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    /* background-color: #22e694; */
    background: linear-gradient(to right, var(--kiche-dark-green), var(--kiche-light-green));
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background 0.2s;
}

/* CTAs & Buttons 
.form-submit-action-btn {
    width: 7.5rem;
    background-color: #2246e6;
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}
*/

.cta-booking-btn:hover,
.form-submit-action-btn:hover {
    background-color: var(--kiche-light-green);
}

.cta-booking-btn[data-modal-target="enquiry-drawer"] {
    background-color: #34495e;
}

.cta-booking-btn[data-modal-target="enquiry-drawer"]:hover {
    background-color: #2c3e50;
}

.cta-whatsapp-link {
    display: inline-flex;
    /*  display: flex; */
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 0.5rem;
    /* background-color: #25d366; */
    background: linear-gradient(to right, #4ade80, var(--whatsapp-green));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Animation Loops */
@keyframes whatsapp-keyframe-pulse {

    0%,
    76%,
    100% {
        transform: translateY(0);
    }

    84% {
        transform: translateY(-12px);
    }

    90% {
        transform: translateY(0);
    }

    95% {
        transform: translateY(-6px);
    }
}

.whatsapp-keyframe-pulse {
    animation: whatsapp-keyframe-pulse 3s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}


/* ============ 5. BOOKING MODAL ============ */
.modal-backdrop,
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* z-index: 1000; */

    /* Sizing */
    width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: var(--modal-overlay-bg, rgba(180, 56, 56, 0.9));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Scrolling */
    overflow-y: auto;
    overflow-x: hidden;

    /* Visibility state transitions */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
}

.modal-overlay.is-active,
.modal-backdrop.is-active,
.modal-backdrop.is-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.modal-layout-frame,
.modal-content {
    position: relative;
    padding: 1rem;
    width: 100%;
    max-width: 56rem;
    max-height: 90vh;

    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* box-shadow: var(--modal-shadow); */

    box-sizing: border-box;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop.is-active .modal-layout-frame,
.modal-overlay.is-active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-card-body {
    position: relative;
    background-color: var(--modal-surface-bg);
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); */

    color: #1f2937;

    display: flex;
    flex-direction: column;
    max-height: 85vh;
    margin: 1rem 0;

    /* padding: 2rem; */
}

.modal-backdrop[hidden] {
    display: none !important;
}

/* --- MODAL HEADER --- */
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e5e7eb;
    /* border-bottom: 1px solid var(--modal-border-color); */
}

.modal-title-heading {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0;
    padding-right: 2rem;
}

.modal-close-trigger,
.close-btn {
    /* Reset defaults */
    background: transparent;
    /* background: none; */
    border: none;
    cursor: pointer;

    /* Sizing */
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;

    /* Layout & Alignment */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Base colors & transition */
    color: #9ca3af;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    /* transition: background-color 0.2s ease, color 0.2s ease; */

    padding: 0.5rem;
    margin: -0.5rem;
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.25rem;
}

.modal-close-trigger:hover,
.close-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

/* --- FORM CONTROLS & COMPONENT GRIDS --- */
.modal-form-stack {
    display: flex;
    flex-direction: column;

    padding: 1.5rem 0;
    overflow-y: auto;

    gap: 1.5rem;
}

.form-responsive-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.form-field-group {
    display: flex;
    flex-direction: column;
}

.form-field-group.span-full-row {
    /* grid-column: 1 / -1; */
    display: block;
    margin-bottom: 0.5rem;
}

.field-label-text {
    display: block;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    margin-bottom: 0.5rem;
}

.field-input-control {
    /* Layout & Sizing */
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    outline: none;

    /* Light Mode Basics */
    background-color: var(--form-input-bg, #f9fafb);
    border: 1px solid #d1d5db;
    color: #111827;
    /* color: #1f2937; */
    font-family: inherit;

    /* Animation | Transitions */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    text-align: left;
    margin: 0 auto;
}

.field-input-control:focus {
    border-color: var(--kiche-yellow, #ebc725);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25);

    /* 
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: 2px solid var(--primary);
    border-color: transparent; 
    */
}

/* --- Safari Date Banner --- */
.fixed-date-notice-box {
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--notice-bg-green, #789681);
    border: 1px solid var(--notice-border-green, #bbf7d0);
    margin-bottom: 1.25rem;
}

.notice-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #056429);
    margin: 0.25rem;
    /*margin: 0;  margin: 0 0 0.25rem 0; */

    line-height: 1.25rem;
    letter-spacing: 0.05em;
}

.notice-date-range {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--notice-text-green, #166534);

    line-height: 1.25rem;
    letter-spacing: 0.05em;
}

.pack-dates-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
}

/* --- Fieldsets & Counter Inputs --- */
.form-fieldset-group {
    border: 1px solid var(--border);
    /* border: none; */
    border-radius: var(--radius);
    padding: 1rem;

    margin: 0;
    background-color: #f0fdf4;
    color: #166534;
}

.text-area-control {
    resize: vertical;
    /* resize: none; */
    min-height: 80px;
}

.form-three-column-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 1rem;
    width: 100%;
}

.counter-field-item {
    display: flex;
    flex-direction: column;
    /* flex-direction: column-reverse; 
    align-items: start;
    justify-content: start;*/
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    /* 
    background: var(--color-notice-bg, #f9fafb);
    border: 1px solid var(--modal-border, #d1d5db); 
    */
}

.counter-field-item.field-input-control {
    width: 70px;
    text-align: center;
    padding: 0.5rem;
}

.counter-sub-label {
    font-family: system-ui, -apple-system, sans-serif;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #040d0e);
    font-weight: 600;
}

legend.field-label-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;

    line-height: 1.25rem;

    color: #111827;
    /* color: #1f2937; */
    padding: 0 0.5rem;
}

/* --- Custom Checkbox --- */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    color: #374151;
}

/* Hide raw input */
.custom-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom box wrapper */
.checkbox-box {
    position: relative;
    width: var(--cb-size);
    height: var(--cb-size);
    box-sizing: border-box;
    flex-shrink: 0;
    background-color: #ffffff;
    border: 2px solid var(--cb-border-color);
    border-radius: 0.375rem;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease;
}

/* Checkmark */
.checkbox-box::after {
    content: "";
    position: absolute;
    left: 30%;
    top: 10%;
    width: 25%;
    height: 50%;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover management */
.custom-checkbox:hover input[type="checkbox"]:not(:disabled)~.checkbox-box {
    border-color: var(--cb-border-hover, #e28d61);
}

/* Active checked state */
.custom-checkbox input[type="checkbox"]:checked~.checkbox-box {
    background-color: var(--cb-checked-bg);
    border-color: var(--cb-checked-bg);
}

.custom-checkbox input[type="checkbox"]:checked~.checkbox-box::after {
    transform: rotate(45deg) scale(1);
    /* Pops checkmark*/
}

/* Squeeze | Compression Effect on Click */
.custom-checkbox:active input[type="checkbox"]:not(:disabled)~.checkbox-box {
    transform: scale(0.92);
}

/* Keyboard Navigation Effects */
.custom-checkbox input[type="checkbox"]:focus-visible~.checkbox-box {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--cb-focus-ring);
}

/* --- Feedback Banner & Checkbox --- */
.error-notification-banner {
    background-color: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error, #dc2626);
    color: var(--color-error, #dc2626);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;

    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Privacy Consent */
.legal-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    /* margin: 1rem 0; */
}

.form-checkbox-input {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--form-input-border, #737373);
    accent-color: var(--focus-ring-glow, 0 0 0 4px rgba(79, 70, 229, 0.25));
    margin-top: 0.15rem;
    cursor: pointer;

    background-color: rgb(245, 241, 241);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: inline-block;
    vertical-align: middle;

    /* Transitions */
    transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}


.form-checkbox-input:focus-visible {
    box-shadow: 0 0 0 2px var(--focus-ring-brand-soft, #eab308);
}

.form-checkbox-input:checked {
    background-color: var(--border-default-medium);
}

.checkbox-label-text {
    font-size: 0.875rem;
    font-weight: 500;
    /* color: var(--text-primary, #111827); color: var(--color-text-main);*/
    user-select: none;
    -webkit-user-select: none;
    color: var(--text-heading, #056429);

    margin-inline-start: 0.5rem;
    line-height: 1.25rem;
}

.legal-policy-anchor {
    font-weight: 700;
    color: var(--text-primary, #111827);
    text-decoration: underline;
}

.legal-policy-anchor:hover {
    text-decoration: underline;
}

/* --- CONTROL ACTION SUBMIT ELEMENT ROW --- */
.booking-modal__footer {
    display: flex;
    align-items: flex-start;
    column-gap: 0.75rem;
}

.booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.booking-btn--secondary {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: var(--text-muted);
}

.booking-btn--secondary:hover:not(:disabled) {
    background-color: #f9fafb;
    color: #111827;
}

.booking-btn--secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Traveller Preferred Dates */
.booking-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-columns: 1fr; */
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}


.form-submit-row {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Base Submission Action Button */
.form-submit-action-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(to right, var(--kiche-light-orange, #fa9745), var(--kiche-dark-orange, #ef6644));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;

    /* Layout & Sizing */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    /* Typography */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;

    /* Aesthetics */
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */
    background: linear-gradient(to right, var(--kiche-light-green), var(--kiche-dark-green));
    /* Clean from-orange-500 to-red-500 track gradient */

    transition: opacity 0.2s ease, transform 0.2s ease;
    /* transition: background-color 0.2s, transform 0.1s; */
    transition: background 0.15s ease-in-out, opacity 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease;

}

.form-submit-action-btn:hover {
    background-color: var(--color-primary-hover);
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Hover Interaction Feedback States */
.form-submit-action-btn:hover:not(:disabled) {
    background: linear-gradient(to right, #ea580c, #dc2626);
    /* from-orange-600 to-red-600 dynamic fallback values */
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
}

.form-submit-action-btn:active {
    transform: scale(0.99);
}

/* Loading state mutation locks */
.form-submit-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Honeypot hidden input validation helper */
.hidden-honeypot {
    display: none !important;
    visibility: hidden !important;
}



/* ============+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* --- SUBMIT CONTAINER ACTION ROW LAYOUT --- */
.form-submit-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.5rem;
}

/* Base Submission Action Button Styling */
.form-submit-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(to right, #f97316, #ef4444);
    /* Clean from-orange-500 to-red-500 track gradient */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Hover Interaction Feedback States */
.form-submit-action-btn:hover:not(:disabled) {
    background: linear-gradient(to right, #ea580c, #dc2626);
    /* from-orange-600 to-red-600 dynamic fallback values */
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
}

/* Active Pressed Feedback States */
.form-submit-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Loading state mutation locks (Replaces disabled utility tracks) */
.form-submit-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bottom Helper/Hint Text */
.booking-field-hint {
    margin: 0;
    font-size: 0.8rem;
    color: #f16666;
    /* color: #6b7280; */
    font-style: italic;
}


/* %%%%%%%%%%%% DRAWER | OVERLAY BACKDROP %%%%%%%%%%%% */
.drawer-backdrop,
.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: var(--drawer-backdrop-color, rgba(0, 0, 0, 0.4));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* visibility fade tracks */
    opacity: 0;
    /* pointer-events: none; */
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.drawer-backdrop {
    top: 0;
    left: 0;
    /* 
    width: 100vw; 
    height: 100vh; 
    */
}

.drawer-backdrop.is-visible,
.drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
    /* pointer-events: auto; */
}

/* --- SLIDING SURFACE SIDEBAR DRAWER  --- */
.drawer-surface,
.drawer-content {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    /* right: -460px; */
    z-index: 10000;
    width: 100%;
    max-width: var(--drawer-width, 3rem);
    height: 100vh;
    background-color: var(--drawer-bg, #ffffff);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1), -4px 0 10px -5px rgba(0, 0, 0, 0.04);
    /* box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); */

    display: flex;
    flex-direction: column;
    outline: none;
    overflow-y: auto;
    box-sizing: border-box;

    /* Right side Slide-in Animations */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* 
.drawer-content {
    right: -350px;
    width: 300px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 24px;
} 
*/

.drawer-surface.is-visible {
    right: 0;
    transform: translateX(0);
    visibility: visible;
}

/* --- DRAWER COMPONENTS & FIELDS --- */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-grey, #e5e7eb);
}

.drawer-heading-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--kiche-dark-green, --text-drawer-main, #111827);
    margin: 0;
}

.drawer-close-action {
    background: none;
    border: none;
    color: var(--text-drawer-sub, #6b7280);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.drawer-close-action:hover {
    color: var(--text-drawer-main, #111827);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.drawer-product-divider {
    background-color: #f3f4f6;
    border-left: 0.5rem solid var(--kiche-dark-green);
    border-bottom: 1px solid var(--color-border-grey, #2563eb);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem 1rem;
    border-radius: 0 4px 4px 0;
}

.drawer-product-title-text {
    padding: 0.25rem 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--kiche-dark-orange, --text-drawer-main, #1e3a8a);
    margin: 0 0 0.5rem 0;
}

.drawer-form-stack {
    display: flex;
    flex-direction: column;
}

/* Form Controls & Structures */
.form-inputs-grouping {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.input-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.input-field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-drawer-main, #374151);
    margin-bottom: 0.25rem;
}

.form-input-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    background-color: transparent;
    /* #ffffff */
    border: 1px solid var(--color-border-grey, #d1d5db);
    color: var(--text-drawer-main, #111827);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input-control:focus {
    border-color: var(--color-orange-brand, #2563eb);
    box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(37, 99, 235, 0.15));
}

.text-area-control {
    resize: none;
}

.form-dual-columns-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* --- ACTION BUTTON --- */
.form-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.btn-control-secondary {
    font-family: inherit;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-drawer-sub, #374151);
    background: transparent;
    /* background-color: #ffffff; */
    border: 1px solid var(--color-border-grey, #d1d5db);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-control-secondary:hover {
    background-color: var(--kiche-dark-orange, #ea580c);
    color: var(--text-drawer-main, #ffffff);
}

.btn-control-primary {
    font-family: inherit;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--color-orange-brand, --kiche-dark-green);
    border: none;
    /* border: 1px solid transparent; */
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.btn-control-primary:hover:not(:disabled) {
    background-color: var(--color-orange-hover, --kiche-dark-orange);
}

.btn-control-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer-error-target-box:not(:empty) {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

/* Antispam Honeypot */
.hidden-honeypot-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;

    display: none !important;
    visibility: hidden !important;
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ENQUIRY TOAST NOTIFICATION %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* --- ENQUIRY TOAST NOTIFICATION --- */
/* Success Toast Notification */
.toast-alert-notification {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    /* right: 1.5rem; */
    z-index: 150;
    padding: 0.75rem 1.25rem;
    background-color: #16a34a;
    /* Matches deep green-600 specs */
    color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Smooth Opacity Translations */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(100px);
    /* transform: translateY(10px); */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease;
    /* transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; */
}

.toast-alert-notification.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast-alert-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% INCLUSIONS & EXCLUSIONS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* Inclusion Card */
.inclusions-overview-section {
    /* max-width: 1280px; */
    width: 100%;
    /* margin: 1rem auto; */
    padding: 2rem 1rem;

    background-color: rgb(229, 241, 232);
}

/* Adaptive CSS Grid Tracks Container */
.inclusions-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    /* max-width: 20rem; */
}

/* --- INCLUSION LAYOUT CARDS --- */
.inclusion-card {
    background-color: var(--card-bg-surface, #c8ebd5);
    border: 1px solid var(--card-border-color, --kiche-dark-orange);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: var(--card-shadow-sm, #f16666);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.inclusion-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover, #ea580c);
}

.inclusion-title {
    font-size: 1.25rem;
    /* Equivalent to text-xl */
    font-weight: 600;
    color: var(--heading-charcoal, #21211e);
    margin: 0 0 0.5rem 0;
    background-color: #22c55e;
}

/* List Element Styling Overrides */
.inclusion-list {
    list-style-type: square;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inclusion-item {
    font-size: 1.125rem;
    color: var(--body-slate-grey, #dc2626);
    line-height: 1.5;
}

/* Empty State Fallback */
.inclusion-empty-state {
    font-style: italic;
    font-size: 1rem;
    color: var(--text-empty-italic, #dc2626);
    margin: 0;
}



/* Dropdown Groups */
.hotels-options-group,
.destination-options-group {
    border-bottom: 1px solid #f1f5f9;
}

.hotels-options-group,
.destination-options-group {
    border-bottom: 1px solid #f1f5f9;
}

.hotels-options-toggle,
.destination-options-toggle {
    width: 100%;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    color: #111827;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.hotels-options-toggle[aria-expanded="true"],
.destination-options-toggle[aria-expanded="true"] {
    /* .mobile-nav-toggle[aria-expanded="true"] {color: #dc2626;} .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon {transform: rotate(180deg);} */
    color: #dc2626;

    /* Rotates icon nested inside the active toggle */
    .hotels-options-toggle__icon,
    .destination-options-toggle__icon {
        transform: rotate(180deg);
        color: #dc2626;
        /* Pro-Tip: Color matches the active parent state */
    }
}

.hotels-options-toggle__label,
.destination-options-toggle__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hotels-options-toggle__label img,
.destination-options-toggle__label img {
    flex: 0 0 auto;
    object-fit: contain;
}

.hotels-options-toggle__icon,
.destination-options-toggle__icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #6b7280;
    transition: transform 200ms ease;
}

/* Submenus */
.hotels-options-submenu,
.destination-options-submenu {
    display: flex;
    flex-direction: column;
    padding: 0 0 0.65rem 2.75rem;
}

.hotels-options-submenu[hidden],
.destination-options-submenu[hidden] {
    display: none;
}

.hotels-options-submenu a,
.destination-options-submenu a {
    padding: 0.4rem 0;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.hotels-options-submenu:hover,
.destination-options-submenu:hover {
    color: #dc2626;
    text-decoration: underline;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* Grid Enclosure Tracks 
.terms-breakdown-section {
    max-width: 1280px; 
    margin: 0 auto; 
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    padding: 2.5rem 7.5%;

    width: 100%;
    background-color: rgb(227, 235, 203);
}
*/
/* Grid Split Tracks */
.terms-dual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Base Card Content */
.terms-card {
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
}

/* Modifier Hooks Applying Context Color Overrides */
.card-inclusions {
    background-color: var(--inclusion-bg, #0066cc);
    border-color: var(--inclusion-border, #0066cc);
}

.card-exclusions {
    background-color: var(--exclusion-bg, #0066cc);
    border-color: var(--exclusion-border, #0066cc);
}

/* Panel Heading */
.terms-card .terms-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.card-inclusions .terms-title {
    color: var(--inclusion-heading, #6228d7);
}

.card-exclusions .terms-title {
    color: var(--kiche-dark-orange, --exclusion-heading, #6228d7);
}

/* Custom RichText | Prose List Format */
.terms-richtext-body ul {
    list-style-type: square;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.terms-richtext-body li {
    font-size: 1.125rem;
    line-height: 1.6;
}

.terms-richtext-body p {
    margin: 0;
}

.card-inclusions .terms-richtext-body {
    color: var(--inclusion-text, #0949e0);
}

.card-exclusions .terms-richtext-body {
    color: var(--kiche-dark-orange, --exclusion-text, #0949e0);
}

.terms-richtext-body strong {
    font-weight: 700;
    color: inherit;
}

/* ================= TOUR DETAILS NAVIGATION TAB MODULES ================= */

/* Master Component Section Box Boundary Layout */
.terms-breakdown-section,
.details-tabs-section {
    /* max-width: var(--max-width-content, 1280px); */
    /* margin: 0 auto; margin: 1rem auto; margin: 0 1.5rem;*/
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    padding: 2.5rem 7.5%;
    /* background-color: rgb(212, 243, 230); */
    background-color: #e2e4df;
    width: 100%;
}

/* --- TAB SELECTION BAR LAYOUTS --- */
.tabs-nav-bar {
    border-bottom: 1px solid var(--panel-border-color);
}

.tabs-nav-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* Hide rough scroll rails on desktop screens */
    margin-bottom: -1px;
    /* Collapses borders with parents perfectly */
}

.tabs-nav-track::-webkit-scrollbar {
    display: none;
}

.tab-trigger {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 1rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tab-text-inactive);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-trigger:hover {
    color: var(--tab-text-hover);
    border-color: #d1d5db;
}

.tab-trigger.is-active {
    color: var(--tab-text-active);
    border-color: var(--tab-border-active);
}

/* --- PANEL SWITCHER VISIBILITY MECHANICS --- */
.tab-panels-viewport {
    margin-top: 2rem;
}

.tab-panel-node {
    display: none;
}

.tab-panel-node.is-active {
    display: block;
}

/* Inner Surface Card Wrappers styling */
.panel-card-surface {
    background-color: var(--surface-white);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--panel-border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--text-main-body);
    font-size: 1.125rem;
    line-height: 1.625;
}

.panel-card-surface p {
    margin: 0 0 1.25rem 0;
}

.panel-card-surface p:last-child {
    margin-bottom: 0;
}

/* --- ACCESSIBLE PRICING MATRIX TABLE --- */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    border-radius: 0.5rem;
    border: 1px solid var(--panel-border-color);
}

.pricing-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1rem;
}

.pricing-matrix-table th,
.pricing-matrix-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--panel-border-color);
}

.pricing-matrix-table thead tr {
    background-color: var(--table-header-bg);
}

.pricing-matrix-table tbody tr:last-child td {
    border-bottom: none;
}

.schedule-warning-notice {
    font-size: 0.95rem;
    color: var(--tab-text-inactive);
    border-left: 3px solid #eab308;
    padding-left: 0.75rem;
}

/* --- ITINERARY TIMELINE GRID STRUCTURES --- */
.itinerary-timeline-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.itinerary-item-card {
    background-color: var(--surface-white);
    border: 1px solid var(--panel-border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.itinerary-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.itinerary-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.itinerary-day-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tab-text-hover);
    margin: 0 0 0.75rem 0;
}

.itinerary-bullet-list {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.itinerary-bullet-list p {
    margin: 0;
    color: var(--text-main-body);
    font-size: 1rem;
    line-height: 1.5;
}

.empty-fallback-italic {
    font-style: italic;
    color: var(--tab-text-inactive);
    margin: 0;
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Inline standard spacing parameters for non-list description blocks */
.itinerary-description-paragraph {
    color: var(--text-main-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.itinerary-description-paragraph:last-of-type {
    margin-bottom: 0;
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/* --- HOTELS TAB FALLBACK VIEWPORTS --- */
.hotels-empty-surface {
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-fallback-text {
    font-style: italic;
    color: var(--text-placeholder-grey);
    font-size: 1.125rem;
    margin: 0;
}

/* --- FAQS TAB ACCORDION PACK SYSTEM --- */
.faqs-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-item-card {
    background-color: var(--bg-surface-card);
    border: 1px solid var(--border-divider-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s var(--transition-timing-standard);
}

.faq-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--kiche-dark-green, --text-charcoal-main);
    margin: 0 0 0.5rem 0;
}

.faq-answer {
    font-size: 0.875rem;
    color: var(--text-slate-muted);
    line-height: 1.6;
    margin: 0;
}


/* ITINERARY PAGE */

/* <!-- ================= MAIN ================= -->
    main-content

    <!-- ================= HEADER ================= -->
    <!--~~~~~~~~~~~ Breadcrumb | Page Header ~~~~~~~~~~~-->
    content-container
    page-header
    breadcrumb-nav
    breadcrumb-list
    breadcrumb-item
    breadcrumb-item active-breadcrumb
    title-row-grid
    package-title
    validity-wrapper
    validity-label
    validity-date    
    <!--~~~~~~~~~~~ Action Button ~~~~~~~~~~~-->
    whatsapp-cta-bounce demo-btn
    
    
    <!-- ================= HERO ================= -->
    <!--~~~~~~~~~~~ Hero Gallery and Package Profile ~~~~~~~~~~~-->
    package-showcase-grid
    <!-- Left -->
    gallery-wrapper
    gallery-view-port
    gallery-display-node
     
    gallery-thumbnail-tray
    thumb-node active
    thumb-node
     
    <!-- Right -->
    package-profile-column
    profile-content-stack
    badge-cluster-row
    pill-badge     
    <!-- Pricing Block -->
    pricing-index-wrapper
    price-action-label
    price-tag-group
    main-currency-value
    range-currency-value

    accordion-text-wrapper
    summary-body-copy
    
    toggle-action-btn
    btn-text-content
    btn-icon-marker
    
    action-button-cluster
    cta-booking-btn
    
    cta-whatsapp-link whatsapp-keyframe-pulse

    <!-- ================= BOOKING MODAL ================= -->
    modal-backdrop
    modal-layout-frame
    modal-card-body
    modal-header-row
    modal-title-heading
    modal-close-trigger
    
    <!-- Modal Booking Form -->
    modal-form-stack
    booking-form-section
    form-fieldset-group
    field-label-text
    form-responsive-grid
    form-field-group
    field-label-text
    field-input-control
    fixed-date-notice-box
    pack-dates-flex
    notice-title
    notice-date-range
    booking-form-grid
    booking-field
    booking-field-hint
    form-three-column-grid
    counter-field-item
    counter-sub-label
    counter-field-item
    
    field-input-control text-area-control
    hidden-honeypot
    error-notification-banner
    
    legal-checkbox-row
    form-checkbox-input
    
    checkbox-label-text
    
    legal-policy-anchor
    
    checkbox-box
    custom-checkbox
    checkbox-label
    booking-message booking-message--error
    <!-- Actions -->
     booking-modal__footer
     booking-btn booking-btn--secondary
     form-submit-row
     booking-btn booking-btn--primary
     form-submit-action-btn
     form-submit-row
     
     booking-submit-loading

    <!-- ================= ENQUIRY MODAL ================= -->
    drawer-backdrop
    drawer-surface
    drawer-header
    drawer-heading-title
    drawer-close-action
    drawer-body
    drawer-error-target-box
    drawer-product-divider
    drawer-product-title-text
     
    drawer-form-stack
    form-inputs-grouping
     
    input-field-wrapper
    input-field-label
    form-input-control
     
    form-dual-columns-grid
    form-input-control text-area-control
    hidden-honeypot-input
    btn-control-secondary
    btn-control-primary
     

    toast-alert-notification
    toast-alert-text
    
    <!-- ================= OVERVIEW ================= -->
    inclusions-overview-section
    inclusions-grid
    inclusion-card
    inclusion-title
    inclusion-list
    inclusion-item
    hotels-options-group
    hotels-options-toggle
    hotels-options-toggle__label
    hotels-options-toggle__icon
    hotels-options-submenu
    
    destination-options-group
    destination-options-toggle
    destination-options-toggle__label
    destination-options-toggle__icon
    destination-options-submenu
    
    
    <!-- ================= WHY THESE DESTINATIONS ================= -->
    details-tabs-section tab-section
    reviews-section-heading --> section-heading
    tabs-nav-bar
    tabs-nav-track
    tab-trigger is-active
    tab-trigger
    
    tab-panels-viewport
    tab-panel-node is-active
    panel-card-surface leading-relaxed text-gray-700
    
    tab-panel-node
    itinerary-timeline-stack
    panel-card-surface
    
    empty-fallback-italic
    
    
    <!-- ================= WHAT THE SAFARI INCLUDES | EXCLUDES ================= -->
    terms-breakdown-section
    reviews-section-heading
    terms-dual-grid
    terms-card card-inclusions
    terms-title
    terms-richtext-body
    
    terms-card card-exclusions
    terms-title
    terms-richtext-body
    
    <!-- ================= ITINERARY ================= -->
    details-tabs-section tab-section
    tabs-nav-bar
    tabs-nav-track
    tab-trigger is-active
    tab-trigger
    
    tab-panels-viewport
    tab-panel-node is-active
    panel-card-surface leading-relaxed text-gray-700
    
    table-scroll-container
    
    pricing-matrix-table
    schedule-warning-notice
    
    itinerary-item-card
    itinerary-card-grid
    itinerary-content-block
    itinerary-day-heading
    
    itinerary-bullet-list    
    
    tab-panel-node
    panel-card-surface
    empty-fallback-italic
    
    hotels-empty-surface
    faqs-accordion-stack
    faq-item-card
    faq-question
    faq-answer
    
    
    <!-- ================= SOCIAL CONNECTION RAIL ================= -->
    social-share-rail-container
    social-icons-vertical-stack
    social-rail-anchor brand-facebook
    social-rail-anchor brand-x
    social-vector-icon
    
    social-rail-anchor brand-linkedin
    social-rail-anchor brand-tiktok */



    
/* ==========================================================================
8. TOUR DETAILS NAVIGATION TAB MODULES
========================================================================== */

.tabs-nav-bar {
    border-bottom: 1px solid var(--panel-border-color);
}

.tabs-nav-track {
    display: flex;
    gap: 0.125rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: -1px;
    /* Collapses borders with parents perfectly */

    /* border-bottom: 0.125rem solid #1d4ed8; */
    background-color: #c8e7d6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0;
}

.tabs-nav-track::-webkit-scrollbar {
    display: none;
}

.tab-trigger {
    background-color: #a9afac;
    border: none;
    /* border-bottom: 2px solid transparent; */
    padding: 0.25rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tab-text-inactive);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    border-radius: 0.25rem;
    box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 8.75rem;
}

.tab-trigger:hover {
    /* color: var(--tab-text-hover); */
    /* border-color: #d1d5db; */
    background-color: #10b981;
    color: #ffffff;

}

.tab-trigger.is-active {
    /* color: var(--tab-text-active); */
    /* border-color: var(--tab-border-active); */
    background-color: #10b981;
    color: #ffffff;


    border-bottom: 4px solid var(--kiche-light-orange);
    font-weight: bold;
}

.tab-panels-viewport {
    margin-top: 2rem;
}

/* .tab-panel-node {
            display: none;
        } */

.tab-panel-node[hidden] {
    display: none !important;
}

.tab-panel-node.is-active {
    display: block;
}

/* Inner Surface Card Wrappers styling */
.panel-card-surface {
    background-color: var(--surface-white);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--panel-border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--text-main-body);
    font-size: 1.125rem;
    line-height: 1.625;
}

.panel-card-surface p {
    margin: 0 0 1.25rem 0;
}

.panel-card-surface p:last-child {
    margin-bottom: 0;
}

/* --- ACCESSIBLE PRICING MATRIX TABLE --- */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    border-radius: 0.5rem;
    border: 1px solid var(--panel-border-color);
}

.pricing-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1rem;
}

.pricing-matrix-table th,
.pricing-matrix-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--panel-border-color);
}

.pricing-matrix-table thead tr {
    background-color: var(--table-header-bg);
}

.pricing-matrix-table tbody tr:last-child td {
    border-bottom: none;
}

.schedule-warning-notice {
    font-size: 0.95rem;
    color: var(--tab-text-inactive);
    border-left: 3px solid #eab308;
    padding-left: 0.75rem;
}

/* --- ITINERARY TIMELINE GRID STRUCTURES --- */
.itinerary-timeline-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.itinerary-item-card {
    background-color: var(--surface-white);
    border: 1px solid var(--panel-border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.itinerary-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.itinerary-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.itinerary-day-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tab-text-hover);
    margin: 0 0 0.75rem 0;
    background-color: #def8e8;
    width: fit-content;
}

.itinerary-bullet-list {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.itinerary-bullet-list p {
    margin: 0;
    color: var(--text-main-body);
    font-size: 1rem;
    line-height: 1.5;
}

.empty-fallback-italic,
.empty-fallback-text {
    font-style: italic;
    color: var(--tab-text-inactive);
    margin: 0;
}

.empty-fallback-text {
    color: var(--text-placeholder-grey);
    font-size: 1.125rem;
}

.itinerary-description-paragraph {
    color: var(--text-main-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.itinerary-description-paragraph:last-of-type {
    margin-bottom: 0;
}



/* --- HOTELS TAB FALLBACK VIEWPORTS --- */
.empty-surface {
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-fallback-text {
    font-style: italic;
    color: var(--text-placeholder-grey);
    font-size: 1.125rem;
    margin: 0;
}

/* --- FAQS TAB ACCORDION PACK SYSTEM --- */
.faqs-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-item-card {
    background-color: var(--bg-surface-card);
    border: 1px solid var(--border-divider-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s var(--transition-timing-standard);
}

.faq-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--kiche-dark-green, --text-charcoal-main);
    margin: 0 0 0.5rem 0;
}

.faq-answer {
    font-size: 0.875rem;
    color: var(--text-slate-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- CLIENT REVIEWS LAZY SHOWCASE CARD --- */
.client-reviews-section {
    max-width: 1280px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.reviews-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider-light);
    margin-bottom: 2.5rem;
}

.section-heading,
.reviews-section-heading {
    font-size: var(--gallery-heading-clamp);
    /* font-size: 2.25rem; */
    font-weight: 700;
    color: var(--kiche-dark-green, --text-charcoal-main);
    margin: 0;
}

.reviews-see-all-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s var(--transition-timing-standard);
}

.reviews-see-all-wrapper:hover {
    transform: scale(1.05);
    /* Soft scaling threshold limits to ensure anti-aliasing safety */
}

.see-all-anchor {
    font-size: 0.875rem;
    color: var(--text-placeholder-grey);
    text-decoration: none;
    font-weight: 500;
}

.see-all-anchor:hover {
    text-decoration: underline;
}

.see-all-arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-placeholder-grey);
}

.reviews-loader-viewport {
    min-height: 320px;
    /* Enforces framework minimum block height constraints during loading states */
    position: relative;
    background-color: var(--bg-surface-card);
    border-radius: 0.75rem;
}

.reviews-placeholder-text {
    padding: 3rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-placeholder-grey);
    margin: 0;
}

/* --- FAQS TAB ACCORDION PACK SYSTEM --- */
.faqs-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.faq-item-card {
    background-color: var(--bg-surface-card);
    border: 1px solid var(--border-divider-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s var(--transition-timing-standard);
}

.faq-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--kiche-dark-green, --text-charcoal-main);
    margin: 0 0 0.5rem 0;
}

.faq-answer {
    font-size: 0.875rem;
    color: var(--text-slate-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- CLIENT REVIEWS LAZY SHOWCASE CARD --- */
.client-reviews-section {
    max-width: var(--max-width-content);
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.reviews-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-divider-light);
    margin-bottom: 2.5rem;
}

.reviews-see-all-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s var(--transition-timing-standard);
}

.reviews-see-all-wrapper:hover {
    transform: scale(1.05);
}

.see-all-anchor {
    font-size: 0.875rem;
    color: var(--text-placeholder-grey);
    text-decoration: none;
    font-weight: 500;
}

.see-all-anchor:hover {
    text-decoration: underline;
}

.see-all-arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-placeholder-grey);
}

.reviews-loader-viewport {
    min-height: 320px;
    /* Enforces framework minimum block height constraints during loading states */
    position: relative;
    background-color: var(--bg-surface-card);
    border-radius: 0.75rem;
}

.reviews-placeholder-text {
    padding: 3rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-placeholder-grey);
    margin: 0;
}

/* ==========================================================================
9. FLOATING SOCIAL RAIL & VALUE props RIBBONS
========================================================================== */
.social-share-rail-container {
    /* display: none !important; */
    position: fixed;
    bottom: 25dvh;
    right: 0.25rem;
    z-index: 90;
}

.social-icons-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background-color: var(--kiche-brown);
    padding: 0.75rem 0.25rem;
}

.social-rail-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    box-sizing: border-box;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    box-shadow: var(--rail-shadow);
    transform: scale(1);
    will-change: transform;
    transition: transform var(--animation-duration) var(--cubic-bezier), box-shadow var(--animation-duration) var(--cubic-bezier);
    margin-top: 0.125rem;
    margin-bottom: 0.125;
}

.social-rail-anchor:hover {
    transform: scale(1.12);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.social-vector-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.brand-facebook {
    background-color: var(--bg-facebook);
}

.brand-x {
    background-color: var(--bg-x-corp);
}

.brand-linkedin {
    background-color: var(--bg-linkedin);
}

.brand-tiktok {
    background-color: var(--bg-tiktok);
}

.brand-youtube {
    background-color: var(--bg-youtube);
}

.brand-instagram {
    background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

/* --- CORPORATE VALUE RIBBON STYLING --- */
.value-props-ribbon {
    background: linear-gradient(135deg, #ef4444 0%, #fb923c 100%);
    /* Custom spec */
    width: 100%;
    box-sizing: border-box;
}

.ribbon-container-grid {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 1.25rem 0.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.prop-flex-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.prop-icon {
    display: block;
    flex-shrink: 0;
}

.prop-text-stack {
    display: flex;
    flex-direction: column;
}

.prop-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.125rem 0;
    line-height: 1.3;
}

.prop-description {
    font-size: 0.75rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
    opacity: 0.95;
}

/* ==========================================================================
10. DEMO APPLICATION VIEWPORTS & JAVASCRIPT STATE HOOKS
DRAWER PAGE STRUCTURE
========================================================================== */
.demo-viewport-container {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

.demo-card-block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.demo-actions-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Button Container & Reset --- */
.demo-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.demo-btn a {
    display: inline-flex;
    align-items: center;
    /* gap: 10px; */
    background-color: #25D366;
    /* WhatsApp Green */
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* --- Hover & Active States --- */
.demo-btn a:hover {
    background-color: #128C7E;
    /* Darker WhatsApp Teal */
    box-shadow: 0 6px 20px rgba(18, 140, 126, 0.4);
}

.demo-btn a:active {
    transform: scale(0.98);
}

.demo-text {
    padding: 40px 20px;
    text-align: center;
}




/* --- STATE MANAGEMENT BLOCK --- /
/ Fallback rules that toggle display values via structural state modifications */
.modal-backdrop,
.drawer-backdrop,
.drawer-surface,
.whatsapp-chat-panel,
.tab-panel-node,
.modal-overlay,
.drawer-overlay {
    display: none;
}

.modal-backdrop.is-active,
.drawer-backdrop.is-active,
.whatsapp-chat-panel.is-active,
.tab-panel-node.is-active,
.modal-overlay.is-active,
.drawer-overlay.is-active {
    display: block;
}

.modal-backdrop.is-active,
.drawer-backdrop.is-active,
.drawer-surface.is-active,
.whatsapp-chat-panel.is-active,
.tab-panel-node.is-active {
    display: block;
}


.drawer-surface.is-active,
.drawer-content.is-active,
.whatsapp-chat-panel.is-active {
    display: flex;
}


.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}


/* --- Package Showcase Grid --- */
.inclusions-overview-section,
.beyond-showcase-grid,
.package-showcase-grid {
    /* max-width: 450px; */
    margin: clamp(0.75rem, 0.088rem + 2.206vw, 1.5rem) 0;
    /* margin: 1.5rem 0; */
    /* background: var(--white); */
    background: #e2e4df;
    border: 1px solid var(--border);
    /* border-radius: var(--radius); */
    box-shadow: var(--shadow);
    overflow: hidden;
    /* background-color: #1f2937; */
    padding: 2.5rem 7.5%;
}

.profile-content-stack {
    display: flex;
    flex-direction: column;
    /* gap: 1.25rem; */
}

/* Badges */
.badge-cluster-row {
    display: flex;
    flex-wrap: wrap;
    /* gap: 0.5rem; */
}

/* Typography */
.accordion-text-wrapper h3 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
    color: var(--kiche-dark-green, --primary);
    letter-spacing: 0.05em;
}

.accordion-text-wrapper h4 {
    color: var(--kiche-dark-green, --primary);
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.05em;
}

/* 
.summary-body-copy {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gray);
    margin: 0;
} 
*/

/* Privacy & Footer Actions */
.legal-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-checkbox-input {
    margin-top: 0.25rem;
    accent-color: var(--primary);
}

.checkbox-label-text {
    font-size: 0.85rem;
    color: var(--gray);
}

.legal-policy-anchor {
    color: var(--primary);
    text-decoration: none;
}

.legal-policy-anchor:hover {
    text-decoration: underline;
}

.form-submit-row {
    margin-top: 0.25rem;
}

.hidden-honeypot {
    display: none !important;
}

.error-notification-banner {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: 1px solid #fca5a5;
}

.form-travellers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
    gap: 1rem;
}


/* ==========================================================================
    RESPONSIVE ADAPTIVE GLOBAL MEDIA OVERRIDES
    ========================================================================== */
@media (min-width: 400px) {
    .form-dual-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-columns: 1fr 1fr; */
        gap: 0.75rem;
    }
}

/*~~~~~~~~~~~~~~~~~~~~ LARGE MOBILE VIEW ~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 480px) {
    .toast-container {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: calc(100% - 32px);
        transform: translateY(20px) scale(0.95);
        /* Slides up from bottom on mobile instead */
    }

    .form-responsive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .form-three-column-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .form-three-column-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ==========================================================================
   2. SMALL TABLET VIEW / Landscape Phones (576px / 36rem and up) @media (min-width: 36rem) {}
========================================================================== */
@media (min-width: 640px) {
    .main-hero-showcase-section {
        min-height: 70svh;
        padding: 5rem 1.5rem 3rem 1.5rem;
    }

    .hero-editorial-center-container {
        padding-inline: 2rem;
    }

    .hero-display-headline {
        font-size: 2rem;
        padding-block: 1.5rem;
    }

    .hero-editorial-subtext {
        font-size: 1.5rem;
        margin: 1rem 0;
    }

    /* HOME */
    .packages-display-outer-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: space-between;
    }

    /* WHAT IS TRENDING */
    .travel-offers-section .section-title-header-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding: 3;

        .view-all-action-trigger {
            align-self: center;
        }
    }

    .offers-display-outer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .offer-display-card-node .card-media-top-canvas {
        height: 18rem;
    }

    /* WHY KICHE */
    .why-us-editorial-column .why-us-features-subgrid {
        /* grid-template-columns: repeat(2, 1fr); */
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }

    /* Find Us | FAQs */
    .location-profile-column {
        .map-iframe-viewport-box {
            height: 400px;
            /* Expands canvas to prevent map distortion on tablets/desktops */
        }
    }

    .faq-accordion-column {

        .faq-pre-header-tagline,
        .faq-main-display-title {
            text-align: center;
        }
    }

    /* ABOUT US */
    .main-hero-showcase-section {
        min-height: 70svh;
        padding: 5rem 1.5rem 3rem 1.5rem;

        .hero-editorial-center-container .hero-display-headline {
            font-size: 3rem;
        }
    }

    /*  */
    .hero-editorial-center-container {
        padding-inline: 2rem;
        /* Safely contained within a selector */

        .hero-display-headline {
            font-size: 2rem;
            padding-block: 1.5rem;
        }

        .hero-editorial-subtext {
            font-size: 1.5rem;
            margin: 1rem 0;
        }
    }

}

/* ==========================================================================
   3. Medium Screens / Tablets  (768px / 48rem and up) | LARGE TABLET VIEW  @media (min-width: 48rem) {}
   ========================================================================== */
@media (min-width: 768px) {

    /*-- flight updates alert --*/
    .disclaimer-banner-shelf .banner-grid-layout {
        grid-template-columns: auto 1fr auto;
        gap: 1.5rem;
    }

    /*-- Hero Content --*/
    .main-hero-showcase-section {
        min-height: 75vh;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-media-canvas-wrapper .hero-poster-fallback-img,
    .hero-media-canvas-wrapper .hero-background-video {
        transform: scale(1.03);
    }

    .hero-editorial-center-container .hero-display-headline {
        font-size: 3.75rem;
    }

    .hero-editorial-center-container .hero-editorial-supporting-tagline {
        font-size: 2rem;
        /* font-size: 0.8125rem; */
        text-align: center;
        font-style: italic;
    }

    /*  */
    .hero-filter-form-element {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        padding: 1.5rem;
    }

    /*  */
    .hero-editorial-center-container {
        padding-inline: 2rem;
    }

    .hero-display-headline {
        font-size: 2rem;
        padding-block: 1.5rem;
    }

    .hero-editorial-subtext {
        font-size: 1.5rem;
        margin: 1rem 0;
    }



    /*===================== Why Kiche Content Config =====================*/
    .why-us-editorial-column .why-us-features-subgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }


    /*===================== Find Us | FAQs  =====================*/
    .location-profile-column {
        .map-iframe-viewport-box {
            height: 400px;
        }
    }

    .faq-accordion-column {

        .faq-pre-header-tagline,
        .faq-main-display-title {
            text-align: center;
        }
    }

    /* BEACH BREAKS */
    .hero-banner {
        background-attachment: scroll;
        min-height: auto;
    }

    .page-header {
        margin-top: 0.25rem;
    }

    .modal-header-row {
        padding: 1.25rem;
        /* 'md:p-5' (20px) */
    }

    .modal-form-stack {
        padding: 1.5rem;
    }


    .form-travellers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 columns on desktop */
    }

    .inclusions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .terms-dual-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Column split for tablet+ monitors */
    }

    .about-us-hero-container {
        margin-top: clamp(1rem, -0.5rem + 3.125vw, 1.5rem);
    }

}

/* ==========================================================================
   4. Large Screens / Laptops (992px / 62rem and up) | DESKTOP VIEW      @media (min-width: 62rem) {}
   ========================================================================== */
@media (min-width: 1024px) {

    /*-- Hero Layout Config --*/
    .main-hero-showcase-section {
        min-height: 80vh;
    }

    .hero-editorial-center-container .hero-display-headline {
        font-size: 2.5rem;
    }

    .hero-editorial-center-container .hero-display-headline {
        font-size: 1.25rem;
        padding-block: 2rem;
    }

    .hero-editorial-subtext {
        font-size: 2rem;
        margin: 1.25rem 0;
    }

    /* WORLD BEST TOURS */
    .packages-display-outer-grid {
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
    }

    .package-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .package-profile-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .inclusions-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* WHAT IS TRENDING */
    .offers-display-outer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .offer-display-card-node .card-media-top-canvas {
        height: 20rem;
    }



    /* WHY KICHE */
    .why-us-showcase-section {
        /* margin: 0.5rem 0; */
        /* margin: 2.5rem auto; */
        /* padding: 5rem 0; */
        /*padding: 4rem 5rem;  padding: 3rem 0; */
        /* background-color: rgb(251 104 55 / 0.15); */
        /* width: 100vw; */

        /* .why-us-layout-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; } */
        .why-us-layout-grid {
            grid-template-columns: repeat(1, 1fr);
            gap: 4rem;
        }
    }

    /*===================== Find Us | FAQs =====================*/
    .find-us-faq-section {

        /* padding: 5rem 0; */
        .find-us-layout-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem;
        }
    }

    .location-profile-column .map-iframe-viewport-box {
        height: 500px;
    }

    .faq-accordion-column {

        .faq-pre-header-tagline,
        .faq-main-display-title {
            text-align: left;
        }
    }


}

/* ==========================================================================
   5. Extra Large / Desktops (1200px / 75rem and up)  | LARGE DESKTOP VIEW @media (min-width: 75rem) {  .container { max-width: 1140px; }}
   ========================================================================== */
@media (min-width: 1200px) {

    /*===================== Hero content Config =====================*/
    .main-hero-showcase-section {
        min-height: 85vh;
    }

    /*===================== Featured Packages Layout Config (1200PX Screen) =====================*/
    .packages-display-outer-grid {
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
        gap: 1.5rem;
    }

    /*===================== Footer Content Config =====================*/
    /*===================== Footer Content Config =====================*/
    .site-footer {
        .footer-links-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            align-items: start;
            justify-content: space-between;
        }

        .footer-grid-column .footer-awards-flex-shelf {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .offers-display-outer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /*===================== Why Kiche =====================*/
    .why-us-showcase-section {
        margin: 0.5rem 0;
        /* margin: 2.5rem auto; */
        /* padding: 5rem 0; */
        /*padding: 4rem 5rem;  padding: 3rem 0; */
        /* background-color: rgb(251 104 55 / 0.15); */
        /* background-color: rgb(254, 236, 236); */
        width: 100%;
        /* width: 100vw; */

        /* .why-us-layout-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; } */
        .why-us-layout-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem;
        }
    }

    /*===================== Find Us | FAQs Component Config (Mobile-First Layout Configuration) =====================*/
    .find-us-faq-section {
        /* padding: 5rem 0; */

        .find-us-layout-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem;
            /* Broad gutter breaks give breathing room on wide desktop displays */
        }
    }

    .location-profile-column .map-iframe-viewport-box {
        height: 500px;
        /* Complete widescreen standard display aspect scaling */
    }

    .faq-accordion-column {

        .faq-pre-header-tagline,
        .faq-main-display-title {
            text-align: left;
        }
    }

    /*===================== Editorual | Typography Prose Styles Layer =====================*/
    .sidebar-social-share-rail-container {
        top: 50%;
        bottom: auto;
        left: 1.5rem;
        right: auto;
        width: auto;
        transform: translateY(-50%);
        padding: 0.75rem 0.5rem;
        border: 1px solid var(--rail-border-line);
        border-radius: 9999px;
        box-shadow: var(--rail-shadow);
        background-color: var(--rail-bg-container);

        .rail-buttons-vertical-stack {
            flex-direction: column;
            justify-content: center;
            gap: 0.875rem;
            width: auto;
        }
    }

    .rail-social-btn {
        width: 2.75rem;
        height: 2.75rem;

        &:hover {
            transform: translateX(4px) scale(1.08);
        }
    }
}

/*%%%%%%%%%%%%%%%%%%%%%%%%% ACCESSIBILITY CONTROL LAYER %%%%%%%%%%%%%%%%%%%%%%%%%*/
@media (prefers-reduced-motion: reduce) {

    /*===================== Safe Global Reset --> Instantly stops animations and transitions across the entire site =====================*/
    /* *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    } */

    /*===================== flight updates  Config =====================*/
    .disclaimer-banner-shelf {
        transition: none !important;
    }

    /*===================== Hero Content Config =====================*/
    .main-hero-showcase-section .hero-media-canvas-wrapper {

        .hero-poster-fallback-img,
        .hero-background-video {
            transform: none !important;
        }

        .hero-background-video {
            display: none !important;
        }
    }

    /*===================== Featured Packages Layout Config (1200PX Screen) =====================*/
    .package-display-card-node {
        transition: none !important;

        &:hover {
            transform: none !important;
        }
    }

    .async-loading-anchor-wrapper .native-spinner-element {
        animation: none !important;
    }

    /*===================== WhatsApp Widgets Config --> Respect user motion preferences =====================*/
    .whatsapp-cta-bounce,
    .launcher-pulse-glow-ring {
        animation: none !important;
    }

    /*===================== Offer Poster Section Variables Config =====================*/
    .offer-display-card-node {
        transition: none !important;

        &:hover {
            transform: none !important;
        }
    }

    .offer-display-card-node .card-surface-featured-img {
        transition: none !important;
    }

    .offer-display-card-node:hover .card-surface-featured-img {
        transform: none !important;
    }

    /*===================== Why Kiche Content Config =====================*/
    .partners-marquee-wrapper .marquee-movement-axis-track {
        animation: none !important;
    }

    .partners-marquee-wrapper .marquee-logos-group-node img {
        filter: grayscale(0);
        opacity: 1;
    }

    /*===================== Customer Reviews | Special Holidays Section =====================*/
    .holiday-promo-card-item {
        transition: none !important;

        &:hover {
            transform: none !important;
        }
    }

    .holiday-promo-card-item .promo-backdrop-img {
        transition: none !important;
    }

    .holiday-promo-card-item:hover .promo-backdrop-img {
        transform: none !important;
    }


    /*===================== Care Hire Component Config =====================*/
    .async-loading-anchor-wrapper .native-spinner-element {
        animation: none !important;
    }

    /*===================== Category Component  Config  =====================*/
    .category-pill-card-link {
        transition: none !important;

        &:hover {
            transform: none !important;
        }
    }



    /*===================== Gallery Component Config =====================*/
    .tab-sliding-active-marker-pill,
    .tab-content-rendering-pane {
        transition: none !important;
    }

    .gallery-grid-photo-card-item .photo-card-backdrop-img {
        transition: none !important;
    }

    .gallery-grid-photo-card-item:hover .photo-card-backdrop-img {
        transform: none !important;
    }


    /*===================== Blog Layout Component Config =====================*/
    .card-profile-footer-row .btn-read-more-link:hover .arrow-right-svg {
        transform: none !important;
    }


    /*===================== Editorual | Typography Prose Styles Layer =====================*/
    .rail-social-btn {
        transition: none !important;

        &:hover {
            transform: none !important;
        }
    }
}




/* Consent Form */
.featured-packages-section.consent {
    margin-top: 0;
}
/* 
.consent-form-section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5rem;
    margin-bottom: 2.5rem;
} */

.privacy-hero-banner,
.consent-hero-banner {
    /* Layout & Sizing */
    display: flex;    
    align-items: center;   
    justify-content: center;  
    height: 30vh;  
    padding-top: 1.25rem;  
    padding-bottom: 0.75rem;

    /* Borders & Corners */
    border-bottom: 1px solid #e5e7eb;
    border-bottom-left-radius: 0.5rem; 
    border-bottom-right-radius: 0.5rem;
    /* background-image: linear-gradient(to bottom right, --kiche-dark-green, --kiche-dark-orange); */

    background-color: var(--kiche-dark-green);              /* Fallback color while image loads */
    background-image: url('../img/hero-images/koija-warriors.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.privacy-header-wrapper,
.consent-header-wrapper {
  text-align: center;
  padding-top: 2.5rem;
}

.privacy-title-text,
.consent-title-text {
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: #ffffff; 
  font-weight: 700;
}

.privacy-supporting-text {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.25rem;
  color: #fff;
  font-weight: 600;
}

.privacy-policy-content-wrapper,
.consent-grid-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.75rem;
}

.consent-description-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

.privacy-description-title,
.consent-description-title {
    margin-top: 0.875rem;    
    margin-bottom: 2.5rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    letter-spacing: -0.025em;
    font-weight: 800;

    background-image: linear-gradient(to right, var(--kiche-dark-green), var(--kiche-light-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.privacy-subtitle-title,
.consent-subtitle-text {
  margin-bottom: 2rem;
  font-weight: 300;
  color: #6b7280;
}

ul.privacy-subtitle-title {
    padding-left: 2.5rem;
}

.consent-privacy-policy,
.consent-subtitle-text span {
    font-weight: 700;
    color: #000000;
}
.privacy-subtitle-text a,
.consent-subtitle-text a {
    text-decoration: none;
    color: inherit;
}

.privacy-subtitle-text a:hover,
.consent-subtitle-text a:hover {
    color: var(--kiche-light-orange);
}

.consent-address-subtitle-text {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem; 
    font-weight: 600;
    color: #111827;
}

.consent-address-body-text {
  margin-bottom: 1rem;
  font-weight: 300;
  color: #6b7280;
}

.social-media-section-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.social-media-body-text {
    margin-bottom: 1rem;
    font-weight: 300;
    color: #6b7280;
}

.floating-social-icon-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.floating-social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 0.5rem; */
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.floating-social-icon-btn:hover {
    transform: scale(1.1);
}

.floating-social-icon-svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #ffffff;
}

.floating-social-icon-btn.fb {
    background-color: #2563eb;
}
.floating-social-icon-btn.twitter {
    background-color: #111827;
}

.floating-social-icon-btn.instagram {
    background-image: linear-gradient(to top right, #facc15, #ec4899, #9333ea);
}
.floating-social-icon-btn.linkedin {
    background-color: #1d4ed8;
}
.floating-social-icon-btn.tiktok {
    background-color: #000000;
}
.floating-social-icon-btn.youtube {
    background-color: #dc2626;;
}

/* Consent Form */
.form-fieldset-group.consent-form-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.consent-form-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--kiche-dark-green);
    margin-bottom: 1rem;
}

.consent-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem; 
}

.personal-info-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.consent-form-label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: light-dark(#111827, #ffffff);
}

.consent-form-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(#d1d5db, #4b5563);
    background-color: light-dark(#f9fafb, #374151);
    color: light-dark(#111827, #ffffff);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Focus state */
.consent-form-input:focus {
    outline: none;
    border-color: var(--kiche-light-orange);
    box-shadow: 0 0 0 3px rgba(222, 141, 3, 0.5);
}

.consent-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.consent-checkbox-content {
    display: flex;
    align-items: center;
    margin-block-end: 1rem;
}

.form-checkbox-input {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-default-medium);
    border-radius: 0.125rem;
    background-color: var(--color-neutral-secondary-medium);
    accent-color: var(--color-brand);                             
    cursor: pointer;
}

/* Focus state */
.form-checkbox-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-soft);
}

.form-checkbox-label {
  user-select: none;
  margin-inline-start: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-heading);
  cursor: pointer;
}

.error-msg-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--kiche-dark-orange);
}

.consent-submit-btn-wrapper {
    display: flex;
    justify-content: flex-end;
}

.consent-submit-btn {
  display: inline-flex;                                          /* flex (inline-flex works cleanly for buttons) */
  align-items: center;                                           /* items-center */
  gap: 0.5rem;                                                   /* gap-2 (8px) */
  padding-inline: 1.5rem;                                        /* px-6 (24px) */
  padding-block: 0.75rem;                                        /* py-3 (12px) */
  border: none;                                                  /* Resets default browser button border */
  border-radius: 0.5rem;                                         /* rounded-lg (8px) */
  background-image: linear-gradient(to right, #f97316, #ef4444); /* bg-gradient-to-r from-orange-500 to-red-500 */
  color: #ffffff;                                                /* text-white */
  font-weight: 600;                                              /* font-semibold */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 
              0 1px 2px -1px rgb(0 0 0 / 0.1);                   /* shadow */
  cursor: pointer;

  /* transition */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Hover state (ignored when disabled) */
.consent-submit-btn:hover:not(:disabled) {
    background-image: linear-gradient(to right, var(--kiche-dark-green), var(--kiche-green));
}

/* Disabled state */
.consent-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-btn-text {
    text-align: center;
}
.submit-loading-text {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.hr-line {
  margin-block: 1.25rem;
  margin-inline: auto;
  max-inline-size: 80rem;
  border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
    .consent-form-section {
        max-width: 640px;
    }

    .consent-subtitle-text {
        font-size: 1.25rem; 
        line-height: 1.75rem; 
    }

    .floating-social-icon-btn {
        padding: 0.625rem;
    }
      
    .floating-social-icon-svg {
        width: 1rem;
        height: 1rem;
    }

    .consent-form-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .consent-form-section {
        max-width: 768px;
    }

    .floating-social-icon-btn {
        padding: 0.75rem;
    }

    .consent-form {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .consent-form-section {
        max-width: 1024px;
        margin-top: 0;
    }
    .consent-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consent-form-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
  .consent-form-section {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .consent-form-section {
    max-width: 1536px;
  }
}