:root {
    --app-black: #111111;
    --app-black-soft: #181818;
    --app-dark: #242424;
    --app-dark-light: #333333;

    --app-cream: #f4ebdd;
    --app-cream-light: #fff9f0;
    --app-cream-dark: #e7d9c3;

    --app-accent: #c9a66b;
    --app-accent-dark: #a9854e;

    --app-white: #ffffff;
    --app-text: #202020;
    --app-muted: #77716a;
    --app-border: #e7ded2;

    --app-danger: #c74848;
    --app-success: #2e8b57;
    --app-warning: #d39228;

    --app-radius-sm: 12px;
    --app-radius: 18px;
    --app-radius-lg: 26px;

    --app-shadow:
        0 14px 35px rgba(17, 17, 17, 0.08);

    --app-header-height: 72px;
    --app-bottom-nav-height: 76px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--app-cream-light);
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            var(--app-cream-light) 0%,
            #f9f2e8 100%
        );
    color: var(--app-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    touch-action: manipulation;
}

img {
    max-width: 100%;
}

.app-wrapper {
    width: 100%;
    min-height: 100vh;
}

.app-container {
    width: min(100%, 1240px);
    padding-left: 18px;
    padding-right: 18px;
}

/* =====================================================
   HEADER
===================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--app-header-height);
    background: rgba(17, 17, 17, 0.97);
    border-bottom: 1px solid rgba(244, 235, 221, 0.1);
    backdrop-filter: blur(16px);
}

.app-header-inner {
    min-height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-left {
    min-width: 0;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--app-cream);
}

.brand-logo:hover {
    color: var(--app-cream);
}

.brand-logo-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--app-cream);
    color: var(--app-black);
    font-size: 21px;
}

.brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.brand-text strong {
    overflow: hidden;
    color: var(--app-cream);
    font-size: 17px;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.brand-text small {
    margin-top: 4px;
    color: rgba(244, 235, 221, 0.65);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
}

.desktop-navigation a {
    position: relative;
    padding: 27px 0 23px;
    color: rgba(244, 235, 221, 0.7);
    font-size: 14px;
    font-weight: 600;
}

.desktop-navigation a::after {
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    width: 0;
    height: 2px;
    margin: auto;
    content: "";
    background: var(--app-accent);
    transition: width 0.2s ease;
}

.desktop-navigation a:hover,
.desktop-navigation a.active {
    color: var(--app-cream);
}

.desktop-navigation a:hover::after,
.desktop-navigation a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-profile-btn,
.header-icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 235, 221, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--app-cream);
    font-size: 20px;
}

.header-icon-btn {
    padding: 0;
    cursor: pointer;
}

.header-profile-btn:hover,
.header-icon-btn:hover {
    background: var(--app-cream);
    color: var(--app-black);
}

/* =====================================================
   MAIN CONTENT
===================================================== */

.app-main {
    min-height: calc(100vh - var(--app-header-height));
}

.page-section {
    padding: 34px 0;
}

.page-section-sm {
    padding: 22px 0;
}

.page-heading {
    margin-bottom: 24px;
}

.page-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--app-accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-heading h1,
.page-heading h2 {
    margin: 0;
    color: var(--app-black);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.page-heading h1 {
    font-size: clamp(27px, 5vw, 48px);
}

.page-heading h2 {
    font-size: clamp(23px, 4vw, 36px);
}

.page-heading p {
    max-width: 650px;
    margin: 10px 0 0;
    color: var(--app-muted);
    line-height: 1.7;
}

/* =====================================================
   CARDS
===================================================== */

.app-card {
    padding: 22px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--app-shadow);
}

.app-card-dark {
    border-color: var(--app-dark-light);
    background: var(--app-dark);
    color: var(--app-cream);
}

.app-card-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 750;
}

.app-card-text {
    margin: 0;
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-app-primary,
.btn-app-secondary,
.btn-app-outline {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    transition:
        transform 0.18s ease,
        background 0.18s ease;
}

.btn-app-primary {
    border: 1px solid var(--app-black);
    background: var(--app-black);
    color: var(--app-cream);
}

.btn-app-primary:hover {
    background: var(--app-dark-light);
    color: var(--app-cream);
    transform: translateY(-1px);
}

.btn-app-secondary {
    border: 1px solid var(--app-accent);
    background: var(--app-accent);
    color: var(--app-black);
}

.btn-app-secondary:hover {
    background: var(--app-accent-dark);
    border-color: var(--app-accent-dark);
    color: var(--app-black);
}

.btn-app-outline {
    border: 1px solid var(--app-dark);
    background: transparent;
    color: var(--app-dark);
}

.btn-app-outline:hover {
    background: var(--app-dark);
    color: var(--app-cream);
}

/* =====================================================
   FORMS
===================================================== */

.app-form-label {
    margin-bottom: 7px;
    color: var(--app-dark);
    font-size: 13px;
    font-weight: 700;
}

.app-form-control,
.app-form-select {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    outline: none;
    background: var(--app-white);
    color: var(--app-text);
    box-shadow: none;
}

textarea.app-form-control {
    min-height: 110px;
    resize: vertical;
}

.app-form-control:focus,
.app-form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(201, 166, 107, 0.16);
}

/* =====================================================
   HOME HERO
===================================================== */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 40px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(201, 166, 107, 0.24),
            transparent 34%
        ),
        var(--app-black);
    color: var(--app-cream);
}

.home-hero::after {
    position: absolute;
    right: -60px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    content: "";
    border: 1px solid rgba(244, 235, 221, 0.11);
    border-radius: 50%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(244, 235, 221, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 700;
}

.home-hero h1 {
    max-width: 670px;
    margin: 0;
    font-size: clamp(34px, 7vw, 66px);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.home-hero h1 em {
    color: var(--app-accent);
    font-family: Georgia, serif;
    font-weight: 400;
}

.home-hero p {
    max-width: 590px;
    margin: 18px 0 0;
    color: rgba(244, 235, 221, 0.68);
    font-size: 16px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-actions .btn-app-primary {
    background: var(--app-cream);
    color: var(--app-black);
}

.hero-actions .btn-app-outline {
    border-color: rgba(244, 235, 221, 0.28);
    color: var(--app-cream);
}

.hero-actions .btn-app-outline:hover {
    background: var(--app-cream);
    color: var(--app-black);
}

/* =====================================================
   SERVICE CARD
===================================================== */

.service-card {
    height: 100%;
    padding: 18px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-white);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--app-shadow);
}

.service-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 16px;
    background: var(--app-cream);
    color: var(--app-black);
    font-size: 23px;
}

.service-card h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 750;
}

.service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    color: var(--app-muted);
    font-size: 13px;
}

.service-price {
    color: var(--app-black);
    font-size: 16px;
    font-weight: 800;
}

/* =====================================================
   FOOTER
===================================================== */

.desktop-footer {
    padding: 50px 0 20px;
    background: var(--app-black);
    color: var(--app-cream);
}

.desktop-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-brand > span:last-child {
    display: flex;
    flex-direction: column;
}

.footer-brand strong {
    font-size: 17px;
}

.footer-brand small {
    margin-top: 5px;
    color: rgba(244, 235, 221, 0.58);
}

