/*
VARS LOADED FROM SITE THEME BASED ON PHP SELECTION
*/

    html {
        touch-action: manipulation;
    }

/* General Styles */
    body {
        color: var(--font-color);
        background-color: var(--bg-color);
        background-size: cover;
        background-attachment: fixed; 
        background-position: top center;
        height: 100%;   
        font-family: 'Manrope', sans-serif !important;
        transition: all 0.3s ease;
    }

    .txt-green {
        color: var(--font-green);
    }

    .txt-orange {
        color: var(--accent-light-orange) !important;
    }

    .txt-blue {
        color: var(--font-blue);
    }

    .txt-white {
        color: var(--font-white);
    }

    .txt-left {
        text-align: left;
    }

    .txt-center {
            text-align: center;
    }

    .txt-right {
        text-align: right;
    }
        
    /* Theme Styles */
    .mode-dark {
        background-color: var(--bg-dark-color);
        color: var(--font-dark-color);
    }

    .mode-light {
        background-color: var(--bg-light-color);
        color: var(--font-light-color);
    }

    .disable-animations {
        transition: none !important;
        animation: none !important;
    }

    .disable-animations * {
        transition: none !important;
        animation: none !important;
    }
        
    h1, h2, h3, h4, h5, h6 {
        color: var(--heading-color);
        font-family: 'Poppins', sans-serif !important;
    }

    .mode-light h1, .mode-light h2, .mode-light h3, .mode-light h4, .mode-light h5, .mode-light h6 {
        color: var(--heading-light-color);
        font-weight: 500;
    }

    .mode-dark h1, .mode-dark h2, .mode-dark h3, .mode-dark h4, .mode-dark h5, .mode-dark h6 {
        color: var(--heading-dark-color);
        font-weight: 500;
    }


    h1 {
        font-size: 24px !important;
        font-weight: 600;
    }

    h2 {
        font-size: 24px !important;
        font-weight: 400;
    }

    h3 {
        font-size: 22px !important;
        font-weight: 300;
    }

    h4 {
        font-size: 20px !important;
        font-weight: 300;
    }

    h5 {
        font-size: 16px !important;
        font-weight: 300;
    }

    h6 {
        font-size: 16px !important;
        font-weight: 100;
    }

    .fs-12 {
        font-size: 10px !important;
    }
        
    .fw-100{
        font-weight: 100 !important;
    }
    .fw-200{
        font-weight: 200 !important;
    }
    .fw-300{
        font-weight: 300 !important;
    }
    .fw-400{
        font-weight: 400 !important;
    }
    .fw-500{
        font-weight: 500 !important;
    }
    .fw-600{
        font-weight: 600 !important;
    }
    .fw-700{
        font-weight: 700 !important;
    }
    .fw-800{
        font-weight: 800 !important;
    }
        
    p {
      color: var(--font-color);
      font-size: 16px;
      transition: all 0.3 ease;
      font-family: 'Manrope', sans-serif !important;
    }

    .mode-dark p {
        color: var(--font-dark-color);
    }

    .mode-light p {
        color: var(--font-light-color);
    }

    .social {
        color: var(--icon-color);
        transition: all 0.3 ease;
    }

    .mode-light .social {
        color: var(--icon-light-color);
        transition: all 0.3 ease;
    }    

    .mode-dark .social {
        color: var(--icon-dark-color);
        transition: all 0.3 ease;
    }

    .social:hover {
        color: var(--accent-orange);
        transition: all 0.3 ease;
    }

    .mode-light .social:hover {
        color: var(--accent-orange);
        transition: all 0.3 ease;
    }    

    .mode-dark .social:hover {
        color: var(--accent-dark-orange);
        transition: all 0.3 ease;
    }

    
    .icon {
        color: var(--icon-color);
    }

    .mode-light .icon {
        color: var(--icon-light-color);
    }    

    .mode-dark .icon {
        color: var(--icon-dark-color);
    }
        
    /* Custom Container */
    .location-container {
        background-color: rgba(255, 255, 255, 1);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mode-dark .location-container {
        background-color: rgba(11, 11, 11, 1);
    }

    /* Custom Card */
    .location-card {
        border: none;
        max-width: 655px;
        height: 456px;
        border-radius: 15px;
        margin: 24px auto;
        background-color: var(--bg-color);
        color: var(--font-color);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mode-light .location-card {
        background-color: var(--bg-color);
        color: var(--font-color);
    }
        
    .mode-dark .location-card {
        background-color: var(--bg-dark-color);
        color: var(--font-dark-color);
    }

    @media (max-width: 992px) {
        .location-card {
            height: 100%;
        }
    }

    .themeImage {
        max-height: 50px;
    }

    /* Accessibility Styles */
    .large-cursor {
        cursor: zoom-in;
    }

    /* Buttons and Icons */
    .menu-button {
        font-size: 24px;
        cursor: pointer;
    }

    .menu-icon {
        margin-left: -2px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: var(--icon-color);
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        cursor: pointer;
    }

    .light-mode .menu-icon {
        color: var(--icon-light-color);
    }

    .dark-mode .menu-icon {
        color: var(--icon-dark-color);
    }
        
    /* Active Styles */
    .active {
        display: block;
    }

    .shadow {
        box-shadow: 0px 0px 24px var(--soft-shadow);
    }

    /* Accessibility Button */
    .accessibility-btn {
        position: fixed;
        left: 2vw;
        bottom: 2vh;
        font-size: 36px;
        line-height: 48px;
        background-color: var(--accessibility-blue);
        color: var(--font-dark-color);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3000;
        transition: all 0.3s ease-in;
        box-shadow: 0px 0px 24px var(--soft-shadow);
    }
    
    .accessibility-btn.bottom {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 20px;
        left: 20px;
        bottom: 11px;
        background-color: var(--bg-dark-color);
    }    

    @media (max-width: 761px) {
        .accessibility-btn.bottom {
            left: -40px;
            bottom: -40px;
        }
    }
        
    .mode-dark .accessibility-btn {
        background-color: var(--bg-light-color);
        color: var(--accessibility-blue);
    }
        
    .accessibility-menu-btn {
        border-color: var(--accessibility-blue);
        color: var(--accessibility-blue);
        padding: 10px 6px;
        line-height: 1.2;
    }

    .accessibility-menu-btn:hover,
    .accessibility-menu-btn:focus {
        background-color: var(--accessibility-blue);
        border-color: var(--accessibility-blue);
        color: #fff;
    }

    .accessibility-menu-btn.active {
        background-color: var(--accessibility-blue);
        border-color: var(--accessibility-blue);
        color: #fff;
    }

    .mode-dark .accessibility-menu-btn {
        border-color: var(--bg-light-color);
        color: var(--bg-light-color);
    }

    .mode-dark .accessibility-menu-btn:hover,
    .mode-dark .accessibility-menu-btn:focus,
    .mode-dark .accessibility-menu-btn.active {
        background-color: var(--bg-light-color);
        color: var(--accessibility-blue);
    }

    .accessibility-menu {
        position: fixed;
        opacity: 0;
        color: var(--accessibility-blue);
        border-radius: 25px;
        border: 5px solid var(--accessibility-blue);
        bottom: 2vh;
        left: 2vw;
        height: 0px;
        width: 0px;
        background-color: var(--bg-color);
        padding: 20px;
        overflow-y: auto;
        z-index: 2000;
        box-shadow: 0px 0px 200px var(--soft-shadow);
        transition: all 0.3s ease;
    }
    
    .accessibility-menu.bottom{
        bottom: 12px; 
        left: 21px; 
    }
        
    .mode-dark .accessibility-menu {
        color: var(--font-dark-color);
        border: 5px solid var(--bg-light-color);
        background-color: var(--accessibility-blue);
    }
        
    .mode-dark .accessibility-menu .btn {
        color: var(--font-dark-color);
        border-color: var(--bg-light-color);
        background-color: var(--accessibility-blue);
    }
        
    .mode-dark .accessibility-menu .btn:hover {
        background-color: var(--font-blue);
    }

    .accessibility-menu h2 {
        color: var(--accessibility-blue);
    }
    
    .mode-dark .accessibility-menu h2 {
        color: var(--heading-dark-color);
    }

    .accessibility-menu.active {
        opacity: 1;
        height: auto;
        max-height: 85vh;
        width: min(425px, 96vw);
        max-width: calc(100vw - 4vw);
    }
        
        
    /* Language */
        
    /* language Button */
    .language-btn {
        position: fixed;
        right: 20px;
        top: 20px;
        font-size: 28px;
        line-height: 28px;
        background-color: var(--accessibility-blue);
        color: var(--font-dark-color);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3000;
        transition: all 0.3s ease-in;
        box-shadow: 0px 0px 24px var(--soft-shadow);
    }
    
    .language-btn.bottom {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 20px;
        right: 11px;
        top: 11px;
        background-color: var(--bg-dark-color);
    }

    @media (max-width: 761px) {
        .language-btn.bottom {
            right: -40px;
            top: -40px;
        }
    }
    
    .mode-dark .language-btn {
        background-color: var(--bg-light-color);
        color: var(--accessibility-blue);
    }
        
    .language-menu-btn .active {
        background-color: var(--bg-light-color);
        color: var(--accessibility-blue);
    }
        
    .mode-dark .language-menu-btn .active {
        background-color: var(--bg-light-color);
        color: var(--accessibility-blue);
    }

    .language-menu {
        position: fixed;
        opacity: 0;
        color: var(--accessibility-blue);
        border-radius: 25px;
        border: 5px solid var(--accessibility-blue);
        right: 20px;
        top: 20px; 
        width: 0px;
        height: 0px; 
        background-color: var(--bg-color);
        padding: 20px;
        overflow-y: auto;
        z-index: 2000;
        box-shadow: 0px 0px 200px var(--soft-shadow);
        transition: all 0.3s ease;
    }

    .language-menu.bottom {
        right: 11px;
        top: 11px;
    }
        
    .language-menu.active {
        opacity: 1;
        right: 20px;
        height: 475px; 
        width: 225px; 
    }        
        
    .mode-dark .language-menu {
        color: var(--font-dark-color);
        border: 5px solid var(--bg-light-color);
        background-color: var(--accessibility-blue);
    }
        
    .mode-dark .language-menu .btn {
        color: var(--font-dark-color);
        border-color: var(--bg-light-color);
        background-color: var(--accessibility-blue);
    }
        
    .mode-dark .language-menu .btn:hover {
        background-color: var(--font-blue);
    }

    .language-menu h2 {
        color: var(--accessibility-blue);
    }
    
    .mode-dark .language-menu h2 {
        color: var(--heading-dark-color);
    }

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

    .mode-dark .sidebar {
        background-color: var(--bg-dark-color);
    }

    /* SIDEBAR */
    a.sidebar-link  {
        text-decoration: none;
        cursor: pointer;
        color: var(--font-light-color);
        font-size: 32px;
        font-weight: 100;
        line-height: 48px;
        transition: all 0.3s ease-in-out;
    }

    .mode-dark a.sidebar-link  {
        color: var(--font-dark-color);
        transition: all 0.3s ease-in-out;
    }

    a.sidebar-link:hover  {
        color: var(--accent-orange);
    }

    .mode-dark a.sidebar-link:hover  {
        color: var(--accent-dark-orange);
    }

     a.sidebar-link-sm  {
        text-decoration: none;
        cursor: pointer;
        color: var(--bg-dark-secondary);
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        transition: all 0.3s ease-in-out;
    }

    .mode-dark a.sidebar-link-sm  {
        color: var(--bg-light-secondary);
        transition: all 0.3s ease-in-out;
    }

    a.sidebar-link-sm:hover  {
        color: var(--accent-orange);
    }

    .mode-dark a.sidebar-link-sm:hover  {
        color: var(--accent-orange);
    }

       
    /* MINI CART */
        
    /* Accessibility Button */
    .cart-menu {
        position: fixed;
        pointer-events: none;
        opacity: 0;
        color: var(--accessibility-blue);
        border-radius: 25px 0px 0px 25px;
        top: 0px; 
        right: -400px; 
        height: 100%; 
        width: 40%; 
        background-color: var(--bg-color);
        padding: 20px;
        overflow-y: auto;
        z-index: 5000;
        box-shadow: 0px 0px 200px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

    @media (max-width: 761px) {
        .cart-menu {
            height: 100%; 
            width: 90%; 
        }
    }
        
    .cart-menu.active {
        pointer-events: auto;
        opacity: 1;
        top: 0px; 
        right: 0px; 
    }
        
        
    .mode-dark .cart-menu {
        color: var(--font-dark-color);
        border: 5px solid var(--bg-dark-secondary);
        background-color: var(--bg-dark-secondary);
    }
        
    .cart-menu h2 {
        color: var(--heading-light-color);
    }
    
    .mode-dark .cart-menu h2 {
        color: var(--heading-dark-color);
    }

        

    /* Reset and Skip Link */
    .skip-link {
        position: absolute;
        color: rgba(250, 249, 246, 1);
        z-index: 1000;
    }

    .skip-link {
        top: -50px;
        left: 0;
        padding: 10px;
        text-decoration: none;
    }

    .skip-link:focus {
        top: 0;
    }

    .reset-btn {
        margin-top: 1rem;
        background-color: rgba(220, 53, 69, 1);
        color: rgba(250, 249, 246, 1);
        width: 100%;
        text-align: center;
        padding: 0.5rem;
        cursor: pointer;
    }

    .reset-btn:hover {
        background-color: rgba(200, 35, 51, 1);
    }

    img {
        filter: brightness(100%);
        transition: all 0.3s ease;
    }

    .mode-dark img {
        filter: brightness(100%);
    }

    .bannerImage{
        max-width: 95vw;
        max-height: 150px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .heroImage {
        max-width: 100%;
        max-height: 425px;
        border-radius: 9px;
        border: 10px solid var(--heading-light-color);
        transition: all 0.3s ease;
    }

    .mode-dark .heroImage {
        border: 10px solid var(--heading-dark-color);
    }

    .circle {
        background-color: var(--heading-light-color);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: bounceAndPulse 1.5s infinite ease-in-out;
    }

    .fa-chevron-down {
        font-size: 20px;
        color: rgba(255, 255, 255, 1); 
    }

    .mode-dark .circle {
        background-color: var(--heading-dark-color);
    }

    .mode-dark .fa-chevron-down {
        color: rgba(6, 5, 80, 1);
    }

    @keyframes bounce {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(10px);
        }
    }

    @keyframes bounceAndPulse {
        0%, 100% {
            transform: translateY(0) scale(1);
            box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5); 
        }
        50% {
            transform: translateY(10px) scale(1.1);
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); 
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }

    .gallery-counts div {
        display: inline-block;
        min-width: 44%;
        padding: 5px;
        border-radius: 25px;
    }

    .gallery-counts {
        display: flex;
        justify-content: space-between;
    }

    .flex-column {
        flex-direction: column;
        align-items: center;
    }

    @media (max-width: 992px) {
        .gallery-counts div {
            display: block;
            margin-bottom: 10px;
        }
    }

    .prepaid {
        opacity: 0.6;
        background-color: var(--prepaid-background-color);
        border: 2px solid var(--prepaid-border-color);
        transition: all 0.3s ease;
    }

    .prepaid p {
        color: var(--prepaid-font-color);
        opacity: 1;
        font-weight: 500;
        transition: all 0.3s ease;
    }
        
    .prepaid i {
        color: var(--prepaid-icon-color);
        transition: all 0.3s ease;
    }

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

    .border-none {
        border: 0px solid #fff !important;
    }

    .menu-cart {
        background-color: var(--cart-grey);
        border-radius: 25px;
        display: flex;
        align-items: baseline;
        padding: 0px 10px 0px 10px;
        justify-content: space-between;
        transition: all 0.3s ease;
    }


    .mode-dark .menu-cart {
        background-color: var(--cart-dark-grey);
    }

    .circle-total {
        position: relative;
        left: -24px;
        top: -10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        font-size: 10px;
        transform: scale(1);
    }

    .badge {
        height: 20px;
        width: 20px;
        line-height: 10px;
        font-size: 10px;
        text-align: center;
        transform: scale(1);
        transition: all 0.3s ease-in-out;
        z-index: 2;
    }

    .badge-sm {
        height: 18px;
        width: 18px;
        line-height: 18px;
        font-size: 8px;
        text-align: center;
        transform: scale(1);
        transition: all 0.3s ease-in-out;
        z-index: 2;
    }

    .badge-lg {
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        transform: scale(1);
        transition: all 0.3s ease-in-out;
        z-index: 2;
    }

    .bdg-green {
        background-color: var(--prepaid-font-color);
        border-color: var(--prepaid-font-color);
        transition: all 0.3s ease-in-out;
    }
    
    .bdg-dark {
        background-color: var(--bg-dark-secondary);
        border-color: var(--bg-dark-secondary);
        box-shadow: 0 0 0 0 var(--bg-dark-secondary);
    }

    .bdg-orange {
        background-color: var(--accent-light-orange);
        border-color: var(--accent-light-orange);
        transition: all 0.3s ease-in-out;
    }

    .bdg-light-pulse {
        background-color: var(--bg-light-color);
        border-color: var(--bg-light-color);
        animation: pulse 2.3s infinite;
        transition: all 0.3s ease-in-out;
    }

    .bdg-light-pulse:nth-child(odd) {
      animation: pulse 2.3s infinite; 
    }

    .bdg-light-pulse:nth-child(even) {
      animation: pulse 1.6s infinite;
    }

    .bdg-light-pulse:nth-child(1) {
      animation: pulse 2.1s infinite; 
    }

    .bdg-light-pulse:nth-child(4) {
      animation: pulse 1.9s infinite; 
    }

    .bdg-light-pulse:nth-child(6) {
      animation: pulse 2.4s infinite; 
    }

    .bdg-green-pulse {
        background-color: var(--prepaid-font-color);
        border-color: var(--prepaid-font-color);
        box-shadow: 0 0 0 0 var(--prepaid-font-color);
        animation: pulseGreen 1.9s infinite;
        transition: all 0.3s ease-in-out;
    }
    
    .bdg-dark-pulse {
        background-color: var(--bg-dark-secondary);
        border-color: var(--bg-dark-secondary);
        box-shadow: 0 0 0 0 var(--bg-dark-secondary);
    }

    .bdg-orange-pulse {
        background-color: var(--accent-light-orange);
        border-color: var(--accent-light-orange);
        box-shadow: 0 0 0 0 var(--accent-light-orange);
        animation: pulseOrange 1.7s infinite;
        transition: all 0.3s ease-in-out;
    }

    .circle-green {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(44, 182, 167, 1);
        box-shadow: 0 0 0 0 rgba(44, 182, 167, 1);
        animation: pulseGreen 1.9s infinite;
        transition: all 0.3s ease-in-out;
    }

    .circle-orange {
        color: rgba(255, 255, 255, 1);
        background-color: var(--accent-dark-orange);
        box-shadow: 0 0 0 0 var(--accent-dark-orange);
        animation: pulseOrange 1.7s infinite;
        transition: all 0.3s ease-in-out;
    }

    .mode-dark .circle-green {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(44, 182, 167, 0.8);
        box-shadow: 0 0 0 0 rgba(44, 182, 167, 0.8);
        animation: pulseGreen 1.9s infinite;
    }

    .mode-dark .circle-orange {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(238, 81, 58, 0.8);
        box-shadow: 0 0 0 0 rgba(238, 81, 58, 0.8);
        animation: pulseOrange 1.7s infinite;
    }

    .mode-dark .prepaid {
        opacity: 1;
    }

    .mode-dark .prepaid p {
        opacity: 1;
    }

    .container-fluid {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .secondary-menu {
        background-color: var(--bg-color);
        color: rgba(6, 5, 80, 1);
        transition: all 0.3s ease;
    }

    .mode-dark .secondary-menu {
    background-color: rgba(42, 42, 42, 1);
    color: rgba(255, 255, 255, 1);
    }

    .mode-dark .modal-content {
    background-color: rgba(42, 42, 42, 1);
    border: 3px solid var(--accent-orange);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 44px var(--soft-shadow);
    }

    .mode-light .secondary-menu {
        background-color: var(--bg-light-color);
        color: rgba(6, 5, 80, 1);
        transition: all 0.3s ease;
    }
    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(244, 244, 244, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 9px rgba(244, 244, 244, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(244, 244, 244, 0);
        }
    }

    @keyframes pulseOrange {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(238, 81, 58, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(238, 81, 58, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(238, 81, 58, 0);
        }
    }

    @keyframes pulseGreen {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(44, 182, 167, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(238, 81, 58, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(238, 81, 58, 0);
        }
    } 

    @keyframes flashingAnimation {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }

    .category-item {
        transition: all 0.3s ease;
    }

    .category-item .btn {
        border-color: var(--accent-orange);
        color: var(--accent-orange);
        transition: all 0.3s ease;
    }

    .category-item .btn:hover {
        background-color: var(--accent-orange);
        color: var(--font-dark-color);
    }

    .category-item.active .btn {
        background-color: var(--accent-orange);
        color: var(--font-dark-color);
        font-weight: 800;
    }

    .category-card h5{
        color: var(--heading-color);
        padding-top: 5px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    .category-card:hover h5{
        color: var(--accent-dark-orange);
        transition: all 0.3s ease-in-out;
    }

    .mode-dark .category-item.active h5 {
        color: var(--heading-dark-color);
    }

    .mode-dark .category-card:hover h5{
        color: var(--heading-dark-color);
        transition: all 0.3s ease-in-out;
    }
    
    .mode-dark .category-card h5{
        color: var(--accent-dark-orange);
        transition: all 0.3s ease-in-out;
    }

    #products {
        top: 62px;
        padding-top: 15px;
        transition: all 0.3s ease;
    }

    #products.highlight {
        }

    .mode-dark #products {
        transition: all 0.3s ease;
    }

    .mode-dark #products.highlight {
    }

    #products-container {
        height: 0px;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s ease;
    }

    .mode-dark #products-container {
    }

    #products-container.show {
        height: 100%;
        pointer-events: auto;
        opacity: 1;
    }

    #products-container .card {
        margin-top: 15px;
        border: 2px solid var(--bg-light-color);
        transition: all 0.3s ease-in-out;
    }

    .mode-dark #products-container .card {
        background-color: var(--cart-dark-grey);
    }

    #products-container .card:hover {
        border-color: var(--accent-orange);
        box-shadow: 0px 0px 22px var(--soft-shadow);
    }

    .mode-dark #products-container .card:hover {
        border-color: var(--accent-orange);
        box-shadow: 0px 0px 22px var(--soft-shadow);
    }

    #products-container .card.h-100.product.selected {
        transition: all 0.3s ease;
        border-color: var(--accent-orange);
        background-color: var(--bg-light-secondary);
        box-shadow: 0px 0px 11px var(--accent-orange), 0px 0px 44px var(--soft-shadow);
        transform: scale(1.01);
    }

    .mode-dark #products-container .card.h-100.product.selected {
        border-color: var(--accent-dark-orange);
        background-color: var(--bg-dark-secondary);
        box-shadow: 0px 0px 66px var(--soft-shadow);
        transform: scale(1.02);
    }

    .product-image {
        border-radius: 10px;
    }

    .product-img {
        max-width: 75px;
        max-height: 75px;
        transition: all 0.3 ease;
    }

    .product-img:hover {
        transform: scale(1.1);
    }

    .spin-out {
        transform: rotate(360deg);
    }

    .gallery-item {
        position: relative;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.75);
        justify-content: center;
        align-items: center;
        pointer-events: none;
        display: flex;
        z-index: 1;
        opacity: 0;
        visibility: visible;
        transition: opacity 0.2s ease-in-out, visibility 0s linear 0.3s;
    }

    .overlay.active {
        opacity: 1; 
        visibility: visible; 
        transition: opacity 0.2s ease-in-out, visibility 0s linear; 
    }

    .overlay-content {
        text-align: center;
        color: white;
    }

    .prepaid-footer {
        position: fixed;
        bottom: -100%;
        left: 0px;
        background-color: var(--prepaid-background-color);
        color: var(--prepaid-font-color);
        border-radius: 25px 25px 0px 0px;
        padding: 10px;
        transition: all 0.3s ease;
    }

    .fixed-bottom {
        bottom: 0;
        left: 0;
    }

    /* Define the style for the underline */
