[x-cloak] {
    display: none !important;
}
        /* =========================================================
           GLOBAL
        ========================================================= */

        * {
            box-sizing: border-box;
        }

        


        html {
            scroll-behavior: smooth;
        }


        html,
        body {

            font-family: 'DM Sans', sans-serif;

            min-height: 100%;

        }


        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {

            font-family: 'PT Sans', sans-serif;

        }


        body {

            margin: 0;

            transition:
                background-color .35s ease,
                color .35s ease;

            background:

                radial-gradient(
                    circle at 10% 10%,
                    rgba(229, 152, 5, .20),
                    transparent 28%
                ),

                radial-gradient(
                    circle at 90% 20%,
                    rgba(255, 181, 46, .14),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 50% 100%,
                    rgba(229, 152, 5, .12),
                    transparent 35%
                ),

                #f4f4f5;

        }


        body::before {

            content: '';

            position: fixed;

            inset: 0;

            pointer-events: none;

            z-index: -1;

            background:

                linear-gradient(
                    135deg,
                    rgba(255,255,255,.35),
                    transparent 35%,
                    rgba(229,152,5,.04)
                );

        }


        .dark body,
        body.dark {

            background:

                radial-gradient(
                    circle at 10% 10%,
                    rgba(229, 152, 5, .14),
                    transparent 28%
                ),

                radial-gradient(
                    circle at 90% 20%,
                    rgba(255, 181, 46, .08),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 50% 100%,
                    rgba(229, 152, 5, .08),
                    transparent 35%
                ),

                #09090b;

        }



        /* =========================================================
           SCROLLBAR
        ========================================================= */

        ::-webkit-scrollbar {

            width: 6px;

        }


        ::-webkit-scrollbar-track {

            background: transparent;

        }


        ::-webkit-scrollbar-thumb {

            background: #E59805;

            border-radius: 99px;

        }


        ::-webkit-scrollbar-thumb:hover {

            background: #c97f00;

        }



        /* =========================================================
           GLASS EFFECT
        ========================================================= */

        .glass {

            background:

                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.52),
                    rgba(255, 255, 255, 0.22)
                );

            backdrop-filter:
                blur(25px)
                saturate(150%);

            -webkit-backdrop-filter:
                blur(25px)
                saturate(150%);

            border:
                1px solid
                rgba(255, 255, 255, 0.62);

            box-shadow:

                0 20px 50px
                rgba(24, 24, 27, 0.08),

                0 4px 12px
                rgba(24, 24, 27, 0.04),

                inset 0 1px 0
                rgba(255,255,255,.55);

            transition:

                transform .3s ease,

                box-shadow .3s ease,

                border-color .3s ease,

                background-color .3s ease;

        }


        .glass:hover {

            box-shadow:

                0 25px 65px
                rgba(24, 24, 27, 0.11),

                0 6px 16px
                rgba(24, 24, 27, 0.05),

                inset 0 1px 0
                rgba(255,255,255,.62);

        }


        .dark .glass {

            background:

                linear-gradient(
                    135deg,
                    rgba(39, 39, 42, 0.56),
                    rgba(24, 24, 27, 0.30)
                );

            backdrop-filter:
                blur(25px)
                saturate(140%);

            -webkit-backdrop-filter:
                blur(25px)
                saturate(140%);

            border-color:
                rgba(255, 255, 255, 0.11);

            box-shadow:

                0 20px 55px
                rgba(0, 0, 0, 0.30),

                0 4px 15px
                rgba(0, 0, 0, 0.18),

                inset 0 1px 0
                rgba(255,255,255,.06);

        }



        /* =========================================================
           BOOKING INPUT
        ========================================================= */

        .booking-input {

            width: 100%;

            padding: 13px 15px 13px 44px;

            border-radius: 13px;

            background:
                rgba(255, 255, 255, 0.38);

            border:
                1px solid
                rgba(255, 255, 255, 0.55);

            color: #18181b;

            outline: none;

            box-shadow:

                0 5px 20px
                rgba(24, 24, 27, 0.035),

                inset 0 1px 0
                rgba(255,255,255,.4);

            transition:

                border-color .2s ease,

                box-shadow .2s ease,

                background-color .2s ease,

                transform .2s ease;

        }


        .booking-input:hover {

            background:
                rgba(255, 255, 255, 0.58);

            border-color:
                rgba(229, 152, 5, 0.40);

            box-shadow:

                0 7px 22px
                rgba(24, 24, 27, 0.05);

        }


        .booking-input:focus {

            border-color:
                #E59805;

            background:
                rgba(255, 255, 255, 0.68);

            box-shadow:

                0 0 0 4px
                rgba(229, 152, 5, 0.10),

                0 8px 25px
                rgba(229, 152, 5, 0.10);

            transform:
                translateY(-1px);

        }


        .dark .booking-input {

            background:
                rgba(39, 39, 42, 0.42);

            border-color:
                rgba(255, 255, 255, .10);

            color: white;

            box-shadow:

                0 5px 20px
                rgba(0,0,0,.12),

                inset 0 1px 0
                rgba(255,255,255,.03);

        }


        .dark .booking-input:hover {

            background:
                rgba(39, 39, 42, 0.60);

            border-color:
                rgba(229, 152, 5, 0.45);

        }


        .dark .booking-input:focus {

            background:
                rgba(39, 39, 42, 0.70);

            border-color:
                #E59805;

            box-shadow:

                0 0 0 4px
                rgba(229, 152, 5, 0.12),

                0 8px 25px
                rgba(0, 0, 0, 0.25);

        }


        .dark .booking-input::placeholder {

            color: #71717a;

        }