.desktop-footer h6 {
    margin-bottom: 16px;
    color: var(--app-accent);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-footer a:not(.footer-brand),
.desktop-footer p {
    display: block;
    margin: 0 0 10px;
    color: rgba(244, 235, 221, 0.67);
    font-size: 14px;
}

.desktop-footer a:hover {
    color: var(--app-cream);
}

.desktop-footer-bottom {
    margin-top: 35px;
    padding-top: 18px;
    border-top: 1px solid rgba(244, 235, 221, 0.1);
    color: rgba(244, 235, 221, 0.45);
    font-size: 12px;
}

/* =====================================================
   MOBILE BOTTOM NAVIGATION
===================================================== */

.mobile-bottom-navigation {
    display: none;
}

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

@media (max-width: 991.98px) {
    .desktop-navigation {
        display: none;
    }

    .desktop-footer {
        display: none;
    }

    body {
        padding-bottom:
            calc(
                var(--app-bottom-nav-height) +
                env(safe-area-inset-bottom)
            );
    }

   @media (max-width: 991.98px) {

    .mobile-bottom-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;

        width: 100%;
        height:
            calc(
                var(--app-bottom-nav-height) +
                env(safe-area-inset-bottom)
            );

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;

        padding:
            7px 8px
            calc(7px + env(safe-area-inset-bottom));

        border-top: 1px solid rgba(244, 235, 221, 0.1);
        background: rgba(17, 17, 17, 0.98);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(18px);
    }

    .mobile-bottom-navigation > a {
        width: 100%;
        min-width: 0;
        height: 100%;

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

        gap: 5px;
        margin: 0;
        padding: 5px 3px;

        border-radius: 12px;
        color: rgba(244, 235, 221, 0.58);
        font-size: 9px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

    .mobile-bottom-navigation > a > i {
        margin: 0;
        font-size: 20px;
        line-height: 1;
    }

    .mobile-bottom-navigation > a > span:last-child {
        width: 100%;
        display: block;
        margin: 0;
        color: inherit;
        font-size: 9px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .mobile-bottom-navigation > a.active {
        background: rgba(244, 235, 221, 0.08);
        color: var(--app-accent);
    }

    /*
     * पुराने floating Book button को normal menu item बनाएँ।
     */
    .mobile-bottom-navigation .bottom-book-button {
        position: static;
        transform: none;
    }

    .mobile-bottom-navigation .bottom-book-icon {
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        box-shadow: none;
    }

    .mobile-bottom-navigation .bottom-book-icon i {
        margin: 0;
        font-size: 20px;
        line-height: 1;
    }

    .mobile-bottom-navigation .bottom-book-button span:last-child {
        color: inherit;
    }
}

    .mobile-bottom-navigation .bottom-book-button i {
        font-size: 22px;
    }

    .mobile-bottom-navigation .bottom-book-button span:last-child {
        color: var(--app-cream);
    }

    .page-section {
        padding: 25px 0;
    }

    .app-card {
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --app-header-height: 66px;
    }

    .app-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .brand-logo-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 13px;
        font-size: 18px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text small {
        font-size: 8px;
    }

    .header-profile-btn,
    .header-icon-btn {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }

    .home-hero {
        padding: 40px 0 32px;
    }

    .home-hero p {
        font-size: 14px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions a {
        width: 100%;
    }

    .service-card {
        padding: 16px;
    }
}
/* =====================================================
   ADMIN LOGIN
===================================================== */

.admin-login-page .app-header {
    position: absolute;
    right: 0;
    left: 0;
    background: transparent;
    border-bottom: 0;
}

.admin-login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 0 50px;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(201, 166, 107, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(244, 235, 221, 0.08),
            transparent 30%
        ),
        var(--app-black);
}

.admin-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 450px);
    align-items: center;
    gap: 80px;
}

.admin-login-intro {
    color: var(--app-cream);
}

.admin-login-intro h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(42px, 6vw, 74px);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 1;
}

.admin-login-intro h1 em {
    display: block;
    color: var(--app-accent);
    font-family: Georgia, serif;
    font-weight: 400;
}

.admin-login-intro > p {
    max-width: 560px;
    margin: 22px 0 0;
    color: rgba(244, 235, 221, 0.65);
    line-height: 1.8;
}

.admin-login-features {
    display: grid;
    gap: 13px;
    margin-top: 30px;
}

.admin-login-features > div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(244, 235, 221, 0.82);
}

.admin-login-features i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(244, 235, 221, 0.08);
    color: var(--app-accent);
}

.admin-login-card {
    padding: 32px;
    border: 1px solid rgba(244, 235, 221, 0.12);
    border-radius: 28px;
    background: var(--app-cream-light);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.admin-login-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.admin-login-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 24px;
}

.admin-login-card-header h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
}

.admin-login-card-header p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 13px;
}

.app-input-group {
    position: relative;
}

.app-input-group > span {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    color: var(--app-muted);
    transform: translateY(-50%);
}

.app-input-group .app-form-control {
    padding-left: 46px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--app-muted);
    transform: translateY(-50%);
}

.admin-login-demo {
    display: grid;
    gap: 4px;
    margin-top: 22px;
    padding: 14px;
    border-radius: 14px;
    background: var(--app-cream);
    color: var(--app-muted);
    font-size: 12px;
}

.admin-login-demo strong {
    color: var(--app-black);
}

.app-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    font-size: 14px;
}

/* =====================================================
   ADMIN LAYOUT
===================================================== */

.admin-body {
    min-height: 100vh;
    padding: 0;
    background: #f5efe6;
}

.admin-layout {
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: 270px;
    display: flex;
    flex-direction: column;
    background: var(--app-black);
    color: var(--app-cream);
}

.admin-sidebar-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid rgba(244, 235, 221, 0.1);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-brand > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-brand strong {
    color: var(--app-cream);
    font-size: 15px;
}

.admin-brand small {
    margin-top: 4px;
    color: rgba(244, 235, 221, 0.5);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar-close {
    display: none;
    border: 0;
    background: transparent;
    color: var(--app-cream);
    font-size: 21px;
}

.admin-navigation {
    flex: 1;
    overflow-y: auto;
    padding: 17px 14px;
}

.admin-nav-label {
    display: block;
    margin: 18px 12px 8px;
    color: rgba(244, 235, 221, 0.35);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-navigation a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    padding: 12px 13px;
    border-radius: 13px;
    color: rgba(244, 235, 221, 0.62);
    font-size: 13px;
    font-weight: 600;
}

.admin-navigation a i {
    width: 21px;
    font-size: 18px;
}

.admin-navigation a:hover,
.admin-navigation a.active {
    background: var(--app-cream);
    color: var(--app-black);
}

.admin-sidebar-footer {
    padding: 14px;
    border-top: 1px solid rgba(244, 235, 221, 0.1);
}

.admin-user-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.admin-user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--app-accent);
    color: var(--app-black);
    font-size: 14px;
    font-weight: 800;
}

.admin-user-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-user-card strong {
    overflow: hidden;
    color: var(--app-cream);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-user-card small {
    color: rgba(244, 235, 221, 0.45);
    font-size: 10px;
}

.admin-user-card > a {
    color: rgba(244, 235, 221, 0.5);
}

.admin-content-wrapper {
    min-height: 100vh;
    margin-left: 270px;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 249, 240, 0.92);
    backdrop-filter: blur(18px);
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-menu-toggle {
    width: 43px;
    height: 43px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: var(--app-white);
    font-size: 23px;
}

.admin-topbar-label {
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.admin-topbar h1 {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 800;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-topbar-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: var(--app-white);
    color: var(--app-dark);
}

.admin-profile-dropdown {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 11px 4px 4px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-white);
}

.admin-profile-name {
    max-width: 130px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-dropdown-menu {
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    box-shadow: var(--app-shadow);
}

.admin-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 13px;
}

.admin-main-content {
    padding: 27px;
}

.admin-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
    padding: 27px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(201, 166, 107, 0.28),
            transparent 32%
        ),
        var(--app-black);
    color: var(--app-cream);
}

.admin-welcome-label {
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-welcome-card h2 {
    margin: 6px 0 7px;
    font-size: 26px;
    font-weight: 800;
}

.admin-welcome-card p {
    margin: 0;
    color: rgba(244, 235, 221, 0.58);
    font-size: 13px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-white);
}

.admin-stat-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--app-cream);
    color: var(--app-black);
    font-size: 22px;
}

.admin-stat-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-stat-card span {
    color: var(--app-muted);
    font-size: 11px;
}

.admin-stat-card strong {
    margin-top: 4px;
    color: var(--app-black);
    font-size: 23px;
    font-weight: 850;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.75fr);
    gap: 18px;
}

.admin-side-panels {
    display: grid;
    align-content: start;
    gap: 18px;
}