.fancy-underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

#company-logo img {
    max-height: 75px;
}

/* Create the pseudo-element for the underline */
.fancy-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--accent-orange); /* Change this to your preferred underline color */
    transition: width 0.3s ease;
}

/* Define the hover effect */
.fancy-underline:hover::after {
    width: 98%;
}

/* Optional: Adjustments for links */
.fancy-underline:hover {
    color: inherit;
}

#carousel {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    height: 70vh;
    border: 20px solid var(--heading-light-color);
    background-color: var(--heading-light-color);
    border-radius: 25px;
}

.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.carousel-item img {
    max-height: 65vh;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0%;
}

.cimage {
    animation: slideshow 5s infinite ease-in-out; 
}

@keyframes slideshow {
    0% {
        opacity: 0%;
    }
    25% {
        opacity: 100%;
    }
    75% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}



#activeProduct .card {
    border: 3px solid var(--accent-color);
    text-align: left !important;
}

.mode-dark #activeProduct .card {
    border: 3px solid var(--accent-dark-orange);
    background-color: var(--cart-dark-grey);
    color: var(--heading-dark-color);
}

#activeProduct .card .btn {
    position: absolute;
    background-color: var(--accent-orange);
    border: 3px solid var(--bg-light-color);
    color: var(--font-dark-color);
    bottom: -20px;
    left: 25%;
    right: 25%;
    margin: 0 auto;
    transition: all 0.3 ease;
}

