/* ─────────────────────────────────────────────
   Luxurious Dark Theme  –  global foundation
   ───────────────────────────────────────────── */
@font-face {
    font-family: "Afacad";
    src: url("/fonts/Afacad-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: "Afacad", "Segoe UI", sans-serif;
    --font-heading: "Playfair Display", Georgia, serif;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-body);
    background: #202123;
    color: #c0c0c0;
}

/* shared card styles */
.form-container-small,
.form-container,
.form-container-litwide,
.form-container-wide {
    margin: 50px auto;
    padding: 25px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(39, 29, 41, .94),
            rgba(25, 23, 27, .96) 58%,
            rgba(20, 20, 22, .97)
        );
    border: 1px solid rgba(216, 178, 86, .13);
    border-radius: 18px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


.form-container-small {
    font-family: "Afacad","Segoe UI",sans-serif !important;
    font-weight: 400;
    font-size: large;
    max-width: 400px;
}

.form-container {
    font-family: "Afacad","Segoe UI",sans-serif !important;
    font-weight: 400;
    font-size: large;
    max-width: 1000px;
}

.form-container-litwide {
    font-family: "Afacad","Segoe UI",sans-serif !important;
    font-weight: 400;
    font-size: large;
    max-width: 1100px;
}

.form-container-wide {
    font-family: "Afacad","Segoe UI",sans-serif !important;
    font-weight: 400;
    font-size: large;
    max-width: 1700px;
}



/* ───────── Auth pages under login pages───────── */

.auth-card {
    max-width: 460px;
    padding: 32px 28px;
}

.auth-title {
    font-family: "Afacad","Segoe UI",sans-serif !important;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.auth-subtitle {
    color: #bdb6bd;
    text-align: center;
    margin-bottom: 1rem;
}

.auth-main-btn {
    width: 100%;
    margin-top: .25rem;
}

.form-control {
    background-color: #f4f4f6;
    border: 1px solid #d7d7df;
    border-radius: 10px;
}

    .form-control:focus {
        border-color: #A67C00;
        box-shadow: 0 0 0 .15rem rgba(166, 124, 0, .25);
    }

.form-floating > label {
    color: #6c6c75;
}


/* headings */
h1, h2, h3 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}
h1,
h2,
h3,
.hero-title,
.about-title,
.show-title,
.footer-intro h2 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
}
/* horizontal rule */
hr {
    border-top: 1px solid #393939;
    margin: 20px 0;
}

/* ───────── Buttons and links ───────── */
.btn-primary {
    background: #341539 !important;
    border: none !important;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    transition: background .3s, transform .2s;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: #A67C00 !important;
        transform: translateY(-2px);
    }

.btn-secondary { /* optional grey-on-dark */
    background: #393939;
    border: none;
    color: #f1f1f1;
}

    .btn-secondary:hover {
        background: #555;
    }

.btn-outline-secondary {
    border-color: #A67C00;
    color: #A67C00;
}

    .btn-outline-secondary:hover{
        background: #A67C00;
        color: #fff;
    }

.btn-outline-danger {
    border-color: #ff5d5d !important; /* bright red border  */
    color: #ff5d5d !important; /* red label          */
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus {
        background: #ff5d5d !important; /* filled red on hover */
        color: #ffffff !important; /* white text          */
    }

.btn-custom { /* small navbar / footer buttons */
    background: #341539;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff !important;
    transition: background .3s;
}

    .btn-custom:hover {
        background: #341539;
        color: #ffffff !important;
        border-color: #A67C00;
    }

a, .btn-link {
    color: #A67C00;
    text-decoration: none;
    font-weight: bold;
}

    a:hover,
    .btn-link:hover {
        color: #fff;
    }

/* ───────── Form bits ───────── */
.form-floating {
    margin-bottom: 20px;
}

.form-label {
    color: #c0c0c0;
}

.form-control-plaintext {
    color: #fff;
    background: transparent;
    border: 1px solid #393939;
    border-radius: 4px;
}

/* validation */
.text-danger {
    color: #ff6b6b;
}

/* external-login buttons */
.external-login button {
    background: #341539;
    border: none;
    border-radius: 25px;
    padding: 10px 15px;
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    transition: background .3s, transform .2s;
}

    .external-login button:hover {
        background: #A67C00;
        transform: translateY(-2px);
    }

/* logout */
.logout-container {
    max-width: 400px;
    padding: 20px;
    background: #1e1e1e;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.8);
    text-align: center;
    margin: 50px auto;
}

/* link-buttons (register ↔ login) */
.link-buttons {
    text-align: center;
    margin-top: 15px;
}

.link-button {
    display: inline-block;
    margin: 0 5px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #A67C00;
    background: #1e1e1e;
    border: 1px solid #A67C00;
    border-radius: 25px;
    transition: background .3s, color .3s;
}

    .link-button:hover {
        background: #A67C00;
        color: #fff;
    }

/* ───────── Shared navbar foundation ───────── */
.navbar,
.top-row,
.custom-navbar {
    background: linear-gradient(90deg, #341539 5%, #1b1b1d 95%) !important;
    border-bottom: 1px solid #262626;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
}

    .custom-navbar .navbar-brand {
        color: #f2f2f2;
        font-weight: 600;
        letter-spacing: .5px;
    }

    .custom-navbar .navbar-toggler-icon {
        filter: invert(1);
    }




/* ───────── Manage-profile sidebar ───────── */
.manage-nav .nav-link {
    color: #c0c0c0;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background .25s, color .25s;
}

    .manage-nav .nav-link:hover {
        background: rgba(52,21,57,.35);
        color: #fff;
    }

    .manage-nav .nav-link.active {
        background: #341539;
        color: #fff;
        font-weight: 600;
    }








/* ───────── Tables ───────── */
.table-dark-theme thead {
    background: #341539;
    color: #fff;
}

.table-dark-theme tbody tr {
    background: #1e1e1e;
    color: #c0c0c0;
}

    .table-dark-theme tbody tr:nth-child(even) {
        background: #262626;
    }

    .table-dark-theme tbody tr:hover {
        background: #341539;
        color: #fff;
    }

.table-dark-theme td,
.table-dark-theme th {
    color: #ffffff !important;
}











/* ====== Footer v2 – unique touches ====== */
.site-footer {
    background: #1b1b1d;
    border-top: 1px solid #262626;
    color: #cfcfcf;
    padding: 32px 0 20px;
}

    .site-footer .container {
        max-width: 1200px;
    }


/* gradient accent bar */
.footer-accent {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #341539 0%, #A67C00 60%, #341539 100%);
    opacity: .9;
    margin-bottom: 18px;
}

/* intro */
.footer-intro {
    margin-bottom: 14px;
    text-align: center;
}

    .footer-intro h2 {
        color: #fff;
        font-weight: 700;
        font-size: 1.55rem;
        margin: 0 0 .25rem;
    }

/* grid + cards */
.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
    margin-bottom: 10px;
}

.footer-card {
    background: #1e1e1e;
    border: 1px solid #262626;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .footer-card:hover {
        transform: translateY(-2px);
        border-color: rgba(166,124,0,.5);
        box-shadow: 0 8px 22px rgba(0,0,0,.5);
    }

/* headings with accent underline */
.footer-head {
    color: #fff;
    font-size: 1.05rem;
    margin: 0 0 .6rem;
    position: relative;
    letter-spacing: .3px;
}

    .footer-head::after {
        content: "";
        display: block;
        width: 36px;
        height: 2px;
        background: #A67C00;
        margin-top: 6px;
        border-radius: 2px;
    }

/* links + map button */
.site-footer a {
    color: #A67C00;
    text-decoration: none;
}

    .site-footer a:hover {
        color: #fff;
    }

.btn-map {
    display: inline-block;
    padding: 2px 0;
    border-bottom: 1px dashed #A67C00;
}

/* CTA */
.footer-cta {
    padding: 16px 0 6px;
}

.btn-footer-primary {
    background: #341539;
    color: #fff;
    border: 1px solid #A67C00;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    margin: 0 .35rem;
}

    .btn-footer-primary:hover {
        background: #A67C00;
        color: #fff;
        transform: translateY(-1px);
    }

.btn-footer-secondary {
    border-radius: 999px;
    padding: .55rem 1.1rem;
    margin: 0 .35rem;
    font-weight: 700;
}

/* quick links */
.footer-links {
    display: flex;
    justify-content: center;
    gap: .6rem;
    padding: 6px 0 10px;
    color: #9f9f9f;
}

    .footer-links a {
        color: #cfcfcf;
    }

        .footer-links a:hover {
            color: #fff;
        }
    .footer-links .footer-link-button {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #cfcfcf !important;
        font-weight: 700 !important;
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

        .footer-links .footer-link-button:hover,
        .footer-links .footer-link-button:focus {
            color: #ffffff !important;
            text-decoration: underline;
        }

/* socials */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 6px 0 8px;
}

.site-footer .social-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #d1d1d1;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}

    .site-footer .social-link:hover {
        transform: translateY(-2px);
        color: #fff;
        border-color: rgba(255,255,255,.3);
    }

.site-footer .social-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.site-footer .social-x:hover {
    background: #111;
}

/* responsive */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .footer-intro h2 {
        font-size: 1.25rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}









/* ---- Price image cards ---- */
.price-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}

    .price-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }

.price-card-img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
    background: #111;
    filter: brightness(.88);
    transition: filter .25s ease;
}

.price-card:hover .price-card-img {
    filter: brightness(.95);
}

.price-card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .7rem 1rem;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
}




/* ---- Navbar dropdown on hover (desktop) ---- */
@media (min-width: 992px) {
    .custom-navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* align under link */
    }
}

/* Dark theme dropdown look */
.custom-navbar .dropdown-menu.price-dd {
    background: #1e1e1e;
    border: 1px solid #262626;
    min-width: 14rem;
    padding: .25rem 0;
}

    .custom-navbar .dropdown-menu.price-dd .dropdown-item {
        color: #cfcfcf;
        font-weight: 600;
    }

        .custom-navbar .dropdown-menu.price-dd .dropdown-item:hover,
        .custom-navbar .dropdown-menu.price-dd .dropdown-item:focus,
        .custom-navbar .dropdown-menu.price-dd .dropdown-item.active {
            background: #341539;
            color: #fff;
        }




/* ───────── Navbar icons: hidden normally, visible only on hover ───────── */

.custom-navbar .nav-hover-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.custom-navbar .nav-hover-icon {
    width: 24px !important;
    height: 24px !important;
    color: #A67C00;
    flex-shrink: 0;
    opacity: 0;
    max-width: 0;
    margin-right: 0;
    transform: translateX(-6px) scale(.9);
    overflow: hidden;
    transition: opacity .2s ease, max-width .2s ease, margin-right .2s ease, transform .2s ease;
}

.custom-navbar .nav-hover-link:hover .nav-hover-icon,
.custom-navbar .nav-hover-link:focus .nav-hover-icon {
    opacity: 1;
    max-width: 24px;
    margin-right: 7px;
    transform: translateX(0) scale(1);
}





/* ───────── Identity navbar buttons ───────── */