.admin-panel {
    padding: 21px;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    background: var(--app-white);
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.admin-panel-label {
    display: block;
    margin-bottom: 4px;
    color: var(--app-accent-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-panel-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.admin-panel-header > a {
    color: var(--app-accent-dark);
    font-size: 12px;
    font-weight: 700;
}

.admin-big-number {
    margin: 8px 0;
    font-size: 52px;
    font-weight: 850;
    line-height: 1;
}

.admin-panel-description {
    margin-bottom: 18px;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.6;
}

.admin-table-responsive {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    padding: 12px;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.admin-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #f1ebe3;
    font-size: 12px;
    vertical-align: middle;
}

.admin-table td strong,
.admin-table td small {
    display: block;
}

.admin-table td small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 10px;
}

.booking-status-badge {
    display: inline-flex;
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--app-cream);
    color: var(--app-dark);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.status-completed {
    background: #e4f7eb;
    color: #237644;
}

.status-confirmed {
    background: #e5efff;
    color: #285ba2;
}

.status-pending_payment,
.status-payment_verification {
    background: #fff1d8;
    color: #9a6812;
}

.status-cancelled_by_customer,
.status-cancelled_by_owner,
.status-late_cancelled,
.status-no_show {
    background: #fde8e8;
    color: #a53636;
}

.admin-empty-state {
    padding: 55px 20px;
    text-align: center;
}

.admin-empty-state > span {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 20px;
    background: var(--app-cream);
    font-size: 28px;
}

.admin-empty-state h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.admin-empty-state p {
    margin: 8px 0 0;
    color: var(--app-muted);
    font-size: 12px;
}

.admin-quick-links {
    display: grid;
    gap: 8px;
}

.admin-quick-links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
    background: var(--app-cream-light);
    font-size: 12px;
    font-weight: 700;
}

.admin-quick-links a:hover {
    background: var(--app-cream);
}

.admin-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 28px;
    color: var(--app-muted);
    font-size: 10px;
}

.admin-sidebar-overlay {
    display: none;
}

/* =====================================================
   ADMIN RESPONSIVE
===================================================== */

@media (max-width: 1199.98px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-side-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-login-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .admin-login-intro {
        text-align: center;
    }

    .admin-login-intro h1,
    .admin-login-intro > p {
        margin-right: auto;
        margin-left: auto;
    }

    .admin-login-features {
        max-width: 420px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .admin-sidebar {
        visibility: hidden;
        transform: translateX(-100%);
        transition:
            transform 0.22s ease,
            visibility 0.22s ease;
    }

    .admin-sidebar.show {
        visibility: visible;
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: inline-flex;
    }

    .admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.55);
    }

    .admin-sidebar-overlay.show {
        display: block;
    }

    .admin-sidebar-open {
        overflow: hidden;
    }

    .admin-content-wrapper {
        margin-left: 0;
    }

    .admin-menu-toggle {
        display: inline-flex;
    }
}

@media (max-width: 767.98px) {
    .admin-login-section {
        align-items: flex-start;
        padding-top: 95px;
    }

    .admin-login-intro h1 {
        font-size: 40px;
    }

    .admin-login-card {
        padding: 22px;
    }

    .admin-topbar {
        min-height: 70px;
        padding: 11px 15px;
    }

    .admin-topbar h1 {
        font-size: 17px;
    }

    .admin-topbar-label,
    .admin-profile-name,
    .admin-topbar-button {
        display: none;
    }

    .admin-main-content {
        padding: 15px;
    }

    .admin-welcome-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 21px;
    }

    .admin-welcome-card h2 {
        font-size: 21px;
    }

    .admin-welcome-card .btn-app-secondary {
        width: 100%;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .admin-stat-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .admin-stat-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 18px;
    }

    .admin-stat-card strong {
        font-size: 18px;
    }

    .admin-side-panels {
        grid-template-columns: 1fr;
    }

    .admin-bookings-panel {
        padding: 16px;
    }

    .admin-table {
        min-width: 700px;
    }

    .admin-footer {
        padding: 18px 15px;
    }
}
/* =====================================================
   ADMIN SERVICES
===================================================== */

.admin-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
}

.admin-page-heading h2 {
    margin: 3px 0 6px;
    color: var(--app-black);
    font-size: 27px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.admin-page-heading p {
    margin: 0;
    color: var(--app-muted);
    font-size: 13px;
}

.admin-record-count {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--app-cream);
    color: var(--app-dark);
    font-size: 10px;
    font-weight: 750;
}

.service-table-name {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.service-table-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--app-cream);
    color: var(--app-black);
    font-size: 17px;
}

.service-advance-badge,
.service-for-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--app-cream);
    color: var(--app-dark);
    font-size: 9px;
    font-weight: 750;
}

.admin-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-action-btn {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-white);
    color: var(--app-dark);
    cursor: pointer;
}

.admin-action-btn:hover {
    background: var(--app-black);
    border-color: var(--app-black);
    color: var(--app-cream);
}

.admin-action-btn.danger {
    color: var(--app-danger);
}

.admin-action-btn.success {
    color: var(--app-success);
}

.admin-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 18px;
}

.admin-form-main {
    display: grid;
    gap: 18px;
}

.admin-form-sidebar {
    position: sticky;
    top: 105px;
    display: grid;
    gap: 18px;
}

.admin-form-help {
    display: block;
    margin-top: 7px;
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.5;
}

.app-input-prefix,
.app-input-suffix {
    position: relative;
}

.app-input-prefix > span,
.app-input-suffix > span {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-50%);
}

.app-input-prefix > span {
    left: 16px;
}

.app-input-prefix .app-form-control {
    padding-left: 38px;
}

.app-input-suffix > span {
    right: 15px;
}

.app-input-suffix .app-form-control {
    padding-right: 80px;
}

.service-preview-panel .service-card {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .admin-form-layout {
        grid-template-columns: 1fr;
    }

    .admin-form-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page-heading .btn-app-secondary,
    .admin-page-heading .btn-app-outline {
        width: 100%;
    }

    .service-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-admin-table {
        min-width: 900px;
    }

    .admin-form-sidebar {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   ADMIN BARBERS
===================================================== */

.barber-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.barber-admin-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    background: var(--app-cream-light);
}

.barber-admin-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 0;
}

.barber-avatar-large {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 24px;
    font-weight: 850;
}

.barber-card-content {
    padding: 16px 20px 20px;
}

.barber-card-content h3 {
    margin: 0;
    color: var(--app-black);
    font-size: 19px;
    font-weight: 850;
}

.barber-employee-code {
    display: block;
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.barber-contact-list {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.barber-contact-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 11px;
    text-overflow: ellipsis;
}

.barber-contact-list i {
    color: var(--app-accent-dark);
}

.barber-card-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.barber-card-details > div {
    min-width: 0;
    padding: 11px 8px;
    border-radius: 12px;
    background: var(--app-cream);
    text-align: center;
}

.barber-card-details span,
.barber-card-details strong {
    display: block;
}

.barber-card-details span {
    color: var(--app-muted);
    font-size: 9px;
}

.barber-card-details strong {
    overflow: hidden;
    margin-top: 4px;
    color: var(--app-black);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.barber-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--app-border);
    background: var(--app-white);
}

.barber-card-actions .btn-app-outline {
    min-height: 39px;
    flex: 1;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
}

.barber-service-selection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.barber-service-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-white);
    cursor: pointer;
}

.barber-service-option:hover {
    border-color: var(--app-accent);
}

.barber-service-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.barber-service-checkbox {
    width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 9px;
    background: var(--app-cream-light);
    color: transparent;
    font-size: 17px;
}

.barber-service-option > input:checked +
.barber-service-checkbox {
    border-color: var(--app-black);
    background: var(--app-black);
    color: var(--app-cream);
}

.barber-service-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.barber-service-info strong {
    color: var(--app-black);
    font-size: 12px;
}

.barber-service-info small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 9px;
}

.barber-login-info h3 {
    margin: 4px 0 8px;
    font-size: 17px;
    font-weight: 800;
}

.barber-login-info p {
    margin: 0;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .barber-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .barber-admin-grid {
        grid-template-columns: 1fr;
    }

    .barber-service-selection {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   ADMIN CHAIRS
===================================================== */

.chair-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.chair-admin-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 19px;
    background: var(--app-cream-light);
}

.chair-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 19px 19px 0;
}

.chair-number-icon {
    width: 55px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 20px;
    font-weight: 850;
}