#activeProduct .card .btn:hover {
    background-color: var(--bg-light-color);
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);

}

.btn {
    border-radius: 20px;
    cursor: pointer;
    padding: 10px;
    font-weight: 800;
}

.btn-danger {
    cursor: pointer;
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
}

.btn-danger:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background-color: var(--bg-light-color);
}

.btn-outline-danger {
    cursor: pointer;
    background-color: var(--bg-light-color);
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
}

.btn-outline-danger:hover {
    background-color: var(--accent-orange);
    border: 2px solid var(--bg-light-color);
    color: var(--bg-light-color);
}

.btn-outline-primary {
    background-color: var(--bg-light-color);
    border: 1px solid var(--heading-light-color);
    color: var(--heading-light-color);
    margin-bottom: 2px;
}

.btn-outline-primary:hover {
    background-color: var(--bg-light-color);
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
}

.btn-square {
    width: 51px; 
    height: 52px;
    border-radius: 10px;
    transition: all 0.3 ease-in-out;
}

.btn-square.active {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
}

.donation-added {
    background-color: var(--accent-orange);
    color: var(--font-dark-color);
    border-radius: 10px;
}

.toast {
    pointer-events: none;
    margin-top: 15px;
    box-shadow: 0px 0px 44px var(--soft-shadow);
}

.mode-dark .toast-header {
    background-color: #000 !important;
    color: var(--accent-orange) !important;
}

.mode-dark .toast {
    background-color: #111 !important;
}

img.logo {
    max-height: 75px;
    width: auto;
    transition: all 0.3s ease;
}

.live img.logo {
    max-height: 75px;
}

.secondary-menu img.logo {
    max-height: 75px;
}

.secondary-menu .live img.logo {
        max-height: 50px;   
    }

@media (max-width: 761px) {
    .secondary-menu img.logo {
        max-height: 50px;
    }
    
    .secondary-menu .live img.logo {
        max-height: 40px;   
    }
}

.secondary-menu img.logo {
    max-height: 50px;
}

.donation-logo{
    max-height: 75px;
}

.donation-text{
    font-weight: 500;
    font-size: 14px;
    color: var(--heading-light-color);
}

.mode-dark .donation-text{
    color: var(--heading-dark-color);
}

.donation-link{
    font-weight: 100;
    font-size: 12px;
    text-decoration: none;
    color: var(--prepaid-font-color);
}

.footer-text {
    font-weight: 100;
    font-size: 12px;
}

.footer-text a {
    font-weight: 200;
    font-size: 12px;
    text-decoration: none;
    color: var(--accent-light-orange);
}

.footer-text a:hover {
    font-weight: 300;
    text-decoration: none;
    color: var(--accent-dark-orange);
}

.remove-from-cart{
    height: 30px;
    line-height: 16px;
    width: 32px;
    font-size: 32px;
    padding: 0px;
    border-radius: 50%;
    border: 0px solid #f5f5f5;
}

.checkout-label {
    font-size: 14px;
    font-weight: light;
    color: var(--heading-color);
    font-family: 'Poppins', sans-serif !important;
}


/* STYLE FOR SHOPPING CART */
.callout {
    border-left: 4px solid var(--prepaid-border-color);
    background-color: var(--prepaid-background-color);
    color: var(--prepaid-border-color);
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.callout .checkout-label {
    color: var(--prepaid-border-color);
}

.callout i {
    color: var(--prepaid-border-color);
}

/* ============================================================
   EXPERIENCE CARDS — service selection on location page
   and featured services on home page
   ============================================================ */

.experience-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px 12px 14px;
    color: var(--font-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

.experience-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--font-color);
}

.experience-card:active {
    transform: translateY(-6px) scale(1.02);
}

.experience-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.experience-img-placeholder {
    width: 100%;
    height: 130px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
}

.experience-label {
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--font-color);
    line-height: 1.35;
    word-break: break-word;
}

/* ============================================================
   LOCATIONS PAGE — search bar, map, distance badges
   ============================================================ */

.loc-search-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--font-color);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.loc-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.loc-search-input:focus {
    outline: none;
    border-color: var(--heading-color);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.15);
    background: rgba(255, 255, 255, 0.11);
    color: var(--font-color);
}

.loc-map {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
}

.loc-distance {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--heading-color);
    opacity: 0.9;
}

/* ============================================================
   HOME PAGE — banner, CTA cards, info card
   ============================================================ */

.home-banner-wrap {
    width: 100%;
    overflow: hidden;
    max-height: 320px;
}

.home-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 320px;
}

.home-cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: var(--font-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.home-cta-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--font-color);
}

.home-cta-card:active {
    transform: translateY(-5px) scale(1.01);
}

.home-cta-icon {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 0.75rem;
    line-height: 1;
}

.home-cta-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--font-color);
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.home-cta-sub {
    font-size: 0.85rem;
    color: var(--font-color);
    opacity: 0.65;
    line-height: 1.5;
}

.home-info-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 575.98px) {
    .experience-card {
        width: 155px;
        padding: 12px 10px 11px;
    }

    .experience-img,
    .experience-img-placeholder {
        height: 105px;
    }

    .home-cta-card {
        padding: 1.5rem 1.25rem;
    }

    .home-cta-icon {
        font-size: 1.8rem;
    }

    .loc-map {
        height: 300px;
    }
}

/* ============================================================
   BOOKING FLOW — restored from pre-b1 + new b1-style additions
   ============================================================ */

/* ---- Buttons ---- */