/* =========================================================
   GLASS BUTTON
========================================================= */

.glass-button{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.70);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:
    0 8px 25px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.dark .glass-button{
  background:rgba(39,39,42,.45);
  border:1px solid rgba(255,255,255,.10);
}


        /* =========================================================
           BUTTON
        ========================================================= */

        .book-btn {

            position: relative;

            overflow: hidden;

            transition:

                transform .25s ease,

                box-shadow .25s ease,

                background-color .25s ease;

        }


        .book-btn::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 60%;

            height: 100%;

            background:

                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.35),
                    transparent
                );

            transform:
                skewX(-20deg);

            transition:
                left .6s ease;

        }


        .book-btn:hover::before {

            left: 140%;

        }


        .book-btn:hover {

            transform:
                translateY(-2px);

            box-shadow:

                0 14px 30px
                rgba(229, 152, 5, .25),

                0 4px 10px
                rgba(229, 152, 5, .12);

            background-color:
                #f0a00a;

        }


        .book-btn:active {

            transform:
                translateY(0)
                scale(.99);

            box-shadow:

                0 6px 15px
                rgba(229, 152, 5, .18);

        }



        /* =========================================================
           NAVIGATION
        ========================================================= */

        header {

            transition:

                background-color .3s ease,

                box-shadow .3s ease;

            background:
                rgba(255,255,255,.38) !important;

            backdrop-filter:
                blur(24px)
                saturate(150%);

            -webkit-backdrop-filter:
                blur(24px)
                saturate(150%);

            border-color:
                rgba(255,255,255,.45) !important;

            box-shadow:

                0 8px 30px
                rgba(24,24,27,.05),

                inset 0 1px 0
                rgba(255,255,255,.45);

        }


        header:hover {

            box-shadow:

                0 8px 30px
                rgba(24, 24, 27, .08),

                inset 0 1px 0
                rgba(255,255,255,.55);

        }


        .dark header {

            background:
                rgba(9,9,11,.45) !important;

            border-color:
                rgba(255,255,255,.08) !important;

            box-shadow:

                0 8px 30px
                rgba(0,0,0,.22),

                inset 0 1px 0
                rgba(255,255,255,.04);

        }



        /* =========================================================
           FADE UP
        ========================================================= */

        .fade-up {

            animation:
                fadeUp .6s
                cubic-bezier(.22, 1, .36, 1)
                both;

        }


        @keyframes fadeUp {

            from {

                opacity: 0;

                transform:
                    translateY(20px);

            }

            to {

                opacity: 1;

                transform:
                    translateY(0);

            }

        }



        /* =========================================================
           SEARCH ICON
        ========================================================= */

        .input-icon {

            position: absolute;

            left: 16px;

            top: 50%;

            transform:
                translateY(-50%);

            color:
                #71717a;

            pointer-events:
                none;

            transition:
                color .2s ease;

        }


        .input-group:focus-within
        .input-icon {

            color:
                #E59805;

        }



        /* =========================================================
           ERROR
        ========================================================= */

        .search-error {

            background:
                rgba(239,68,68,.08);

            border:
                1px solid
                rgba(239,68,68,.20);

            color:
                #dc2626;

        }


        .dark .search-error {

            background:
                rgba(239,68,68,.10);

            border-color:
                rgba(239,68,68,.22);

            color:
                #fca5a5;

        }



        /* =========================================================
           BOOKING DETAILS
        ========================================================= */

        .detail-box {

            background:
                rgba(255,255,255,.32);

            border:
                1px solid
                rgba(255,255,255,.50);

            transition:
                background-color .25s ease,
                border-color .25s ease,
                transform .25s ease;

        }


        .detail-box:hover {

            background:
                rgba(255,255,255,.50);

            border-color:
                rgba(229,152,5,.25);

            transform:
                translateY(-1px);

        }


        .dark .detail-box {

            background:
                rgba(39,39,42,.38);

            border-color:
                rgba(255,255,255,.08);

        }


        .dark .detail-box:hover {

            background:
                rgba(39,39,42,.55);

            border-color:
                rgba(229,152,5,.30);

        }



        /* =========================================================
           STATUS
        ========================================================= */

        .status {

            display:
                inline-flex;

            align-items:
                center;

            gap: 7px;

            padding:
                7px 12px;

            border-radius:
                999px;

            font-size:
                12px;

            font-weight:
                700;

        }


        .status-confirmed {

            background:
                rgba(34,197,94,.10);

            color:
                #15803d;

            border:
                1px solid
                rgba(34,197,94,.16);

        }


        .dark .status-confirmed {

            background:
                rgba(34,197,94,.12);

            color:
                #86efac;

        }


        .status-pending {

            background:
                rgba(234,179,8,.10);

            color:
                #a16207;

            border:
                1px solid
                rgba(234,179,8,.16);

        }


        .dark .status-pending {

            background:
                rgba(234,179,8,.12);

            color:
                #fde68a;

        }


        .status-cancelled {

            background:
                rgba(239,68,68,.10);

            color:
                #dc2626;

            border:
                1px solid
                rgba(239,68,68,.16);

        }


        .dark .status-cancelled {

            background:
                rgba(239,68,68,.12);

            color:
                #fca5a5;

        }



        /* =========================================================
           ACTION BUTTON
        ========================================================= */

        .manage-action {

            transition:

                transform .25s ease,

                box-shadow .25s ease,

                border-color .25s ease,

                background-color .25s ease;

        }


        .manage-action:hover {

            transform:
                translateY(-2px);

        }


        .reschedule-btn:hover {

            border-color:
                rgba(229,152,5,.45);

            background:
                rgba(229,152,5,.08);

        }


        .cancel-btn:hover {

            border-color:
                rgba(239,68,68,.35);

            background:
                rgba(239,68,68,.06);

        }



        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 640px) {

            .glass {

                border-radius:
                    22px;

                box-shadow:

                    0 12px 30px
                    rgba(24, 24, 27, .07),

                    inset 0 1px 0
                    rgba(255,255,255,.45);

            }


            main {

                padding-bottom:
                    30px;

            }


            .booking-input {

                padding:
                    12px 14px 12px 42px;

                font-size:
                    14px;

            }

        }


        /* =========================================================
           SMALL PHONE
        ========================================================= */

        @media (max-width: 400px) {

            main .page-container {

                padding-left:
                    16px;

                padding-right:
                    16px;

            }


            .glass {

                border-radius:
                    19px;

            }

        }