.chair-number-icon.preview {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 17px;
}

.chair-card-body {
    padding: 17px 19px 20px;
}

.chair-card-body h3 {
    margin: 0;
    color: var(--app-black);
    font-size: 19px;
    font-weight: 850;
}

.chair-card-body > p {
    min-height: 39px;
    margin: 7px 0 17px;
    color: var(--app-muted);
    font-size: 11px;
    line-height: 1.6;
}

.chair-assignment-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 13px;
    border-radius: 14px;
    background: var(--app-cream);
}

.chair-barber-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--app-accent);
    color: var(--app-black);
    font-size: 15px;
    font-weight: 850;
}

.chair-barber-avatar.empty {
    background: var(--app-white);
    color: var(--app-muted);
}

.chair-assignment-box > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chair-assignment-box small {
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chair-assignment-box strong {
    overflow: hidden;
    margin-top: 2px;
    color: var(--app-black);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chair-assignment-box div > span {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.chair-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 19px;
    border-top: 1px solid var(--app-border);
    background: var(--app-white);
}

.chair-card-actions .btn-app-outline {
    min-height: 39px;
    flex: 1;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
}

.admin-form-narrow {
    max-width: 820px;
}

.admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
}

@media (max-width: 1199.98px) {
    .chair-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .chair-admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-form-actions .btn-app-outline,
    .admin-form-actions .btn-app-primary {
        width: 100%;
    }
}
/* =====================================================
   BARBER WEEKLY SCHEDULE
===================================================== */

.schedule-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.schedule-summary-name {
    overflow: hidden;
    font-size: 16px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.schedule-copy-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-small-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-white);
    color: var(--app-dark);
    font-size: 11px;
    font-weight: 700;
}

.admin-small-button:hover {
    border-color: var(--app-black);
    background: var(--app-black);
    color: var(--app-cream);
}

.weekly-schedule-list {
    display: grid;
    gap: 10px;
}

.weekly-schedule-row {
    display: grid;
    grid-template-columns:
        minmax(155px, 0.8fr)
        minmax(460px, 2fr)
        minmax(110px, 0.5fr);
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    transition:
        opacity 0.2s ease,
        background 0.2s ease;
}

.weekly-schedule-row.working {
    background: var(--app-white);
}

.weekly-schedule-row.closed {
    background: #f3eee7;
    opacity: 0.7;
}

.schedule-day-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-day-control > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.schedule-day-control strong {
    color: var(--app-black);
    font-size: 13px;
    font-weight: 800;
}

.schedule-day-control small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.schedule-switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.schedule-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.schedule-switch-track {
    position: relative;
    width: 43px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: #cfc7bc;
    transition: background 0.2s ease;
}

.schedule-switch-track span {
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 50%;
    background: var(--app-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.schedule-switch input:checked +
.schedule-switch-track {
    background: var(--app-black);
}

.schedule-switch input:checked +
.schedule-switch-track span {
    transform: translateX(19px);
}

.schedule-time-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(95px, 1fr));
    gap: 9px;
}

.schedule-time-fields > div {
    min-width: 0;
}

.schedule-time-fields label {
    display: block;
    margin-bottom: 5px;
    color: var(--app-muted);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.schedule-time-input {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    outline: none;
    background: var(--app-cream-light);
    color: var(--app-dark);
    font-size: 11px;
}

.schedule-time-input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.14);
}

.schedule-time-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.schedule-duration {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-self: end;
}

.schedule-duration > span {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--app-cream);
    color: var(--app-dark);
}

.schedule-duration > div {
    display: flex;
    flex-direction: column;
}

.schedule-duration small {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.schedule-duration strong {
    margin-top: 2px;
    color: var(--app-black);
    font-size: 11px;
}

.barber-card-actions .barber-schedule-button {
    background: var(--app-cream);
    border-color: var(--app-cream-dark);
}

@media (max-width: 1199.98px) {
    .schedule-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weekly-schedule-row {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .schedule-duration {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .schedule-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .schedule-copy-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-small-button {
        width: 100%;
    }

    .weekly-schedule-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .schedule-time-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-duration {
        grid-column: auto;
        justify-self: start;
    }

    .barber-card-actions {
        flex-wrap: wrap;
    }

    .barber-card-actions .btn-app-outline {
        min-width: calc(50% - 5px);
    }
}
/* =====================================================
   SHOP SETTINGS
===================================================== */

.settings-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.settings-navigation {
    position: sticky;
    top: 105px;
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 17px;
    background: var(--app-white);
}

.settings-nav-button {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.settings-nav-button i {
    width: 20px;
    font-size: 17px;
}

.settings-nav-button:hover,
.settings-nav-button.active {
    background: var(--app-black);
    color: var(--app-cream);
}

.settings-content {
    display: grid;
    gap: 18px;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
}

.settings-toggle-card {
    min-height: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-cream-light);
    cursor: pointer;
}

.settings-toggle-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-visual {
    position: relative;
    width: 44px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: #cfc7bd;
    transition: background 0.2s ease;
}

.settings-toggle-visual::after {
    width: 19px;
    height: 19px;
    content: "";
    border-radius: 50%;
    background: var(--app-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.17);
    transition: transform 0.2s ease;
}

.settings-toggle-card > input:checked +
.settings-toggle-visual {
    background: var(--app-black);
}

.settings-toggle-card > input:checked +
.settings-toggle-visual::after {
    transform: translateX(19px);
}

.settings-toggle-card > span:last-child {
    display: flex;
    flex-direction: column;
}

.settings-toggle-card strong {
    color: var(--app-black);
    font-size: 12px;
}

.settings-toggle-card small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 9px;
    line-height: 1.5;
}

.settings-toggle-card.danger >
input:checked +
.settings-toggle-visual {
    background: var(--app-danger);
}

.late-policy-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #ead5ad;
    border-radius: 14px;
    background: #fff5df;
}

.late-policy-preview > span {
    color: var(--app-warning);
    font-size: 19px;
}

.late-policy-preview p {
    margin: 0;
    color: #75551c;
    font-size: 11px;
    line-height: 1.7;
}

.settings-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 17px;
    border: 1px solid rgba(244, 235, 221, 0.12);
    border-radius: 17px;
    background: rgba(17, 17, 17, 0.96);
    color: var(--app-cream);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(15px);
}

.settings-save-bar > div {
    display: flex;
    flex-direction: column;
}

.settings-save-bar strong {
    font-size: 12px;
}

.settings-save-bar small {
    margin-top: 3px;
    color: rgba(244, 235, 221, 0.5);
    font-size: 9px;
}

.settings-save-bar .btn-app-primary {
    border-color: var(--app-cream);
    background: var(--app-cream);
    color: var(--app-black);
}

@media (max-width: 991.98px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 9px;
        scrollbar-width: none;
    }

    .settings-navigation::-webkit-scrollbar {
        display: none;
    }

    .settings-nav-button {
        min-width: max-content;
    }
}

@media (max-width: 767.98px) {
    .settings-save-bar {
        align-items: stretch;
        flex-direction: column;
        bottom: 8px;
    }

    .settings-save-bar .btn-app-primary {
        width: 100%;
    }
}
/* =====================================================
   CUSTOMER BOOKING FLOW
===================================================== */

.booking-page-section {
    min-height: calc(100vh - var(--app-header-height));
    padding: 30px 0;
}

.booking-page-heading {
    margin-bottom: 24px;
}

.booking-page-heading h1 {
    margin: 0;
    color: var(--app-black);
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.booking-page-heading p {
    margin: 8px 0 0;
    color: var(--app-muted);
}

.customer-booking-layout,
.slot-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
}

.customer-booking-main {
    display: grid;
    gap: 18px;
}

.booking-form-card {
    box-shadow: none;
}

.booking-step-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px;
}

.booking-step-heading > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--app-black);
    color: var(--app-cream);
    font-weight: 850;
}

.booking-step-heading h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 850;
}

.booking-step-heading p {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: 11px;
}

.customer-barber-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.customer-barber-option {
    position: relative;
    cursor: pointer;
}

.customer-barber-option > input {
    position: absolute;
    opacity: 0;
}

.customer-barber-card {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 17px 12px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-cream-light);
    text-align: center;
}