.btn-book {
    background-color: var(--accent-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-book:hover {
    background-color: var(--accent-green);
    color: #fff;
    transform: translateY(-1px);
}

.btn-book:active {
    transform: translateY(0);
}

.btn-outline-themed {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    background: transparent;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline-themed:hover {
    background-color: var(--accent-orange);
    color: #fff;
}

/* ---- Step Indicator ---- */

.booking-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
    font-size: 14px;
    opacity: 0.8;
}

.booking-steps .step {
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-steps .step.active {
    font-weight: 600;
    opacity: 1;
    color: var(--accent-orange);
}

.booking-steps .step.completed {
    opacity: 0.6;
}

.booking-steps .step-divider {
    width: 20px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.4;
}

/* ---- Calendar Grid ---- */

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 14px;
}

.cal-nav {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    background: var(--bg-color);
    color: var(--font-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cal-nav:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: translateY(-1px);
}

.cal-month {
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--heading-color);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.cal-dow span {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--font-color);
    opacity: 0.55;
    padding-bottom: 2px;
}

.cal-day {
    min-height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    background: var(--bg-color);
    color: var(--font-color);
    padding: 8px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-day-num {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.cal-day-meta {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-green, #1f9d55);
}

.cal-day:hover:not(.disabled):not(.outside-month) {
    border-color: var(--accent-orange);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.cal-day.selected {
    border-color: var(--accent-orange);
    box-shadow: inset 0 0 0 2px var(--accent-orange);
}

.cal-day.today {
    background: rgba(255, 165, 0, 0.08);
}

.cal-day.outside-month {
    opacity: 0.45;
    cursor: default;
}

.cal-day.disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---- Time Slot Buttons ---- */

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 16px 0;
}

/* Hour-grouped picker mode — full-width rows */
.slot-grid.hour-mode {
    display: block;
    padding: 8px 0;
}

.slot-btn {
    padding: 12px;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--font-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.slot-btn:hover:not(.sold-out) {
    border-color: var(--accent-orange);
    transform: translateY(-1px);
}

.slot-btn.selected {
    background-color: var(--accent-orange);
    color: #fff;
    font-weight: 600;
    border-color: var(--accent-orange);
}

.slot-btn.sold-out {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
    text-decoration: line-through;
}

.slot-remaining {
    font-size: 11px;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
}

/* ---- Hold Timer Badge ---- */

.hold-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: rgba(255, 165, 0, 0.1);
    color: var(--accent-orange);
    font-size: 13px;
    font-weight: 600;
}

.hold-timer.expiring {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* ---- Hold Extend Slide-In Banner (from right side) ---- */
.hold-extend-slide {
    position: fixed;
    top: 50%;
    right: -360px;
    transform: translateY(-50%);
    width: 320px;
    padding: 20px 22px;
    background: var(--bg-color, #fff);
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 4500;
    transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 0.9rem;
    color: var(--font-color, #333);
}
.hold-extend-slide.active {
    right: 0;
}
.hold-extend-slide__icon {
    font-size: 1.6rem;
    color: var(--accent-orange, #ee513a);
    margin-bottom: 8px;
}
.hold-extend-slide__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}
.hold-extend-slide__text {
    font-size: 0.82rem;
    opacity: 0.7;
    margin-bottom: 12px;
    line-height: 1.4;
}
.hold-extend-slide__dismiss {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.1rem;
    opacity: 0.4;
    cursor: pointer;
    color: var(--font-color, #333);
}
.hold-extend-slide__dismiss:hover { opacity: 0.8; }

/* ---- Hold Expired Modal (non-dismissable) ---- */
.hold-expired-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 6000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.hold-expired-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.hold-expired-modal {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    background: var(--bg-color, #fff);
    border-radius: 20px;
    padding: 36px 28px 28px;
    text-align: center;
    z-index: 6001;
    transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.hold-expired-modal.active {
    top: 50%;
    transform: translate(-50%, -50%);
}
.hold-expired-modal__icon {
    font-size: 2.6rem;
    color: var(--accent-orange, #ee513a);
    margin-bottom: 14px;
}
.hold-expired-modal__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--heading-color, #060550);
}
.hold-expired-modal__text {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 22px;
}
.hold-expired-modal__btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 20px;
    background-color: var(--accent-orange, #ee513a);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}
.hold-expired-modal__btn:hover {
    background-color: var(--bg-light-color, #faf9f6);
    color: var(--accent-orange, #ee513a);
}

/* ---- Mini-Cart / Price Summary Bar ---- */

.price-summary {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color);
    border-top: 1px solid var(--cart-grey, rgba(108, 117, 125, 0.3));
    padding: 12px 20px;
    z-index: 100;
    box-shadow: 0 -4px 16px var(--soft-shadow, rgba(0, 0, 0, 0.1));
}

.mode-dark .price-summary {
    background-color: var(--bg-dark-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.price-summary .total-label {
    font-size: 14px;
    opacity: 0.8;
}

.price-summary .total-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-orange);
}

/* ---- Package List (b1 alternating row style) ---- */

.package-list {
    margin-bottom: 2rem;
}

.package-list .border-bottom {
    border-color: rgba(128, 128, 128, 0.18) !important;
}

/* Desktop slide-in animation */
@media (min-width: 740px) {
    .package-animate {
        opacity: 0;
        transform: translateX(var(--pkg-offset, 0));
        transition:
            opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
            transform 1s cubic-bezier(0.19, 1, 0.22, 1);
        will-change: transform, opacity;
    }

    .package-animate.from-left  { --pkg-offset: -40px; }
    .package-animate.from-right { --pkg-offset:  40px; }

    .package-animate.in-view {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .package-animate {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.package-list img {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .package-list img:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    }
}

/* ---- Addon Rows (generic add-ons section) ---- */

.addon-row {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(128, 128, 128, 0.15);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.addon-row:hover {
    background-color: rgba(255, 165, 0, 0.05);
    border-color: rgba(255, 165, 0, 0.3);
}

.addon-row input[type="checkbox"]:checked ~ * {
    color: var(--accent-orange);
}

.addon-price {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--accent-orange);
}

/* ---- Suggested Addons Modal Items ---- */

.addon-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.addon-modal-item:hover {
    background-color: rgba(255, 165, 0, 0.04);
    border-color: rgba(255, 165, 0, 0.3);
}

.addon-modal-item.checked {
    border-color: var(--accent-orange);
    background-color: rgba(255, 165, 0, 0.06);
}

.addon-modal-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--accent-orange);
    cursor: pointer;
}

.addon-modal-item .addon-modal-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading-color);
}

.addon-modal-item .addon-modal-desc {
    font-size: 0.82rem;
    color: var(--font-color);
    opacity: 0.7;
    margin-top: 2px;
}

.addon-modal-item .addon-modal-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-orange);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 12px;
    align-self: center;
}

/* Modal theming */
#suggestedAddonsModal .modal-content {
    background: var(--bg-color);
    color: var(--font-color);
    border: 1px solid rgba(128, 128, 128, 0.2);
}

#suggestedAddonsModal .modal-header {
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

#suggestedAddonsModal .modal-footer {
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

/* ---- Utility ---- */

.thidden { display: none; }

.confirm-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--accent-green, #22c55e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}

.cal-add-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.cal-add-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--cart-grey, rgba(108, 117, 125, 0.3));
    border-radius: 8px;
    text-decoration: none;
    color: var(--font-color);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.cal-add-links a:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .slot-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .price-summary {
        padding: 10px 14px;
    }

    .price-summary .total-amount {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .booking-steps {
        font-size: 12px;
        gap: 4px;
    }

    .booking-steps .step-divider {
        width: 12px;
    }

    .cal-day {
        min-height: 56px;
        padding: 6px;
        font-size: 13px;
    }
}


/* ==========================================================================
   Checkout — shared styles for checkout_view.php and demo/checkout_view.php
   All colors use CSS custom properties so light/dark themes apply correctly.
   ========================================================================== */

/* Root additions — not in theme files */
:root {
    --border-muted:  rgba(128, 128, 128, 0.12);  /* neutral divider/border */
    --stripe-purple: #635bff;                     /* Stripe brand — never changes */
}

/* ---- Demo / notification banner bar ---- */
.banner {
    background: rgba(238,81,58,0.92);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 16px;
}

/* ---- Hold bar ---- */
.hold-bar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--heading-color);
    color: #fff;
    padding: 10px 20px;
    font-size: 0.88rem;
    transition: background 0.4s ease;
}
.hold-bar.expiring                    { background: var(--accent-orange) !important; }
.hold-bar.expiring #demoHoldStatus   { display: none !important; }
.hold-bar.expiring #demoHoldUrgent   { display: flex !important; }

.hold-bar__status-text  { font-size: 0.82rem; opacity: 0.75; }
.hold-bar__link         { color: var(--accent-orange); font-size: 0.82rem; text-decoration: none; }
.hold-bar__urgent-text  { font-size: 0.85rem; font-weight: 700; }
.hold-bar__urgent-link  { color: rgba(255,255,255,0.75); font-size: 0.78rem; text-decoration: none; }

/* ---- Checkout labels — Poppins light ---- */
.checkout-label {
    font-size: 13px;
    font-weight: 300;
    color: var(--heading-color);
    font-family: 'Poppins', sans-serif;
    margin-bottom: 4px;
}

/* ---- Step card headings ---- */
.checkout-step-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 4px;
}
.checkout-step-subtext {
    font-size: 0.78rem;
    color: var(--font-color);
    opacity: 0.45;
    margin-bottom: 20px;
}
.checkout-step-subtext--donation {
    font-size: 0.82rem;
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ---- Back / edit button ---- */
.checkout-back-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--font-color);
    opacity: 0.45;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.checkout-back-btn:hover { opacity: 0.75; }

/* ---- Input group icons ---- */
.input-icon-left {
    background: transparent;
    border-right: 0;
    color: var(--heading-color);
    opacity: 0.5;
}
.input-icon-right {
    background: transparent;
    border-left: 0;
    padding-right: 12px;
}
.input-no-left-border  { border-left: 0; }
.input-mono            { font-family: monospace; font-size: 0.9rem; }
.stripe-icon           { font-size: 1.2rem; color: var(--stripe-purple); }

/* ---- Light mode form overrides ---- */
.form-control {
    color: #212529;
    background-color: #fff;
}
.form-control::placeholder { color: #6c757d; }
.form-control:focus {
    color: #212529;
    background-color: #fff;
}

/* ---- Dark mode form overrides ---- */
.mode-dark .form-control {
    background-color: var(--bg-dark-secondary);
    border-color: rgba(255,255,255,0.15);
    color: var(--font-dark-color);
}
.mode-dark .form-control::placeholder { color: rgba(255,255,255,0.3); }
.mode-dark .form-control:focus {
    background-color: var(--bg-dark-secondary);
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 0.2rem rgba(238,81,58,0.2);
    color: var(--font-dark-color);
}
.mode-dark .input-group-text {
    background-color: var(--bg-dark-secondary);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.45);
}
.mode-dark .form-check-input {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.mode-dark .form-check-input:checked {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
}
.mode-dark .modal-content {
    background-color: var(--bg-dark-secondary);
    border-color: rgba(255,255,255,0.1);
}

/* ---- Error messages ---- */
.checkout-error { font-size: 0.78rem; color: #dc3545; }

/* ---- Terms ---- */
.checkout-terms-label { font-size: 0.78rem; color: var(--font-color); opacity: 0.6; }
.checkout-terms-link  { color: var(--accent-orange); }

/* ---- Callout card — teal left border ---- */
.callout-teal {
    border-left: 4px solid var(--prepaid-border-color);
    background-color: var(--prepaid-background-color);
    color: var(--prepaid-font-color);
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    padding: 12px 14px;
    font-size: 0.8rem;
}
.callout-teal i { color: var(--prepaid-border-color); }

/* ---- Reassurance line below submit ---- */
.checkout-reassurance {
    font-size: 0.75rem;
    color: var(--font-color);
    opacity: 0.45;
    text-align: center;
}

/* ---- Order summary card ---- */
.summary-card {
    position: sticky;
    top: 80px;
    height: auto !important;
}
.summary-location-block { border-bottom: 1px solid var(--border-muted); }
.summary-icon-accent    { color: var(--accent-orange); flex-shrink: 0; font-size: 0.78rem; }
.summary-location-name  { font-size: 0.85rem; font-weight: 700; color: var(--heading-color); line-height: 1.2; }
.summary-location-city  { font-size: 0.74rem; color: var(--font-color); opacity: 0.5; }
.summary-slot-date      { font-size: 0.83rem; font-weight: 600; color: var(--font-color); line-height: 1.3; }
.summary-slot-time      { font-size: 0.83rem; color: var(--font-color); opacity: 0.75; }
.summary-arrive-early   { font-size: 0.7rem; color: var(--accent-orange); font-weight: 600; margin-top: 3px; letter-spacing: 0.02em; }

/* ---- Summary section label (muted uppercase) ---- */
.summary-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--font-color);
    opacity: 0.38;
    margin-bottom: 8px;
}

/* ---- Summary line items ---- */
.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.summary-line .lbl            { font-size: 0.83rem; color: var(--font-color); flex: 1; }
.summary-line .lbl.muted      { opacity: 0.55; }
.summary-line .amt            { font-size: 0.83rem; font-weight: 600; color: var(--font-color); white-space: nowrap; padding-left: 10px; }
.summary-line.total .lbl      { font-size: 0.95rem; font-weight: 700; color: var(--heading-color); }
.summary-line.total .amt      { font-size: 1.25rem; font-weight: 800; color: var(--accent-orange); font-family: 'Poppins', sans-serif; }
.summary-line.donation .lbl,
.summary-line.donation .amt   { color: var(--prepaid-font-color); }

.summary-package-name     { font-weight: 600; }
.summary-package-service  { font-size: 0.74rem; opacity: 0.5; }
.summary-addon-icon       { font-size: 0.6rem; color: var(--accent-orange); }
.summary-addon-amt        { opacity: 0.75; }
.summary-line-subtotal    { opacity: 0.55; font-size: 0.8rem; }
.summary-line-fee-amt     { opacity: 0.75; font-weight: 400; }
.summary-donation-gst-free { font-size: 0.7rem; opacity: 0.6; }
.summary-gst-note         { text-align: right; font-size: 0.72rem; opacity: 0.4; margin-top: 4px; }
.summary-security         { border-top: 1px solid var(--border-muted); }
.summary-security-badges  { font-size: 0.7rem; color: var(--font-color); opacity: 0.35; }

/* ---- Centered narrow divider ---- */
.summary-divider {
    border: none;
    border-top: 1.5px solid var(--border-muted);
    margin: 12px auto;
    width: 50%;
}

/* ---- Donation step ---- */
.donation-amounts-wrapper  { flex: 1; }
.donation-roundup-subtext  { font-size: 0.7rem; font-weight: 400; opacity: 0.75; }

.donation-different-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.72rem;
    color: var(--prepaid-font-color);
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.7;
}
.donation-loading-text {
    font-size: 0.78rem;
    margin: 0;
    color: var(--font-color);
    opacity: 0.5;
}
.donation-change-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--font-color);
    opacity: 0.45;
    cursor: pointer;
    text-decoration: underline;
}
.donation-charity-link          { font-size: 0.7rem; opacity: 0.35; }
.donation-charity-link a        { color: var(--font-color); text-decoration: none; }
.donation-charity-link a:hover  { text-decoration: underline; }

/* ---- Donation amount buttons ---- */
.donate-btn {
    width: 100%;
    height: 52px;
    border-radius: 10px;
    border: 2px solid var(--prepaid-border-color);
    background: transparent;
    color: var(--prepaid-font-color);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Poppins', sans-serif;
}
.donate-btn:hover,
.donate-btn.selected {
    background: var(--prepaid-font-color);
    color: #fff;
}

