@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jacquard+24&family=Jura:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


:root {

    /* font settings */
    --main-heading-font: "Nunito", sans-serif;
    --sub-or-p-heading-font: "Nunito", sans-serif;
    --color-sub-or-p-heading: #565656;
    /* font settings */

    --color-surface: #ffffff;
    --color-on-surface: #000000;
    --color-border: #c8c8c8;

    /* color for theme */
    --color-primary-rgb: 255 118 77;
    /* --color-primary-rgb: 30 143 141; */
    /* Raw RGB numbers for transparency */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-on-primary: #fff;
    /* --color-primary-assent: #FBF7F4; */
    --color-primary-assent: rgba(var(--color-primary-rgb) / 0.02);
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #0E1936;
    --color-on-primary-dark: #fff;
    --color-secondary: #04931D;
    --color-on-secondary: #fff;
    --color-secondary-dark: #004114;
    --color-on-secondary-dark: #fff;
    --color-secondary-assent: #E5FFCC;
    --color-assent:rgb(var(--color-primary-rgb)/ 0.2);
    --color-on-assent: #15161b;
    --color-assent-secondary: #2474d2;
    --color-for-dashboard-menu: #fff;
    --color-for-dashboard-menu-hover: rgb(var(--color-primary-rgb) / 0.1);
    --color-for-dashboard-on-menu: #5c5c5c;
    --color-for-dashboard-on-menu-hover: var(--color-primary);
    /* color for theme */


    /* input settings  */
    --color-for-label: #292929;
    --input-color: #666666;
    --color-input-placeholder: #8B8B8B;
    --color-for-input-border: #c8c8c8;
    --color-for-input-focus: 0 0 0 4px #7af5677a;
    --color-for-input-border-focus-hover: #7bf1687a;
    --color-for-custom-input-box-color: #ccc;
    --color-for-custom-input-hover-color: #9e9e9e;
    --color-for-custom-input-checked-color: var(--color-primary);
    /* input settings  */



    /* normal colors */
    --a-tag-color: rgb(64, 64, 255);
    --color-main-heading: #242423;
    --color-black: #000;
    --font-dark: #1d1d1d;
    --font-light: #4b4b4b;
    --color-border-light: #dadada;
    --color-border-dark: #a5a5a5;
    --color-white: #fff;
    --color-light: #f5f5f5;
    --color-blue: #4969da;
    --icon-default-color: #777777;
    /* normal colors */



    /* buttons settings */
    --color-for-primary-button: #ffffff;
    /* Always white text for primary buttons */
    --color-for-primary-button-back: var(--color-primary);
    --color-for-primary-button-hover-color: #14814e59;
    /* buttons settings */



    /* track  scrollbar settings */
    --track_back-color: #ebebeb;
    --color_scrollbar-hover: #696969;
    --color_scrollbar: #8b8b8b;
    /* track  scrollbar settings */


    /* bottom navbar settings */
    --color-back-for-bottom-footer: #040404;
    --color-for-footer-main-heading: #000;
    --color-for-footer-sub-headings: #575757;
    /* bottom navbar settings */


    /* action color settings */
    --color-error: #ff0000;
    --color-warning: #ff960e;
    --color-success: rgb(22, 163, 22);
    --color-for-just-quick-not: rgb(64, 64, 255);
    --color-for-available: #406D0A;
    --color-for-not-available: #D75557;
    /* action color settings */





    --heigh-light-back-color: #000000c7;
    --top-nav-back-color: #ffffff45;
    --on-black-dark: var(--color-white);
    --on-black-light: #BDBDBD;
    --color-for-call-to-action: #1C1C1C;
    --linear-gradient-for-hero-section: linear-gradient(-45deg, #F0F8FF, #94cdff83);
    --icon_back-color: #fff;
    --box-shadow-light: 1px 2px 20px rgba(0, 0, 0, 0.071);
    --menu-back-color: #0E1936;
    --color-for-star: #F68D2E;



    /* theme change colors */
    --color-theme-first: #0466C8;
    --color-theme-second: #B5A9F9;
    --color-theme-third: #CFDDBD;
    --color-theme-fourth: #F85543;
    --color-theme-fifth: #CFDDBD;
    --color-theme-sixth: #F68D2E;
    --color-theme-seventh: #FF7B89;
    --color-theme-eighth: #4E9C79;
    --color-theme-ninth: #FF6D00;
    --color-theme-tenth: #C5E86C;
    /* theme change colors */
    --color-assent-dark: #f9f9f9;
}






/* data theme colors start */

:root[data-theme='ts-th-first'] {
    /* Blue Compass */
    --color-primary-rgb: 37 99 235;
    --color-primary: #2563EB;
    --color-on-primary: #ffffff;
    --color-primary-assent: #1E40AF;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #1e3a8a;
    --color-on-primary-dark: #ffffff;
    --color-secondary: #10B981;
    --color-on-secondary: #ffffff;
    --color-secondary-dark: #059669;
    --color-on-secondary-dark: #ffffff;
    --color-secondary-assent: #D1FAE5;
    --color-assent: #DBEafe;
    --color-assent-secondary: #3B82F6;
}

:root[data-theme='ts-th-second'] {
    /* Royal Purple */
    --color-primary-rgb: 124 58 237;
    --color-primary: #7C3AED;
    --color-on-primary: #ffffff;
    --color-primary-assent: #5B21B6;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #4C1D95;
    --color-secondary: #EC4899;
    --color-secondary-dark: #BE185D;
    --color-secondary-assent: #FCE7F3;
    --color-assent: #F3E8FF;
    --color-assent-secondary: #8B5CF6;
    --color-main-heading: #5B21B6;
    --menu-back-color: #4C1D95;
}

:root[data-theme='ts-th-third'] {
    /* Golden Brown */
    --color-primary-rgb: 217 119 6;
    --color-primary: #D97706;
    --color-on-primary: #ffffff;
    --color-primary-assent: #B45309;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #78350F;
    --color-secondary: #F59E0B;
    --color-secondary-dark: #B45309;
    --color-secondary-assent: #FEF3C7;
    --color-assent: #FFFBEB;
    --color-assent-secondary: #FBBF24;
    --color-main-heading: #78350F;
    --menu-back-color: #78350F;
}

:root[data-theme='ts-th-fourth'] {
    /* Coral Red */
    --color-primary-rgb: 220 38 38;
    --color-primary: #DC2626;
    --color-on-primary: #ffffff;
    --color-primary-assent: #B91C1C;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #7F1D1D;
    --color-secondary: #0891B2;
    --color-secondary-dark: #0E7490;
    --color-secondary-assent: #CFFAFE;
    --color-assent: #FEF2F2;
    --color-assent-secondary: #EF4444;
    --color-main-heading: #7F1D1D;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-fifth'] {
    /* Forest Green */
    --color-primary-rgb: 5 150 105;
    --color-primary: #059669;
    --color-on-primary: #ffffff;
    --color-primary-assent: #047857;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #064E3B;
    --color-secondary: #D97706;
    --color-secondary-dark: #B45309;
    --color-secondary-assent: #FEF3C7;
    --color-assent: #ECFDF5;
    --color-assent-secondary: #10B981;
    --color-main-heading: #064E3B;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-sixth'] {
    /* Vibrant Orange - Darkened for AA Contrast */
    --color-primary-rgb: 194 65 12;
    --color-primary: #C2410C;
    --color-on-primary: #ffffff;
    --color-primary-assent: #9A3412;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #7C2D12;
    --color-secondary: #EA580C;
    --color-secondary-dark: #9A3412;
    --color-secondary-assent: #FFEDD5;
    --color-assent: #FFF7ED;
    --color-assent-secondary: #FB923C;
    --color-main-heading: #7C2D12;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-seventh'] {
    /* Rose Pink */
    --color-primary-rgb: 225 29 72;
    --color-primary: #E11D48;
    --color-on-primary: #ffffff;
    --color-primary-assent: #BE123C;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #881337;
    --color-secondary: #F43F5E;
    --color-secondary-dark: #BE123C;
    --color-secondary-assent: #FFE4E6;
    --color-assent: #FFF1F2;
    --color-assent-secondary: #FB7185;
    --color-main-heading: #881337;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-eighth'] {
    /* Teal/Cyan */
    --color-primary-rgb: 8 145 178;
    --color-primary: #0891B2;
    --color-on-primary: #ffffff;
    --color-primary-assent: #0E7490;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #164E63;
    --color-secondary: #06B6D4;
    --color-secondary-dark: #0891B2;
    --color-secondary-assent: #CFFAFE;
    --color-assent: #ECFEFF;
    --color-assent-secondary: #22D3EE;
    --color-main-heading: #164E63;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-ninth'] {
    /* Deep Crimson */
    --color-primary-rgb: 190 18 60;
    --color-primary: #BE123C;
    --color-on-primary: #ffffff;
    --color-primary-assent: #9F1239;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #881337;
    --color-secondary: #E11D48;
    --color-secondary-dark: #9F1239;
    --color-secondary-assent: #FFE4E6;
    --color-assent: #FFF1F2;
    --color-assent-secondary: #F43F5E;
    --color-main-heading: #881337;
    --menu-back-color: #0E1936;
}

:root[data-theme='ts-th-tenth'] {
    /* Lime Green - Darkened for AA Contrast */
    --color-primary-rgb: 77 124 15;
    --color-primary: #4D7C0F;
    --color-on-primary: #ffffff;
    --color-primary-assent: #3F6212;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #365314;
    --color-secondary: #65A30D;
    --color-secondary-dark: #3F6212;
    --color-secondary-assent: #ECFCCB;
    --color-assent: #F7FEE7;
    --color-assent-secondary: #A3E635;
    --color-main-heading: #365314;
    --menu-back-color: #0E1936;
}

/* data theme colors end */

/* Unified Dark Mode Variables */
:root[data-theme-style='dark'] {
    --color-primary-rgb: 255 118 77;
    --color-primary: #ff764d;
    --color-on-primary: #030303;
    --color-primary-assent: #1e1e1e;
    --color-on-primary-assent: #ffffff;
    --color-primary-dark: #000000;
    --color-on-primary-dark: #fff;
    --color-secondary: #006400;
    --color-on-secondary: #fff;
    --color-secondary-dark: #004d00;
    --color-on-secondary-dark: #fff;
    --color-secondary-assent: #2d2d2d;
    --color-surface: #1e1e1e;
    --color-on-surface: #e0e0e0;
    --color-assent: #121212;
    --color-on-assent: #e0e0e0;
    --color-assent-secondary: #4a90e2;

    --color-for-dashboard-menu: #1e1e1e;
    --color-for-dashboard-menu-hover: #333333;
    --color-for-dashboard-on-menu: #b0b0b0;
    --color-for-dashboard-on-menu-hover: var(--color-primary);

    --color-for-label: #e0e0e0;
    --input-color: #e0e0e0;
    --color-input-placeholder: #888888;
    --color-for-input-border: #444444;
    --color-for-input-focus: 0 0 0 4px #7af5677a;
    --color-for-custom-input-box-color: #333333;
    --color-for-custom-input-hover-color: #555555;
    --color-for-custom-input-checked-color: var(--color-primary);

    --color-main-heading: #ffffff;
    --color-black: #ffffff;
    --font-dark: #e0e0e0;
    --font-light: #b0b0b0;
    --color-border-light: #333333;
    --color-border-dark: #555555;
    --color-white: #121212;
    --color-light: #1e1e1e;
    --color-blue: #6d8af1;
    --icon-default-color: #a0a0a0;

    --track_back-color: #2d2d2d;
    --color_scrollbar-hover: #888888;
    --color_scrollbar: #555555;

    --color-back-for-bottom-footer: #000000;
    --color-for-footer-main-heading: #ffffff;
    --color-for-footer-sub-headings: #b0b0b0;

    --heigh-light-back-color: #ffffffc7;
    --top-nav-back-color: #00000045;
    --on-black-dark: #000;
    --on-black-light: #424242;
    --color-for-call-to-action: #f1f1f1;
    --linear-gradient-for-hero-section: linear-gradient(-45deg, #1f2933, #10151a);
    --icon_back-color: #333;
    --box-shadow-light: 1px 2px 20px rgba(255, 255, 255, 0.05);
    --menu-back-color: #000000;
    --color-sub-or-p-heading: #dedede;
    --color-assent-dark: #1d1d1d;
}

/* Auto Dark Mode based on system preference */

.register-page-content,
.admin-login-page-content,
.login-page-content {
    background-color: var(--color-white);
}


/* Dark theme specific overrides for tables and other elements */
:root[data-theme='dark'] table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

:root[data-theme='dark'] thead tr th {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

:root[data-theme='dark'] tbody tr:nth-child(even) {
    background-color: #2b2b2b !important;
}

:root[data-theme='dark'] tbody tr:nth-child(odd) {
    background-color: #1e1e1e !important;
}

:root[data-theme='dark'] td,
:root[data-theme='dark'] th {
    border-color: #444444 !important;
    color: #e0e0e0 !important;
}

:root[data-theme='dark'] strong {
    color: var(--color-black);
}

:root[data-theme='dark'] .table_body_con .table_child:nth-of-type(even) {
    background-color: #2b2b2b !important;
}

/* Fix input backgrounds in dark mode globally */
:root[data-theme='dark'] input,
:root[data-theme='dark'] select,
:root[data-theme='dark'] textarea {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
    box-shadow: unset !important;
}

:root[data-theme='dark'] .card,
:root[data-theme='dark'] .dashboard-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

:root[data-theme='dark'] .order-type-cn .bar-c {
    background-color: #444444 !important;
}

:root[data-theme='dark'] .order-type-cn .bar-c .inner-bar-c {
    background-color: var(--color-primary) !important;
}

/* :root[data-theme='dark'] h1,
:root[data-theme='dark'] h2,
:root[data-theme='dark'] h3,
:root[data-theme='dark'] h4{
    background-color: var(--color-white);

}
 */
/* Unified Dark Mode Element Overrides */

/* :root[data-theme-style='dark'] .register-page-content,
:root[data-theme-style='dark'] .admin-login-page-content,
:root[data-theme-style='dark'] .login-page-content {
    background-color: var(--color-white);
} */

:root[data-theme-style='dark'] table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

:root[data-theme-style='dark'] thead tr th {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

:root[data-theme-style='dark'] tbody tr:nth-child(even),
:root[data-theme-style='dark'] .table_body_con .table_child:nth-of-type(even) {
    background-color: #2b2b2b !important;
}

:root[data-theme-style='dark'] tbody tr:nth-child(odd) {
    background-color: #1e1e1e !important;
}

:root[data-theme-style='dark'] td,
:root[data-theme-style='dark'] th {
    border-color: #444444 !important;
    color: #e0e0e0 !important;
}

:root[data-theme-style='dark'] strong {
    color: var(--color-black);
}

:root[data-theme-style='dark'] input,
:root[data-theme-style='dark'] select,
:root[data-theme-style='dark'] textarea {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
    box-shadow: unset !important;
}

:root[data-theme-style='dark'] .card,
:root[data-theme-style='dark'] .dashboard-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

:root[data-theme-style='dark'] .order-type-cn .bar-c {
    background-color: #444444 !important;
}

:root[data-theme-style='dark'] .order-type-cn .bar-c .inner-bar-c {
    background-color: var(--color-primary) !important;
}

:root[data-theme-style='dark'] h1,
:root[data-theme-style='dark'] h2,
:root[data-theme-style='dark'] h3,
:root[data-theme-style='dark'] h4,
:root[data-theme-style='dark'] h5,
:root[data-theme-style='dark'] h6 {
    color: var(--color-main-heading);
}

:root[data-theme-style='dark'] .banner-item-header {
    background: #333333;
    color: var(--color-white);
}

:root[data-theme-style='dark'] .banner-item-wrapper {
    border-color: #444444;
}

:root[data-theme-style='dark'] .b-heading h3 {
    color: #ffffff;
}

:root[data-theme-style='dark'] label,
:root[data-theme-style='dark'] p {
    color: var(--color-sub-or-p-heading);
}

:root[data-theme-style='dark'] span {
    color: var(--font-dark);
}

:root[data-theme-style='dark'] .booking-system span.active,
:root[data-theme-style='dark'] .booking-system span:hover {
    background-color: #ffffff !important;
    color: #000 !important;
}

:root[data-theme-style='dark'] .pr-price span {
    color: var(--color-primary);
}

:root[data-theme-style='dark'] .primary-button,
:root[data-theme-style='dark'] .primary-button span,
:root[data-theme-style='dark'] .primary-button p,
:root[data-theme-style='dark'] .primary-button .icon-cn,
:root[data-theme-style='dark'] .primary-button .icon_svg,
:root[data-theme-style='dark'] .primary-button .edit_icon,
:root[data-theme-style='dark'] .primary-button i,
:root[data-theme-style='dark'] .primary-button svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

:root[data-theme-style='dark'] .secondary-button,
:root[data-theme-style='dark'] .secondary-button span,
:root[data-theme-style='dark'] .secondary-dark-button,
:root[data-theme-style='dark'] .secondary-dark-button span,
:root[data-theme-style='dark'] .secondary-button .icon-cn,
:root[data-theme-style='dark'] .secondary-dark-button .icon-cn {
    color: #ffffff !important;
}

:root[data-theme-style='dark'] .normal-button,
:root[data-theme-style='dark'] .normal-button.with-border {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #444444;
}

:root[data-theme-style='dark'] table button,
:root[data-theme-style='dark'] .table_body_con button,
:root[data-theme-style='dark'] .table-card button {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

:root[data-theme-style='dark'] table button:hover,
:root[data-theme-style='dark'] .table_body_con button:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

:root[data-theme-style='dark'] input::placeholder {
    color: #888888 !important;
}

:root[data-theme-style='dark'] .add-product-content .category-tabs .categories-tab-header button,
:root[data-theme-style='dark'] .signup-benefit-section-cn .benefits-section .ben-heading h3,
:root[data-theme-style='dark'] .signup-benefit-section-cn .benefits-section .section-first .ben-heading h3,
:root[data-theme-style='dark'] .signup-benefit-section-cn .benefits-section .section-second .ben-heading h3 {
    color: var(--color-black);
}

:root[data-theme-style='dark'] .barArea .bar {
    background-color: var(--color-main-heading);
}

:root[data-theme-style='dark'] .button {
    color: var(--color-black);
}