.customer-barber-avatar {
    width: 53px;
    height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 17px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 20px;
    font-weight: 850;
}

.customer-barber-card strong {
    font-size: 13px;
}

.customer-barber-card small,
.customer-barber-card > span {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 9px;
}

.customer-barber-card > i {
    position: absolute;
    top: 9px;
    right: 9px;
    display: none;
    color: var(--app-success);
}

.customer-barber-option > input:checked +
.customer-barber-card {
    border-color: var(--app-black);
    background: var(--app-cream);
    box-shadow: 0 0 0 2px var(--app-black);
}

.customer-barber-option > input:checked +
.customer-barber-card > i {
    display: block;
}

.customer-service-list {
    display: grid;
    gap: 9px;
}

.customer-service-option {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-white);
    cursor: pointer;
}

.customer-service-option > input {
    position: absolute;
    opacity: 0;
}

.customer-service-check {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: transparent;
}

.customer-service-option > input:checked ~
.customer-service-check {
    border-color: var(--app-black);
    background: var(--app-black);
    color: var(--app-cream);
}

.customer-service-option:has(input:checked) {
    border-color: var(--app-black);
    background: var(--app-cream-light);
}

.customer-service-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--app-cream);
}

.customer-service-info {
    display: flex;
    flex-direction: column;
}

.customer-service-info strong {
    font-size: 12px;
}

.customer-service-info small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.customer-service-price {
    font-size: 13px;
    font-weight: 850;
}

.customer-booking-summary {
    position: sticky;
    top: 95px;
}

.booking-summary-card {
    box-shadow: var(--app-shadow);
}

.booking-summary-card h2 {
    margin: 4px 0 18px;
    font-size: 21px;
    font-weight: 850;
}

.booking-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--app-border);
}

.booking-summary-row span {
    color: var(--app-muted);
    font-size: 11px;
}

.booking-summary-row strong {
    font-size: 12px;
    text-align: right;
}

.booking-summary-divider {
    height: 1px;
    margin: 14px 0;
    background: var(--app-border);
}

.booking-policy-note {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 13px;
    background: var(--app-cream);
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.6;
}

.booking-advance-row strong {
    color: var(--app-accent-dark);
    font-size: 18px;
}

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.booking-slot-option {
    position: relative;
    cursor: pointer;
}

.booking-slot-option > input {
    position: absolute;
    opacity: 0;
}

.booking-slot-option > span {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 14px 8px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-cream-light);
    text-align: center;
}

.booking-slot-option strong {
    font-size: 13px;
}

.booking-slot-option small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 8px;
}

.booking-slot-option i {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    color: var(--app-success);
}

.booking-slot-option > input:checked + span {
    border-color: var(--app-black);
    background: var(--app-cream);
    box-shadow: 0 0 0 2px var(--app-black);
}

.booking-slot-option > input:checked + span i {
    display: block;
}

.booking-slot-empty {
    padding: 40px 15px;
    text-align: center;
}

.booking-slot-empty > span {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: var(--app-cream);
    font-size: 26px;
}

.booking-slot-empty h3 {
    margin: 14px 0 5px;
    font-size: 17px;
    font-weight: 850;
}

.booking-slot-empty p {
    margin: 0 0 17px;
    color: var(--app-muted);
    font-size: 11px;
}

.selected-slot-success {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding: 13px;
    border-radius: 14px;
    background: #e4f7eb;
    color: #237644;
}

.selected-slot-success > i {
    font-size: 23px;
}

.selected-slot-success div {
    display: flex;
    flex-direction: column;
}

.selected-slot-success strong {
    font-size: 12px;
}

.selected-slot-success span {
    margin-top: 3px;
    font-size: 10px;
}

.booking-empty-message {
    padding: 18px;
    border-radius: 14px;
    background: var(--app-cream);
    color: var(--app-muted);
    text-align: center;
}

@media (max-width: 991.98px) {
    .customer-booking-layout,
    .slot-page-layout {
        grid-template-columns: 1fr;
    }

    .customer-booking-summary {
        position: static;
    }

    .booking-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .booking-page-section {
        padding-top: 22px;
    }

    .customer-barber-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-service-option {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .customer-service-price {
        grid-column: 3;
    }
}
/* =====================================================
   CUSTOMER PAYMENT
===================================================== */

.payment-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 20px;
}

.payment-main-card {
    box-shadow: none;
}

.upi-payment-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--app-cream-dark);
    border-radius: 17px;
    background: var(--app-cream);
}

.upi-payment-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 23px;
}

.upi-payment-box > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.upi-payment-box small {
    color: var(--app-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.upi-payment-box strong {
    overflow: hidden;
    margin-top: 3px;
    color: var(--app-black);
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.upi-payment-box div > span {
    margin-top: 4px;
    color: var(--app-accent-dark);
    font-size: 11px;
    font-weight: 750;
}

.payment-upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 155px;
    padding: 20px;
    border: 1px dashed var(--app-accent);
    border-radius: 16px;
    background: var(--app-cream-light);
    cursor: pointer;
    text-align: center;
}

.payment-upload-box > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-upload-box > span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 15px;
    background: var(--app-cream);
    color: var(--app-dark);
    font-size: 22px;
}

.payment-upload-box strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.payment-upload-box small {
    margin-top: 5px;
    color: var(--app-muted);
    font-size: 9px;
}

.payment-confirmation-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.6;
    cursor: pointer;
}

.payment-confirmation-check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--app-black);
}

.payment-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.payment-service-row > span {
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

.payment-service-row small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 8px;
}

.payment-service-row strong {
    font-size: 11px;
}

/* =====================================================
   BOOKING SUCCESS
===================================================== */

.booking-success-section {
    min-height: calc(
        100vh -
        var(--app-header-height) -
        var(--app-bottom-nav-height)
    );
    display: flex;
    align-items: center;
    padding: 35px 0;
}

.booking-success-card {
    max-width: 680px;
    margin: auto;
    padding: 35px;
    border: 1px solid var(--app-border);
    border-radius: 27px;
    background: var(--app-white);
    box-shadow: var(--app-shadow);
    text-align: center;
}

.booking-success-icon {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 24px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 37px;
}

.booking-success-card h1 {
    margin: 4px 0 7px;
    font-size: clamp(31px, 6vw, 47px);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.booking-success-card > p {
    max-width: 500px;
    margin: 0 auto 21px;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.7;
}

.booking-number-box {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 23px;
    padding: 12px 24px;
    border-radius: 15px;
    background: var(--app-cream);
}

.booking-number-box small {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.booking-number-box strong {
    margin-top: 3px;
    font-size: 17px;
    letter-spacing: 0.05em;
}

.success-booking-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.success-booking-details > div {
    padding: 13px 8px;
    border-radius: 13px;
    background: var(--app-cream-light);
}

.success-booking-details span,
.success-booking-details strong {
    display: block;
}

.success-booking-details span {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.success-booking-details strong {
    margin-top: 5px;
    font-size: 11px;
}

.success-policy-note {
    text-align: left;
}

.booking-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 991.98px) {
    .payment-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .booking-success-card {
        padding: 25px 17px;
    }

    .success-booking-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-success-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .booking-success-actions a {
        width: 100%;
    }
}
/* =====================================================
   ADMIN BOOKING MANAGEMENT
===================================================== */

.booking-filter-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(160px, 0.7fr)
        minmax(190px, 0.8fr)
        auto;
    align-items: end;
    gap: 12px;
}

.booking-filter-actions {
    display: flex;
    gap: 8px;
}

.booking-filter-actions .btn-app-primary,
.booking-filter-actions .btn-app-outline {
    min-height: 52px;
}

.booking-list-table {
    min-width: 1050px;
}

.booking-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 18px;
}

.booking-detail-main,
.booking-detail-sidebar {
    display: grid;
    gap: 18px;
}

.booking-detail-sidebar {
    position: sticky;
    top: 100px;
}

.booking-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.booking-detail-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 850;
}

.booking-information-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.booking-information-grid > div {
    padding: 14px;
    border-radius: 14px;
    background: var(--app-cream-light);
}