.roundup-btn {
    width: 100%;
    padding: 13px 12px;
    border-radius: 10px;
    border: 2px solid var(--prepaid-border-color);
    background: transparent;
    color: var(--prepaid-font-color);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1.2;
}
.roundup-btn:hover,
.roundup-btn.selected {
    background: var(--prepaid-font-color);
    color: #fff;
}

.nothanks-btn {
    width: 100%;
    padding: 13px 12px;
    border-radius: 10px;
    border: 2px solid var(--border-muted);
    background: transparent;
    color: var(--font-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.6;
    text-align: center;
}
.nothanks-btn:hover { opacity: 1; border-color: rgba(128,128,128,0.4); }

/* ---- Butterfly logo badge ---- */
.butterfly-badge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #773DBD 0%, #2CB6A7 100%); /* Butterfly Foundation brand */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    gap: 4px;
    flex-shrink: 0;
}

/* ---- Donation thank-you flash ---- */
.donation-thankyou {
    background: var(--accent-orange);
    color: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
}

/* ---- Donation modal ---- */
.donation-modal-content  { border-radius: 18px; border: none; }
.donation-modal-heading  { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: var(--heading-color); }
.donation-modal-icon     { color: var(--prepaid-font-color); }
.donation-modal-text     { font-size: 0.8rem; color: var(--font-color); opacity: 0.55; margin-bottom: 18px; }
.donation-modal-currency {
    background: var(--prepaid-background-color);
    border-color: var(--prepaid-border-color);
    color: var(--prepaid-font-color);
    font-weight: 700;
}
.donation-modal-input {
    border-color: var(--prepaid-border-color);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}
.donation-confirm-btn {
    background: var(--prepaid-font-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ---- Floating checkout progress bar ---- */
.checkout-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--prepaid-background-color);
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -6px 32px rgba(44,182,167,0.35), 0 -2px 8px rgba(44,182,167,0.2);
    padding: 12px 16px;
}
.checkout-progress-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
}
.checkout-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0.6;
}
.checkout-progress-step--active { opacity: 1; }

.checkout-progress-step__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--prepaid-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--prepaid-background-color);
    font-weight: 700;
}
.checkout-progress-step__dot--active {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(44,182,167,0.3);
    animation: pulseGreen 1.9s infinite;
}
.checkout-progress-step__label {
    font-size: 0.64rem;
    color: var(--prepaid-font-color);
    white-space: nowrap;
}
.checkout-progress-step__label--active {
    font-size: 0.68rem;
    font-weight: 700;
}
.checkout-progress-connector {
    flex: 1;
    max-width: 60px;
    height: 1.5px;
    background: var(--prepaid-border-color);
    opacity: 0.4;
    margin: 0 8px;
    margin-bottom: 16px;
}
/* ===== Demo — Book, Home, Confirm views ===== */

/* Demo body + container */
.page { background-image: url('/assets/img/demo_bg.png'); background-size: cover; background-attachment: fixed; background-position: center top; }
.page .location-container { background: transparent !important; }

/* Back link on book page */
.back-link { font-size: 0.82rem; color: #fff; opacity: 0.7; text-decoration: none; }

/* Service header in booking card */
.svc-header    { border-bottom: 1px solid var(--border-muted); }
.svc-icon-wrap { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-icon      { color: #fff; font-size: 0.9rem; }
.svc-name      { font-size: 0.95rem; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--heading-color); }
.svc-meta      { font-size: 0.75rem; color: var(--font-color); opacity: 0.5; }
.svc-meta-icon { color: var(--accent-orange); }

/* Month navigation */
.month-nav { background: none; border: 1.5px solid var(--border-muted); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.82rem; color: var(--font-color); opacity: 0.5; }
.month-nav[disabled] { opacity: 0.25; cursor: not-allowed !important; }
.month-nav:hover:not([disabled]) { border-color: var(--accent-orange) !important; opacity: 1 !important; color: var(--accent-orange) !important; }
.month-heading  { font-size: 0.95rem; font-weight: 700; color: var(--heading-color); font-family: 'Poppins', sans-serif; }
.month-subtext  { font-size: 0.72rem; color: var(--font-color); opacity: 0.45; margin-top: 2px; }

/* Calendar picker (compact inline booking calendar) */
.cal-picker-wrap { max-width: 100%; }
.cal-dow-row  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-dow-row .cal-dow { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--font-color); opacity: 0.35; padding: 2px 0; }
.cal-picker-wrap .cal-grid { gap: 4px; }
.cal-legend { font-size: 0.72rem; color: var(--font-color); opacity: 0.5; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Calendar picker cells (compact inline booking calendar) */
.cal-pick-day { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border-radius: 8px; color: var(--font-color); opacity: 0.28; }
.cal-pick-day.available { opacity: 1; cursor: pointer; font-weight: 600; color: var(--heading-color); background: rgba(238,81,58,0.04); border: 1px solid rgba(238,81,58,0.12); transition: background 0.15s, border-color 0.15s; }
.cal-pick-day.available:hover { background: rgba(238,81,58,0.1); border-color: rgba(238,81,58,0.4); }
.cal-pick-day.available.selected { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; }
.cal-pick-day.available[data-level="medium"] { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
.cal-pick-day.available[data-level="low"]    { border-color: rgba(220,38,38,0.3);  background: rgba(220,38,38,0.05); }
.cal-pick-day.past { opacity: 0.18; cursor: not-allowed; }
.avail-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal-pick-day.available.selected .avail-dot { display: none; }

/* Hour picker — block containers */
.hour-block { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border-muted); margin-bottom: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--bg-color); }
.hour-block:hover:not(.full) { border-color: var(--accent-orange); background: rgba(238,81,58,0.04); }
.hour-block.expanded { border-color: var(--accent-orange); background: rgba(238,81,58,0.04); border-radius: 10px 10px 0 0; margin-bottom: 0; }
.hour-block.full { cursor: not-allowed; opacity: 0.45; }

/* Slot time chips */
.slot-chip { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border-muted); background: var(--bg-color); font-size: 0.82rem; font-weight: 600; color: var(--heading-color); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.slot-chip:hover  { border-color: var(--accent-orange); background: rgba(238,81,58,0.06); }
.slot-chip.selected { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; }

/* Hour picker */
.hour-dot        { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.hour-label      { font-size: 0.9rem; font-weight: 700; color: var(--heading-color); min-width: 76px; }
.hour-bar-bg     { flex: 1; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.1); }
.hour-bar-fill   { height: 100%; border-radius: 3px; }
.hour-chevron    { font-size: 0.68rem; color: var(--font-color); opacity: 0.28; transition: transform 0.2s; }
.hour-avail-full { font-size: 0.73rem; color: rgba(128,128,128,0.5); }
.hour-avail-low  { font-size: 0.73rem; font-weight: 700; color: #dc2626; }
.hour-avail-norm { font-size: 0.73rem; color: var(--font-color); opacity: 0.45; }
.hour-slots      { padding: 8px 14px 14px; margin-top: -6px; margin-bottom: 6px; border: 1.5px solid var(--accent-orange); border-top: none; border-radius: 0 0 10px 10px; background: rgba(238,81,58,0.03); }
.hour-slots-label { font-size: 0.68rem; color: var(--font-color); opacity: 0.4; margin-bottom: 8px; }
.hour-slots-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lunch-break     { text-align: center; font-size: 0.7rem; color: var(--font-color); opacity: 0.3; padding: 8px 0 10px; letter-spacing: 0.05em; }
.hour-legend     { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-muted); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.7rem; color: var(--font-color); opacity: 0.45; }

/* Hour picker — step B header */
.back-btn     { background: none; border: none; padding: 0; font-size: 0.82rem; color: var(--font-color); opacity: 0.55; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.back-btn i   { font-size: 0.75rem; }
.date-heading { font-size: 0.88rem; font-weight: 700; color: var(--heading-color); }
.time-heading { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--heading-color); margin-bottom: 16px; }

/* Secondary menu */
#selectedSlotBarPackages { display: none; background: var(--bg-color); border-bottom: 1px solid var(--border-muted); padding: 12px 0; transition: box-shadow 0.2s ease; position: sticky; top: 0; z-index: 400; }
#selectedSlotBarPackages .px-4 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#selectedSlotBarPackages.is-stuck-shadow { box-shadow: 0 8px 26px rgba(0,0,0,0.18); }
.secondary-svc-pill  { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; background: rgba(238,81,58,0.1); color: var(--accent-orange); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 20px; }
.secondary-svc-icon  { font-size: 0.6rem; }
.secondary-date      { font-size: 0.88rem; font-weight: 600; color: var(--heading-color); white-space: nowrap; }
.secondary-date-icon { color: var(--accent-orange); font-size: 0.78rem; }
.countdown-wrap      { font-size: 0.78rem; color: var(--font-color); opacity: 0.55; display: flex; align-items: center; gap: 5px; }
.countdown-dot       { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-orange); display: inline-block; animation: pulseGreen 1.9s infinite; }
.countdown-val       { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading-color); }
.change-time-link    { font-size: 0.78rem; color: var(--accent-orange); text-decoration: none; font-weight: 600; white-space: nowrap; background: none; border: none; padding: 0; cursor: pointer; }
.change-time-link:hover { color: var(--heading-color); }
.change-time-icon    { font-size: 0.68rem; }

/* Main content area */
.main-area  { background: var(--bg-color); flex: 1; padding-bottom: 120px; }
.page-wrap  { display: flex; flex-direction: column; min-height: 80vh; }

/* Package panel headings */
.active-product-heading { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--heading-color); font-size: 1.25rem; margin-bottom: 6px; }
.active-product-subtext { font-size: 0.83rem; color: var(--font-color); opacity: 0.55; margin: 0; }

/* Addons panel heading */
.panel-eyebrow  { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 8px; }
.panel-heading  { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--heading-color); margin-bottom: 6px; }
.panel-subtext  { font-size: 0.83rem; color: var(--font-color); opacity: 0.55; margin: 0; }
.addons-bar       { background: rgba(128,128,128,0.06); border: 1px solid var(--border-muted); }
.addons-bar-total { font-size: 1.1rem; font-weight: 700; color: var(--heading-color); font-family: 'Poppins', sans-serif; }
.addons-bar-label { font-size: 0.82rem; color: var(--font-color); opacity: 0.6; }

/* Package cards (JS-generated) */
.pkg-selected-badge { background: var(--accent-orange); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; z-index: 1; }
.pkg-radio-ring     { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--accent-orange); display: flex; align-items: center; justify-content: center; }
.pkg-radio-dot      { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-orange); }
.pkg-radio-ring-sm  { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--accent-orange); display: flex; align-items: center; justify-content: center; }
.pkg-radio-dot-sm   { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-orange); }
.pkg-name           { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--heading-color); margin: 0 0 4px; }
.pkg-name-sm        { font-family: 'Poppins', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--heading-color); }
.pkg-compare        { font-size: 0.78rem; color: var(--font-color); opacity: 0.35; text-decoration: line-through; margin-right: 6px; }
.pkg-compare-note   { font-size: 0.72rem; color: var(--font-color); opacity: 0.4; }
.pkg-price          { font-size: 1.25rem; font-weight: 700; color: var(--heading-color); font-family: 'Poppins', sans-serif; }
.pkg-price-sm       { font-size: 1.1rem; font-weight: 700; color: var(--heading-color); }
.pkg-desc           { font-size: 0.82rem; color: var(--font-color); opacity: 0.65; line-height: 1.6; margin-bottom: 8px; }
.pkg-desc-sm        { font-size: 0.78rem; color: var(--font-color); opacity: 0.6; margin-top: 3px; }
.pkg-inclusions     { padding: 0; margin: 0 0 10px; }
.pkg-inclusion-item { font-size: 0.8rem; color: var(--font-color); opacity: 0.7; line-height: 1.7; padding-left: 2px; }
.pkg-includes       { list-style: none; padding: 0; margin: 0 0 12px; }
.pkg-includes li    { font-size: 0.76rem; color: var(--font-color); opacity: 0.65; margin-bottom: 3px; }
.pkg-includes-sm    { list-style: none; padding: 0; margin: 6px 0 0; }
.pkg-includes-sm li { font-size: 0.73rem; color: var(--font-color); opacity: 0.6; margin-bottom: 2px; }
.pkg-includes-icon     { color: var(--accent-orange); font-size: 0.6rem; }
.pkg-includes-icon-sm  { color: var(--accent-orange); font-size: 0.58rem; }