.identity-nav-btn {
    background: #341539 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: .55rem 1.1rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .identity-nav-btn:hover,
    .identity-nav-btn:focus {
        background: #341539 !important;
        color: #ffffff !important;
        border-color: #A67C00 !important;
        box-shadow: 0 0 10px rgba(166, 124, 0, .35);
    }

.custom-navbar .nav-link {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

/* ───────── Booking category cards ───────── */

.booking-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 8px;
}

.booking-category-card {
    background: #262626;
    border: 1px solid #393939;
    border-radius: 14px;
    padding: 18px 14px;
    text-align: left;
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .booking-category-card:hover,
    .booking-category-card:focus {
        background: #341539;
        border-color: #A67C00;
        box-shadow: 0 8px 22px rgba(0,0,0,.45);
        transform: translateY(-2px);
    }

.booking-category-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.booking-category-subtitle {
    display: block;
    color: #cfcfcf;
    font-size: .9rem;
    line-height: 1.35;
}

.selected-category-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #262626;
    border: 1px solid #393939;
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 768px) {
    .booking-category-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── Booking service cards ───────── */

.booking-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.booking-service-card {
    background: #262626;
    border: 1px solid #393939;
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .booking-service-card:hover,
    .booking-service-card:focus {
        background: #341539;
        border-color: #A67C00;
        box-shadow: 0 6px 18px rgba(0,0,0,.45);
        transform: translateY(-1px);
    }

    .booking-service-card.active {
        background: #341539;
        border-color: #A67C00;
        box-shadow: 0 0 0 2px rgba(166,124,0,.25);
    }

.booking-service-title {
    display: block;
    font-weight: 700;
    font-size: .98rem;
    margin-bottom: 5px;
}

.booking-service-meta {
    display: block;
    color: #cfcfcf;
    font-size: .86rem;
}

@media (max-width: 768px) {
    .booking-service-grid {
        grid-template-columns: 1fr;
    }
}




/* ───────── Sticky footer for Identity pages ───────── */

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.identity-main {
    flex: 1 0 auto;
}

.identity-footer {
    margin-top: auto;
    border-top: 1px solid #262626;
    color: #8f8f98;
    padding: 14px 0;
    font-size: .9rem;
    background: #1b1b1d;
}

    .identity-footer a {
        color: #A67C00;
        text-decoration: none;
    }

        .identity-footer a:hover {
            color: #fff;
        }



.contact-hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    align-items: start;
    padding: 56px 42px;
}

.contact-hero-text h1,
.contact-details h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    margin-bottom: 20px;
}

.contact-kicker {
    letter-spacing: .35em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 12px;
}

.contact-form-box {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 28px;
}

    .contact-form-box .form-control {
        border-radius: 18px;
        min-height: 48px;
    }

    .contact-form-box textarea.form-control {
        min-height: 150px;
    }

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.contact-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 42px;
}

.contact-map iframe {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.opening-hours {
    margin-top: 20px;
}

    .opening-hours div {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 18px;
        padding: 10px 0;
        border-bottom: 1px dotted rgba(255, 255, 255, .35);
    }

    .opening-hours span {
        font-weight: 600;
    }

    .opening-hours strong {
        text-align: right;
    }

@media (max-width: 900px) {
    .contact-hero-section,
    .contact-info-section {
        grid-template-columns: 1fr;
        padding: 32px 20px;
    }

    .opening-hours div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .opening-hours strong {
        text-align: left;
    }
}


.price-list {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.price-list-item {
    padding: 20px 22px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

    .price-list-item:hover {
        transform: translateY(-2px);
        border-color: rgba(166, 124, 0, 0.45);
        background: rgba(52, 21, 57, 0.35);
    }

    .price-list-item:last-child {
        margin-bottom: 0;
    }

.price-list-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 14px;
}

.price-list-name {
    font-size: 1.08rem;
    font-weight: 800;
    color: #ffffff;
}

.price-list-line {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.32);
    transform: translateY(-4px);
}

.price-list-price {
    font-size: 1.08rem;
    font-weight: 900;
    color: #f2c94c;
    white-space: nowrap;
}

.price-list-meta {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(166, 124, 0, 0.16);
    color: #e6d6a5;
    font-size: 0.88rem;
    font-weight: 700;
}

.price-list-description {
    margin-top: 10px;
    max-width: 760px;
    font-size: 0.96rem;
    line-height: 1.55;
    color: #d6d6d6;
}

@media (max-width: 700px) {
    .price-list {
        padding: 12px;
    }

    .price-list-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .price-list-main {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .price-list-line {
        display: none;
    }

    .price-list-name {
        font-size: 1rem;
    }

    .price-list-price {
        font-size: 1rem;
    }

    .price-list-description {
        font-size: 0.92rem;
    }
}


.mira-credit-box {
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(63, 15, 76, 0.45);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    text-align: center;
}

    .mira-credit-box h4 {
        margin-bottom: .75rem;
        color: #fff;
    }

.mira-credit-main {
    font-size: 2rem;
    font-weight: 800;
    color: #d4af37;
    margin-bottom: .25rem;
}

.mira-credit-details {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
}

    .mira-credit-details div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .65rem .8rem;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
    }

    .mira-credit-details span {
        color: rgba(255, 255, 255, 0.72);
    }

    .mira-credit-details strong {
        color: #fff;
    }


.referral-box {
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(63, 15, 76, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.25);
    text-align: center;
}

    .referral-box h4 {
        margin-bottom: .75rem;
        color: #fff;
    }

.referral-code {
    padding: .8rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #d4af37;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 1px;
}



.identity-language-switcher {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
}

.identity-language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    transition: all 0.2s ease;
}

    .identity-language-link:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.08);
    }

    .identity-language-link.active {
        color: #ffffff;
        border-color: rgba(214, 178, 86, 0.65);
        background: rgba(214, 178, 86, 0.16);
    }
.identity-language-link {
    cursor: pointer;
}

button.identity-language-link {
    appearance: none;
    -webkit-appearance: none;
}


.cookie-consent-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.35);
}

.cookie-consent-box {
    width: min(720px, 100%);
    border-radius: 18px;
    padding: 1.25rem;
    background: #1f1721;
    color: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

    .cookie-consent-box h3 {
        margin-bottom: 0.5rem;
    }

    .cookie-consent-box p {
        margin-bottom: 1rem;
        color: rgba(255, 255, 255, 0.82);
    }

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.cookie-consent-settings {
    display: grid;
    gap: 0.8rem;
    margin: 1rem 0;
}

.cookie-consent-option {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

    .cookie-consent-option p {
        margin: 0.25rem 0 0;
        font-size: 0.9rem;
    }


.booking-step-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-date-wrapper {
    position: relative;
}

.booking-date-input,
.booking-time-select {
    min-height: 52px;
    border-radius: 16px;
    font-size: 1rem;
    padding: 12px 16px;
    background-color: #f4f4f6;
    color: #202123;
    border: 1px solid #d7d7df;
}

    .booking-date-input:focus,
    .booking-time-select:focus {
        border-color: #A67C00;
        box-shadow: 0 0 0 .15rem rgba(166, 124, 0, .25);
    }

    .booking-date-input::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.85;
        transform: scale(1.15);
    }

.booking-create-container {
    max-width: 980px;
}

.booking-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

.booking-category-card,
.booking-service-card {
    min-height: 72px;
}

/* Mobile booking UX */
@media (max-width: 768px) {
    .form-container-small,
    .form-container,
    .form-container-litwide,
    .form-container-wide {
        width: calc(100% - 24px);
        margin: 20px auto;
        padding: 16px;
    }

    .booking-create-container {
        max-width: none;
    }

    .booking-category-grid,
    .booking-service-grid {
        grid-template-columns: 1fr;
    }

    .booking-category-card,
    .booking-service-card {
        width: 100%;
        min-height: 78px;
        padding: 16px;
    }

    .selected-category-box {
        flex-direction: column;
        align-items: stretch;
    }

        .selected-category-box .btn {
            width: 100%;
        }

    .booking-date-input,
    .booking-time-select {
        min-height: 54px;
        font-size: 1rem;
    }

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

        .booking-actions .btn {
            width: 100%;
            margin-left: 0 !important;
        }
}

.landing-main {
    flex: 1 0 auto;
    min-height: calc(100svh - 80px);
    background-color: #131214;
    background-image:
        radial-gradient(
            circle at 17% -16%,
            transparent 0 292px,
            rgba(216, 178, 86, .24) 293px 294px,
            transparent 295px
        ),
        radial-gradient(
            circle at 107% 42%,
            transparent 0 265px,
            rgba(216, 178, 86, .20) 266px 267px,
            transparent 268px
        ),
        radial-gradient(
            ellipse at 7% 17%,
            rgba(84, 26, 91, .30),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 94% 24%,
            rgba(68, 25, 74, .25),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 110%,
            rgba(62, 22, 68, .16),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #181219 0%,
            #151416 48%,
            #121214 100%
        );
    background-repeat: no-repeat;
}

.booking-create-container {
    max-width: 1100px;
}

.booking-wizard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

.booking-wizard-steps {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid transparent;
    font-weight: 700;
}

.booking-wizard-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #393939;
    color: #ffffff;
    flex-shrink: 0;
}

.booking-wizard-step.active {
    color: #ffffff;
    background: rgba(52, 21, 57, 0.55);
    border-color: rgba(166, 124, 0, 0.65);
}

    .booking-wizard-step.active .booking-wizard-number {
        background: #A67C00;
        color: #ffffff;
    }

.booking-wizard-step.completed {
    color: rgba(255, 255, 255, 0.86);
}

    .booking-wizard-step.completed .booking-wizard-number {
        background: #341539;
        color: #ffffff;
    }

.booking-wizard-content {
    min-width: 0;
}

.booking-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

@media (max-width: 768px) {
    .booking-wizard-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .booking-wizard-steps {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 10px;
        scrollbar-width: thin;
    }

    .booking-wizard-step {
        min-width: max-content;
        padding: 9px 12px;
        font-size: 0.86rem;
    }

    .booking-wizard-number {
        width: 26px;
        height: 26px;
        font-size: 0.82rem;
    }

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

        .booking-actions .btn {
            width: 100%;
            margin-left: 0 !important;
        }
}


.booking-calendar-box {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;
    max-width: 460px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

.booking-calendar-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    text-align: center;
    margin-bottom: 18px;
    font-size: 1.15rem;
    color: #ffffff;
}

.booking-calendar-arrow {
    border: none;
    background: #262626;
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 12px;
    min-height: 42px;
}

    .booking-calendar-arrow:hover:not(:disabled) {
        background: #341539;
        color: #ffffff;
    }

    .booking-calendar-arrow:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