.booking-information-grid span,
.booking-information-grid strong {
    display: block;
}

.booking-information-grid span {
    color: var(--app-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.booking-information-grid strong {
    margin-top: 5px;
    font-size: 12px;
}

.booking-service-detail-list {
    display: grid;
    gap: 9px;
}

.booking-service-detail-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-cream-light);
}

.booking-service-detail-row > div {
    display: flex;
    flex-direction: column;
}

.booking-service-detail-row div strong {
    font-size: 12px;
}

.booking-service-detail-row small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.booking-history-list {
    display: grid;
    gap: 12px;
}

.booking-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 11px;
}

.booking-history-item > span {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--app-cream);
}

.booking-history-item > div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
}

.booking-history-item strong {
    display: block;
    font-size: 12px;
}

.booking-history-item small {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.booking-history-item p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 10px;
}

.booking-sidebar-title {
    margin: 5px 0 14px;
    font-size: 18px;
    font-weight: 850;
}

.booking-contact-list {
    display: grid;
    gap: 8px;
}

.booking-contact-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border-radius: 12px;
    background: var(--app-cream-light);
    font-size: 11px;
    font-weight: 700;
}

.booking-finance-list {
    display: grid;
    gap: 10px;
}

.booking-finance-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--app-border);
}

.booking-finance-list span {
    color: var(--app-muted);
    font-size: 10px;
}

.booking-finance-list strong {
    font-size: 11px;
    text-align: right;
}

.payment-screenshot-link {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    border-radius: 12px;
    background: var(--app-cream);
    font-size: 11px;
    font-weight: 750;
}

.payment-verification-actions {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

@media (max-width: 1199.98px) {
    .booking-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 991.98px) {
    .booking-detail-layout {
        grid-template-columns: 1fr;
    }

    .booking-detail-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .booking-filter-bar {
        grid-template-columns: 1fr;
    }

    .booking-filter-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
    }

    .booking-information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =====================================================
   REMAINING PAYMENT
===================================================== */

.remaining-payment-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    background: var(--app-cream);
}

.remaining-payment-highlight span {
    color: var(--app-muted);
    font-size: 10px;
}

.remaining-payment-highlight strong {
    color: var(--app-accent-dark);
    font-size: 20px;
    font-weight: 850;
}

.full-payment-success {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: #e4f7eb;
    color: #237644;
}

.full-payment-success > span {
    font-size: 25px;
}

.full-payment-success > div {
    display: flex;
    flex-direction: column;
}

.full-payment-success strong {
    font-size: 13px;
}

.full-payment-success small {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.5;
}

.booking-final-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 13px;
    background: var(--app-cream-light);
    color: var(--app-muted);
    font-size: 10px;
    line-height: 1.5;
}
/* =====================================================
   BARBER COMMISSIONS
===================================================== */

.commission-filter-form {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        auto;
    align-items: end;
    gap: 12px;
}

.commission-filter-action .btn-app-primary {
    min-height: 52px;
}

.commission-barber-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.commission-barber-card {
    padding: 18px;
}

.commission-barber-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.commission-barber-heading > div {
    display: flex;
    flex-direction: column;
}

.commission-barber-heading strong {
    font-size: 13px;
}

.commission-barber-heading small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.commission-barber-values {
    display: grid;
    gap: 9px;
}

.commission-barber-values > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--app-border);
}

.commission-barber-values span {
    color: var(--app-muted);
    font-size: 9px;
}

.commission-barber-values strong {
    font-size: 11px;
}

.commission-table {
    min-width: 1050px;
}

.commission-amount-text {
    color: var(--app-success);
    font-size: 13px !important;
}

@media (max-width: 1199.98px) {
    .commission-barber-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .commission-filter-form {
        grid-template-columns: 1fr;
    }

    .commission-filter-action .btn-app-primary {
        width: 100%;
    }

    .commission-barber-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   BARBER DASHBOARD
===================================================== */

.barber-dashboard-body {
    min-height: 100vh;
    padding-bottom: 85px;
    background: var(--app-cream-light);
}

.barber-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(17, 17, 17, 0.97);
    border-bottom: 1px solid rgba(244, 235, 221, 0.1);
    backdrop-filter: blur(15px);
}

.barber-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.barber-header-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-cream);
}

.barber-header-profile > div {
    display: flex;
    flex-direction: column;
}

.barber-header-profile strong {
    font-size: 12px;
}

.barber-header-profile small {
    margin-top: 3px;
    color: rgba(244, 235, 221, 0.5);
    font-size: 9px;
}

.barber-header-profile > a {
    color: var(--app-cream);
    font-size: 19px;
}

.barber-dashboard-main {
    padding: 24px 0 30px;
}

.barber-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 25px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(201, 166, 107, 0.3),
            transparent 35%
        ),
        var(--app-black);
    color: var(--app-cream);
}

.barber-welcome-card > div > span {
    color: var(--app-accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.barber-welcome-card h1 {
    margin: 6px 0;
    font-size: 27px;
    font-weight: 850;
}

.barber-welcome-card p {
    margin: 0;
    color: rgba(244, 235, 221, 0.55);
    font-size: 11px;
}

.barber-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.barber-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--app-border);
    border-radius: 17px;
    background: var(--app-white);
}

.barber-stat-card > span {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--app-cream);
    font-size: 20px;
}

.barber-stat-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.barber-stat-card small {
    color: var(--app-muted);
    font-size: 9px;
}

.barber-stat-card strong {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 850;
}

.barber-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    align-items: start;
    gap: 18px;
}

.barber-dashboard-panel {
    box-shadow: none;
}

.barber-earnings-column {
    display: grid;
    gap: 18px;
}

.barber-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.barber-panel-header h2 {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 850;
}

.barber-panel-header > a {
    color: var(--app-accent-dark);
    font-size: 10px;
    font-weight: 700;
}

.barber-appointment-list {
    display: grid;
    gap: 10px;
}

.barber-appointment-card {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-cream-light);
}

.barber-appointment-time {
    display: flex;
    flex-direction: column;
}

.barber-appointment-time strong {
    font-size: 13px;
}

.barber-appointment-time small {
    margin-top: 4px;
    color: var(--app-muted);
    font-size: 9px;
}

.barber-appointment-customer {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.barber-appointment-customer strong {
    font-size: 12px;
}

.barber-appointment-customer span {
    overflow: hidden;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.barber-appointment-customer small {
    margin-top: 4px;
    color: var(--app-accent-dark);
    font-size: 9px;
}

.barber-appointment-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.barber-contact-actions {
    display: flex;
    gap: 6px;
}

.barber-earning-list {
    display: grid;
    gap: 10px;
}

.barber-earning-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--app-border);
}

.barber-earning-list span {
    color: var(--app-muted);
    font-size: 10px;
}

.barber-earning-list strong {
    font-size: 12px;
}

.barber-commission-list {
    display: grid;
    gap: 9px;
}

.barber-commission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--app-border);
}

.barber-commission-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.barber-commission-item div strong {
    font-size: 10px;
}

.barber-commission-item small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 8px;
}

.barber-commission-item > strong {
    color: var(--app-success);
    font-size: 11px;
}

.barber-bottom-navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(17, 17, 17, 0.98);
    border-top: 1px solid rgba(244, 235, 221, 0.1);
    backdrop-filter: blur(15px);
}

.barber-bottom-navigation a {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    color: rgba(244, 235, 221, 0.5);
    font-size: 9px;
}

.barber-bottom-navigation i {
    font-size: 19px;
}

.barber-bottom-navigation a.active {
    color: var(--app-accent);
}

.barber-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.barber-page-heading h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 850;
}

.barber-page-heading p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 11px;
}

@media (max-width: 991.98px) {
    .barber-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .barber-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .barber-header-profile > div {
        display: none;
    }

    .barber-welcome-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .barber-welcome-card .btn-app-secondary {
        width: 100%;
    }

    .barber-stat-grid {
        gap: 9px;
    }

    .barber-stat-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .barber-appointment-card,
    .barber-appointment-card.detailed {
        grid-template-columns: 75px minmax(0, 1fr);
    }

    .barber-appointment-status {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .barber-page-heading {
        align-items: stretch;
        flex-direction: column;
    }
}
/* =====================================================
   OWNER COMMISSION PAYMENTS
===================================================== */

.commission-owner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.commission-owner-card {
    display: flex;
    flex-direction: column;
}

.commission-owner-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
}