/* Package cards (JS-rendered) */
.pkg-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.pkg-card:hover  { border-color: rgba(238,81,58,0.4) !important; box-shadow: 0 4px 20px rgba(238,81,58,0.12) !important; }
.pkg-card.selected { border-color: var(--accent-orange) !important; box-shadow: 0 4px 24px rgba(238,81,58,0.2) !important; }

/* Addon sheet (suggested) */
.sheet-backdrop     { position: fixed; inset: 0; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px); z-index: 3999; }
.sheet-handle       { padding: 12px 0 4px; text-align: center; flex-shrink: 0; }
.sheet-handle-bar   { width: 36px; height: 4px; border-radius: 2px; background: rgba(128,128,128,0.2); margin: 0 auto; }
.sheet-header       { padding: 12px 24px 16px; flex-shrink: 0; border-bottom: 1px solid var(--border-muted); }
.sheet-eyebrow      { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 6px; }
.sheet-title        { font-size: 1rem; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--heading-color); margin-bottom: 4px; }
.sheet-subtext      { font-size: 0.78rem; color: var(--font-color); opacity: 0.5; }
.sheet-body         { flex: 1; overflow-y: auto; padding: 16px 24px; }
.sheet-footer       { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--border-muted); background: var(--bg-color, #faf9f6); }
.sheet-so-far       { font-size: 0.75rem; color: var(--font-color); opacity: 0.5; }
.sheet-total        { font-size: 1rem; font-weight: 700; color: var(--heading-color); font-family: 'Poppins', sans-serif; }
.sheet-footer-note  { text-align: center; margin-top: 8px; font-size: 0.7rem; color: var(--font-color); opacity: 0.35; }
.addons-sheet       { position: fixed; bottom: 0; left: 0; right: 0; height: 72vh; max-height: 560px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); z-index: 4000; background: var(--bg-color, #faf9f6); border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; }
.sheet-addon-check       { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--accent-orange); display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.sheet-addon-check-icon  { font-size: 0.65rem; color: var(--accent-orange); }

/* Addon sheet item cards */
.addon-sheet-card { padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border-muted); margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--bg-color); }
.addon-sheet-card.selected { border-color: var(--accent-orange); background: rgba(238,81,58,0.04); }
.addon-sheet-card.selected .sheet-addon-check { background: var(--accent-orange); border-color: var(--accent-orange); }
.addon-sheet-card.selected .sheet-addon-check-icon { color: #fff; }

/* Generic addon cards */
.generic-card { padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--border-muted); margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--bg-color); }
.generic-card.selected { border-color: var(--accent-orange); background: rgba(238,81,58,0.04); }
.generic-addon-check      { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(128,128,128,0.25); display: flex; align-items: center; justify-content: center; transition: border-color 0.1s; }
.generic-addon-check-icon { font-size: 0.65rem; color: var(--accent-orange); }

/* Addon thumb image */
.addon-thumb { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: rgba(128,128,128,0.06); flex-shrink: 0; cursor: zoom-in; }

/* Addon text (used in JS-generated HTML) */
.addon-name      { font-size: 0.88rem; font-weight: 700; color: var(--heading-color); }
.addon-desc      { font-size: 0.75rem; color: var(--font-color); opacity: 0.58; }
.addon-desc-clamp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addon-price     { font-size: 0.95rem; font-weight: 700; color: var(--heading-color); white-space: nowrap; flex-shrink: 0; }

/* Mini cart panel */
.cart-backdrop   { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); z-index: 4998; }
.cart-panel      { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw; background: var(--bg-color, #faf9f6); border-radius: 20px 0 0 20px; z-index: 4999; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,0.18); }
.cart-header     { padding: 20px 24px 16px; border-bottom: 1px solid var(--border-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.cart-title      { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--heading-color); }
.cart-title-icon { color: var(--accent-orange); }
.cart-close-btn  { background: none; border: none; padding: 4px 8px; cursor: pointer; font-size: 1rem; color: var(--font-color); opacity: 0.4; line-height: 1; }
.cart-body       { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cart-section-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--font-color); opacity: 0.4; margin-bottom: 12px; }
.cart-slot-line  { font-size: 0.78rem; color: var(--font-color); opacity: 0.5; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-muted); }
.cart-pkg-name   { font-size: 0.85rem; font-weight: 600; color: var(--heading-color); }
.cart-pkg-price  { font-size: 0.85rem; font-weight: 700; color: var(--heading-color); white-space: nowrap; padding-left: 16px; }
.cart-total-row  { border-top: 1.5px solid var(--border-muted); }
.cart-total-lbl  { font-size: 0.9rem; font-weight: 700; color: var(--heading-color); }
.cart-total-amt  { font-size: 1.4rem; font-weight: 700; color: var(--accent-orange); font-family: 'Poppins', sans-serif; }
.cart-footer     { flex-shrink: 0; padding: 16px 24px 24px; border-top: 1px solid var(--border-muted); }
.cart-trust      { font-size: 0.68rem; color: var(--font-color); opacity: 0.35; }
.sidebar-addon-name  { font-size: 0.76rem; color: var(--font-color); opacity: 0.65; }
.sidebar-addon-price { font-size: 0.76rem; font-weight: 700; color: var(--font-color); white-space: nowrap; padding-left: 8px; }
.sidebar-addon-icon  { font-size: 0.55rem; color: var(--accent-orange); }

/* Nudge modal */
.nudge-modal    { position: fixed; inset: 0; z-index: 5100; align-items: center; justify-content: center; padding: 20px; }
.nudge-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
.nudge-card     { position: relative; width: 100%; max-width: 400px; background: var(--bg-color, #faf9f6); border-radius: 20px; padding: 28px 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); text-align: center; }
.nudge-img      { width: 120px; height: 120px; object-fit: contain; border-radius: 14px; background: rgba(128,128,128,0.06); }
.nudge-badge    { display: inline-block; background: var(--accent-orange); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 50px; padding: 4px 14px; }
.nudge-headline { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 8px; line-height: 1.4; }
.nudge-body     { font-size: 0.82rem; color: var(--font-color); opacity: 0.65; margin-bottom: 24px; line-height: 1.6; }
.nudge-skip-btn { background: none; border: none; font-size: 0.78rem; color: var(--font-color); opacity: 0.4; cursor: pointer; padding: 6px; width: 100%; }

/* Addon image zoom tooltip */
#addonImgZoom { background: var(--bg-color, #fff); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); padding: 10px; }

/* Home view — config sidebar */
.cfg-sidebar    { flex-shrink: 0; border-right: 1px solid rgba(128,128,128,0.1); background: rgba(128,128,128,0.03); transition: width 0.25s ease; overflow: hidden; }
.cfg-toggle-btn { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--font-color); opacity: 0.3; font-size: 0.75rem; flex-shrink: 0; line-height: 1; }
.cfg-dev-label  { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-color); opacity: 0.35; white-space: nowrap; overflow: hidden; }
.cfg-section-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--font-color); opacity: 0.35; margin-bottom: 16px; }

/* Home view — service badges */
.svc-badge        { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.svc-badge-green  { background: var(--prepaid-background-color); color: var(--prepaid-font-color); border: 1px solid var(--prepaid-border-color); }
.svc-badge-orange { background: rgba(238,81,58,0.1); color: var(--accent-orange); border: 1px solid rgba(238,81,58,0.25); }

/* Home view — banner / grid / list card containers */
.banner-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg-color); box-shadow: 0 2px 14px rgba(0,0,0,0.08); text-decoration: none !important; color: var(--font-color) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.banner-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.13); }
.banner-card img { width: 100%; height: 180px; object-fit: cover; flex-shrink: 0; }
.banner-card-body { padding: 16px 18px; }
.grid-card  { transition: transform 0.2s ease; border: 1px solid var(--border-muted) !important; height: auto !important; max-width: none !important; }
.grid-card:hover { transform: translateY(-3px); }
.list-card  { background: var(--bg-color); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.list-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

/* Home view — sidebar config sections */
.cfg-section    { margin-bottom: 16px; }
.cfg-label      { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--font-color); opacity: 0.35; margin-bottom: 8px; }
.cfg-divider    { height: 1px; background: var(--border-muted); margin: 12px 0; }
.radio-group    { display: flex; flex-direction: column; gap: 6px; }
.radio-opt      { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--font-color); cursor: pointer; }
.toggle-row     { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--font-color); margin-bottom: 8px; cursor: pointer; gap: 8px; }
.toggle-row input[type="checkbox"] { display: none; }
.toggle-track   { width: 32px; height: 18px; border-radius: 9px; background: rgba(128,128,128,0.2); position: relative; flex-shrink: 0; transition: background 0.2s; }
.toggle-row input[type="checkbox"]:checked + .toggle-track { background: var(--accent-orange); }
.toggle-thumb   { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.toggle-row input[type="checkbox"]:checked + .toggle-track .toggle-thumb { left: 16px; }

/* Home view — card text (JS-generated) */
.card-title     { font-family: 'Poppins', sans-serif; font-size: 0.97rem; font-weight: 700; color: var(--heading-color); }
.card-title-sm  { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--heading-color); margin-bottom: 4px; }
.card-title-xs  { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--heading-color); }
.card-tagline   { font-size: 0.79rem; font-weight: 600; color: var(--accent-orange); margin-bottom: 6px; }
.card-tagline-sm { font-size: 0.78rem; font-weight: 600; color: var(--accent-orange); margin-bottom: 10px; }
.card-desc      { font-size: 0.83rem; color: var(--font-color); opacity: 0.7; line-height: 1.6; margin-bottom: 10px; }
.card-desc-sm   { font-size: 0.82rem; color: var(--font-color); opacity: 0.7; line-height: 1.6; flex-grow: 1; margin-bottom: 14px; }
.card-desc-list { font-size: 0.82rem; color: var(--font-color); opacity: 0.7; line-height: 1.55; margin: 0; }
.card-duration  { font-size: 0.75rem; color: var(--font-color); opacity: 0.45; }
.svc-icon-block  { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.svc-icon-inner  { color: #fff; }
.list-icon-block { flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.list-text-col   { flex: 1; min-width: 0; }
.list-right-col  { flex-shrink: 0; text-align: center; padding-top: 2px; }

/* Home view — page header */
.home-eyebrow  { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); }
.home-title    { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--heading-color); margin-bottom: 8px; }
.home-location { color: var(--font-color); opacity: 0.65; font-size: 0.92rem; margin-bottom: 8px; }
.home-avail    { font-size: 0.83rem; color: var(--font-color); opacity: 0.75; }
.home-avail-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: rgba(44,182,167,1); animation: pulseGreen 1.9s infinite; }

/* Home view — feature icons */
.feature-icon  { font-size: 1.2rem; color: var(--accent-orange); margin-bottom: 4px; }
.feature-text  { font-size: 0.75rem; color: var(--font-color); opacity: 0.6; line-height: 1.3; }
.home-main-col { flex: 1; min-width: 0; padding: 32px 24px; }