.booking-calendar-weekdays,
.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.booking-calendar-weekdays {
    margin-bottom: 8px;
    color: #d8d8d8;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}

.booking-calendar-grid {
    gap: 6px;
    margin-bottom: 14px;
}

.booking-calendar-empty {
    height: 46px;
}

.booking-calendar-day {
    height: 46px;
    border-radius: 12px;
    background: #262626;
    color: #ffffff;
    border: 1px solid #393939;
    cursor: pointer;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

    .booking-calendar-day:hover:not(:disabled) {
        background: #341539;
        border-color: #A67C00;
        transform: translateY(-1px);
    }

    .booking-calendar-day.today {
        border-color: rgba(166, 124, 0, 0.8);
        box-shadow: 0 0 0 2px rgba(166, 124, 0, 0.18);
    }

    .booking-calendar-day.selected {
        background: #341539;
        border-color: #A67C00;
        color: #ffffff;
        box-shadow: 0 0 0 2px rgba(166, 124, 0, 0.25);
    }

    .booking-calendar-day:disabled {
        cursor: not-allowed;
        transform: none;
    }

    .booking-calendar-day.closed,
    .booking-calendar-day.closed:disabled {
        background: rgba(255, 93, 93, 0.16);
        border-color: rgba(255, 93, 93, 0.42);
        color: #ff9a9a;
        text-decoration: line-through;
        opacity: 1;
    }

.booking-calendar-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d8d8d8;
    font-size: 0.9rem;
    margin-top: 8px;
}

.booking-calendar-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

    .booking-calendar-legend-dot.closed {
        background: #ff5d5d;
    }

@media (max-width: 768px) {
    .booking-calendar-box {
        max-width: none;
        width: 100%;
        padding: 16px;
    }

    .booking-calendar-empty,
    .booking-calendar-day {
        height: 42px;
        border-radius: 10px;
    }
}


/* ───────── My bookings mobile cards ───────── */

.booking-mobile-list {
    display: none;
}

.bookings-new-btn {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .bookings-mine-container {
        max-width: none;
    }

    .bookings-table-desktop {
        display: none;
    }

    .booking-mobile-list {
        display: grid;
        gap: 14px;
    }

    .booking-mobile-card {
        padding: 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    }

    .booking-mobile-card-history {
        opacity: 0.78;
    }

    .booking-mobile-card-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 12px;
    }

        .booking-mobile-card-header strong {
            display: block;
            color: #ffffff;
            font-size: 1rem;
            line-height: 1.35;
        }

    .booking-mobile-label,
    .booking-mobile-info-grid span,
    .booking-mobile-price-box span {
        display: block;
        color: #aaa3aa;
        font-size: 0.78rem;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .booking-mobile-status {
        flex-shrink: 0;
        border-radius: 999px;
        padding: 5px 9px;
        background: rgba(52, 21, 57, 0.75);
        border: 1px solid rgba(166, 124, 0, 0.55);
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .booking-mobile-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

        .booking-mobile-info-grid strong {
            color: #ffffff;
            font-size: 0.92rem;
        }

    .booking-mobile-price-box {
        display: grid;
        gap: 8px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.07);
    }

        .booking-mobile-price-box div {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .booking-mobile-price-box strong {
            color: #ffffff;
        }

    .booking-mobile-total {
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

        .booking-mobile-total strong {
            color: #f2c94c;
            font-size: 1.05rem;
        }

    .booking-mobile-delete {
        width: 100%;
        margin-top: 12px;
        border-radius: 999px;
    }

    .bookings-new-btn {
        width: 100%;
    }
}
.booking-calendar-day.past,
.booking-calendar-day.past:disabled {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.20);
    cursor: not-allowed;
    opacity: 1;
    text-decoration: none;
}

.booking-calendar-day.too-far,
.booking-calendar-day.too-far:disabled {
    background: rgba(166, 124, 0, 0.08);
    border-color: rgba(166, 124, 0, 0.22);
    color: rgba(230, 205, 140, 0.45);
    cursor: not-allowed;
    opacity: 1;
    text-decoration: none;
}

    .booking-calendar-day.past:hover,
    .booking-calendar-day.too-far:hover {
        transform: none;
    }

/* ───────── Admin bookings mobile card table ───────── */

@media (max-width: 768px) {
    .bookings-read-container {
        max-width: none;
    }

        .bookings-read-container > .btn-primary {
            width: 100%;
        }

    .bookings-admin-table {
        border: 0;
    }

        .bookings-admin-table thead {
            display: none;
        }

        .bookings-admin-table,
        .bookings-admin-table tbody,
        .bookings-admin-table tr,
        .bookings-admin-table td {
            display: block;
            width: 100%;
        }

            .bookings-admin-table tr {
                margin-bottom: 14px;
                padding: 14px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.045) !important;
                border: 1px solid rgba(255, 255, 255, 0.10);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            }

            .bookings-admin-table td {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: flex-start;
                padding: 9px 0 !important;
                border: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                word-break: break-word;
            }

                .bookings-admin-table td:last-child {
                    border-bottom: 0 !important;
                    padding-bottom: 0 !important;
                }

                .bookings-admin-table td::before {
                    flex: 0 0 42%;
                    color: #aaa3aa;
                    font-size: 0.78rem;
                    font-weight: 800;
                }

                .bookings-admin-table td strong {
                    color: #f2c94c;
                }

                .bookings-admin-table td:last-child {
                    display: block;
                }

                    .bookings-admin-table td:last-child::before {
                        display: block;
                        margin-bottom: 8px;
                    }

                    .bookings-admin-table td:last-child .btn {
                        width: 100%;
                        margin-left: 0 !important;
                        margin-bottom: 8px;
                        border-radius: 999px;
                    }

                        .bookings-admin-table td:last-child .btn:last-child {
                            margin-bottom: 0;
                        }

                /* Shared labels */
                .bookings-admin-table td:nth-of-type(1)::before {
                    content: "Email";
                }

                .bookings-admin-table td:nth-of-type(2)::before {
                    content: "Phone";
                }

                .bookings-admin-table td:nth-of-type(3)::before {
                    content: "Service";
                }

                .bookings-admin-table td:nth-of-type(4)::before {
                    content: "Employee";
                }

                .bookings-admin-table td:nth-of-type(5)::before {
                    content: "Date";
                }

                .bookings-admin-table td:nth-of-type(6)::before {
                    content: "Time";
                }

                .bookings-admin-table td:nth-of-type(7)::before {
                    content: "Price";
                }

                .bookings-admin-table td:nth-of-type(10)::before {
                    content: "Status";
                }

                .bookings-admin-table td:nth-of-type(11)::before {
                    content: "Payment";
                }

    /* Needs action table */
    .bookings-admin-needs-table td:nth-of-type(8)::before {
        content: "Mira Credit";
    }

    .bookings-admin-needs-table td:nth-of-type(9)::before {
        content: "Customer pays";
    }

    .bookings-admin-needs-table td:nth-of-type(12)::before {
        content: "Action";
    }

    /* Upcoming table */
    .bookings-admin-upcoming-table td:nth-of-type(8)::before {
        content: "Mira Credit";
    }

    .bookings-admin-upcoming-table td:nth-of-type(9)::before {
        content: "Customer pays";
    }

    .bookings-admin-upcoming-table td:nth-of-type(12)::before {
        content: "Created At";
    }

    .bookings-admin-upcoming-table td:nth-of-type(13)::before {
        content: "Action";
    }

    /* Completed table */
    .bookings-admin-completed-table td:nth-of-type(8)::before {
        content: "Mira Credit used";
    }

    .bookings-admin-completed-table td:nth-of-type(9)::before {
        content: "Customer paid";
    }

    .bookings-admin-completed-table td:nth-of-type(12)::before {
        content: "Created At";
    }

    .bookings-admin-completed-table td:nth-of-type(13)::before {
        content: "Action";
    }

    /* Other past table */
    .bookings-admin-other-table td:nth-of-type(8)::before {
        content: "Mira Credit";
    }

    .bookings-admin-other-table td:nth-of-type(9)::before {
        content: "Customer pays";
    }

    .bookings-admin-other-table td:nth-of-type(12)::before {
        content: "Action";
    }
}


/* ───────── Employees mobile card table ───────── */

@media (max-width: 768px) {
    .employees-list-container {
        max-width: none;
    }

    .employees-mobile-table {
        border: 0;
    }

        .employees-mobile-table thead {
            display: none;
        }

        .employees-mobile-table,
        .employees-mobile-table tbody,
        .employees-mobile-table tr,
        .employees-mobile-table td {
            display: block;
            width: 100%;
        }

            .employees-mobile-table tr {
                margin-bottom: 14px;
                padding: 14px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.045) !important;
                border: 1px solid rgba(255, 255, 255, 0.10);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            }

            .employees-mobile-table td {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: flex-start;
                padding: 9px 0 !important;
                border: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                word-break: break-word;
            }

                .employees-mobile-table td:last-child {
                    border-bottom: 0 !important;
                    display: block;
                    padding-bottom: 0 !important;
                }

                .employees-mobile-table td::before {
                    flex: 0 0 38%;
                    color: #aaa3aa;
                    font-size: 0.78rem;
                    font-weight: 800;
                }

                .employees-mobile-table td:nth-of-type(1)::before {
                    content: "Name";
                }

                .employees-mobile-table td:nth-of-type(2)::before {
                    content: "Description";
                }

                .employees-mobile-table td:nth-of-type(3)::before {
                    content: "Phone";
                }

                .employees-mobile-table td:nth-of-type(4)::before {
                    content: "Instagram";
                }

                .employees-mobile-table td:nth-of-type(5)::before {
                    content: "Active";
                }

                .employees-mobile-table td:nth-of-type(6)::before {
                    content: "Services";
                }

                .employees-mobile-table td:nth-of-type(7)::before {
                    content: "Created";
                }

                .employees-mobile-table td:nth-of-type(8)::before {
                    content: "Action";
                }

                .employees-mobile-table td:last-child::before {
                    display: block;
                    margin-bottom: 8px;
                }

                .employees-mobile-table td:last-child .btn {
                    width: 100%;
                    margin-left: 0 !important;
                    margin-bottom: 8px;
                    border-radius: 999px;
                }

                    .employees-mobile-table td:last-child .btn:last-child {
                        margin-bottom: 0;
                    }

            .employees-mobile-table a {
                color: #A67C00;
            }
}




/* ───────── Services mobile card table ───────── */

@media (max-width: 768px) {
    .services-list-container {
        max-width: none;
    }

        .services-list-container > .btn-primary {
            width: 100%;
        }

    .services-mobile-table {
        border: 0;
    }

        .services-mobile-table thead {
            display: none;
        }

        .services-mobile-table,
        .services-mobile-table tbody,
        .services-mobile-table tr,
        .services-mobile-table td {
            display: block;
            width: 100%;
        }

            .services-mobile-table tr {
                margin-bottom: 14px;
                padding: 14px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.045) !important;
                border: 1px solid rgba(255, 255, 255, 0.10);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            }

            .services-mobile-table td {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: flex-start;
                padding: 9px 0 !important;
                border: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                word-break: break-word;
            }

                .services-mobile-table td:last-child {
                    border-bottom: 0 !important;
                    display: block;
                    padding-bottom: 0 !important;
                }

                .services-mobile-table td::before {
                    flex: 0 0 38%;
                    color: #aaa3aa;
                    font-size: 0.78rem;
                    font-weight: 800;
                }

                .services-mobile-table td:nth-of-type(1)::before {
                    content: "Status";
                }

                .services-mobile-table td:nth-of-type(2)::before {
                    content: "Group";
                }

                .services-mobile-table td:nth-of-type(3)::before {
                    content: "Name";
                }

                .services-mobile-table td:nth-of-type(4)::before {
                    content: "Description";
                }

                .services-mobile-table td:nth-of-type(5)::before {
                    content: "Duration";
                }

                .services-mobile-table td:nth-of-type(6)::before {
                    content: "Price";
                }

                .services-mobile-table td:nth-of-type(7)::before {
                    content: "Order";
                }

                .services-mobile-table td:nth-of-type(8)::before {
                    content: "Action";
                }

                .services-mobile-table td:last-child::before {
                    display: block;
                    margin-bottom: 8px;
                }

                .services-mobile-table td:last-child .btn {
                    width: 100%;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                    margin-bottom: 8px;
                    border-radius: 999px;
                }

                    .services-mobile-table td:last-child .btn:last-child {
                        margin-bottom: 0;
                    }

            .services-mobile-table .badge {
                align-self: flex-end;
            }
}


/* ───────── Unavailable periods mobile card table ───────── */