.commission-owner-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.commission-owner-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
}

.commission-owner-header span {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.commission-owner-header small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.commission-owner-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 15px;
}

.commission-owner-values > div {
    padding: 12px;
    border-radius: 13px;
    background: var(--app-cream-light);
}

.commission-owner-values span,
.commission-owner-values strong {
    display: block;
}

.commission-owner-values span {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.commission-owner-values strong {
    margin-top: 5px;
    font-size: 13px;
}

.commission-owner-values .paid {
    background: #e4f7eb;
    color: #237644;
}

.commission-owner-values .unpaid {
    background: #fff1d8;
    color: #99630b;
}

.commission-last-payment {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: var(--app-muted);
    font-size: 9px;
}

.commission-owner-card > .btn-app-outline {
    margin-top: auto;
}

.commission-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.commission-detail-heading h3 {
    margin: 3px 0;
    font-size: 21px;
    font-weight: 850;
}

.commission-detail-heading p {
    margin: 0;
    color: var(--app-muted);
    font-size: 10px;
}

.commission-selected-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.commission-selected-summary > div {
    padding: 14px;
    border-radius: 14px;
    background: var(--app-cream-light);
}

.commission-selected-summary span,
.commission-selected-summary strong {
    display: block;
}

.commission-selected-summary span {
    color: var(--app-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.commission-selected-summary strong {
    margin-top: 5px;
    font-size: 17px;
}

.commission-selected-summary .paid {
    background: #e4f7eb;
    color: #237644;
}

.commission-selected-summary .unpaid {
    background: #fff1d8;
    color: #99630b;
}

.commission-detail-table {
    min-width: 1000px;
}

.commission-payment-modal {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
}

.commission-payment-modal .modal-header,
.commission-payment-modal .modal-body,
.commission-payment-modal .modal-footer {
    padding: 18px 20px;
}

.commission-payment-modal .modal-title {
    margin: 3px 0 0;
    font-size: 18px;
    font-weight: 850;
}

.commission-payment-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
    padding: 15px;
    border-radius: 14px;
    background: var(--app-cream);
}

.commission-payment-amount span {
    color: var(--app-muted);
    font-size: 10px;
}

.commission-payment-amount strong {
    color: var(--app-accent-dark);
    font-size: 21px;
}

@media (max-width: 1199.98px) {
    .commission-owner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .commission-owner-grid {
        grid-template-columns: 1fr;
    }

    .commission-detail-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .commission-detail-heading .btn-app-secondary {
        width: 100%;
    }

    .commission-selected-summary {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   CUSTOMER BOOKING TRACKING
===================================================== */

.customer-tracking-section {
    min-height: calc(
        100vh -
        var(--app-header-height) -
        var(--app-bottom-nav-height)
    );
    padding: 32px 0;
}

.tracking-search-layout {
    min-height: 68vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    gap: 70px;
}

.tracking-search-intro h1 {
    max-width: 650px;
    margin: 0;
    color: var(--app-black);
    font-size: clamp(40px, 7vw, 70px);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}

.tracking-search-intro > p {
    max-width: 580px;
    margin: 18px 0 0;
    color: var(--app-muted);
    font-size: 15px;
    line-height: 1.75;
}

.tracking-feature-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.tracking-feature-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.tracking-feature-list > div > span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--app-black);
    color: var(--app-cream);
    font-size: 18px;
}

.tracking-feature-list > div > div {
    display: flex;
    flex-direction: column;
}

.tracking-feature-list strong {
    color: var(--app-black);
    font-size: 12px;
}

.tracking-feature-list small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 10px;
}

.tracking-search-card {
    padding: 30px;
}

.tracking-security-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px;
    border-radius: 12px;
    background: var(--app-cream);
    color: var(--app-muted);
    font-size: 9px;
    line-height: 1.5;
}

.tracking-security-note i {
    color: var(--app-success);
    font-size: 17px;
}

.tracking-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 19px;
}

.tracking-result-heading h1 {
    margin: 0;
    color: var(--app-black);
    font-size: clamp(27px, 5vw, 42px);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.tracking-result-heading p {
    margin: 6px 0 0;
    color: var(--app-muted);
    font-size: 10px;
}

.tracking-status-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 19px;
    padding: 20px;
    border: 1px solid #cfe8d8;
    border-radius: 20px;
    background: #e9f8ee;
    color: #237644;
}

.tracking-status-banner.status-payment_verification,
.tracking-status-banner.status-pending_payment {
    border-color: #efd8ad;
    background: #fff5df;
    color: #91610f;
}

.tracking-status-banner.status-service_started {
    border-color: #cbdcf4;
    background: #eaf2ff;
    color: #285ba2;
}

.tracking-status-banner.status-cancelled_by_customer,
.tracking-status-banner.status-cancelled_by_owner,
.tracking-status-banner.status-late_cancelled,
.tracking-status-banner.status-no_show {
    border-color: #f1cccc;
    background: #fdecec;
    color: #a53636;
}

.tracking-status-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: currentColor;
    font-size: 25px;
}

.tracking-status-icon i {
    color: var(--app-white);
}

.tracking-status-banner > div {
    display: flex;
    flex-direction: column;
}

.tracking-status-banner small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

.tracking-status-banner h2 {
    margin: 3px 0;
    font-size: 21px;
    font-weight: 850;
}

.tracking-status-banner p {
    margin: 0;
    font-size: 10px;
    line-height: 1.6;
}

.tracking-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 18px;
}

.tracking-detail-main,
.tracking-detail-sidebar {
    display: grid;
    gap: 18px;
}

.tracking-detail-sidebar {
    position: sticky;
    top: 92px;
}

.tracking-panel {
    box-shadow: none;
}

.tracking-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.tracking-panel-heading h2 {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 850;
}

.tracking-heading-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    margin-left: 5px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--app-cream);
    font-size: 10px;
}

.tracking-appointment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.tracking-appointment-grid > div {
    display: flex;
    flex-direction: column;
    padding: 13px;
    border-radius: 14px;
    background: var(--app-cream-light);
}

.tracking-appointment-grid > div > span {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--app-cream);
    color: var(--app-dark);
    font-size: 16px;
}

.tracking-appointment-grid small {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.tracking-appointment-grid strong {
    margin-top: 4px;
    color: var(--app-black);
    font-size: 11px;
}

.tracking-barber-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 15px;
    background: var(--app-cream-light);
}

.tracking-barber-card > div {
    display: flex;
    flex-direction: column;
}

.tracking-barber-card strong {
    color: var(--app-black);
    font-size: 14px;
}

.tracking-barber-card span {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 10px;
}

.tracking-barber-card small {
    margin-top: 5px;
    color: var(--app-accent-dark);
    font-size: 9px;
}

.tracking-service-list {
    display: grid;
    gap: 9px;
}

.tracking-service-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-cream-light);
}

.tracking-service-row > div {
    display: flex;
    flex-direction: column;
}

.tracking-service-row div strong {
    color: var(--app-black);
    font-size: 11px;
}

.tracking-service-row small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 8px;
}

.tracking-service-row > strong {
    font-size: 11px;
}

.customer-status-timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.customer-status-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 17px;
}

.customer-status-item:not(:last-child)::before {
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 16px;
    width: 1px;
    content: "";
    background: var(--app-border);
}

.customer-status-item > span {
    position: relative;
    z-index: 1;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--app-black);
    color: var(--app-cream);
}

.customer-status-item > div {
    padding-top: 2px;
}

.customer-status-item strong {
    display: block;
    color: var(--app-black);
    font-size: 11px;
}

.customer-status-item small {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 8px;
}

.customer-status-item p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 9px;
    line-height: 1.5;
}

.tracking-sidebar-title {
    margin: 3px 0 15px;
    color: var(--app-black);
    font-size: 17px;
    font-weight: 850;
}

.tracking-payment-list {
    display: grid;
    gap: 9px;
}

.tracking-payment-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--app-border);
}