/* Confirm view */
.confirm-card-override    { height: auto !important; max-width: 700px; }
.confirm-success-icon     { font-size: 3.5rem; color: var(--accent-orange); }
.confirm-easter-egg-icon  { font-size: 3.5rem; }
.confirm-heading          { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--heading-color); margin-bottom: 6px; }
.confirm-subtext          { color: var(--font-color); opacity: 0.65; font-size: 0.9rem; }
.confirm-subtext-italic   { color: var(--font-color); opacity: 0.45; font-size: 0.78rem; font-style: italic; margin-bottom: 24px; }
.confirm-code-label       { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-color); opacity: 0.45; margin-bottom: 8px; }
.confirm-code-pill        { display: inline-block; background: var(--accent-orange); color: #fff; font-size: 1.15rem; letter-spacing: 3px; font-family: 'Courier New', monospace; border-radius: 50px; padding: 8px 24px; white-space: nowrap; }
.confirm-code-note        { font-size: 0.75rem; color: var(--font-color); opacity: 0.45; margin-top: 8px; max-width: 320px; }
.confirm-detail-wrap      { max-width: 460px; text-align: left; }
.confirm-table            { color: var(--font-color); font-size: 0.88rem; }
.confirm-table-label      { width: 38%; opacity: 0.6; text-align: right; padding-right: 16px; }
.confirm-table-label-no-width { opacity: 0.6; text-align: right; padding-right: 16px; }
.confirm-total-amt        { color: var(--accent-orange); font-size: 1.05rem; }
.confirm-btn-sm           { font-size: 0.85rem; }
.confirm-location-sub     { opacity: 0.65; font-size: 0.8rem; }
.confirm-whats-next       { background: rgba(238,81,58,0.06); border: 1px solid rgba(238,81,58,0.18); max-width: 460px; text-align: left; }
.confirm-whats-next-heading { font-size: 0.8rem; font-weight: 700; color: var(--heading-color); margin-bottom: 10px; }
.confirm-whats-next-icon  { color: var(--accent-orange); }
.confirm-whats-next-list  { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; color: var(--font-color); opacity: 0.75; }
.confirm-create-acct      { background: rgba(6,5,80,0.04); border: 1px solid rgba(6,5,80,0.1); max-width: 460px; }
.confirm-acct-eyebrow     { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-color); opacity: 0.4; margin-bottom: 6px; }
.confirm-acct-heading     { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 6px; }
.confirm-acct-subtext     { font-size: 0.8rem; color: var(--font-color); opacity: 0.6; margin-bottom: 16px; line-height: 1.5; }
.confirm-acct-note        { font-size: 0.72rem; color: var(--font-color); opacity: 0.35; margin-top: 10px; }
.confirm-acct-sign-in     { color: var(--accent-orange); text-decoration: none; }

@media (max-width: 767px) {
    .cfg-sidebar { display: none; }
}

/* ==========================================================================
   Dark Mode — Booking-specific component overrides
   Mirrors the .mode-dark pattern from version3.findyourpictures.com.
   All new components added since the core booking.css was branched from
   version3 need explicit overrides here — var(--bg-color) and
   var(--heading-color) do not switch automatically in dark mode.
   ========================================================================== */

/* ---- Home page card backgrounds ---- */
.mode-dark .banner-card { background: var(--bg-dark-secondary); }
.mode-dark .grid-card   { background-color: var(--bg-dark-secondary) !important; }
.mode-dark .list-card   { background: var(--bg-dark-secondary) !important; }

/* ---- Home page card text ---- */
.mode-dark .card-title,
.mode-dark .card-title-sm,
.mode-dark .card-title-xs  { color: var(--heading-dark-color); }
.mode-dark .card-desc,
.mode-dark .card-desc-sm,
.mode-dark .card-desc-list { color: var(--font-dark-color); }
.mode-dark .card-duration  { color: var(--font-dark-color); opacity: 0.45; }

/* ---- Config sidebar ---- */
.mode-dark .cfg-sidebar       { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.08); }
.mode-dark .cfg-section-label,
.mode-dark .cfg-label         { color: var(--font-dark-color); opacity: 0.5; }
.mode-dark .radio-opt         { color: var(--font-dark-color); }

/* ---- Booking card service header ---- */
.mode-dark .svc-name { color: var(--heading-dark-color); }
.mode-dark .svc-meta { color: var(--font-dark-color); }

/* ---- Month navigation ---- */
.mode-dark .month-heading { color: var(--heading-dark-color); }
.mode-dark .month-subtext { color: var(--font-dark-color); }
.mode-dark .month-nav     { border-color: rgba(255,255,255,0.15); color: var(--font-dark-color); }

/* ---- Time/date headings & navigation ---- */
.mode-dark .date-heading { color: var(--heading-dark-color); }
.mode-dark .time-heading { color: var(--heading-dark-color); }
.mode-dark .back-btn     { color: var(--font-dark-color); }

/* ---- Calendar picker cells ---- */
.mode-dark .cal-dow-row .cal-dow             { color: var(--font-dark-color); }
.mode-dark .cal-pick-day                     { color: var(--font-dark-color); }
.mode-dark .cal-pick-day.available           { color: var(--heading-dark-color); background: rgba(238,81,58,0.08); border-color: rgba(238,81,58,0.2); }
.mode-dark .cal-pick-day.available:hover     { background: rgba(238,81,58,0.15); }
.mode-dark .cal-pick-day.available.selected  { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; }
.mode-dark .cal-legend                       { color: var(--font-dark-color); }

/* ---- Time slot pickers ---- */
.mode-dark .hour-block            { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.1); }
.mode-dark .hour-block.expanded   { border-color: var(--accent-orange); background: rgba(238,81,58,0.08); }
.mode-dark .hour-label            { color: var(--heading-dark-color); }
.mode-dark .hour-avail-norm       { color: var(--font-dark-color); }
.mode-dark .hour-chevron          { color: var(--font-dark-color); }
.mode-dark .hour-legend           { color: var(--font-dark-color); border-color: rgba(255,255,255,0.1); }
.mode-dark .hour-slots            { background: rgba(238,81,58,0.06); }
.mode-dark .hour-slots-label      { color: var(--font-dark-color); }
.mode-dark .slot-chip             { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.1); color: var(--font-dark-color); }
.mode-dark .slot-chip.selected    { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; }

/* ---- Main area below secondary nav ---- */
.mode-dark .main-area             { background: var(--bg-dark-color); }
.mode-dark .active-product-heading { color: var(--heading-dark-color); }
.mode-dark .active-product-subtext { color: var(--font-dark-color); }
.mode-dark .panel-heading         { color: var(--heading-dark-color); }
.mode-dark .panel-subtext         { color: var(--font-dark-color); }

/* ---- Secondary sticky nav ---- */
.mode-dark #demoSecondaryMenu { background: var(--bg-dark-color); border-color: rgba(255,255,255,0.1); }

/* ---- Package cards + text ---- */
.mode-dark .pkg-card                  { background-color: var(--bg-dark-secondary) !important; border-color: rgba(255,255,255,0.1) !important; }
.mode-dark .pkg-name,
.mode-dark .pkg-name-sm               { color: var(--heading-dark-color); }
.mode-dark .pkg-price,
.mode-dark .pkg-price-sm              { color: var(--heading-dark-color); }
.mode-dark .pkg-desc,
.mode-dark .pkg-desc-sm               { color: var(--font-dark-color); }
.mode-dark .pkg-inclusion-item        { color: var(--font-dark-color); }
.mode-dark .pkg-includes li,
.mode-dark .pkg-includes-sm li        { color: var(--font-dark-color); }

/* ---- Addon cards + text ---- */
.mode-dark .addon-sheet-card          { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.1); }
.mode-dark .addon-sheet-card.selected { border-color: var(--accent-orange); }
.mode-dark .generic-card              { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.1); }
.mode-dark .generic-card.selected     { border-color: var(--accent-orange); }
.mode-dark .addon-name                { color: var(--heading-dark-color); }
.mode-dark .addon-price               { color: var(--heading-dark-color); }
.mode-dark .addon-desc                { color: var(--font-dark-color); }

/* ---- Addons bar + sheet chrome ---- */
.mode-dark .addons-bar                { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.mode-dark .addons-bar-total          { color: var(--heading-dark-color); }
.mode-dark .addons-bar-label          { color: var(--font-dark-color); }
.mode-dark .sheet-header              { border-color: rgba(255,255,255,0.1); }
.mode-dark .sheet-footer              { background: var(--bg-dark-secondary); border-color: rgba(255,255,255,0.1); }

/* ---- Cart panel text ---- */
.mode-dark .cart-pkg-name             { color: var(--heading-dark-color); }
.mode-dark .cart-pkg-price            { color: var(--heading-dark-color); }
.mode-dark .sidebar-addon-name        { color: var(--font-dark-color); }
.mode-dark .sidebar-addon-price       { color: var(--font-dark-color); }

/* ---- Checkout labels + form ---- */
.mode-dark .checkout-label                  { color: var(--font-dark-color); }
.mode-dark .checkout-step-subtext--donation { color: var(--font-dark-color); }
.mode-dark .checkout-reassurance            { color: var(--font-dark-color); }
.mode-dark .checkout-terms-label            { color: var(--font-dark-color); }

/* ---- Order summary card ---- */
.mode-dark .summary-section-label           { color: var(--font-dark-color); opacity: 0.45; }
.mode-dark .summary-location-name           { color: var(--heading-dark-color); }
.mode-dark .summary-location-city           { color: var(--font-dark-color); }
.mode-dark .summary-slot-date               { color: var(--font-dark-color); }
.mode-dark .summary-slot-time               { color: var(--font-dark-color); }
.mode-dark .summary-package-name            { color: var(--heading-dark-color); }
.mode-dark .summary-package-service         { color: var(--font-dark-color); }
.mode-dark .summary-gst-note                { color: var(--font-dark-color); }
.mode-dark .summary-line .lbl               { color: var(--font-dark-color); }
.mode-dark .summary-line .amt               { color: var(--font-dark-color); }
.mode-dark .summary-line.total .lbl         { color: var(--heading-dark-color); }
.mode-dark .summary-divider                 { border-color: rgba(255,255,255,0.1); }

/* ---- Secondary nav (on dark sticky bar) ---- */
.mode-dark #selectedSlotBarPackages { background: var(--bg-dark-color); border-color: rgba(255,255,255,0.08); }
.mode-dark .secondary-date  { color: var(--font-dark-color); }
.mode-dark .countdown-wrap  { color: var(--font-dark-color); }
.mode-dark .countdown-val   { color: var(--font-dark-color); }

/* ---- Cart panel ---- */
.mode-dark .cart-panel      { background: var(--bg-dark-secondary); }
.mode-dark .cart-title      { color: var(--heading-dark-color); }
.mode-dark .cart-total-lbl  { color: var(--heading-dark-color); }
.mode-dark .cart-slot-line  { color: var(--font-dark-color); border-color: rgba(255,255,255,0.1); }

/* ---- Addon sheet (slide-up) ---- */
.mode-dark .addons-sheet    { background: var(--bg-dark-secondary); }
.mode-dark .sheet-title     { color: var(--heading-dark-color); }
.mode-dark .sheet-subtext   { color: var(--font-dark-color); }
.mode-dark .sheet-total     { color: var(--heading-dark-color); }

/* ---- Nudge modal ---- */
.mode-dark .nudge-card      { background: var(--bg-dark-secondary); }
.mode-dark .nudge-headline  { color: var(--heading-dark-color); }
.mode-dark .nudge-body      { color: var(--font-dark-color); }
.mode-dark .nudge-skip-btn  { color: var(--font-dark-color); }


/* ============================================================
   LANDING PAGE  (home_view.php — bk_landing_config driven)
   ============================================================ */

/* ── 1. Hero ────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    min-height: 72vh;
    background-color: #0f2f6e;   /* fallback when no image */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.lp-hero--gradient {
    /* CSS-only hero when no image is configured — matches admin preview defaults */
    background: linear-gradient(140deg, #0f2f6e, #2563eb);
}

.lp-hero-overlay {
    position: absolute;
    inset: 0;
    /* Dark-to-transparent gradient so text is always readable */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.38) 50%,
        rgba(0,0,0,0.62) 100%
    );
    display: flex;
    align-items: center;
    width: 100%;
}