@media (max-width: 768px) {
    .unavailable-periods-list-container {
        max-width: none;
    }

    .unavailable-periods-mobile-table {
        border: 0;
    }

        .unavailable-periods-mobile-table thead {
            display: none;
        }

        .unavailable-periods-mobile-table,
        .unavailable-periods-mobile-table tbody,
        .unavailable-periods-mobile-table tr,
        .unavailable-periods-mobile-table td {
            display: block;
            width: 100%;
        }

            .unavailable-periods-mobile-table tr {
                margin-bottom: 14px;
                padding: 14px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.045) !important;
                border: 1px solid rgba(255, 255, 255, 0.10);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            }

            .unavailable-periods-mobile-table td {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: flex-start;
                padding: 9px 0 !important;
                border: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                word-break: break-word;
            }

                .unavailable-periods-mobile-table td:last-child {
                    border-bottom: 0 !important;
                    display: block;
                    padding-bottom: 0 !important;
                }

                .unavailable-periods-mobile-table td::before {
                    flex: 0 0 38%;
                    color: #aaa3aa;
                    font-size: 0.78rem;
                    font-weight: 800;
                }

                .unavailable-periods-mobile-table td:nth-of-type(1)::before {
                    content: "Start";
                }

                .unavailable-periods-mobile-table td:nth-of-type(2)::before {
                    content: "End";
                }

                .unavailable-periods-mobile-table td:nth-of-type(3)::before {
                    content: "Reason";
                }

                .unavailable-periods-mobile-table td:nth-of-type(4)::before {
                    content: "Created";
                }

                .unavailable-periods-mobile-table td:nth-of-type(5)::before {
                    content: "Action";
                }

                .unavailable-periods-mobile-table td:last-child::before {
                    display: block;
                    margin-bottom: 8px;
                }

                .unavailable-periods-mobile-table td:last-child .btn {
                    width: 100%;
                    margin-left: 0 !important;
                    margin-bottom: 8px;
                    border-radius: 999px;
                }

                    .unavailable-periods-mobile-table td:last-child .btn:last-child {
                        margin-bottom: 0;
                    }
}

/* ───────── User management mobile card table ───────── */

@media (max-width: 768px) {
    .user-management-list-container {
        max-width: none;
    }

    .user-management-mobile-table {
        border: 0;
    }

        .user-management-mobile-table thead {
            display: none;
        }

        .user-management-mobile-table,
        .user-management-mobile-table tbody,
        .user-management-mobile-table tr,
        .user-management-mobile-table td {
            display: block;
            width: 100%;
        }

            .user-management-mobile-table tr {
                margin-bottom: 14px;
                padding: 14px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.045) !important;
                border: 1px solid rgba(255, 255, 255, 0.10);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
            }

            .user-management-mobile-table td {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: flex-start;
                padding: 9px 0 !important;
                border: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                word-break: break-word;
            }

                .user-management-mobile-table td:last-child {
                    border-bottom: 0 !important;
                    display: block;
                    padding-bottom: 0 !important;
                }

                .user-management-mobile-table td::before {
                    flex: 0 0 38%;
                    color: #aaa3aa;
                    font-size: 0.78rem;
                    font-weight: 800;
                }

                .user-management-mobile-table td:nth-of-type(1)::before {
                    content: "Email";
                }

                .user-management-mobile-table td:nth-of-type(2)::before {
                    content: "Phone";
                }

                .user-management-mobile-table td:nth-of-type(3)::before {
                    content: "Email confirmed";
                }

                .user-management-mobile-table td:nth-of-type(4)::before {
                    content: "Roles";
                }

                .user-management-mobile-table td:nth-of-type(5)::before {
                    content: "Status";
                }

                .user-management-mobile-table td:nth-of-type(6)::before {
                    content: "Action";
                }

                .user-management-mobile-table td:last-child::before {
                    display: block;
                    margin-bottom: 8px;
                }

                .user-management-mobile-table td:last-child .btn {
                    width: 100%;
                    margin-left: 0 !important;
                    margin-bottom: 8px;
                    border-radius: 999px;
                }

                    .user-management-mobile-table td:last-child .btn:last-child {
                        margin-bottom: 0;
                    }
}


/* Shared navbar mobile burger + dropdown */
.custom-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
}

    .custom-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 .15rem rgba(166, 124, 0, .35) !important;
    }

.custom-navbar .navbar-toggler-icon {
    filter: none !important;
}

@media (max-width: 575.98px) {
    .custom-navbar .navbar-toggler {
        display: block !important;
        margin-left: auto;
    }

    .custom-navbar .navbar-collapse {
        width: 100%;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .custom-navbar .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 8px;
    }

    .custom-navbar .nav-item,
    .custom-navbar .identity-nav-btn {
        width: 100%;
    }

    .custom-navbar .nav-link,
    .custom-navbar .identity-nav-btn {
        width: 100% !important;
        min-height: 48px;
        justify-content: flex-start !important;
        background: #341539 !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        padding: 0.75rem 1.15rem !important;
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

        .custom-navbar .nav-link:hover,
        .custom-navbar .nav-link:focus,
        .custom-navbar .nav-link.active,
        .custom-navbar .identity-nav-btn:hover,
        .custom-navbar .identity-nav-btn:focus {
            background: #42184a !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 1px rgba(166, 124, 0, 0.45);
        }

    .custom-navbar .nav-hover-icon {
        opacity: 1;
        max-width: 24px;
        margin-right: 8px;
        transform: none;
    }

    .custom-navbar .nav-link span {
        text-transform: uppercase;
    }

    .custom-navbar .identity-language-switcher {
        justify-content: center;
        margin: 0 0 8px 0;
    }

    .custom-navbar .dropdown-menu.price-dd {
        width: 100%;
        margin-top: 8px;
        border-radius: 16px;
    }

        .custom-navbar .dropdown-menu.price-dd .dropdown-item {
            border-radius: 12px;
            padding: 0.7rem 1rem;
        }
}

/* Identity navbar mobile order + alignment */
@media (max-width: 575.98px) {
    .custom-navbar .identity-language-item {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .custom-navbar .identity-final-item {
        order: 3;
    }

    .custom-navbar .navbar-nav > .nav-item:not(.identity-language-item):not(.identity-final-item) {
        order: 1;
    }

    .custom-navbar .nav-link,
    .custom-navbar .identity-nav-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .custom-navbar .nav-hover-icon {
        flex: 0 0 24px;
        margin-right: 0 !important;
    }

    .custom-navbar .nav-link span,
    .custom-navbar .identity-nav-btn span {
        line-height: 1;
    }
}


/* Force same mobile navbar font size */
@media (max-width: 575.98px) {
    .custom-navbar .nav-link,
    .custom-navbar .identity-nav-btn,
    .custom-navbar .nav-link span,
    .custom-navbar .identity-nav-btn span {
        font-family: var(--font-body) !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
    }
}


/* Identity navbar desktop button text size */
@media (min-width: 576px) {
    .custom-navbar .identity-nav-btn,
    .custom-navbar .identity-nav-btn span {
        font-family: var(--font-body) !important;
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .custom-navbar .identity-language-link {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
    }
}






/* ───────── FINAL unified Mira navbar buttons ───────── */

.custom-navbar .mira-nav-btn {
    background: #341539 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.1rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .custom-navbar .mira-nav-btn span {
        font-family: var(--font-body) !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: 1 !important;
    }

    .custom-navbar .mira-nav-btn:hover,
    .custom-navbar .mira-nav-btn:focus,
    .custom-navbar .mira-nav-btn.active {
        background: #42184a !important;
        color: #ffffff !important;
        border-color: #A67C00 !important;
        box-shadow: 0 0 10px rgba(166, 124, 0, .35);
    }

/* Mobile navbar buttons */
@media (max-width: 575.98px) {
    .custom-navbar .mira-nav-btn {
        width: 100% !important;
        min-height: 48px;
        justify-content: flex-start !important;
        padding: 0.75rem 1.15rem !important;
        font-size: 1.05rem !important;
        text-align: left !important;
        text-transform: uppercase !important;
        gap: 8px !important;
    }

        .custom-navbar .mira-nav-btn span {
            text-transform: uppercase !important;
        }
}

/* ───────── FINAL mobile hamburger icon ───────── */

.custom-navbar .navbar-toggler-icon {
    width: 1.5em;
    height: 1.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}



/* ───────── Booking time cards ───────── */

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

.booking-time-card {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f4f6;
    color: #202123;
    border: 1px solid #d7d7df;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

    .booking-time-card:hover,
    .booking-time-card:focus {
        border-color: #A67C00;
        box-shadow: 0 0 0 .15rem rgba(166, 124, 0, .25);
        transform: translateY(-1px);
    }

    .booking-time-card.active {
        border-color: #A67C00;
        background: rgba(166, 124, 0, 0.12);
        box-shadow: 0 0 0 2px rgba(166, 124, 0, .22);
    }

.booking-time-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.8px solid #9ca3af;
    background: #ffffff;
    flex-shrink: 0;
    position: relative;
}

.booking-time-card.active .booking-time-radio {
    border-color: #A67C00;
}

    .booking-time-card.active .booking-time-radio::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: #A67C00;
    }

.booking-time-text {
    line-height: 1;
}

.booking-time-empty {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
    background: #f4f4f6;
    color: #202123;
    border: 1px solid #d7d7df;
}

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

    .booking-time-card {
        min-height: 54px;
    }
}

@media (max-width: 420px) {
    .booking-time-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────
   Mira premium navbar
   ───────────────────────────────────────────── */

.mira-premium-navbar {
    z-index: 1050;
    min-height: 76px;
    padding: 0 !important;
    background: rgba(18, 16, 19, 0.92) !important;
    border-bottom: 1px solid rgba(197, 154, 56, 0.22);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mira-nav-shell {
    width: min(1480px, 100%);
    min-height: 76px;
    margin: 0 auto;
    padding: 0 24px;
}

.mira-premium-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: #ffffff !important;
    text-decoration: none;
}

    .mira-premium-brand img {
        width: auto;
        height: 54px;
        object-fit: contain;
    }

    .mira-premium-brand span {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

.mira-main-navigation {
    align-items: center;
    gap: 6px;
    margin-left: 34px;
}

.mira-premium-link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 13px !important;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.76) !important;
    font-family: var(--font-body);
    font-size: 0.91rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

    .mira-premium-link::after {
        content: "";
        position: absolute;
        right: 13px;
        bottom: 5px;
        left: 13px;
        height: 1px;
        background: #d9bd72;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.2s ease;
    }

    .mira-premium-link:hover,
    .mira-premium-link:focus,
    .mira-premium-link.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.045);
    }

        .mira-premium-link:hover::after,
        .mira-premium-link:focus::after,
        .mira-premium-link.active::after {
            transform: scaleX(1);
        }

.mira-management-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.mira-management-toggle.active svg {
    transform: rotate(180deg);
}

.mira-management-item {
    position: relative;
}

.mira-management-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 1100;
    width: 300px;
    display: none;
    padding: 10px;
    border: 1px solid rgba(197, 154, 56, 0.25);
    border-radius: 20px;
    background: rgba(24, 22, 25, 0.98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    .mira-management-menu.show {
        display: grid;
        gap: 4px;
    }

.mira-management-link {
    display: block;
    padding: 12px 14px;
    border-radius: 13px;
    color: #ffffff !important;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .mira-management-link span {
        display: block;
        margin-bottom: 3px;
        color: #ffffff;
        font-size: 0.96rem;
        font-weight: 800;
    }

    .mira-management-link small {
        display: block;
        color: rgba(255, 255, 255, 0.54);
        font-size: 0.79rem;
        font-weight: 500;
    }

    .mira-management-link:hover,
    .mira-management-link:focus,
    .mira-management-link.active {
        background: rgba(52, 21, 57, 0.72);
        transform: translateX(3px);
    }

        .mira-management-link:hover small,
        .mira-management-link.active small {
            color: rgba(255, 255, 255, 0.75);
        }

.mira-management-divider {
    height: 1px;
    margin: 5px 8px;
    background: rgba(255, 255, 255, 0.09);
}

.mira-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.mira-account-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

    .mira-account-link svg {
        width: 20px;
        height: 20px;
        color: #d9bd72;
    }

    .mira-account-link:hover,
    .mira-account-link:focus,
    .mira-account-link.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.06);
    }

