/*

============================================================================
CONFIDENTIAL AND PROPRIETARY INFORMATION
============================================================================


Copyright (c) 2020-2026 Max Dragon Technologies and its affiliates, subsidiaries,
partners, associated companies, licensors, and authorized contributors.
All Rights Reserved.


This software, source code, documentation, algorithms, designs, data
structures, interfaces, and all related materials (collectively, the
"Software") constitute confidential and proprietary information owned by
Max Dragon Technologies and/or its affiliated, partner, and associated
entities.


The Software is protected by applicable copyright laws, international
copyright treaties, trade secret laws, intellectual property laws, and
other applicable laws and regulations worldwide.


No part of this Software may be copied, reproduced, modified, distributed,
transmitted, displayed, published, reverse engineered, decompiled,
disassembled, sublicensed, sold, leased, or otherwise used, in whole or
in part, in any form or by any means, without the express prior written
permission of Max Dragon Technologies.


Access to this Software is restricted to authorized personnel and licensed
users only. Unauthorized access, use, disclosure, duplication, or
distribution is strictly prohibited and may result in civil and criminal
penalties under applicable laws.


Any use of this Software constitutes acceptance of all applicable license
agreements, confidentiality obligations, and intellectual property
restrictions imposed by Max Dragon Technologies and its affiliated,
partner, and associated entities.


For licensing inquiries or authorization requests, contact:
info@maxdragontechnologies.com


Max Dragon Technologies reserves all rights not expressly granted herein.


============================================================================
*/
    /* ==========================================================================
    1. VARIABLES & TOKENS
    ========================================================================== */
    :root {
        --bg: #f2f5fa;
        --bg2: #e4e9f2;
        --ink: #141923;
        --ink2: #252e3d;
        --muted: #65718a;
        --dim: #98a5be;
        --mineral: #6A83B5;
        --mineral-hi: #879fcb;
        --mineral-lt: rgba(106, 131, 181, .1);
        --mineral-bd: rgba(106, 131, 181, .25);
        --border: rgba(20, 25, 35, .08);
        --border2: rgba(20, 25, 35, .13);
        --white: #ffffff; 
        --accent1: #EAA335;
        --accent1-hover: rgba(255, 243, 221, 1);
        --accent2: #CBEEF3;
        --accent3: #F1EFF7;

        --plans-pricing-bg: #f4f7fc;
        --plans-text-main: #1e293b;
        --plans-text-muted: #64748b;
        --plans-primary: #EAA335;
        --plans-primary-hover: #d18b24;
        --plans-accent: #10b981;
        --plans-accent-light: #d1fae5;
        --plans-border-color: #e2e8f0;
        --plans-card-shadow: 0 10px 25px -5px rgba(45, 35, 20, 0.04), 0 8px 10px -6px rgba(45, 35, 20, 0.04);
        --plans-featured-shadow: 0 20px 25px -5px rgba(234, 163, 53, 0.2), 0 10px 10px -5px rgba(234, 163, 53, 0.1);
        
        /*PRIMITIVE TOKEN STYLES*/
        --color-neutral-000: #ffffff;
        --color-neutral-100: #f0f0f0;
        --color-neutral-200: #9E9E9E;
        --color-dark-700: #464746;
        --color-dark-900: #242423;
        --color-dark-999: #000000;
        --color-green-100: #E3F3E4;
        --color-green-500: #2e7d32;
        --color-amber-100: #fff3d6;
        --color-amber-500: #ffb700;
        --color-red-100: #ffd6d6 ;
        --color-red-500: #f82c2f;
        
        --color-brand-100: #c6d3ee;
        --color-brand-500: #6A83B5;
        --color-brand-900: #0d2347;

        /* SEMANTIC TEMPLATE STYLES*/
        --bg-primary: var(--color-neutral-000, #ffffff );
        --bg-secondary: var(--color-neutral-100, #f0f0f0 );
        --bg-tertiary: var(--color-neutral-200, #9E9E9E );
        --bg-accent: var(--color-brand-500);
        --bg-grey: var(--color-neutral-100, #f0f0f0 );

        --bg-confirm: var(--color-green-100, #E3F3E4 );
        --bg-warning: var(--color-amber-100, #fff3d6 );
        --bg-alert: var(--color-red-100, #ffd6d6 );

        --brand-light: var(--color-brand-100);
        --brand-main: var(--color-brand-500);
        --brand-dark: var(--color-brand-900);

        --text-bold: var(--color-dark-999, #000000 );
        --text-main: var(--color-dark-900, #242423 );
        --text-light: var(--color-neutral-200, #9E9E9E );
        --text-xlight: var(--color-neutral-100, #f0f0f0 );
        --text-brand: var(--color-brand-500);

        --text-confirm: var(--color-green-500, #2e7d32 );
        --text-warning: var(--color-amber-500, #ffb700 );
        --text-alert: var(--color-red-500, #f82c2f );
        
        /* Font Family */
        --font-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        /* Font Sizes */
        /* Optimized Mid-Density Professional Font Sizes */
        /*--text-body:        clamp(0.75rem,   0.05vw + 0.73rem, 0.8125rem); !* 12px -> 13px *!*/
        /*--text-subheading:  clamp(0.9375rem, 0.1vw + 0.9rem,   1.0rem);    !* 15px -> 16px *!*/
        /*--text-heading:     clamp(1.125rem,  0.2vw + 1.05rem,  1.25rem);   !* 18px -> 20px *!*/
        /*--text-title:       clamp(1.3125rem, 0.35vw + 1.2rem,  1.5rem);    !* 21px -> 24px *!*/

        /* Minimums are locked to 16px to prevent mobile auto-zoom */
        --text-caption:     clamp(0.8125rem, 0.04vw + 0.8rem,  0.875rem);  /* 13px -> 14px */
        --text-body:        clamp(1.0rem,    0.05vw + 0.98rem, 1.0625rem); /* 16px -> 17px */
        --text-subheading:  clamp(1.1875rem, 0.1vw + 1.15rem,  1.25rem);   /* 19px -> 20px */
        --text-heading:     clamp(1.375rem,  0.2vw + 1.3rem,   1.5rem);    /* 22px -> 24px */
        --text-title:       clamp(1.5625rem, 0.35vw + 1.45rem, 1.75rem);   /* 25px -> 28px */

        /* Line Heights */
        --lh-tight: 1.2;
        --lh-base: 1.4;
        --lh-loose: 1.8;

        /* Radius */
        --radius-s: 4px;
        --radius-m: 8px;
        --radius-l: 16px;

        /* Padding */
        --pad-xs: 4px;
        --pad-s: 8px;
        --pad-m: 16px;
        --pad-l: 24px;
        --pad-xl: 32px;
        --pad-xxl: 40px;

        /* Margin */
        --mar-xs: 4px;
        --mar-s: 8px;
        --mar-m: 16px;
        --mar-l: 24px;
        --mar-xl: 32px;
        --mar-xxl: 40px;

        /* Shadow */
        --shadow-s: 0 1px 2px rgba(0,0,0,0.1);
        --shadow-m: 0 4px 8px rgba(0,0,0,0.15);

        /* Transition */
        --transition-fast: 0.2s ease;
        --transition-normal: 0.3s ease;
        
    }

    @media (min-width: 768px) {
        :root {
            /* Desktop: Your original compact sizes */
            --text-caption:     clamp(0.625rem,  0.03vw + 0.61rem, 0.6875rem); /* 10px -> 11px */
            --text-body:        clamp(0.75rem,   0.05vw + 0.73rem, 0.8125rem); /* 12px -> 13px */
            --text-subheading:  clamp(0.9375rem, 0.1vw + 0.9rem,   1.0rem);    /* 15px -> 16px */
            --text-heading:     clamp(1.125rem,  0.2vw + 1.05rem,  1.25rem);   /* 18px -> 20px */
            --text-title:       clamp(1.3125rem, 0.35vw + 1.2rem,  1.5rem);    /* 21px -> 24px */
        }
    }

    /* ==========================================================================
    2. Reset / Normalize
    ========================================================================== */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body, h1, h2, h3, h4, p, ul, ol, li, figure {
        margin: 0;
        padding: 0;
    }

    img, picture, svg, video {
        max-width: 100%;
        display: block;
    }

    html {
        -webkit-text-size-adjust: none; /* Prevents iOS font boosting layout bugs */
        text-size-adjust: none;
        scroll-behavior: smooth;
    }

    body {
        min-height: 100vh;    /* Ensures body always fills the screen */
        text-rendering: optimizeSpeed;
        line-height: 1.4;
    }
    
    /* ==========================================================================
    3. BASE / Typography ELEMENTS
    ========================================================================== */
    #wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: scroll;
    }
    
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5 {
        font-weight: 600;             
        letter-spacing: -0.01em;
        margin: var(--mar-xs) 0;
    }

    h1, .text-title {
        font-size: var(--text-title);
        font-family: var(--font-title);
        color: var(--text-main);
        line-height: var(--lh-base);
    }
    
    h2, .text-heading {
        font-size: var(--text-heading);
        font-family: var(--font-title);
        color: var(--brand-main);
    }
    
    h3, .text-subheading {
        font-size: var(--text-subheading);
        font-family: var(--font-title);
    }
    
    h4, .text-caption {
        font-size: var(--text-subheading);
        font-family: var(--font-title);
        color: var(--text-main);
    }
    
    h5, .text-caption-light {
        font-size: var(--text-body);
        font-family: var(--font-title);
        color: var(--text-xlight);
    }
    
    p {
        font-size: var(--text-body);
        font-family: var(--font-body);
        color: var(--text-main);
        line-height: var(--lh-base);
        margin: var(--mar-s) 0;
    }
    
    label {
        font-family: var(--font-body);
        font-size: var(--text-body);
    }
    
    ol {
        font-size: var(--text-body);
        font-family: var(--font-body);
        margin-left: var(--mar-m);
    }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .9rem 3rem;
        background: rgba(247, 245, 241, .95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
    }

    .body-container {
        padding: var(--pad-xxl);
        max-width: 1200px;
        margin: auto;
    }
    
    .container-fluid {
        padding: var(--pad-xs) var(--pad-xxl);
    }
    
    .content-container, .booking-container {
        padding: var(--pad-s) var(--pad-xxl);
        max-width: 800px;
        margin: auto;
    }

    .signup-container {
        /*padding: var(--pad-s) var(--pad-xxl);*/
        /*max-width: 800px;*/
        margin: auto;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--mar-s);
    }
    
    .booking-form {
        margin: 5rem 0;
        padding: var(--pad-l);
        background: var(--brand-light);
        border-radius: var(--radius-m);
        border: 2px solid var(--brand-main);
        box-shadow: var(--shadow-m);
    }

    .signup-form {
        /*margin: var(--mar-l) 0;*/
        margin: 5rem 0;
        padding: var(--pad-l);
        background: var(--plans-pricing-bg);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-m);
    }

    .plan-container {
        padding: var(--pad-xl) var(--pad-s);
    }


    /* ==========================================================================
    4. LAYOUT
    ========================================================================== */
    
    
    .loading-message-container {
        text-align: center;
        padding: var(--pad-xxl);
    }
    
    .generic-flex-wrapper {
        display: flex;
        align-items: center;
        gap: var(--pad-s);
    }
    
    .button-group-footer {
        margin: var(--mar-s) 0 ;
        display: flex;
        justify-content: space-between;
    }
    
    .confirmation-message {
        color: var(--text-confirm);
        font-weight: 600;
    }
    
    .error-message {
        color: var(--text-alert);
        font-weight: 600;
    }
    
    .img-signature {
        max-width: 300px;
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-m);
        margin: var(--mar-s) 0;
        display: block;
    }
    
    .test-section {
        background: var(--bg-primary);
        border-radius: var(--radius-m);
        padding: var(--pad-l);
        margin: var(--mar-m) 0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    
    .phrase-box {
        background: var(--bg-grey);
        border-left: 4px solid var(--bg-tertiary);
        border-radius: var(--radius-s);
        padding: var(--pad-m) var(--pad-xs);
        font-size: 1.1em;
        font-style: italic;
        margin: var(--mar-l) 0;
    }
    
    .signature-instructions {
        color: var(--text-light);
        font-size: 0.9em;
        margin-bottom: var(--mar-s);
    }
    
    .card-container {
        background: var(--bg-primary);
        border-radius: var(--radius-m);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: var(--pad-s);
        margin: var(--mar-m) 0;
    }
    
    .feedback-form {
        padding: var(--mar-m) ;
        max-width: 700px;
    }
    
    .feedback-form div {
        margin: var(--mar-m) 0;
    }
    
    .feedback-form h1 {
        font-size: var(--text-title);
        margin: var(--mar-xs) 0;
        color: var(--text-brand);
    }
    
    .feedback-form h2 {
        font-size: var(--text-subheading);
        margin: var(--mar-xs) 0;
        color: var(--text-light);
    }
    
    .feedback-form h3 {
        font-size: var(--text-body);
        font-family: var(--font-body);
        margin: var(--mar-xs) 0;
        color: var(--text-light);
    }
    
    .form-checkbox-div {
        background: var(--bg-primary);
        border-radius: var(--radius-m);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: var(--pad-m);
        margin: var(--mar-xs) 0;
    }
    
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
    }
    
    @keyframes record-pulse {
        0% {
            color: #FF0000;
        }
        50% {
            color: #7F0000; /*Middle color (brightest) */
        }
        100% {
            color: #FF0000;
        }
    }
    
    
    /*  UserPlayback  */
    .playback-header {
        background: var(--bg-tertiary);
        color: var(--text-xlight);
        padding: 15px;
        border-radius: 8px 8px 0 0;
        margin: -20px -20px 20px -20px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .playback-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .playback-wrapper-label {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .message-card {
        background: var(--bg-primary);
        border-radius: var(--radius-m);
        padding: 20px;  /*do not change - it is specific to design/layout*/
        margin-bottom: var(--mar-s);
    }

    .ind-message-card {
        padding: var(--pad-m);
        border: 2px solid var(--brand-main);
        border-radius: var(--radius-s);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin: var(--pad-m) 0;
        
    }
    
    
    .message-header {
        border-bottom: 2px solid var(--bg-tertiary);
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    
    .message-title {
        color: var(--text-main)
    }
    
    .message-details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        margin: 15px 0;
    }
    
    .detail-item {
        padding: var(--pad-s);
        background: var(--brand-light);
        border-radius: var(--radius-s);
        border-left: 3px solid var(--brand-main);
    }
    
    .detail-label {
        font-size: 0.85em;
        color: var(--text-light);
        margin-bottom: var(--mar-xs);
    }
    
    .detail-value {
        /*color: var(--surface-tertiary);*/
    }
    
    .played-at-container {
        margin-top: 10px;
        padding: var(--pad-s);
        background: var(--bg-confirm);
        border-radius: var(--radius-s);
        font-size: 0.9em;
        color: var(--text-confirm)
    }
    
    .ap-playing-indicator {
        color: var(--text-confirm) ;
        font-weight: bold;
    }
    
    
    /* Login Page*/
    .container {
        width: min(350px, 95vw);
        margin: auto;
        padding: 0 var(--pad-s);
        box-sizing: border-box;
        /*min-height: 100vh;*/
        display: flex;
        flex-direction: column;
    }
    
    .container-login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        gap: var(--pad-s);
        padding-top: var(--pad-l);
    }
    
    .container-login p {
        font-size: var(--text-caption);
        margin: 0;
        flex-shrink: 0;
    }
    
    .captcha-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--pad-s);
        width: 100%;
        box-sizing: border-box;
    }
    
    .captcha-container .e-control-wrapper {
        min-width: 0;
        flex: 1 1 0;
    }
    
    .captcha-container p {
        margin: 0;
        flex-shrink: 0;
    }
    
    .acc-help-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: var(--pad-xs);
        margin-top: 36px; /* pushes to bottom of flex container */
        padding: var(--pad-m) 0;
    }
    
    .acc-recovery-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--pad-s);
        padding-top: var(--pad-m);
    }
    
    /*Landing page */
    .landing-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        gap: var(--pad-m);
        padding: var(--pad-s);
        height: 100%;
        box-sizing: border-box;
    }
    
    .landing-left {
        display: flex;
        flex-direction: column;
        gap: var(--pad-m);
        align-items: stretch;
    }
    
    .landing-right {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: var(--pad-m);
        min-width: 0;
    }
    
    .landing-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pad-m);
    }
    
    .stat-card {
        background: var(--bg-primary);
        border: 1px solid var(--bg-accent);
        border-radius: var(--radius-m);
        padding: var(--pad-s) var(--pad-m);
        display: flex;
        flex-direction: column;
        gap: var(--pad-xs);
        box-shadow: var(--shadow-s);
    }
    
    .stat-card-value {
        font-size: var(--text-heading);
        font-weight: 700;
        color: var(--text-bold);
        line-height: var(--lh-tight);
    }
    
    .stat-card-label {
        font-size: var(--text-body);
        font-family: var(--font-body);
        color: var(--text-main);
        line-height: var(--lh-base);
    }
    
    .landing-content {
        background: var(--bg-primary);
        border: 1px solid var(--bg-accent);
        border-radius: var(--radius-m);
        padding: var(--pad-m);
        overflow-y: auto;
        box-shadow: var(--shadow-s);
    }
    
    .landing-content-title {
        font-size: var(--text-body);
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: var(--pad-s);
    }
    
    .landing-content-empty {
        font-size: var(--text-body);
        color: var(--text-light);
    }
    
    .message-wrapper {
        border: 1px solid #cfcfcf;
        border-radius: var(--radius-m);
        padding: 8px;
        background: var(--bg-primary);
        width: 100%;
        margin: var(--mar-s)  auto;
    }

    .e-data-form .e-btn  {
        font-size: 12px;
    }

    .ap-textarea {
        width: 100%;
    }
    
    /*Toolbar style*/
    .grid-toolbar {
        margin-bottom: var(--mar-s);
        display: flex;
        align-items: center;
        gap: 12px;
        overflow-x: auto;
    }
    
    .grid-toolbar-item{
        display:flex;
        gap:8px;
        align-items:center;
    }
    
    .subject-focus-container {
        border: 1px solid var(--bg-accent);
        background-color: var(--bg-primary);
        padding: var(--pad-m);
        margin-top: var(--pad-m);
        border-radius: 6px;
    }
    
    .subject-focus-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: var(--pad-s);
    }
    
    .subject-focus-item {
        display:flex;
        align-items:center;
        gap: var(--pad-s);
    }
    
    /* AdminCompany / Settings */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: .5rem;
        align-items: start;
        max-width: 600px;
        margin-bottom: var(--mar-m);
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .full-width {
        grid-column: 1 / -1;
    }
    
    /*found in inbox*/
    .audio-player-wrapper {
        margin-top: var(--mar-s);
        padding: var(--pad-s);
        background: var(--bg-confirm);
        border-radius: var(--radius-s);
        border: 1px solid var(--text-confirm);
    }
    
    audio {
        width: 100%;
        margin-bottom: var(--mar-s);
    }
    
    
    /* Cards Backgrounds Dialogs */
    .ap-alertcard {
        width: 380px;
        padding: var(--pad-m);
        background: var(--bg-alert);
        border: 1px solid var(--text-alert);
        border-radius: var(--radius-m);
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    /*wrappers containers*/
    .ap-messagewrapper {
        margin-top: var(--mar-s);
        margin-bottom: var(--mar-s);
    }

    .checkout-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .checkout-header h2 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 0.5rem 0;
        letter-spacing: -0.01em;
    }

    .checkout-header p {
        font-size: 1.05rem;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
    }

    .checkout-header strong {
        color: #eaa335;
        font-weight: 700;
    }



/* ==========================================================================
   5. COMPONENTS (e.g., Cards, Buttons, Nav, Syncfusion ) 
   ========================================================================== */
    
    
    /* Appbar */
    .e-appbar {
        /*background-color: var(--text-main);*/
        color: var(--text-xlight);
        height: 56px;
        border: none;
        border-bottom: 1px solid var(--text-bold);
        padding: 0 var(--pad-m);
        box-shadow: var(--shadow-s);
    }
    
    .e-menu {
        font-size: 24px !important;
    }
    
    .hamburger-btn.e-btn {
        width: auto;
        background: transparent !important;
        border: none !important;
        color: var(--brand-main) !important;
        font-weight: 600;
        border-radius: var(--radius-m) !important;
        transition: all 0.3s ease !important;
        cursor: pointer;
    }
    
    .hamburger-btn.e-btn:hover {
        background: var(--brand-light) !important;
        border-color: var(--brand-dark) !important;
        color: var(--text-xlight) !important;
        box-shadow: var(--shadow-m) !important;
    }
    
    .hamburger-btn.e-btn:active {
        background: var(--text-main) !important;
        border-color: var(--text-main) !important;
        transform: scale(0.98);
    }
    
    
    /* Sidebar  */
    .e-sidebar {
        background-color: var(--bg-secondary);
        border: 1px solid var(--bg-accent);
        color: var(--text-main);
    }

    .e-sidebar .sidebar-width {
        width: 280px;
    }
    
    /* NavLink & Container */
    .nav-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    
    .nav-header {
        padding: var(--pad-s) var(--pad-m);
        border-bottom: 1px solid var(--text-bold);
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
    }
    
    .nav-header h1 {
        font-size: var(--text-heading);
        color: var(--text-brand);
        line-height: var(--lh-tight);
        margin: var(--mar-s) 0;
    }
    
    .nav-list {
        flex: 1;
        padding: var(--pad-s) var(--pad-m);
        overflow-y: auto;
    }
    
    .nav-footer {
        flex-shrink: 0;
        padding: var(--pad-s) var(--pad-m);
        border-top: 1px solid var(--text-bold);
    }
    
    .nav-footer .e-btn {
        width: 100% !important;
    }
    
    .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: var(--pad-m) var(--pad-m);
        margin-bottom: var(--pad-xs);
        background: var(--bg-primary);
        color: var(--text-main) !important;
        border: 1px solid var(--brand-main);
        text-decoration: none !important;
        border-radius: var(--radius-m);
        transition: all var(--transition-fast);
    
    }
    
    .nav-item:hover {
        background: var(--brand-main) !important;
        border-color: var(--brand-main) !important;
        color: var(--text-xlight) !important;
        box-shadow: var(--shadow-s);
    }
    
    .nav-item.active {
        background: var(--brand-main) !important;
        border-color: var(--brand-main) !important;
        color: var(--text-xlight) !important;
        box-shadow: var(--shadow-s);
    }
    
    .nav-icon {
        color: var(--brand-main);
    }

    .nav-more-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--pad-xs);
        width: 100%;
        padding: var(--pad-s) var(--pad-m);
        margin-bottom: var(--pad-xs);
        background: transparent;
        color: var(--brand-main);
        border: 1px dashed var(--brand-main);
        border-radius: var(--radius-m);
        cursor: pointer;
        font-family: var(--font-body);
        font-size: var(--text-body);
        font-weight: 500;
        transition: all var(--transition-fast);
    }

    .nav-more-toggle:hover {
        background: var(--brand-main);
        color: var(--text-xlight);
    }

    .nav-more-icon {
        font-size: 0.75rem;
    }

    .nav-more-section {
        overflow: hidden;
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .nav-item-more {
        opacity: 0.9;
        border-style: dashed;
    }
    
    .nav-text {
        font-family: var(--font-body);
        font-size: var(--font-body);
        font-weight: 500;
        text-align: center;
        width: 100%;
    }
    
    .nav-outline-btn {
        background:none; 
        border:none; 
        padding: 0; 
        margin: 0; 
        text-decoration: underline; 
        cursor: pointer;
    }
    
    /* Button Styles  */
    .e-btn {
        width: auto;
        font-weight: 600;
        font-size: var(--text-body);
        padding: var(--pad-s) var(--pad-m) !important;
        border-radius: var(--radius-m) !important;
        transition: var(--transition-normal) !important;
        cursor: pointer;
    }
    
    /*.e-btn:hover {*/
    /*}*/
    /*.e-btn:active {*/
    /*}*/
    
    .e-primary {
        width: auto;
        background: var(--brand-main) !important;
        border: 2px solid var(--brand-main) !important;
        color: var(--text-main) !important;
        font-weight: 600;
        font-size: var(--text-body);
        padding: var(--pad-s) var(--pad-m) !important;
        border-radius: var(--radius-m) !important;
        transition: var(--transition-normal) !important;
        cursor: pointer;
    }
    
    .e-primary:hover {
        background: var(--brand-dark) !important;
        border-color: var(--brand-main) !important;
        color: var(--brand-main) !important;
        box-shadow: var(--shadow-m) !important;
    }
    
    .e-primary:active {
        background: var(--brand-main) !important;
        border-color: var(--brand-light) !important;
        transform: scale(0.98);
    }
    
    .e-link {
        width: auto;
        background: transparent !important;
        border: none !important;
        color: var(--text-main) !important;
        font-weight: 400;
        font-size: var(--text-body);
        padding: var(--pad-s) var(--pad-m) !important;
        border-radius: var(--radius-m) !important;
        transition: var(--transition-normal) !important;
        cursor: pointer;
        text-decoration-line: underline;
    }
    
    .e-link:hover {
        background: var(--bg-accent) !important;
        border-color: var(--text-main) !important;
        color: var(--text-bold) !important;
        box-shadow: var(--shadow-m) !important;
        text-decoration-line: underline;
    }
    
    .e-link:active {
        background: var(--text-main) !important;
        border-color: var(--text-main) !important;
        transform: scale(0.98);
    }
    
    .e-accent {
        width: auto;
        background: var(--bg-accent) !important;
        border: 2px solid var(--brand-main) !important;
        color: var(--text-main) !important;
        font-weight: 600;
        font-size: var(--text-body);
        padding: var(--pad-s) var(--pad-m) !important;
        border-radius: var(--radius-m) !important;
        transition: var(--transition-normal) !important;
        cursor: pointer;
        text-decoration-line: none;
    }
    
    .e-accent:hover {
        background: var(--bg-secondary) !important;
        border-color: var(--brand-main) !important;
        color: var(--text-main) !important;
        box-shadow: var(--shadow-m) !important;
        text-decoration-line: none;
    }
    
    .e-accent:active {
        background: var(--brand-main) !important;
        border-color: var(--brand-main) !important;
        color: var(--text-bold) !important;
        transform: scale(0.98);
    }
    
    .e-action {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: var(--pad-xs) var(--pad-s) !important;
        color: var(--text-main) !important;
        border-radius: var(--radius-s) !important;
        transition: color var(--transition-fast), background var(--transition-fast) !important;
        cursor: pointer;
    }
    
    .e-action .e-btn-icon,
    .e-action .e-icons {
        color: var(--text-light) !important;
        transition: color var(--transition-fast) !important;
    }
    
    .e-action:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .e-action:hover .e-btn-icon,
    .e-action:hover .e-icons {
        color: var(--brand-main) !important;
    }
    
    .e-action:active {
        background: transparent !important;
        transform: scale(0.95);
    }
    
    .e-action:active .e-btn-icon,
    .e-action:active .e-icons {
        color: var(--brand-main) !important;
    }
    
    .e-plain-icon {
        width: auto;
        background: transparent !important;
        color: var(--brand-main) !important;
        border-radius: var(--radius-m) !important;
        border: none !important;
        transition: var(--transition-normal) !important;
        cursor: pointer;
    }
    
    .e-plain-icon:hover {
        background: transparent !important;
        color: var(--brand-main) !important;
        border: none !important;
    }
    
    .e-plain-icon:active {
        background: transparent !important;
        color: var(--brand-main) !important;
        border: none !important;
    }

    .register-btn {
        width: 180px;
        padding: 10px 20px; 
        background: var(--plans-primary);
        color: white; 
        text-decoration: none; 
        border-radius: 6px;  
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: var(--text-body);
        border: 1px solid; 
    }
    
    .register-btn:hover {
        background: darkorange !important;
        border: 1px solid;

    }
    
    .register-btn:active {}

    
    .plain-btn {
        display: block; 
        padding: 10px 20px; 
        background: transparent; 
        color: black; 
        text-decoration: none;
        border-radius: 6px;  
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
        font-size: var(--text-body);
    }

    .plain-btn:hover {
        color: var(--mineral) !important;
    }
    
    /* Scrollbar  WebKit browsers (Chrome, Safari, Edge) ===========================================  */
    
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--brand-main);
        border-radius: 10px;
        transition: var(--transition-fast);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--bg-accent);
        box-shadow: var(--shadow-s);
    }
    
    /* Calendar */
    .e-calendar {
        background-color: var(--bg-primary);
        border: 1px solid var(--bg-secondary);
        width: auto;
        min-width: 250px;
        max-width: 300px;
    }
    
    /* To specify background color, color, and border date elements on hovering */
    .e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
        background-color: var(--bg-accent);
        border: 1px solid var(--text-main);
        color: var(--text-main);
    }
    
    /* To specify border of date cell grid */
    .e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day {
        border: 1px solid transparent;
    }
    
    /* To specify color and font size Calendar title */
    .e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title {
        color: var(--text-main);
        font-size: var(--text-body);
    }
    
    /* Customizing the previous and next icon */
    .e-calendar .e-header span, .e-bigger.e-small .e-calendar .e-header span {
        border: 1px solid var(--bg-accent);
        color: var(--text-main);
    }
    
    /* To specify background color, color, and border-color footer button  */
    .e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
        background-color: var(--brand-main);
        border-color: var(--brand-main);
        color: var(--text-bold);
    }
    
    /* To specify background color and color selected date cell grid  */
    .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
        background-color: var(--brand-main);
        color: var(--text-xlight);
    }
        
    /* To specify background content header in Calendar */
    .e-calendar .e-content thead, .e-bigger.e-small .e-calendar .e-content thead {
        /*background: var(--bg-subtle);*/
    }

    /*selected border */
    .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
        background: var(--brand-main);
        /*color: #fff;*/
    }

    .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day {
        box-shadow: inset 2px 0 var(--brand-main),inset 0 2px var(--brand-main),inset -2px 0var(--brand-main),inset 0 -2px var(--brand-main);
        color: var(--text-main);
    }

    /*.e-datepick-mob-popup-wrap  {*/
    /*}*/
    

 
    
    /* GRID */
    .e-grid {
        border-radius: var(--radius-m);
        overflow: hidden;
        border: 1px solid var(--bg-secondary) !important;
        box-shadow: var(--shadow-s);
        background: var(--bg-primary);
    }
    
    .e-grid .e-row {
        background: var(--bg-primary);
        color: var(--text-main);
        transition: background var(--transition-fast);
    }
    
    .e-grid .e-row:hover .e-rowcell {
        background: var(--bg-secondary) !important;
        color: var(--text-main) !important;
    }
    
    .e-grid .e-row.e-altrow {
        background: color-mix(in srgb, var(--bg-secondary) 40%, var(--bg-primary));
    }
    
    .e-grid .e-rowcell {
        font-size: var(--text-body);
        color: var(--text-main);
        border-color: var(--bg-secondary) !important;
    }
    
    .e-grid .e-headercell {
        /*background: var(--brand-main) !important;*/
        border-color: var(--brand-main) !important;
        /*padding: var(--pad-s) var(--pad-xs) !important;*/
    }
    
    .e-grid .e-headercell .e-headertext {
        /*color: var(--bg-primary);*/
        font-size: var(--text-body);
        font-weight: 600;
    }
    
    .e-grid .e-gridheader {
        /*border-color: var(--brand-main) !important;*/
    }
    
    .e-grid .e-toolbar {
        background: var(--bg-primary);
        border-color: var(--bg-secondary) !important;
    }
    
    .e-grid .e-pager {
        background: var(--bg-primary);
        border-color: var(--bg-secondary) !important;
        color: var(--text-main);
    }
    
    .e-grid .e-pager .e-currentitem {
        background: var(--brand-main);
        color: var(--text-xlight);
        border-radius: var(--radius-s);
    }
    
    /* Dropdown (floating label) */
    /* Remove the margin-top approach */
    .e-ddl.e-float-input,
    .e-ddl.e-float-input.e-control-wrapper {
        margin-top: 0;
    }
    
    /* Add a helper class for the wrapper div in markup */
    .sf-dd-wrap {
        padding-top: 1.5rem;
        position: relative;
    }
    
    /* Textbox */
    .e-textbox {
        text-align: left;
    }
    
    .e-float-input, .e-float-input.e-control-wrapper {
        margin-bottom: var(--pad-s);
    }
    
    .service-section-wrapper {
        padding: var(--pad-s);
        border: 1px solid var(--bg-secondary);
        background: var(--bg-primary);
        border-radius: var(--radius-s);
        margin-bottom: var(--pad-m);
    
    }
    
    /* Tabs */
    .e-tab {
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-m);
        overflow: hidden;
        box-shadow: var(--shadow-s);
    }
    
    /*Header items of Tab*/
    .e-tab .e-tab-header .e-toolbar-items {
        background: var(--bg-primary);
        border: none;
    }
    
    /*content of Tab control*/
    .e-tab .e-content {
        background: var(--bg-primary) !important;
        padding: var(--pad-m);
    }
    
    /*Items of Tab*/
    .e-tab .e-content .e-item {
        color: var(--text-main);
        font-size: var(--text-body);
    }
    
    /*Tab item */
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap{
        color: var(--text-main);
    }
    
    /*Tab item ON HOVER*/
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
        background: var(--bg-tertiary) !important;
    }
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
        color: var(--text-xlight) !important;
    }
    
    /*SELECTED tab item*/
    .e-tab .e-tab-header .e-toolbar-item.e-active {
        background: var(--bg-accent);
        border-bottom: 2px solid var(--brand-main);
    }
    
    /*SELECTED tab item text and icon*/
    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
        color: var(--text-xlight) !important;
    }
    
    /*header of Tab control*/
    .e-tab .e-tab-header {
        background: var(--bg-primary) !important;
        border-bottom: 1px solid var(--bg-secondary);
        color: var(--text-main);
    }
    
    /*Header Item icon of Tab control.*/
    .e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
        color: var(--brand-main) !important;
    }
    
    
    /* Grid toolbar */
    .grid-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--pad-xs);
        padding: var(--pad-xs) var(--pad-s);
        background-color: var(--bg-grey);
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-s);
        margin-bottom: var(--mar-s);
        font-size: var(--text-body);
        font-family: var(--font-body);
    }
    
    .grid-toolbar-item {
        display: flex;
        align-items: center;
        gap: var(--pad-xs);
    }
    
    .grid-toolbar label {
        font-weight: 500;
        color: var(--text-main);
        white-space: nowrap;
        margin-bottom: 0;
    }
    
    .grid-toolbar input[type="text"],
    .grid-toolbar input:not([type]) {
        height: 30px;
        padding: 0 var(--pad-xs) ;
        font-size: var(--text-body);
        line-height: var(--lh-base);
        color: var(--text-main);
        background-color: var(--bg-primary);
        background-clip: padding-box;
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-s);
        transition: var(--transition-fast);
        outline: none;
        font-family: var(--font-body);
    }
    
    .grid-toolbar input:focus {
        border-color: var(--brand-main);
        box-shadow: 0 0 0 0.15rem rgba(166, 123, 81, 0.25);
    }
    
    /* Select dropdowns */
    .grid-toolbar select {
        height: 30px;
        padding: var(--pad-xs) var(--pad-s);
        font-size: var(--text-body);
        line-height: var(--lh-base);
        color: var(--text-main);
        background-color: var(--bg-primary);
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-s);
        appearance: auto;
        outline: none;
        cursor: pointer;
        font-family: var(--font-body);
        transition: var(--transition-fast);
    }
    
    .grid-toolbar select:focus {
        border-color: var(--brand-main);
        box-shadow: 0 0 0 0.15rem rgba(166, 123, 81, 0.25);
    }
    
    /* Buttons inside the toolbar */
    .grid-toolbar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        padding: var(--pad-xs) var(--pad-s);
        font-size: var(--text-body);
        font-weight: 500;
        line-height: var(--lh-base);
        color: var(--text-main);
        background-color: var(--bg-primary);
        border: 1px solid var(--bg-secondary);
        border-radius: var(--radius-s);
        cursor: pointer;
        transition: var(--transition-fast);
        font-family: var(--font-body);
        white-space: nowrap;
        gap: var(--pad-xs);
    }
    
    .grid-toolbar button:hover {
        background-color: var(--bg-grey);
        border-color: var(--brand-main);
        color: var(--text-bold);
    }
    
    .grid-toolbar button:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(166, 123, 81, 0.25);
    }
    
    .grid-toolbar button:active {
        background-color: var(--bg-secondary);
        border-color: var(--bg-tertiary);
    }
    
    /* SfMessage */
    .e-message .e-msg-content {
        margin: 0;
    }

    /* ==========================================================================
    6. UTILITIES
    ========================================================================== */
    .ap-autoplay-check{
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        cursor: pointer;
    }
    
    .ap-required {
        font-size:.85em;
        margin: var(--pad-xs) 0;
    }
    
    small {
        font-size:.78em;
    }
    
    .IamHidden {
        display: none;
    }
    
    .language-selector {
        padding:5px 10px;
        border-radius:4px;
        border:1px solid #a5d6a7;
        background:#fff;
        font-size:.95em;
        min-width:180px;
    
    }
    
    .playback-selector {
        padding:5px 10px;
        border-radius:4px;
        border:1px solid #a9c2ef;
        background:#fff;
        font-size:.95em;
        min-width:220px;
    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    .stack-elements {
        display: flex;
        flex-direction: column;
    }
    
    .align-c {
        align-items: center;
    }
    
    .login-logo{
        width: auto;
        height: 100px;
        margin: auto;
    }

   /*Sf Spinner */
    .e-spinner-pane.customSpinner .e-spinner-inner .e-spin-bootstrap5 {
        stroke: var(--brand-main);
    }

    .e-spinner-pane .e-spinner-inner .e-spin-label {
        color: white;
    }
    
    .e-spinner-pane {
        position: fixed;
        inset: 0;
        background-color: rgba(0,0,0,.6);
        z-index: 3000 !important;
    }
    
    .caption {
        font-size: var(--text-caption);
    }

    .black-out {
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        display:flex; 
        align-items:center; 
        justify-content:center; 
        background:rgba(255,255,255,0.8); 
        z-index:9999;
    }


/* ==========================================================================
7. MEDIA QUERIES
========================================================================== */
    
    /* Mobile */
    @media (max-width: 768px) {
        
        nav {
            padding: 0.9rem;
        }
        
        /*Textinput textbox for new message */
        input.e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper, .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled {
            font-size: 16px !important;
        }
        
        .e-input-group input.e-input,
        .e-float-input input {
            font-size: 16px !important;
        }
        
        .body-container {
            padding: var(--pad-m);
        }

        .container-fluid {
            padding: var(--pad-xs) var(--pad-xs);
        }

        .content-container {
            padding: var(--pad-xs);
        }
        
        .landing-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            padding: var(--pad-xs);
            gap: var(--pad-l);
            height: auto;
        }
    
        .landing-left {
            width: 100%;
            align-items: center;
        }
    
        .landing-right {
            width: 100%;
            grid-template-rows: auto;
        }
    
        .landing-stats {
            grid-template-columns: 1fr;
            gap: var(--pad-s);
            display: none;
        }
    
        .stat-card {
            padding: var(--pad-xs) var(--pad-s);
        }
    
        .landing-content {
            padding: var(--pad-s);
        }
    
        .new-btn {
            width: 100% !important;
        }

        .e-action {
            font-size: 12px !important;
        }

        .e-calendar {
            width: 100%;
            max-width: none;
        }
        
        .e-datepicker {
            width: 80vw;
        } 

        .page-header {
            flex-wrap: wrap !important;
        }
        
        .ind-message-card {
            padding: var(--pad-s);
            margin: var(--pad-m) 0;
        }

        .ap-audio-controls-wrapper {
            display: inline-flex !important;
            gap: 4px;
            
        }

        .message-card {
            height: 80vh;
            max-height: 80vh;
            overflow-y: auto;
        }

        .e-btn {
            padding: var(--pad-s) var(--pad-s) !important;
        }

        /*Action Icons when Grids are in mobile responsive mode*/
        .e-bigger .e-btn.e-small .e-btn-icon, .e-bigger.e-btn.e-small .e-btn-icon, .e-bigger .e-css.e-btn.e-small .e-btn-icon, .e-bigger.e-css.e-btn.e-small .e-btn-icon {
            font-size: 14px;
        }
        
        .booking-container {
            padding: var(--pad-s);
        }
        
        .booking-form {
            margin: var(--mar-m) 0;
            padding: var(--pad-m);
        }

        .signup-container {
            padding: var(--pad-s);
        }

        .signup-form {
            margin: var(--mar-l) 0;
            padding: var(--pad-s);
        }

        .plan-container {
            padding: var(--pad-m) var(--pad-s);
        }

        .login-logo{
            height: 80px;
        }
        
        .popular-badge {
            text-align: center;
        }
        
        .register-btn {
            width: 100%;
            margin: var(--mar-m) auto;
        }
        
        
    }