.tracking-payment-list span {
    color: var(--app-muted);
    font-size: 9px;
}

.tracking-payment-list strong {
    color: var(--app-black);
    font-size: 10px;
    text-align: right;
}

.tracking-paid-text {
    color: var(--app-success) !important;
}

.tracking-unpaid-text {
    color: var(--app-warning) !important;
}

.customer-payment-history {
    display: grid;
    gap: 10px;
}

.customer-payment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border);
}

.customer-payment-item > div {
    display: flex;
    flex-direction: column;
}

.customer-payment-item div strong {
    font-size: 11px;
}

.customer-payment-item small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 8px;
}

.customer-payment-item p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--app-muted);
    font-size: 8px;
}

.tracking-policy-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 9px;
    padding: 12px;
    border-radius: 13px;
    background: #eaf2ff;
    color: #285ba2;
}

.tracking-policy-box.warning {
    background: #fff2dc;
    color: #93610c;
}

.tracking-policy-box i {
    font-size: 17px;
}

.tracking-policy-box p {
    margin: 0;
    font-size: 9px;
    line-height: 1.65;
}

.tracking-shop-address {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 14px;
    color: var(--app-muted);
    font-size: 9px;
    line-height: 1.6;
}

.tracking-shop-actions {
    display: grid;
    gap: 8px;
}

.tracking-shop-actions a {
    width: 100%;
}

.tracking-cancellation-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
    border-radius: 13px;
    background: #fdecec;
    color: #a53636;
}

.tracking-cancellation-box > i {
    font-size: 20px;
}

.tracking-cancellation-box strong {
    display: block;
    font-size: 11px;
}

.tracking-cancellation-box p {
    margin: 4px 0 0;
    font-size: 9px;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .tracking-search-layout {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .tracking-search-intro {
        text-align: center;
    }

    .tracking-search-intro h1,
    .tracking-search-intro > p {
        margin-right: auto;
        margin-left: auto;
    }

    .tracking-feature-list {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .tracking-search-card {
        max-width: 520px;
        width: 100%;
        margin: auto;
    }

    .tracking-detail-layout {
        grid-template-columns: 1fr;
    }

    .tracking-detail-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .customer-tracking-section {
        padding-top: 23px;
    }

    .tracking-result-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tracking-result-heading .btn-app-outline {
        width: 100%;
    }

    .tracking-appointment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .tracking-search-card {
        padding: 20px;
    }

    .tracking-status-banner {
        align-items: flex-start;
    }

    .tracking-status-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .tracking-status-banner h2 {
        font-size: 18px;
    }
}
/* Mobile-only booking list */

.customer-bookings-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.customer-booking-list-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 9px;
}

.customer-booking-list-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-white);
}

.customer-booking-list-card:hover,
.customer-booking-list-card.active {
    border-color: var(--app-black);
    box-shadow: 0 0 0 2px var(--app-black);
}

.customer-booking-list-date {
    width: 48px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 13px;
    background: var(--app-cream);
}

.customer-booking-list-date strong {
    font-size: 17px;
}

.customer-booking-list-date span {
    color: var(--app-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.customer-booking-list-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.customer-booking-list-info strong {
    font-size: 10px;
}

.customer-booking-list-info span {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 9px;
}

.customer-booking-list-info small {
    overflow: hidden;
    margin-top: 3px;
    color: var(--app-accent-dark);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.customer-booking-list-card > .booking-status-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
}

.customer-selected-booking {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .customer-bookings-layout {
        grid-template-columns: 1fr;
    }

    .customer-booking-list-panel {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scrollbar-width: none;
    }

    .customer-booking-list-panel::-webkit-scrollbar {
        display: none;
    }

    .customer-booking-list-card {
        min-width: 280px;
    }
}
/* =====================================================
   PHONEPE PAYMENT BUTTON
===================================================== */

.btn-app-phonepe {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 15px;
    background: #5f259f;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(95, 37, 159, 0.22);
}

.btn-app-phonepe:hover,
.btn-app-phonepe:focus {
    background: #4e1f83;
    color: #ffffff;
    transform: translateY(-1px);
}

.phonepe-button-icon {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    color: #5f259f;
    font-size: 17px;
    font-weight: 900;
}

.btn-app-phonepe > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.btn-app-phonepe > span:nth-child(2) small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 600;
}

.btn-app-phonepe > i {
    font-size: 17px;
}
/* =====================================================
   HEADER ADMIN LOGIN
===================================================== */

.header-admin-login {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(244, 235, 221, 0.2);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.05);
    color: var(--app-cream);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.header-admin-login i {
    margin: 0;
    font-size: 17px;
    line-height: 1;
}

.header-admin-login:hover,
.header-admin-login:focus {
    border-color: var(--app-cream);
    background: var(--app-cream);
    color: var(--app-black);
}


/* =====================================================
   MOBILE HEADER ALIGNMENT
===================================================== */

@media (max-width: 991.98px) {

    .app-header-inner {
        min-height: var(--app-header-height);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .header-left {
        min-width: 0;
    }

    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex-shrink: 0;
    }

    .header-admin-login {
        width: 42px;
        height: 42px;
        min-height: 42px;

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

        padding: 0;

        border-radius: 13px;
    }

    .header-admin-login span {
        display: none;
    }

    .header-admin-login i {
        font-size: 19px;
    }
}

@media (max-width: 575.98px) {

    .app-header-inner {
        gap: 8px;
    }

    .brand-text strong {
        max-width: calc(100vw - 135px);
    }

    .brand-text small {
        max-width: calc(100vw - 135px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .header-admin-login {
        width: 39px;
        height: 39px;
        min-height: 39px;
        flex: 0 0 39px;
    }
}
/* FINAL ADMIN LOGIN: DESKTOP + MOBILE */

.header-admin-login {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(244, 235, 221, 0.22);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.06);
    color: var(--app-cream);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.header-admin-login:hover {
    background: var(--app-cream);
    color: var(--app-black);
}

.header-admin-login i {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 991.98px) {

    .app-header-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .header-left {
        min-width: 0 !important;
    }

    .header-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-admin-login {
        min-width: 68px !important;
        width: auto !important;
        height: 39px !important;
        min-height: 39px !important;

        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        padding: 7px 10px !important;
        gap: 5px !important;

        border-radius: 12px !important;

        font-size: 10px !important;
    }

    .header-admin-login span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .header-admin-login i {
        display: inline-block !important;
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {

    .header-admin-login {
        min-width: 40px !important;
        width: 40px !important;
        padding: 0 !important;
    }

    .header-admin-login span {
        display: none !important;
    }
}
/* =====================================================
   ADMIN DASHBOARD MOBILE OVERFLOW FIX
===================================================== */

@media (max-width: 767.98px) {

    .admin-dashboard-grid,
    .admin-side-panels,
    .admin-panel,
    .admin-bookings-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .admin-side-panels {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-panel {
        overflow: hidden;
        padding: 16px;
    }

    .admin-panel-header {
        width: 100%;
        min-width: 0;

        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        gap: 8px;
        margin-bottom: 15px;
    }

    .admin-panel-header > div {
        width: 100%;
        min-width: 0;
    }

    .admin-panel-label {
        width: 100%;
        max-width: 100%;

        margin-bottom: 4px;

        font-size: 8px;
        line-height: 1.25;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-panel-header h3 {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 16px;
        line-height: 1.25;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-panel-header > a {
        width: auto;
        max-width: 100%;

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

        margin: 0;
        padding: 7px 10px;

        border-radius: 10px;
        background: var(--app-cream);

        font-size: 10px;
        line-height: 1.2;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-big-number {
        max-width: 100%;
        overflow: hidden;

        font-size: 38px;
        line-height: 1;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-panel-description {
        max-width: 100%;

        font-size: 11px;
        line-height: 1.55;

        overflow-wrap: anywhere;
    }

    .admin-quick-links {
        width: 100%;
        min-width: 0;
    }

    .admin-quick-links a {
        width: 100%;
        min-width: 0;

        grid-template-columns: auto minmax(0, 1fr) auto;

        padding: 11px;
    }

    .admin-quick-links a span,
    .admin-quick-links a strong {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}