.mira-navbar-booking {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid #c59a38;
    border-radius: 999px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #4a1d50, #2e1033);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(197, 154, 56, 0.07);
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .mira-navbar-booking svg {
        width: 19px;
        height: 19px;
    }

    .mira-navbar-booking:hover,
    .mira-navbar-booking:focus,
    .mira-navbar-booking.active {
        color: #ffffff !important;
        background: #a67c00;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
    }

.mira-navbar-toggler {
    width: 46px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(197, 154, 56, 0.4);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

    .mira-navbar-toggler span {
        width: 21px;
        height: 2px;
        border-radius: 999px;
        background: #ffffff;
    }

/* Tablet and mobile */

@media (max-width: 1199.98px) {
    .mira-premium-navbar {
        min-height: 70px;
    }

    .mira-nav-shell {
        min-height: 70px;
        padding: 0 16px;
    }

    .mira-premium-brand img {
        height: 50px;
    }

    .mira-premium-brand span {
        font-size: 1.08rem;
    }

    .mira-navbar-toggler {
        display: inline-flex;
    }

    .mira-premium-navbar .navbar-collapse {
        width: 100%;
        padding: 14px 0 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mira-main-navigation {
        width: 100%;
        display: grid;
        gap: 4px;
        margin: 0;
    }

    .mira-premium-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 48px;
        padding: 12px 14px !important;
        border-radius: 13px;
    }

        .mira-premium-link::after {
            display: none;
        }

        .mira-premium-link:hover,
        .mira-premium-link:focus,
        .mira-premium-link.active {
            background: rgba(52, 21, 57, 0.65);
        }

    .mira-management-item {
        width: 100%;
    }

    .mira-management-toggle {
        justify-content: space-between;
    }

    .mira-management-menu {
        position: static;
        width: 100%;
        margin: 4px 0 8px;
        border-radius: 16px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.035);
    }

    .mira-nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

        .mira-nav-actions .identity-language-switcher {
            justify-content: center;
            margin: 0 0 5px;
        }

    .mira-account-link,
    .mira-navbar-booking {
        width: 100%;
        min-height: 50px;
    }
}

@media (max-width: 575.98px) {
    .mira-nav-shell {
        padding: 0 12px;
    }

    .mira-premium-brand span {
        display: none;
    }

    .mira-premium-brand img {
        height: 48px;
    }

    .mira-premium-link {
        font-size: 0.93rem;
    }

    .mira-management-menu {
        padding: 7px;
    }

    .mira-management-link {
        padding: 11px 12px;
    }
}


/* ─────────────────────────────────────────────
   Premium design for the EXISTING navbar
   All current links and features remain
   ───────────────────────────────────────────── */

.custom-navbar {
    z-index: 1050;
    min-height: 76px;
    padding: 0 !important;
    background: rgba(17, 15, 18, 0.94) !important;
    border-bottom: 1px solid rgba(197, 154, 56, 0.24);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .custom-navbar > .container-fluid {
        width: min(1600px, 100%);
        min-height: 76px;
        margin: 0 auto;
        padding: 0 22px;
    }

    .custom-navbar .navbar-brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0;
        margin-right: 20px;
    }

        .custom-navbar .navbar-brand img {
            width: auto;
            height: 54px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .custom-navbar .navbar-brand:hover img {
            transform: scale(1.03);
        }

    .custom-navbar .navbar-collapse {
        align-items: center;
    }

    .custom-navbar .navbar-nav {
        align-items: center;
        gap: 4px;
    }

    /* Existing navigation buttons */

    .custom-navbar .mira-nav-btn {
        position: relative;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 10px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.76) !important;
        box-shadow: none !important;
        font-family: var(--font-body) !important;
        font-size: 0.86rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
        white-space: nowrap;
        text-decoration: none !important;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    }

        .custom-navbar .mira-nav-btn::after {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 5px;
            left: 12px;
            height: 1px;
            border-radius: 999px;
            background: #d9bd72;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.2s ease;
        }

        .custom-navbar .mira-nav-btn:hover,
        .custom-navbar .mira-nav-btn:focus,
        .custom-navbar .mira-nav-btn.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.055) !important;
            border-color: rgba(197, 154, 56, 0.22) !important;
            transform: translateY(-1px);
        }

            .custom-navbar .mira-nav-btn:hover::after,
            .custom-navbar .mira-nav-btn:focus::after,
            .custom-navbar .mira-nav-btn.active::after {
                transform: scaleX(1);
            }

    /* Icons remain visible without moving the text */

    .custom-navbar .nav-hover-icon {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        flex: 0 0 18px;
        margin-right: 0 !important;
        color: #d9bd72;
        opacity: 0.62;
        overflow: visible;
        transform: none !important;
        transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    }

    .custom-navbar .mira-nav-btn:hover .nav-hover-icon,
    .custom-navbar .mira-nav-btn:focus .nav-hover-icon,
    .custom-navbar .mira-nav-btn.active .nav-hover-icon {
        color: #edcd78;
        opacity: 1;
        transform: scale(1.08) !important;
    }

    /* Booking is the strongest action */

    .custom-navbar a[href="bookingcreate"] {
        padding: 11px 17px !important;
        border-color: #c59a38 !important;
        border-radius: 999px !important;
        background: linear-gradient( 135deg, #4a1d50, #2e1033) !important;
        color: #ffffff !important;
        box-shadow: 0 9px 22px rgba(0, 0, 0, 0.3) !important;
    }

        .custom-navbar a[href="bookingcreate"]::after {
            display: none;
        }

        .custom-navbar a[href="bookingcreate"]:hover,
        .custom-navbar a[href="bookingcreate"]:focus,
        .custom-navbar a[href="bookingcreate"].active {
            background: #a67c00 !important;
            border-color: #d9bd72 !important;
            transform: translateY(-2px);
        }

    /* Account and login stay visually separate */

    .custom-navbar a[href="Identity/Account/Manage"],
    .custom-navbar a[href="Identity/Account/Login"] {
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

        .custom-navbar a[href="Identity/Account/Manage"]::after,
        .custom-navbar a[href="Identity/Account/Login"]::after {
            display: none;
        }

    /* Price dropdown */

    .custom-navbar .dropdown-menu.price-dd {
        min-width: 230px;
        margin-top: 10px;
        padding: 9px;
        overflow: hidden;
        border: 1px solid rgba(197, 154, 56, 0.26);
        border-radius: 18px;
        background: rgba(24, 22, 25, 0.98);
        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.52);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

        .custom-navbar .dropdown-menu.price-dd .dropdown-item {
            padding: 11px 13px;
            border-radius: 11px;
            color: rgba(255, 255, 255, 0.76);
            font-size: 0.9rem;
            font-weight: 700;
            transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }

            .custom-navbar .dropdown-menu.price-dd .dropdown-item:hover,
            .custom-navbar .dropdown-menu.price-dd .dropdown-item:focus,
            .custom-navbar .dropdown-menu.price-dd .dropdown-item.active {
                color: #ffffff;
                background: rgba(52, 21, 57, 0.78);
                transform: translateX(3px);
            }

    /* Language switcher */

    .custom-navbar .identity-language-switcher {
        flex-shrink: 0;
        margin: 0 8px;
    }

    .custom-navbar .identity-language-link {
        border-color: rgba(197, 154, 56, 0.26);
        background: rgba(255, 255, 255, 0.025);
    }

        .custom-navbar .identity-language-link.active {
            border-color: rgba(217, 189, 114, 0.72);
            background: rgba(197, 154, 56, 0.14);
        }

    /* Burger */

    .custom-navbar .navbar-toggler {
        width: 46px;
        height: 42px;
        padding: 7px 9px !important;
        border: 1px solid rgba(197, 154, 56, 0.42) !important;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.045);
    }

        .custom-navbar .navbar-toggler:focus {
            box-shadow: 0 0 0 3px rgba(197, 154, 56, 0.16) !important;
        }

/* Collapsed navbar: tablets and mobile */

@media (max-width: 1199.98px) {
    .custom-navbar {
        min-height: 70px;
    }

        .custom-navbar > .container-fluid {
            min-height: 70px;
            padding: 0 16px;
        }

        .custom-navbar .navbar-brand img {
            height: 50px;
        }

        .custom-navbar .navbar-collapse {
            width: 100%;
            max-height: calc(100vh - 82px);
            overflow-y: auto;
            margin-top: 8px;
            padding: 14px 0 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .custom-navbar .navbar-nav {
            width: 100%;
            align-items: stretch !important;
            gap: 7px;
            margin: 0 !important;
        }

        .custom-navbar .nav-item {
            width: 100%;
        }

        .custom-navbar .mira-nav-btn {
            width: 100% !important;
            min-height: 50px;
            justify-content: flex-start !important;
            padding: 13px 15px !important;
            border-radius: 14px !important;
            background: rgba(255, 255, 255, 0.035) !important;
            font-size: 0.95rem !important;
            text-align: left !important;
        }

            .custom-navbar .mira-nav-btn::after {
                display: none;
            }

            .custom-navbar .mira-nav-btn:hover,
            .custom-navbar .mira-nav-btn:focus,
            .custom-navbar .mira-nav-btn.active {
                background: rgba(52, 21, 57, 0.72) !important;
                border-color: rgba(197, 154, 56, 0.32) !important;
                transform: none;
            }

        .custom-navbar .nav-hover-icon {
            width: 21px !important;
            height: 21px !important;
            max-width: 21px !important;
            flex-basis: 21px;
            opacity: 1;
        }

        .custom-navbar a[href="bookingcreate"] {
            margin-top: 4px;
            justify-content: center !important;
            border-radius: 999px !important;
            background: linear-gradient( 135deg, #4a1d50, #2e1033) !important;
        }

        .custom-navbar .identity-language-switcher {
            justify-content: center;
            margin: 14px 0 8px;
        }

        .custom-navbar > .container-fluid > .navbar-collapse > .navbar-nav:last-child {
            margin-top: 8px !important;
        }

        .custom-navbar .dropdown-menu.price-dd {
            position: static;
            width: 100%;
            margin-top: 7px;
            border-radius: 14px;
            box-shadow: none;
            background: rgba(255, 255, 255, 0.035);
        }
}

@media (max-width: 575.98px) {
    .custom-navbar > .container-fluid {
        padding: 0 12px;
    }

    .custom-navbar .navbar-brand img {
        height: 47px;
    }

    .custom-navbar .mira-nav-btn {
        font-size: 0.92rem !important;
    }
}

/* ─────────────────────────────────────────────
   Compact Owner/Admin navbar
   ───────────────────────────────────────────── */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.custom-navbar {
    min-height: 76px !important;
}

    .custom-navbar > .container-fluid {
        width: min(1680px, 100%) !important;
        max-width: 1680px !important;
        min-height: 76px;
        margin: 0 auto !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .custom-navbar .navbar-brand {
        margin-left: 0 !important;
        margin-right: 18px !important;
    }

    .custom-navbar .navbar-collapse {
        min-width: 0;
    }

.mira-admin-dropdown {
    position: relative;
}

.custom-navbar .mira-admin-toggle {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
}

.mira-admin-chevron {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.65);
    transition: transform 0.2s ease;
}

    .mira-admin-chevron.open {
        transform: rotate(180deg);
    }

.mira-admin-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 1200;
    display: none;
    width: 310px;
    padding: 10px;
    border: 1px solid rgba(197, 154, 56, 0.28);
    border-radius: 18px;
    background: rgba(23, 21, 24, 0.98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .mira-admin-menu.show {
        display: grid;
        gap: 4px;
    }

.mira-admin-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

    .mira-admin-link:hover,
    .mira-admin-link:focus,
    .mira-admin-link.active {
        color: #ffffff !important;
        background: rgba(52, 21, 57, 0.78);
        transform: translateX(3px);
    }

.mira-admin-divider {
    height: 1px;
    margin: 5px 8px;
    background: rgba(255, 255, 255, 0.1);
}

.mira-admin-group {
    padding: 7px 4px 9px;
}

.mira-admin-group + .mira-admin-group {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mira-admin-group-label {
    padding: 0 10px 7px;
    color: rgba(216, 185, 93, 0.72);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mira-admin-group .mira-admin-link {
    margin-bottom: 2px;
}

.mira-admin-group .mira-admin-link:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .custom-navbar > .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .mira-admin-dropdown {
        width: 100%;
    }

    .mira-admin-toggle {
        justify-content: flex-start !important;
    }

    .mira-admin-chevron {
        margin-left: auto;
    }

    .mira-admin-menu {
        position: static;
        width: 100%;
        margin-top: 7px;
        border-radius: 14px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.035);
    }
}

/* FINAL mobile navbar visibility fix */
@media (max-width: 1199.98px) {

    /* Complete opened mobile menu */
    .custom-navbar .navbar-collapse {
        margin-top: 8px !important;
        padding: 14px !important;
        background: #171419 !important;
        border: 1px solid rgba(197, 154, 56, 0.22) !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45) !important;
    }

    /* Every normal navbar button */
    .custom-navbar .mira-nav-btn {
        width: 100% !important;
        min-height: 50px !important;
        padding: 13px 15px !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        background: #282129 !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 14px !important;
        color: #ffffff !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
    }

        .custom-navbar .mira-nav-btn:hover,
        .custom-navbar .mira-nav-btn:focus,
        .custom-navbar .mira-nav-btn.active {
            background: #341539 !important;
            border-color: #A67C00 !important;
            color: #ffffff !important;
        }

    /* Keep booking as the strongest button */
    .custom-navbar a[href="bookingcreate"] {
        justify-content: center !important;
        background: linear-gradient( 135deg, #4a1d50, #2e1033) !important;
        border-color: #c59a38 !important;
    }

    /* Management dropdown container */
    .custom-navbar .mira-admin-menu {
        position: static !important;
        width: 100% !important;
        margin: 8px 0 2px !important;
        padding: 8px !important;
        background: #120f14 !important;
        border: 1px solid rgba(197, 154, 56, 0.30) !important;
        border-radius: 14px !important;
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28) !important;
    }

    .custom-navbar .mira-admin-group {
        padding: 6px 2px 8px !important;
    }

    .custom-navbar .mira-admin-group + .mira-admin-group {
        margin-top: 5px !important;
        padding-top: 11px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .custom-navbar .mira-admin-group-label {
        padding: 0 8px 7px !important;
        color: rgba(216, 185, 93, 0.78) !important;
        font-size: 0.64rem !important;
    }

    /* Every Management dropdown button */
    .custom-navbar .mira-admin-link {
        display: block !important;
        margin-bottom: 6px !important;
        padding: 13px 14px !important;
        background: #2b222d !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 11px !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    }

        .custom-navbar .mira-admin-link:last-child {
            margin-bottom: 0 !important;
        }

        .custom-navbar .mira-admin-link:hover,
        .custom-navbar .mira-admin-link:focus,
        .custom-navbar .mira-admin-link.active {
            background: #42184a !important;
            border-color: #A67C00 !important;
            transform: none !important;
        }

    /* Prices dropdown */
    .custom-navbar .dropdown-menu.price-dd {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 8px !important;
        background: #120f14 !important;
        border: 1px solid rgba(197, 154, 56, 0.30) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

        .custom-navbar .dropdown-menu.price-dd .dropdown-item {
            margin-bottom: 6px !important;
            padding: 12px 14px !important;
            background: #2b222d !important;
            border: 1px solid rgba(255, 255, 255, 0.10) !important;
            border-radius: 11px !important;
            color: #ffffff !important;
        }

        .custom-navbar .dropdown-menu.price-dd li:last-child .dropdown-item {
            margin-bottom: 0 !important;
        }
}


/* ─────────────────────────────────────────────
   Owner Working Hours
   ───────────────────────────────────────────── */

.working-hours-page {
    width: min(1180px, calc(100% - 32px));
    margin: 48px auto 70px;
}

.working-hours-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 34px 28px;
    text-align: center;
    border: 1px solid rgba(197, 154, 56, 0.20);
    border-radius: 22px;
    background: radial-gradient(circle at top right, rgba(166, 124, 0, 0.12), transparent 34%), linear-gradient(135deg, #211c22, #181619);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.working-hours-kicker {
    margin-bottom: 7px;
    color: #d9bd72;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.working-hours-header h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.working-hours-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1rem;
}

.working-hours-alert {
    margin-bottom: 18px;
    border-radius: 14px;
}

.working-hours-message {
    padding: 30px;
    text-align: center;
    border-radius: 18px;
    background: #1e1e1e;
    color: #cfcfcf;
}

.working-hours-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 15px 18px;
    border: 1px solid rgba(197, 154, 56, 0.22);
    border-radius: 16px;
    background: rgba(166, 124, 0, 0.075);
}

.working-hours-notice-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217, 189, 114, 0.55);
    border-radius: 50%;
    color: #d9bd72;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 800;
}

.working-hours-notice strong {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
}

.working-hours-notice span {
    display: block;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
}

.working-hours-list {
    display: grid;
    gap: 10px;
}

.working-hour-row {
    display: grid;
    grid-template-columns: 170px 125px minmax(330px, 1fr) 105px;
    align-items: center;
    gap: 20px;
    min-height: 92px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.20);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

    .working-hour-row:hover {
        border-color: rgba(197, 154, 56, 0.35);
        background: rgba(52, 21, 57, 0.18);
        transform: translateY(-1px);
    }

    .working-hour-row.is-closed {
        background: rgba(255, 255, 255, 0.018);
    }

.working-hour-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

    .working-hour-day strong {
        color: #ffffff;
        font-size: 1.08rem;
        font-weight: 800;
        text-transform: capitalize;
    }

.working-hour-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

    .working-hour-status.open {
        color: #bce8c4;
        border: 1px solid rgba(102, 187, 106, 0.26);
        background: rgba(76, 175, 80, 0.12);
    }

    .working-hour-status.closed {
        color: #ffabab;
        border: 1px solid rgba(255, 93, 93, 0.24);
        background: rgba(255, 93, 93, 0.09);
    }


/* Toggle */

.working-hour-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

    .working-hour-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.working-hour-toggle-slider {
    position: relative;
    width: 42px;
    height: 23px;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: #343036;
    transition: background 0.18s ease, border-color 0.18s ease;
}

    .working-hour-toggle-slider::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #ffffff;
        transition: transform 0.18s ease;
    }

.working-hour-toggle input:checked + .working-hour-toggle-slider {
    background: rgba(166, 124, 0, 0.65);
    border-color: #A67C00;
}

    .working-hour-toggle input:checked + .working-hour-toggle-slider::after {
        transform: translateX(19px);
    }

.working-hour-toggle-text {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    font-weight: 700;
}


/* Time controls */

.working-hour-times {
    display: grid;
    grid-template-columns: minmax(125px, 1fr) 24px minmax(125px, 1fr);
    align-items: end;
    gap: 10px;
}

.working-hour-time-field label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.working-hour-time-input {
    min-height: 44px;
    border-radius: 11px !important;
    background: #f4f4f6 !important;
    color: #202123 !important;
}

    .working-hour-time-input:disabled {
        border-color: rgba(255, 255, 255, 0.05) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: rgba(255, 255, 255, 0.24) !important;
        opacity: 1;
    }

.working-hour-time-separator {
    padding-bottom: 11px;
    text-align: center;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 800;
}

.working-hour-action {
    display: flex;
    justify-content: flex-end;
}

.working-hour-save {
    min-width: 92px;
    min-height: 44px;
    padding: 9px 18px !important;
}


/* Tablet */

@media (max-width: 900px) {
    .working-hour-row {
        grid-template-columns: 1fr auto;
        gap: 15px;
    }

    .working-hour-toggle {
        justify-self: end;
    }

    .working-hour-times {
        grid-column: 1 / -1;
    }

    .working-hour-action {
        grid-column: 1 / -1;
    }

    .working-hour-save {
        width: 100%;
    }
}


/* Mobile */

@media (max-width: 575.98px) {
    .working-hours-page {
        width: calc(100% - 24px);
        margin: 22px auto 45px;
    }

    .working-hours-header {
        padding: 25px 18px;
        border-radius: 18px;
    }

        .working-hours-header h1 {
            font-size: 2rem;
        }

    .working-hours-notice {
        align-items: flex-start;
        padding: 14px;
    }

    .working-hour-row {
        grid-template-columns: 1fr auto;
        padding: 16px;
        border-radius: 16px;
    }

    .working-hour-times {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .working-hour-time-separator {
        display: none;
    }

    .working-hour-time-input {
        min-height: 50px;
    }
}

.working-hour-select {
    min-height: 48px;
    border-radius: 12px !important;
    border: 1px solid rgba(197, 154, 56, 0.22) !important;
    background: #f4f4f6 !important;
    color: #202123 !important;
    font-weight: 700;
    box-shadow: none !important;
}

    .working-hour-select:focus {
        border-color: #A67C00 !important;
        box-shadow: 0 0 0 0.2rem rgba(166, 124, 0, 0.18) !important;
    }

    .working-hour-select:disabled {
        background: rgba(255, 255, 255, 0.04) !important;
        color: rgba(255, 255, 255, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
        opacity: 1;
    }



/* ─────────────────────────────────────────────
   FINAL mobile footer
   ───────────────────────────────────────────── */

@media (max-width: 576px) {
    .site-footer {
        padding-top: 24px;
    }

        .site-footer .container {
            padding-left: 16px;
            padding-right: 16px;
        }

    .footer-grid {
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .footer-card {
        padding: 16px;
        border-radius: 16px;
    }

    /* Clean mobile quick-link grid */
    .site-footer .footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        padding: 12px 0 14px;
    }

        /* Remove desktop dots */
        .site-footer .footer-links > span {
            display: none;
        }

        .site-footer .footer-links > a,
        .site-footer .footer-links .footer-link-button {
            min-height: 46px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 9px 8px !important;
            margin: 0 !important;
            border: 1px solid rgba(166, 124, 0, 0.28) !important;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.035) !important;
            color: #d8d8d8 !important;
            font-size: 0.9rem !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            text-align: center;
            text-decoration: none !important;
        }

            .site-footer .footer-links > a:hover,
            .site-footer .footer-links > a:focus,
            .site-footer .footer-links .footer-link-button:hover,
            .site-footer .footer-links .footer-link-button:focus {
                background: #341539 !important;
                border-color: #A67C00 !important;
                color: #ffffff !important;
                text-decoration: none !important;
            }

        /* Cookie settings gets its own full-width row */
        .site-footer .footer-links .footer-link-button {
            grid-column: 1 / -1;
        }

    .footer-socials {
        padding: 10px 0 12px;
    }

    .site-footer .social-link {
        width: 42px;
        height: 42px;
    }

    .site-footer .text-center.small {
        padding-top: 4px;
        line-height: 1.45;
    }
}

/* Identity pages: match the main Mira Beauty navbar color */
.custom-navbar.identity-page-navbar {
    background: linear-gradient(90deg, #341539 5%, #1b1b1d 95%) !important;
}

/* ───────── Customer-facing visual polish (design only) ───────── */

/* Prices */
.price-card {
    border-radius: 22px;
    border: 1px solid rgba(217, 189, 114, .16);
    background: #151516;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.price-card:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 189, 114, .42);
    box-shadow: 0 24px 52px rgba(0, 0, 0, .38);
}

.price-card-img {
    height: 430px;
    filter: brightness(.78) saturate(.92);
    transition: transform .35s ease, filter .35s ease;
}

.price-card:hover .price-card-img {
    filter: brightness(.9) saturate(1);
    transform: scale(1.025);
}

.price-card-label {
    padding: 1.35rem 1.15rem 1.2rem;
    font-family: var(--font-heading) !important;
    font-size: 1.45rem;
    letter-spacing: .01em;
    background: linear-gradient(
        180deg,
        rgba(12, 12, 14, 0) 0%,
        rgba(20, 13, 22, .76) 42%,
        rgba(20, 13, 22, .98) 100%);
}

.price-list {
    max-width: 1040px;
    padding: 22px;
    border: 1px solid rgba(217, 189, 114, .12);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(74, 29, 80, .10), rgba(255, 255, 255, .025));
    box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

.price-list-item {
    padding: 22px 22px;
    border-radius: 18px;
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    box-shadow: none;
}

.price-list-item:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 189, 114, .30);
    background: rgba(74, 29, 80, .20);
}

.price-list-name {
    font-size: 1.04rem;
}

.price-list-price {
    color: #e4bf58;
}

/* Contact */
.contact-hero-section,
.contact-info-section {
    border: 1px solid rgba(217, 189, 114, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(74, 29, 80, .18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018));
    box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
}

.contact-hero-text h1,
.contact-details h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.08;
}

.contact-kicker {
    color: #d9bd72;
    font-size: .76rem;
    letter-spacing: .28em;
}

.contact-form-box {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background: rgba(12, 12, 14, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.contact-form-box .form-control {
    min-height: 52px;
    border-radius: 14px;
}

.contact-form-box textarea.form-control {
    min-height: 160px;
}

.contact-actions .btn {
    min-height: 48px;
    padding-inline: 22px;
}

.contact-map iframe {
    border-radius: 22px;
    border: 1px solid rgba(217, 189, 114, .12) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .30);
}

.opening-hours {
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: rgba(0, 0, 0, .12);
}

.opening-hours div:last-child {
    border-bottom: 0;
}

/* Booking flow */
.booking-create-container {
    padding: 28px;
    border: 1px solid rgba(217, 189, 114, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(74, 29, 80, .16), transparent 30%),
        #1c1c1e;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .32);
}

.booking-wizard-layout {
    gap: 28px;
}

.booking-wizard-steps {
    padding: 12px;
    border-radius: 20px;
    border-color: rgba(255, 255, 255, .075);
    background: rgba(255, 255, 255, .025);
}

.booking-wizard-step {
    min-height: 54px;
    padding: 12px 13px;
    border-radius: 16px;
}

.booking-wizard-step.active {
    border-color: rgba(217, 189, 114, .55);
    background: linear-gradient(135deg, rgba(74, 29, 80, .78), rgba(46, 16, 51, .58));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.booking-category-card,
.booking-service-card {
    border-radius: 18px;
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.booking-category-card:hover,
.booking-category-card:focus,
.booking-service-card:hover,
.booking-service-card:focus {
    background: rgba(74, 29, 80, .52);
    border-color: rgba(217, 189, 114, .55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.booking-service-card.active {
    background: rgba(74, 29, 80, .62);
    border-color: #d1ad4d;
    box-shadow: 0 0 0 2px rgba(209, 173, 77, .13), 0 12px 28px rgba(0, 0, 0, .24);
}

.booking-step-box,
.booking-calendar-box {
    border-radius: 20px;
    border-color: rgba(255, 255, 255, .085);
    background: rgba(255, 255, 255, .03);
}

.booking-calendar-box {
    max-width: 520px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

.booking-calendar-day {
    border-radius: 13px;
}

.booking-calendar-day.selected {
    background: linear-gradient(135deg, #4a1d50, #2e1033);
    border-color: #d1ad4d;
}

/* My bookings */
.bookings-mine-container {
    padding: 30px;
    border: 1px solid rgba(217, 189, 114, .11);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(74, 29, 80, .13), transparent 30%),
        #1c1c1e;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .30);
}

.bookings-mine-container h4 {
    color: #f5f1f4;
    font-family: var(--font-heading) !important;
    font-size: 1.45rem;
    letter-spacing: .01em;
}

.bookings-mine-container .table-dark-theme {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .075);
}

.bookings-mine-container .table-dark-theme thead th {
    padding: 14px 12px;
    color: #f7f2f7;
    background: rgba(74, 29, 80, .60);
    border-bottom-color: rgba(217, 189, 114, .22);
    white-space: nowrap;
}

.bookings-mine-container .table-dark-theme tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom-color: rgba(255, 255, 255, .065);
}

.bookings-mine-container .table-dark-theme tbody tr:hover {
    background: rgba(255, 255, 255, .025);
}

.bookings-new-btn {
    min-height: 46px;
    padding-inline: 20px;
}

/* Customer mobile polish */
@media (max-width: 900px) {
    .price-card-img {
        height: 360px;
    }

    .contact-hero-section,
    .contact-info-section {
        border-radius: 22px;
    }
}

@media (max-width: 768px) {
    .booking-create-container,
    .bookings-mine-container {
        padding: 18px;
        border-radius: 20px;
    }

    .booking-mobile-card {
        border-radius: 20px;
        background:
            linear-gradient(145deg, rgba(74, 29, 80, .10), rgba(255, 255, 255, .035));
    }
}

@media (max-width: 576px) {
    .price-card-img {
        height: 315px;
    }

    .price-card-label {
        font-size: 1.25rem;
    }

    .contact-form-box {
        padding: 20px;
    }
}

/* ───────── Mira Beauty mobile-first customer UX ───────── */

@media (max-width: 768px) {
    /* Common customer containers */
    .form-container-small,
    .form-container-litwide,
    .form-container-wide {
        width: calc(100% - 20px);
        margin: 14px auto;
        border-radius: 20px;
    }

    .form-container-small {
        padding: 18px 16px;
    }

    .form-container-small h2 {
        margin-bottom: 8px;
        font-size: clamp(1.65rem, 8vw, 2.05rem);
        line-height: 1.1;
    }

    /* Prices */
    .price-card {
        border-radius: 18px;
    }

    .price-card-img {
        height: 270px;
    }

    .price-card-label {
        padding: 1.05rem 1rem .95rem;
        font-size: 1.25rem;
    }

    .price-list {
        padding: 10px;
        border-radius: 18px;
    }

    .price-list-item {
        padding: 16px 14px;
        margin-bottom: 10px;
        border-radius: 15px;
    }

    .price-list-main {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .price-list-line {
        display: none;
    }

    .price-list-name,
    .price-list-price {
        font-size: .98rem;
    }

    .price-list-description {
        font-size: .9rem;
        line-height: 1.5;
    }

    /* Contact */
    .contact-hero-section,
    .contact-info-section {
        gap: 24px;
        margin-top: 14px;
        margin-bottom: 14px;
        padding: 24px 16px;
        border-radius: 20px;
    }

    .contact-hero-text h1,
    .contact-details h2 {
        margin-bottom: 14px;
        font-size: clamp(1.8rem, 9vw, 2.35rem);
        line-height: 1.1;
    }

    .contact-hero-text p,
    .contact-details p {
        font-size: .96rem;
        line-height: 1.55;
    }

    .contact-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .contact-actions .btn,
    .contact-actions .btn + .btn,
    .contact-actions .btn + span {
        width: 100%;
        min-height: 50px;
        margin-left: 0 !important;
    }

    .contact-form-box {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .contact-form-box h2 {
        font-size: 1.65rem;
    }

    .contact-form-box .form-control {
        min-height: 52px;
        font-size: 16px;
    }

    .contact-form-box textarea.form-control {
        min-height: 140px;
    }

    .contact-map iframe {
        height: 310px !important;
        border-radius: 18px;
    }

    .opening-hours {
        padding: 8px 12px;
        border-radius: 16px;
    }

    .opening-hours div {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 0;
    }

    .opening-hours strong {
        text-align: right;
    }

    /* Booking flow */
    .booking-create-container {
        width: calc(100% - 16px);
        margin: 10px auto 24px;
        padding: 14px;
        border-radius: 20px;
    }

    .booking-wizard-layout {
        gap: 12px;
    }

    .booking-wizard-steps {
        margin: 0 -2px;
        padding: 8px;
        gap: 7px;
        border-radius: 16px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .booking-wizard-step {
        min-height: 44px;
        scroll-snap-align: start;
        padding: 8px 10px;
        border-radius: 13px;
        font-size: .82rem;
    }

    .booking-wizard-number {
        width: 25px;
        height: 25px;
        font-size: .78rem;
    }

    .booking-category-grid,
    .booking-service-grid {
        gap: 9px;
    }

    .booking-category-card,
    .booking-service-card {
        min-height: 68px;
        padding: 14px;
        border-radius: 16px;
    }

    .booking-category-title,
    .booking-service-title {
        font-size: .98rem;
    }

    .booking-service-meta {
        font-size: .82rem;
    }

    .selected-category-box {
        gap: 10px;
        padding: 12px;
        border-radius: 15px;
    }

    .selected-category-box .btn {
        min-height: 44px;
    }

    .booking-calendar-box {
        padding: 12px;
        border-radius: 17px;
    }

    .booking-calendar-header {
        grid-template-columns: 42px 1fr 42px;
        margin-bottom: 12px;
        font-size: 1rem;
    }

    .booking-calendar-arrow {
        min-height: 42px;
        border-radius: 11px;
    }

    .booking-calendar-grid {
        gap: 4px;
    }

    .booking-calendar-empty,
    .booking-calendar-day {
        height: 42px;
        min-width: 0;
        border-radius: 10px;
        font-size: .9rem;
    }

    .booking-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .booking-time-card {
        min-height: 48px;
        padding: 10px 12px;
    }

    .booking-actions {
        gap: 9px;
    }

    .booking-actions .btn {
        min-height: 50px;
    }

    /* Mine bookinger */
    .bookings-mine-container {
        width: calc(100% - 16px);
        margin: 10px auto 24px;
        padding: 14px;
        border-radius: 20px;
    }

    .bookings-new-btn {
        min-height: 50px;
        margin-bottom: 14px;
    }

    .booking-mobile-list {
        gap: 10px;
    }

    .booking-mobile-card {
        padding: 14px;
        border-radius: 18px;
    }

    .booking-mobile-card-header {
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .booking-mobile-info-grid {
        gap: 10px;
        margin-bottom: 10px;
    }

    .booking-mobile-price-box {
        padding: 10px;
        border-radius: 13px;
    }

    .booking-mobile-delete {
        min-height: 48px;
    }
}

@media (max-width: 420px) {
    .price-card-img {
        height: 235px;
    }

    .opening-hours div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .opening-hours strong {
        text-align: left;
    }

    .booking-mobile-info-grid {
        grid-template-columns: 1fr;
    }

    .booking-mobile-card-header {
        flex-direction: column;
    }

    .booking-mobile-status {
        align-self: flex-start;
    }

    .booking-time-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ───────── Booking simplicity pass: mobile-first ───────── */

@media (max-width: 768px) {
    /* Keep the booking flow visually focused on one decision at a time. */
    .booking-create-container {
        padding: 12px;
        background:
            radial-gradient(circle at 50% -10%, rgba(74, 29, 80, .18), transparent 34%),
            #19191b;
    }

    .booking-create-container .form-label {
        display: block;
        margin-bottom: 10px;
        color: #f8f5f8;
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.25;
    }

    /* Compact progress indicator: current step is readable, the rest stay as simple numbers. */
    .booking-wizard-steps {
        display: flex;
        align-items: center;
        gap: 7px;
        overflow: visible;
        padding: 8px;
        border-radius: 17px;
    }

    .booking-wizard-step {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        justify-content: center;
        gap: 0;
        padding: 7px;
        border-radius: 14px;
        overflow: hidden;
        white-space: nowrap;
        transition:
            flex-basis .18s ease,
            width .18s ease,
            border-color .18s ease,
            background .18s ease;
    }

    .booking-wizard-step > span:not(.booking-wizard-number) {
        display: none;
    }

    .booking-wizard-step.active {
        flex: 1 1 150px;
        width: auto;
        justify-content: flex-start;
        gap: 8px;
        padding-inline: 9px 12px;
    }

    .booking-wizard-step.active > span:not(.booking-wizard-number) {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .booking-wizard-step:disabled {
        opacity: .48;
    }

    .booking-wizard-number {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
    }

    /* Choices should look obviously tappable. */
    .booking-category-card,
    .booking-service-card {
        position: relative;
        min-height: 72px;
        padding: 15px 46px 15px 15px;
        border-radius: 17px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .025));
        border-color: rgba(255, 255, 255, .10);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
    }

    .booking-category-card::after,
    .booking-service-card::after {
        content: "›";
        position: absolute;
        top: 50%;
        right: 16px;
        color: #d9bd72;
        font-size: 1.55rem;
        line-height: 1;
        transform: translateY(-52%);
    }

    .booking-service-card.active {
        border-color: #d1ad4d;
        background: linear-gradient(145deg, rgba(74, 29, 80, .74), rgba(48, 20, 52, .58));
    }

    .booking-category-title,
    .booking-service-title {
        margin-bottom: 3px;
        color: #fff;
        font-size: 1rem;
        line-height: 1.3;
    }

    .booking-service-meta {
        color: rgba(255, 255, 255, .68);
        line-height: 1.35;
    }

    /* Selected values become a compact confirmation strip instead of another large card. */
    .selected-category-box {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 11px 10px 14px;
        border-radius: 15px;
        background: rgba(217, 189, 114, .075);
        border-color: rgba(217, 189, 114, .22);
    }

    .selected-category-box > span {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .selected-category-box .btn {
        width: auto;
        min-width: 78px;
        min-height: 40px;
        flex: 0 0 auto;
        padding: 8px 12px;
        border-radius: 999px;
    }

    /* Calendar is intentionally large enough for thumbs without wasting vertical space. */
    .booking-calendar-box {
        margin-inline: -2px;
        padding: 12px 10px 11px;
        background: rgba(255, 255, 255, .028);
    }

    .booking-calendar-weekdays {
        margin-bottom: 6px;
        font-size: .76rem;
    }

    .booking-calendar-day {
        font-size: .92rem;
        font-weight: 800;
    }

    .booking-calendar-legend {
        margin-top: 10px;
        font-size: .8rem;
    }

    /* Time selection is quick to scan: two large columns on normal phones. */
    .booking-step-box {
        margin-top: 12px;
        padding: 13px;
        border-radius: 17px;
    }

    .booking-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    .booking-time-card {
        min-height: 50px;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
        font-size: .98rem;
    }

    .booking-time-card.active {
        color: #fff;
        background: linear-gradient(135deg, #4a1d50, #2e1033);
        border-color: #d1ad4d;
        box-shadow: 0 0 0 2px rgba(209, 173, 77, .13);
    }

    .booking-time-card.active .booking-time-radio {
        border-color: #d9bd72;
        background: #fff;
    }

    .booking-create-container .text-info {
        padding: 10px 12px;
        border-radius: 13px;
        color: #f1dfac !important;
        background: rgba(217, 189, 114, .07);
        border: 1px solid rgba(217, 189, 114, .16);
    }

    /* The final action should be impossible to miss. */
    .booking-actions {
        margin-top: 14px;
        gap: 8px;
    }

    .booking-actions .btn {
        min-height: 52px;
        border-radius: 999px;
        font-weight: 850;
    }

    .booking-actions .btn-primary {
        order: 1;
        border-color: #c59a38;
        background: linear-gradient(135deg, #4a1d50, #2e1033);
        box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
    }

    .booking-actions .btn-secondary {
        order: 2;
        color: rgba(255, 255, 255, .78);
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .16);
    }

    .booking-create-container .alert {
        border-radius: 14px;
        font-size: .9rem;
        line-height: 1.45;
    }
}

@media (max-width: 380px) {
    .booking-wizard-step {
        flex-basis: 38px;
        width: 38px;
        min-width: 38px;
    }

    .booking-wizard-step.active {
        flex-basis: 132px;
    }

    .booking-wizard-number {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .booking-time-card {
        min-height: 48px;
        font-size: .94rem;
    }
}

/* ───────── Dynamic booking page heading ───────── */

.booking-page-heading {
    text-align: center;
}

.booking-page-heading-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #d9bd72;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.booking-page-heading h2 {
    margin: 0;
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.05;
}

.booking-page-heading p {
    max-width: 520px;
    margin: 10px auto 0;
    color: rgba(255, 255, 255, .68);
    font-size: .96rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .booking-page-heading {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 18px 16px 17px;
    }

    .booking-page-heading-kicker {
        margin-bottom: 6px;
        font-size: .66rem;
        letter-spacing: .16em;
    }

    .booking-page-heading h2 {
        font-size: clamp(1.75rem, 8.5vw, 2.25rem);
        line-height: 1.06;
    }

    .booking-page-heading p {
        max-width: 330px;
        margin-top: 7px;
        font-size: .9rem;
        line-height: 1.45;
    }
}

/* ───────── Shared Mira luxury page atmosphere ───────── */

.form-container-small > h1:first-child,
.form-container-small > h2:first-child,
.form-container-litwide > h1:first-child,
.form-container-litwide > h2:first-child {
    text-shadow: 0 8px 28px rgba(0, 0, 0, .30);
}

.contact-startup-notice {
    color: rgba(255, 255, 255, .86) !important;
    background:
        linear-gradient(
            135deg,
            rgba(72, 28, 78, .72),
            rgba(29, 25, 31, .92)
        ) !important;
    border: 1px solid rgba(216, 178, 86, .25) !important;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.contact-startup-notice strong {
    color: #e2c46c;
}

.contact-startup-notice p {
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 768px) {
    .landing-main {
        min-height: calc(100svh - 68px);
        background-image:
            radial-gradient(
                circle at -12% -4%,
                transparent 0 185px,
                rgba(216, 178, 86, .19) 186px 187px,
                transparent 188px
            ),
            radial-gradient(
                circle at 118% 38%,
                transparent 0 175px,
                rgba(216, 178, 86, .16) 176px 177px,
                transparent 178px
            ),
            radial-gradient(
                ellipse at 3% 12%,
                rgba(84, 26, 91, .28),
                transparent 38%
            ),
            radial-gradient(
                ellipse at 100% 29%,
                rgba(68, 25, 74, .20),
                transparent 36%
            ),
            linear-gradient(
                180deg,
                #181219 0%,
                #151416 52%,
                #121214 100%
            );
    }

    .form-container-small,
    .form-container,
    .form-container-litwide,
    .form-container-wide {
        border-radius: 18px;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, .28),
            inset 0 1px 0 rgba(255, 255, 255, .02);
    }
}

/* ───────── Shared Mira page hero ───────── */
.mira-page-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 40px;
    padding: 54px 24px 46px;
    text-align: center;
    background:
        radial-gradient(ellipse at 10% 20%, rgba(83, 25, 90, .16), transparent 34%),
        radial-gradient(ellipse at 92% 18%, rgba(69, 24, 76, .13), transparent 30%),
        linear-gradient(180deg, rgba(24, 18, 25, .72), rgba(18, 16, 20, .36));
    border-bottom: 1px solid rgba(216, 178, 86, .11);
}
.mira-page-hero::before,
.mira-page-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(216, 178, 86, .28);
    border-radius: 50%;
}
.mira-page-hero::before {
    width: 620px;
    height: 620px;
    top: -475px;
    left: 4%;
}
.mira-page-hero::after {
    width: 480px;
    height: 480px;
    right: -355px;
    top: 92px;
}
.mira-page-hero-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    margin: 0 auto;
}
.mira-page-hero-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-bottom: 10px;
    color: #d8b95d;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .31em;
    text-transform: uppercase;
}
.mira-page-hero-kicker::before,
.mira-page-hero-kicker::after {
    content: "";
    width: 58px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 185, 93, .88));
}
.mira-page-hero-kicker::after {
    background: linear-gradient(90deg, rgba(216, 185, 93, .88), transparent);
}
.mira-page-hero h1,
.mira-page-hero h2 {
    margin: 0 0 12px;
    font-family: var(--font-heading) !important;
    font-size: clamp(2.8rem, 5.2vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.025em;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}
.mira-page-hero p {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .76);
    font-size: 1rem;
    line-height: 1.55;
}
.mira-page-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.mira-page-hero-actions .btn {
    margin: 0 !important;
    min-width: 150px;
    min-height: 46px;
    border-radius: 999px;
}
.mira-page-hero-compact {
    margin-bottom: 28px;
    padding-block: 38px 34px;
}
.mira-page-hero-compact h1,
.mira-page-hero-compact h2 {
    font-size: clamp(2.35rem, 4.5vw, 3.65rem);
}
@media (max-width: 768px) {
    .mira-page-hero {
        margin-bottom: 18px;
        padding: 32px 16px 30px;
    }
    .mira-page-hero::before {
        width: 350px;
        height: 350px;
        top: -285px;
        left: -145px;
    }
    .mira-page-hero::after {
        width: 300px;
        height: 300px;
        right: -230px;
        top: 110px;
    }
    .mira-page-hero-kicker {
        gap: 10px;
        font-size: .62rem;
        letter-spacing: .20em;
    }
    .mira-page-hero-kicker::before,
    .mira-page-hero-kicker::after {
        width: 32px;
    }
    .mira-page-hero h1,
    .mira-page-hero h2 {
        font-size: clamp(2.35rem, 12vw, 3.25rem);
        margin-bottom: 9px;
    }
    .mira-page-hero p {
        max-width: 330px;
        font-size: .93rem;
        line-height: 1.45;
    }
    .mira-page-hero-actions {
        margin-top: 16px;
    }
    .mira-page-hero-actions .btn {
        flex: 1 1 150px;
        max-width: 220px;
    }
    .mira-page-hero-compact {
        padding-block: 26px 24px;
    }
    .mira-page-hero-compact h1,
    .mira-page-hero-compact h2 {
        font-size: clamp(2.15rem, 11vw, 2.9rem);
    }
}