.lp-hero--gradient .lp-hero-overlay {
    background: rgba(0,0,0,0.12);  /* very light overlay on gradient — it's already dark */
}

.lp-hero-inner {
    position: relative;
    z-index: 1;
    padding-top: 6rem;  /* extra space for floating navbar */
    padding-bottom: 4rem;
    text-align: center;
}

.lp-hero-logo {
    max-height: 72px;
    max-width: 240px;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* white logo on any dark hero */
    opacity: 0.95;
}

/* Availability pulse badge */
.lp-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(44, 182, 167, 0.18);
    border: 1px solid rgba(44, 182, 167, 0.55);
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
}

.lp-avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: lpPulseGreen 1.9s ease-in-out infinite;
}

@keyframes lpPulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44,182,167,0.7); }
    50%       { box-shadow: 0 0 0 6px rgba(44,182,167,0); }
}

.lp-hero-headline {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0.5rem 0 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.lp-hero-subtext {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.88);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Hero search bar (matching admin preview) */
.lp-hero-search {
    position: relative;
    max-width: 520px;
    margin: 1.5rem auto 0;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.lp-hero-search-icon {
    position: absolute;
    left: 18px;
    color: #94a3b8;
    font-size: 0.95rem;
    z-index: 1;
    pointer-events: none;
}
.lp-hero-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.85rem 1rem 0.85rem 2.8rem;
    font-size: 0.95rem;
    color: #1e293b;
    background: transparent;
}
.lp-hero-search-input::placeholder { color: #94a3b8; }
.lp-hero-search-btn {
    border: none;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s;
}
.lp-hero-search-btn:hover { filter: brightness(1.1); }

/* Geo link in hero */
.lp-geo-link {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.lp-geo-link:hover { color: #fff; }

/* Hero buttons */
.lp-btn-primary {
    font-weight: 800;
    border-radius: 999px;
    padding: 0.7rem 2rem;
    font-size: 1.05rem;
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: var(--lp-btn-text);
    box-shadow: 0 4px 18px rgba(108,58,237,0.40);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(108,58,237,0.55);
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: var(--lp-btn-text);
}

.lp-btn-ghost {
    font-weight: 700;
    border-radius: 999px;
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    border: 1.5px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.13);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lp-btn-ghost:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.75);
    color: #fff;
}

@media (max-width: 480px) {
    .lp-hero-ctas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .lp-btn-ghost { margin-left: 0 !important; }
}

/* ── 2. Trust Bar ───────────────────────────────────────────── */
.lp-trust-bar {
    padding: 0.55rem 0;
}

.lp-trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 3rem;
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--lp-trust-font);
    white-space: nowrap;
}

.lp-trust-icon {
    color: var(--lp-accent);
    font-size: 1rem;
}

/* ── 2b. Content Block (image + text area) ─────────────────── */
.lp-content-block {
    padding: 3.5rem 0;
}
.lp-cb-image {
    max-height: 400px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.lp-cb-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #475569;
}

/* ── 3. Sections (shared) ───────────────────────────────────── */
.lp-section {
    padding: 4.5rem 0;
}

.lp-section--alt {
    background: #f1f5ff;
}

.lp-section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.lp-section-sub {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 0;
}

/* ── Service pills (no-location fallback) ───────────────────── */
.lp-service-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(0,0,0,0.04);
    min-width: 90px;
    text-align: center;
}

.lp-service-pill-img,
.lp-service-pill-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
}

.lp-service-pill-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

/* ── Service cards (single-location) ───────────────────────── */
.lp-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.06);
    min-width: 110px;
    max-width: 140px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.lp-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.14);
}

.lp-service-card-img,
.lp-service-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.lp-service-card-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
}

.lp-service-card-duration {
    font-size: 0.75rem;
    color: #64748b;
    opacity: 0.6;
    margin-top: 0.25rem;
}

/* ── Location cards (multi-location) ───────────────────────── */
.lp-loc-search {
    border-radius: 999px;
    padding-left: 1.25rem;
    border: 1.5px solid rgba(0,0,0,0.12);
    transition: border-color 0.2s;
}
.lp-loc-search:focus { border-color: var(--lp-accent); box-shadow: none; }

.lp-loc-card {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.07);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.lp-loc-card--open {
    color: inherit;
}
.lp-loc-card--open:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
    border-color: var(--lp-accent);
}

.lp-loc-card--closed {
    opacity: 0.55;
    cursor: default;
}

.lp-loc-card-body {
    padding: 1.25rem 1.35rem 1.35rem;
}

.lp-loc-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.lp-loc-addr,
.lp-loc-city {
    font-size: 0.85rem;
    color: #64748b;
    opacity: 0.7;
    margin-top: 0.2rem;
}

.lp-loc-dist {
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
    margin-top: 0.35rem;
}

.lp-loc-book-cta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-accent);
}

.lp-badge-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(16,185,129,0.12);
    color: #10b981;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.lp-badge-closed {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(120,120,120,0.1);
    color: #64748b;
    opacity: 0.7;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.lp-dot-green {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: lpPulseGreen 1.9s ease-in-out infinite;
}

/* ── 4. How It Works ────────────────────────────────────────── */
.lp-step-card {
    padding: 2rem 1.5rem;
    border-radius: 22px;
    background: #fff;
    border: none;
    box-shadow: 0 4px 28px rgba(99,102,241,0.09);
    height: 100%;
    min-width: 210px;
    max-width: 270px;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(99,102,241,0.14);
}

.lp-step-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lp-accent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lp-step-icon {
    font-size: 1.7rem;
    color: var(--lp-accent);
    margin-bottom: 0.75rem;
}

.lp-step-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-hiw-font);
    margin-bottom: 0.5rem;
}

.lp-step-text {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ── 5. Feature Callouts ────────────────────────────────────── */
.lp-feature-card {
    padding: 2rem 1.25rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    height: 100%;
    transition: transform 0.2s ease;
}
.lp-feature-card:hover { transform: translateY(-3px); }

.lp-feature-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: var(--lp-accent);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lp-feature-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-feat-font);
    margin-bottom: 0.4rem;
}

.lp-feature-text {
    font-size: 0.88rem;
    color: var(--lp-feat-font);
    opacity: 0.82;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ── 6. Gallery Strip ───────────────────────────────────────── */
.lp-gallery-section {
    overflow: hidden;
    padding: 2rem 0;
}

.lp-gallery-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.5rem 0.75rem;
    /* Hide scrollbar visually while keeping scroll */
    scrollbar-width: none;
}
.lp-gallery-strip::-webkit-scrollbar { display: none; }

.lp-gallery-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(180px, 26vw, 280px);
    aspect-ratio: 4/5;
    border-radius: 14px;
    overflow: hidden;
}

.lp-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.lp-gallery-item:hover .lp-gallery-img { transform: scale(1.04); }

/* ── 7. Manage Strip ────────────────────────────────────────── */
.lp-manage-strip {
    padding: 2rem 0;
}

.lp-manage-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.97rem;
    font-weight: 800;
    color: var(--lp-manage-font);
}

.lp-manage-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    margin-top: 0.25rem;
}

.lp-btn-manage {
    border-radius: 999px;
    font-weight: 700;
    padding: 0.65rem 1.75rem;
    color: #fff !important;
    border-color: rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}
.lp-btn-manage:hover {
    background: rgba(255,255,255,0.26);
    border-color: rgba(255,255,255,0.85) !important;
}

.lp-help-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.25rem;
    line-height: 1.6;
}

/* ── Theme customizer CSS variable support ──────────────────── */
/* Default values align with admin preview design system.         */
/* Overridden per-photographer via home_view.php <style> block.  */
:root {
    --lp-accent:      #6c3aed;
    --lp-btn-text:    #fff;
    --lp-hero-font:   #fff;
    --lp-trust-font:  rgba(255,255,255,0.9);
    --lp-hiw-font:    #1e293b;
    --lp-feat-font:   #fff;
    --lp-gallery-bg:  #e8edf8;
    --lp-manage-font: #fff;
}
/* Hero text */
.lp-hero-headline              { color: var(--lp-hero-font); }
.lp-hero-subtext               { color: var(--lp-hero-font); }
/* Trust bar */
.lp-trust-icon                 { color: var(--lp-accent); }
.lp-trust-item                 { color: var(--lp-trust-font); }
/* How It Works */
.lp-step-number                { background: var(--lp-accent); }
.lp-step-icon                  { color: var(--lp-accent); }
.lp-step-title                 { color: var(--lp-hiw-font); }
.lp-step-text                  { color: var(--lp-hiw-font); }
/* Feature callouts */
.lp-feature-icon               { color: var(--lp-accent); }
.lp-feature-title              { color: var(--lp-feat-font); }
.lp-feature-text               { color: var(--lp-feat-font); }
/* Gallery */
.lp-gallery-section            { background-color: var(--lp-gallery-bg); }
/* Manage strip */
.lp-manage-label               { color: var(--lp-manage-font); }
.lp-manage-sub                 { color: var(--lp-manage-font); }

/* ── Dark mode overrides ────────────────────────────────────── */
/* Trust bar + feature + manage sections use inline bg styles, so dark-mode
   overrides are only needed for Discovery/location components. */
.mode-dark .lp-section--alt     { background: #1e293b; }
.mode-dark .lp-section-heading  { color: #f1f5f9; }
.mode-dark .lp-section-sub      { color: #cbd5e1; }
.mode-dark .lp-loc-card         { background: #1e293b; border-color: rgba(255,255,255,0.07); }
.mode-dark .lp-loc-name         { color: #f1f5f9; }
.mode-dark .lp-loc-addr,
.mode-dark .lp-loc-city         { color: #cbd5e1; }
.mode-dark .lp-service-card     { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.mode-dark .lp-service-card-label { color: #f1f5f9; }
.mode-dark .lp-service-pill     { background: rgba(255,255,255,0.06); }
.mode-dark .lp-service-pill-label { color: #cbd5e1; }
.mode-dark .lp-loc-search       { background: #0f172a; color: #cbd5e1; border-color: rgba(255,255,255,0.12); }

/* ── Search-first mode ──────────────────────────────────────── */
.lp-search-wrap {
    position: relative;
}

.lp-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.lp-search-lg {
    border-radius: 999px;
    padding: 0.85rem 1.25rem 0.85rem 2.75rem;
    font-size: 1rem;
    border: 2px solid rgba(0,0,0,0.12);
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
}
.lp-search-lg:focus {
    border-color: var(--lp-accent);
    box-shadow: 0 4px 18px rgba(108,58,237,0.15);
    outline: none;
}

.lp-geo-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--lp-accent);
    cursor: pointer;
    transition: opacity 0.2s;
}
.lp-geo-link:hover   { opacity: 0.75; }
.lp-geo-link:disabled { opacity: 0.45; cursor: default; }

.lp-result-count-text {
    font-size: 0.82rem;
    color: #64748b;
    opacity: 0.55;
    font-weight: 600;
}

.mode-dark .lp-search-lg {
    background: #1e293b;
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.12);
}
.mode-dark .lp-search-lg:focus { border-color: var(--lp-accent); }

/* ── END LANDING PAGE ───────────────────────────────────────── */