/* styles.css */

:root {

    --primary-brown: #9b693c;
    --cream: #ebdccc;
    --dark: #1a1a19;
    --gold: #cfad70;
    --light: #f7f4f0;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: var(--light);
    color: var(--dark);

    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
}

.section-padding {
    padding: 100px 0;
}
section {
    scroll-margin-top: 100px;
}
/* =========================
   HEADER
========================= */

.main-header {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 999;

    background: var(--light);
    backdrop-filter: blur(12px);

    border-bottom: 2px solid var(--gold);
}

.header-container {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    gap: 50px;
    margin: 0 auto;
}

.logo img {

    height: 85px;
    width: auto;

    display: block;
}

.nav-links {

    display: flex;
    gap: 40px;
}

.nav-links a {

    position: relative;
    display: inline-block;

    color: var(--dark);
    text-decoration: none;

    font-size: 26px;
    font-weight: 500;

    transition: 0.3s ease;

    font-family: 'Great Vibes', cursive;
    /*font-family: 'Cormorant Garamond', serif;*/
}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 0%;
    height: 2px;

    transform:
        translateX(-50%)
        skewX(-12deg);

    border-radius: 999px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(207,173,112,0.15) 10%,
            rgba(207,173,112,0.85) 35%,
            rgba(255,255,255,0.95) 50%,
            rgba(207,173,112,0.85) 65%,
            rgba(207,173,112,0.15) 90%,
            transparent 100%
        );

    filter: blur(0.3px);

    box-shadow:
        0 0 8px rgba(207,173,112,0.35);

    transition:
        width 0.55s cubic-bezier(.19,1,.22,1),
        opacity 0.3s ease,
        transform 0.55s cubic-bezier(.19,1,.22,1);

    overflow: hidden;
}

/* Hover */
.nav-links a:hover::after {

    width: 120%;

    opacity: 1;

    transform:
        translateX(-50%)
        skewX(-12deg)
        scaleY(1.2);
}

/* Hover */
.nav-links a:hover {

    color: var(--primary-brown);
}
.nav-links a::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 0%;

    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.9),
            transparent
        );

    opacity: 0;

    filter: blur(1px);

    transition:
        width 0.55s cubic-bezier(.19,1,.22,1),
        opacity 0.3s ease;

    pointer-events: none;
}

.nav-links a:hover::before {

    width: 40%;

    opacity: 1;

    animation: hairShimmer 1.4s linear infinite;
}

@keyframes hairShimmer {

    0% {
        transform: translateX(-130%);
    }

    100% {
        transform: translateX(130%);
    }
}
/* =========================
   MOBILE MENU BUTTON
========================= */

.mobile-menu-toggle {

    display: none;

    position: absolute;

    right: 18px;

    width: 62px;
    height: 62px;

    background: none;
    border: none;

    padding: 0;

    cursor: pointer;

    z-index: 1002;
}

/* SVG */

.scissor-icon {

    width: 100%;
    height: 100%;

    overflow: visible;
}

/* =========================
   SCISSOR STYLING
========================= */

.blade,
.handle-connector,
.thumb-rest,
.finger-hole {

    fill: none;

    stroke: var(--primary-brown);

    stroke-width: 2.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.5s cubic-bezier(.77,0,.175,1),
        stroke 0.3s ease;
}

/* HANDLE GROUPS */

.handle {

    transform-origin: 50px 50px;

    transition:
        transform 0.5s cubic-bezier(.77,0,.175,1);
}

/* BLADES */

.blade {

    transform-origin: 50px 50px;
}

/* CLOSED */

.blade-left {

    transform: rotate(12deg);
}

.blade-right {

    transform: rotate(-12deg);
}

/* OPEN */

.mobile-menu-toggle.active .blade-left {

    transform: rotate(-6deg);
}

.mobile-menu-toggle.active .blade-right {

    transform: rotate(6deg);
}

/* HANDLE OPEN */

.mobile-menu-toggle.active .handle-left {

    transform: rotate(-4deg);
}

.mobile-menu-toggle.active .handle-right {

    transform: rotate(4deg);
}

/* PIVOT */

.pivot {

    fill: var(--primary-brown);

    transition: fill 0.3s ease;
}

/* OPEN (GOLD) STATE */

.mobile-menu-toggle.active .blade,
.mobile-menu-toggle.active .handle-connector,
.mobile-menu-toggle.active .thumb-rest,
.mobile-menu-toggle.active .finger-hole {

    stroke: var(--gold);
}

.mobile-menu-toggle.active .pivot {

    fill: var(--gold);
}

/* HOVER */

.mobile-menu-toggle:hover .blade,
.mobile-menu-toggle:hover .handle-connector,
.mobile-menu-toggle:hover .thumb-rest,
.mobile-menu-toggle:hover .finger-hole {

    filter:
        drop-shadow(
            0 0 4px rgba(207,173,112,0.35)
        );
}
.mobile-menu {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding:
        120px 30px 40px;

    background:
        rgba(247,244,240,0.96);

    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: column;

    gap: 24px;

    z-index: 998;

    transform:
        translateY(-110%);

    opacity: 0;

    transition:
        transform 0.7s cubic-bezier(.77,0,.175,1),
        opacity 0.5s ease;
}
.mobile-menu.active {

    transform:
        translateY(0);

    opacity: 1;
}
.mobile-menu a {

    color: var(--dark);

    text-decoration: none;

    font-family: 'Cormorant Garamond', serif;

    font-size: 2.3rem;

    text-align: center;

    transition: 0.3s ease;
}

.mobile-menu a:hover {

    color: var(--primary-brown);

    transform: translateX(4px);
}
/* =========================
   HERO
========================= */
.page-slider {

    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}
.page-slider.login-active .hero-section {

    transform: translateX(-100%);
}

.page-slider.login-active .login-panel {

    transform: translateX(0%);
}
/* =========================
   AUTH PANELS
========================= */

.signup-panel,
.forgot-panel {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 130px;

    padding-bottom: 60px;

    overflow-y: auto;

    background:
        linear-gradient(
            rgba(247,244,240,0.35),
            rgba(247,244,240,0.35)
        ),
        url('../images/loginbg.png')
        center center / cover no-repeat;

    transform: translateX(100%);

    opacity: 0;

    transition:
        transform 0.9s cubic-bezier(.77,0,.175,1),
        opacity 0.6s ease;

    z-index: 5;
}

/* ACTIVE STATES */

.page-slider.signup-active .signup-panel {

    transform: translateX(0);

    opacity: 1;

    z-index: 8;
}

.page-slider.forgot-active .forgot-panel {

    transform: translateX(0);

    opacity: 1;

    z-index: 9;
}

/* PUSH LOGIN */

.page-slider.signup-active .login-panel,
.page-slider.forgot-active .login-panel {

    transform: translateX(-100%);
}
/* =========================
   LOGIN PANEL
========================= */
/* =========================
   LOGIN MESSAGE
========================= */

.login-message {

    display: none;

    margin-bottom: 22px;

    padding: 14px 18px;

    border-radius: 14px;

    font-size: 0.92rem;

    line-height: 1.5;
}

.login-message.error {

    display: block;

    background:
        rgba(220,53,69,0.08);

    color:
        #b42332;

    border:
        1px solid rgba(220,53,69,0.15);
}

.login-message.success {

    display: block;

    background:
        rgba(25,135,84,0.08);

    color:
        #146c43;

    border:
        1px solid rgba(25,135,84,0.15);
}

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

.login-btn.loading {

    opacity: 0.7;

    pointer-events: none;
}
.login-panel {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 130px;

    padding-bottom: 60px;

    overflow-y: auto;

    background:
        linear-gradient(
            rgba(247,244,240,0.35),
            rgba(247,244,240,0.35)
        ),
        url('../images/loginbg.png')
        center center / cover no-repeat;

    transform: translateX(100%);

    transition:
        transform 0.9s cubic-bezier(.77,0,.175,1);

    z-index: 5;
}

/* =========================
   LOGIN CARD
========================= */

.login-card {

    width: 90%;
    max-width: 480px;

    padding:
        42px
        40px;

    border-radius: 30px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 55px rgba(0,0,0,0.10);

    border:
        1px solid rgba(255,255,255,0.45);
}

/* =========================
   LOGIN TITLE
========================= */

.login-card h2 {

    font-family: 'Great Vibes', cursive;

    font-size: 3.3rem;

    line-height: 0.92;

    color: var(--primary-brown);

    text-align: center;

    font-weight: 400;

    margin-top: 0;

    margin-bottom: 14px;
}

.login-subtitle {

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 5px;

    font-size: 0.78rem;

    color: rgba(26,26,25,0.60);

    margin-bottom: 30px;
}

/* =========================
   FORM
========================= */

.login-form {

    display: flex;
    flex-direction: column;

    gap: 18px;
}

/* =========================
   INPUT GROUP
========================= */

.input-group {

    position: relative;

    display: flex;
    align-items: center;
}

.input-group i {

    position: absolute;

    left: 22px;

    color:
        rgba(155,105,60,0.7);

    font-size: 1rem;
}

.input-group input {

    width: 100%;

    padding:
        17px
        52px;

    border-radius: 16px;

    border:
        1px solid rgba(155,105,60,0.15);

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

    font-size: 1rem;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    outline: none;

    transition: 0.3s ease;
}

/* =========================
   PASSWORD GROUP
========================= */

.input-group-pass {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;
}

/* =========================
   PASSWORD ICON
========================= */

.input-group-pass i {

    position: absolute;

    left: 22px;

    top: 18px;

    color:
        rgba(155,105,60,0.7);

    font-size: 1rem;

    z-index: 2;
}

/* =========================
   PASSWORD INPUT
========================= */

.input-group-pass input {

    width: 100%;

    padding:
        17px
        52px;

    border-radius: 16px;

    border:
        1px solid rgba(155,105,60,0.15);

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

    font-size: 1rem;

    font-family:
        'Montserrat',
        sans-serif;

    color: var(--dark);

    outline: none;

    transition: 0.3s ease;
}

.turnstile-bg {

    width: 100%;

    padding: 0px;

    border-radius: 16px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border:
        1px solid rgba(155,105,60,0.15);

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

    font-size: 1rem;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    outline: none;

    transition: 0.3s ease;
}

.input-group input:focus {

    border-color:
        rgba(207,173,112,0.7);

    box-shadow:
        0 0 0 4px rgba(207,173,112,0.08);
}

/* =========================
   PASSWORD TOGGLE
========================= */

.password-toggle {

    position: absolute;

    right: 18px;

    background: none;
    border: none;

    cursor: pointer;

    color:
        rgba(155,105,60,0.65);

    font-size: 1rem;
}

/* =========================
   FORGOT PASSWORD
========================= */

.forgot-password {

    text-align: right;

    margin-top: -10px;
}

.forgot-password a {

    color:
        rgba(155,105,60,0.9);

    text-decoration: none;

    font-size: 0.95rem;

    transition: 0.3s ease;
}

.forgot-password a:hover {

    color: var(--primary-brown);
}

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

.login-btn,
.signup-btn {

    width: 100%;

    padding: 15px;

    border-radius: 999px;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    transition: 0.35s ease;
}

/* SIGN IN */

.login-btn {

    border: none;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--primary-brown)
        );

    color: white;

    box-shadow:
        0 10px 25px rgba(155,105,60,0.22);
}

.login-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 35px rgba(155,105,60,0.28);
}

/* SIGN UP */

.signup-btn {

    background: transparent;

    border:
        1px solid rgba(155,105,60,0.35);

    color: var(--primary-brown);
}

.signup-btn:hover {

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

    border-color:
        var(--primary-brown);
}
/* =========================
   PASSWORD REQUIREMENTS
========================= */

.password-requirements {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    width: 100%;
}

/* =========================
   REQUIREMENT ITEM
========================= */

.password-requirements div {

    display: flex;

    align-items: center;

    gap: 0.35rem;

    padding:
        0.45rem 0.75rem;

    border-radius: 999px;

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

    font-size: 0.76rem;

    color:
        rgba(50,50,50,0.72);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border 0.2s ease;

    border:
        1px solid rgba(155,105,60,0.12);
}

/* =========================
   VALID
========================= */

.password-valid {

    background:
        rgba(102,209,122,0.16)
        !important;

    border:
        1px solid rgba(102,209,122,0.35)
        !important;

    color:
        #2d7f41
        !important;
}

/* =========================
   INVALID
========================= */

.password-invalid {

    background:
        rgba(255,123,123,0.14)
        !important;

    border:
        1px solid rgba(255,123,123,0.32)
        !important;

    color:
        #b94d4d
        !important;
}

/* =========================
   VALID
========================= */

.password-valid {

    color: #66d17a !important;
}

/* =========================
   INVALID
========================= */

.password-invalid {

    color: #ff7b7b !important;
}

/* =========================
   INPUT STATES
========================= */

.input-valid {

    border:
        1px solid #66d17a !important;

    box-shadow:
        0 0 0 1px rgba(102,209,122,0.25);
}

.input-invalid {

    border:
        1px solid #ff7b7b !important;

    box-shadow:
        0 0 0 1px rgba(255,123,123,0.22);
}
/* =========================
   DIVIDER
========================= */

.divider {

    position: relative;

    text-align: center;

    margin: 10px 0;
}

.divider::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(155,105,60,0.18);
}

.divider span {

    position: relative;

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

    padding: 0 18px;

    color:
        rgba(155,105,60,0.75);

    font-size: 0.9rem;

    letter-spacing: 2px;
}

/* =========================
   TERMS
========================= */

.login-terms {

    margin-top: 10px;

    text-align: center;

    font-size: 0.88rem;

    line-height: 1.7;

    color:
        rgba(26,26,25,0.55);
}

.login-terms a {

    color: var(--primary-brown);

    text-decoration: none;
}

.hero-section,
.login-panel {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    transition:
        transform 0.9s cubic-bezier(.77,0,.175,1),
        opacity 0.7s ease;

    will-change: transform;
}

.hero-section {
    transform: translateX(0%);
    z-index: 2;
    display: flex;
    align-items: center;

    background:
        linear-gradient(
            rgba(26,26,25,0.55),
            rgba(26,26,25,0.55)
        ),
        url('../images/hero.png')
        center center / cover no-repeat;
}

.hero-content {

    position: relative;
    z-index: 2;

    max-width: 700px;
}

.hero-subtitle {

    color: var(--gold);

    text-transform: uppercase;
    letter-spacing: 3px;

    margin-bottom: 20px;

    font-size: 0.9rem;
    
}

.hero-content h2 {

    color: var(--light);

    font-family: 'Cormorant Garamond', serif;

    font-size: 5rem;
    line-height: 1.1;

    margin-bottom: 25px;
}

.hero-text {

    color: rgba(255,255,255,0.85);

    max-width: 550px;

    margin-bottom: 35px;

    font-size: 1.1rem;
}

.hero-buttons {

    display: flex;
    gap: 20px;
}

/* =========================
   REVIEWS
========================= */

.reviews-section {

    background:
        linear-gradient(
            180deg,
            var(--light),
            var(--cream)
        );
}

.reviews-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;
}

.review-card {

    position: relative;

    padding: 45px 35px;

    border-radius: 30px;

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

    backdrop-filter: blur(10px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.06);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.review-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 28px 55px rgba(0,0,0,0.1);
}

.review-stars {

    color: var(--gold);

    font-size: 1.3rem;

    letter-spacing: 4px;

    margin-bottom: 22px;
}

.review-text {

    font-size: 1rem;

    line-height: 1.9;

    color:
        rgba(26,26,25,0.82);

    margin-bottom: 30px;

    font-style: italic;
}

.review-client {

    color: var(--primary-brown);

    font-weight: 600;

    letter-spacing: 1px;
}
.reviews-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 2rem;
}

.reviews-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollReviews 45s linear infinite;
}

.reviews-carousel:hover .reviews-track {
    animation-play-state: paused;
}

.reviews-track .review-card {

    flex: 0 0 520px;

    min-height: 100%;

    display: flex;

    flex-direction: column;
}

@keyframes scrollReviews {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* duplicate track for infinite effect */
}
/* ========================================
   REVIEW META INFO
======================================== */
/* ========================================
   REVIEW META
======================================== */

.review-meta {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px 24px;

    margin-top: 12px;
    margin-bottom: 10px;
}

/* ========================================
   META ITEM
======================================== */

.review-meta span {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 14px;

    border-radius: 14px;

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

    font-size: 0.88rem;

    color:
        rgba(26,26,25,0.82);

    line-height: 1.4;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ========================================
   FIRST ITEM
======================================== */

.review-meta span:first-child {

    grid-column:
        span 2;

    font-weight: 600;

    color:
        var(--primary-brown);

    background:
        rgba(214,182,155,0.18);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* =========================
    MOBILE CAROUSEL
    ========================= */
    .review-meta {
        font-size: 0.85rem;
        gap: 0.35rem;
    }
    .review-meta span:first-child {
        font-size: 0.92rem;
    }
    .review-meta {

        grid-template-columns: 1fr;
    }

    .review-meta span:first-child {

        grid-column: span 1;
    }
    .reviews-carousel {

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
        padding-left: 18px;
        padding-right: 18px;
    }

    .reviews-carousel::-webkit-scrollbar {

        display: none;
    }

    /* =========================
    TRACK
    ========================= */

    .reviews-track {

        display: flex;

        flex-direction: row;

        gap: 18px;

        width: max-content;

        animation: none;

        padding-bottom: 6px;
    }

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

    .reviews-track .review-card {

        flex: 0 0 88vw;

        scroll-snap-align: center;

        padding:
            32px 24px;

        border-radius: 24px;
    }

    /* =========================
    TEXT
    ========================= */

    .review-text {

        font-size: 0.92rem;

        line-height: 1.7;
    }
}

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

.primary-btn,
.secondary-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 30px;

    border-radius: 50px;

    text-decoration: none;

    transition: 0.3s ease;

    font-weight: 600;
}
.primary-btn-contact {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 30px;

    border-radius: 50px;

    text-decoration: none;

    transition: 0.3s ease;

    font-weight: 600;
    margin-top: 20px;
}
.cnr-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}
.primary-btn-contact {

    background: var(--gold);
    color: var(--dark);
}

.primary-btn-contact:hover {

    background: var(--primary-brown);
    color: var(--light);
}


.primary-btn {

    background: var(--gold);
    color: var(--dark);
}

.primary-btn:hover {

    background: var(--primary-brown);
    color: var(--light);
}

.secondary-btn {

    border: 1px solid rgba(255,255,255,0.4);
    color: var(--light);
}

.secondary-btn:hover {

    background: var(--light);
    color: var(--dark);
}

/* =========================
   SECTION HEADERS
========================= */

.section-header {

    text-align: center;

    margin-bottom: 60px;
}

.section-header span {

    color: var(--primary-brown);

    text-transform: uppercase;
    letter-spacing: 2px;

    font-size: 0.85rem;
}

.section-header h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3.2rem;

    margin-top: 15px;
}

/* =========================
   SERVICES
========================= */

.services-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;
}

.service-card {

    background: white;

    border-radius: 25px;

    padding: 40px 30px;

    text-align: center;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.06);

    transition: 0.3s ease;
}

.service-card:hover {

    transform: translateY(-8px);
}

.service-card i {

    font-size: 2rem;

    color: var(--primary-brown);

    margin-bottom: 20px;
}

.service-card h3 {

    margin-bottom: 15px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
}

/* =========================
   STYLIST
========================= */

.stylist-section {
    background: var(--cream);
}

.stylist-container {

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 60px;
    align-items: center;
}

/* =========================
   STYLIST IMAGE
========================= */

.stylist-image {

    position: relative;

    width: 100%;

    display: flex;

    justify-content: center;
}

.image-placeholder {

    position: relative;

    overflow: hidden;

    width: 320px;

    height: 320px;

    border-radius: 36px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.5),
            rgba(255,255,255,0.15)
        );

    backdrop-filter: blur(10px);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.12);

    border:
        12px solid var(--primary-brown);
}

/* =========================
   IMAGE
========================= */

.image-placeholder img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 18%;

    display: block;

    transition:
        transform 0.8s ease;
}

/* =========================
   HOVER
========================= */

.image-placeholder:hover img {

    transform:
        scale(1.03);
}

/* =========================
   OPTIONAL OVERLAY GLOW
========================= */

.image-placeholder::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.18),
            transparent 40%
        );

    pointer-events: none;
}

.stylist-content span {

    color: var(--primary-brown);

    text-transform: uppercase;
    letter-spacing: 2px;
}

.stylist-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 4rem;

    margin: 15px 0 25px;
}

.stylist-content p {

    margin-bottom: 20px;
}

/* =========================
   PORTFOLIO GRID
========================= */

.portfolio-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 34px;

    margin-top: 50px;
}

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

.portfolio-card {

    perspective: 1600px;

    height: 460px;
}

/* =========================
   INNER
========================= */

.portfolio-inner {

    position: relative;

    width: 100%;
    height: 100%;

    transition:
        transform 1.5s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    transform-style: preserve-3d;
}


/* =========================
   DESKTOP HOVER ONLY
========================= */

@media (hover: hover) {

    .portfolio-card:hover
    .portfolio-inner {

        transform:
            rotateY(180deg);
    }
}

/* =========================
   FRONT / BACK
========================= */

.portfolio-front,
.portfolio-back {

    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 34px;

    backface-visibility: hidden;

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

    backdrop-filter: blur(14px);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.1);

    border:
        1px solid rgba(255,255,255,0.35);
}

/* =========================
   IMAGES
========================= */

.portfolio-front img,
.portfolio-back img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}

/* =========================
   IMAGE ZOOM
========================= */

.portfolio-card:hover img {

    transform:
        scale(1.04);
}

/* =========================
   BACK SIDE
========================= */

.portfolio-back {

    transform:
        rotateY(180deg);
}

/* =========================
   BADGES
========================= */

.portfolio-badge {

    position: absolute;

    top: 22px;

    padding:
        10px 18px;

    border-radius: 999px;

    color: #fff;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    z-index: 3;
}

.portfolio-badge.after {

    right: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(186,136,79,0.95),
            rgba(212,179,110,0.92)
        );
}

.portfolio-badge.before {

    left: 22px;

    background:
        rgba(25,25,25,0.82);
}
/* =========================
   MOBILE FLIPPED
========================= */

.portfolio-card.flipped
.portfolio-inner {

    transform:
        rotateY(180deg);
}

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

@media (max-width: 768px) {

    .portfolio-grid {

        grid-template-columns:
            1fr;

        gap: 24px;
    }

    .portfolio-card {

        height: 420px;
    }

    .portfolio-front,
    .portfolio-back {

        border-radius: 28px;
    }
    .image-placeholder {

        height: 440px;

        border-radius: 28px;
    }
}

/* =========================
   INSTAGRAM
========================= */

.instagram-section {
    background: var(--cream);
}

.instagram-placeholder {

    height: 500px;

    border-radius: 30px;

    background: rgba(26,26,25,0.08);

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

    color: var(--primary-brown);

    font-size: 1.2rem;
}

/* =========================
   CONTACT
========================= */
.slots-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.slot-btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: 0.2s ease;
}

.slot-btn:hover {
    background: #f3f3f3;
}

.slot-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.slot-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.contact-info span {

    color: var(--primary-brown);
    
    text-transform: uppercase;
    letter-spacing: 2px;
}
.contact-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.contact-info h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 4rem;

    margin: 15px 0 25px;
}

.contact-details {

    margin-top: 30px;
}

.contact-details p {

    margin-bottom: 15px;

    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-details i {
    color: var(--primary-brown);
}

.contact-form {

    background: white;

    padding: 40px;

    border-radius: 30px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.5),
        0 15px 35px rgba(26,26,25,0.18),
        0 40px 80px rgba(26,26,25,0.22),
        0 70px 140px rgba(26,26,25,0.18);
}

.form-group {

    margin-bottom: 20px;
}
/* ========================================
   PUBLIC BOOKING FORM
======================================== */

.booking-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 1.25rem;

    margin-bottom: 1.25rem;
}

/* ========================================
   LABELS
======================================== */

.contact-form label {

    display: block;

    margin-bottom: 0.55rem;

    font-size: 0.95rem;

    font-weight: 600;

    color: #2d241f;

    letter-spacing: 0.02em;
}

/* ========================================
   SELECTS
======================================== */

.contact-form select {

    width: 100%;

    height: 64px;

    padding:
        0 1.2rem;

    border-radius: 22px;

    border:
        1px solid
        rgba(45,36,31,0.12);

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

    backdrop-filter:
        blur(10px);

    font-size: 1rem;

    font-family: inherit;

    color: #2d241f;

    transition:
        all 0.25s ease;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    cursor: pointer;
}

/* ========================================
   SELECT FOCUS
======================================== */

.contact-form select:focus {

    outline: none;

    border-color:
        #c9a46a;

    box-shadow:
        0 0 0 4px
        rgba(201,164,106,0.14);
}

/* ========================================
   DATE INPUT
======================================== */

.contact-form input[type="date"] {

    width: 100%;

    height: 64px;

    padding:
        0 1.2rem;

    border-radius: 22px;

    border:
        1px solid
        rgba(45,36,31,0.12);

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

    backdrop-filter:
        blur(10px);

    font-size: 1rem;

    font-family: inherit;

    color: #2d241f;

    transition:
        all 0.25s ease;
}

.contact-form input[type="date"]:focus {

    outline: none;

    border-color:
        #c9a46a;

    box-shadow:
        0 0 0 4px
        rgba(201,164,106,0.14);
}

/* ========================================
   AVAILABLE SLOTS
======================================== */

.slots-container {

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

    margin-top: 1rem;
}

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

.slot-btn {

    padding:
        0.8rem 1.2rem;

    border-radius: 999px;

    border:
        1px solid
        rgba(45,36,31,0.12);

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

    backdrop-filter:
        blur(10px);

    font-size: 0.95rem;

    font-weight: 600;

    color: #2d241f;

    cursor: pointer;

    transition:
        all 0.25s ease;
}

/* ========================================
   SLOT HOVER
======================================== */

.slot-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        #c9a46a;

    box-shadow:
        0 10px 20px
        rgba(0,0,0,0.08);
}

/* ========================================
   ACTIVE SLOT
======================================== */

.slot-btn.active {

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #c9a46a
        );

    color: #fff;

    border-color:
        transparent;

    box-shadow:
        0 12px 24px
        rgba(201,164,106,0.25);
}

/* ========================================
   TURNSTILE
======================================== */

.cf-turnstile {

    display: flex;

    justify-content: center;
    align-items: center;
    padding-top: 7.59px;

    width: 100%;

    margin: 0 auto;
}

/* ========================================
   MOBILE
======================================== */
.contact-form input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    -webkit-appearance: none;
    appearance: none;
}
@media (max-width: 768px) {

    .booking-grid {

        grid-template-columns:
            1fr;
    }

    .contact-form select,
    .contact-form input[type="date"] {

        height: 58px;

        border-radius: 18px;
    }

    .slot-btn {

        width: 100%;

        justify-content: center;

        text-align: center;
    }
}
.contact-form input,
.contact-form textarea {

    width: 100%;

    padding: 18px 20px;

    border: 1px solid rgba(0,0,0,0.1);

    border-radius: 15px;

    font-family: inherit;

    background: var(--light);

    outline: none;

    transition: 0.3s ease;
}

.contact-form textarea {

    min-height: 180px;

    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {

    border-color: var(--gold);
}

/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

    .container {
        width: 92%;
    }

    .hero-content h2 {
        font-size: 4.2rem;
    }

    .stylist-container,
    .contact-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .stylist-image {
        order: -1;
    }

    .image-placeholder {
        height: 500px;
    }

    .contact-info {
        text-align: center;
    }

    .contact-details p {
        justify-content: center;
    }

    .reviews-grid,
    .services-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}

/* =========================
   MOBILE NAV + MOBILE UI
========================= */

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    body {
        font-size: 15px;
    }

    section {
        scroll-margin-top: 105px;
    }

    .section-padding {
        padding: 75px 0;
    }

    /* HEADER */

    .main-header {

        padding: 0;

        border-bottom:
            1px solid rgba(207,173,112,0.5);
    }

    .header-container {

        justify-content: center;

        padding: 14px 0;
    }

    .logo img {

        height: 68px;
    }

    .nav-links {
        display: none;
    }

    /* HERO */

    .page-slider {
        height: 100svh;
    }

    .hero-section,
    .login-panel {
        height: 100svh;
    }

    .hero-content {

        text-align: center;

        padding-top: 40px;
    }

    .hero-subtitle {

        font-size: 0.75rem;

        letter-spacing: 4px;

        margin-bottom: 18px;
    }

    .hero-content h2 {

        font-size: 3.2rem;

        line-height: 1.05;

        margin-bottom: 22px;
    }

    .hero-text {

        font-size: 1rem;

        line-height: 1.9;

        max-width: 100%;

        margin-bottom: 35px;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 16px;
    }

    .primary-btn,
    .secondary-btn {

        width: 100%;

        max-width: 320px;

        min-height: 54px;

        font-size: 0.95rem;
    }
    .primary-btn-contact {

        width: 100%;

        max-width: 320px;

        min-height: 54px;

        font-size: 0.95rem;
        margin-top: 20px;
    }


    /* SECTION HEADERS */

    .section-header {

        margin-bottom: 45px;
    }

    .section-header span {

        font-size: 0.7rem;

        letter-spacing: 3px;
    }

    .section-header h2 {

        font-size: 2.7rem;

        line-height: 1.1;
    }

    /* SERVICES */

    .services-grid {

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .service-card {

        padding: 35px 28px;

        border-radius: 24px;
    }

    .service-card h3 {

        font-size: 1.8rem;
    }

    /* STYLIST */

    .stylist-container {

        gap: 40px;
    }

    .image-placeholder {

        height: 400px;

        border-radius: 24px;
    }

    .stylist-content {

        text-align: center;
    }

    .stylist-content h2 {

        font-size: 3rem;
    }


    /* REVIEWS */

    .reviews-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .review-card {

        padding: 38px 28px;

        border-radius: 26px;
    }

    .review-text {

        font-size: 0.96rem;

        line-height: 1.85;
    }

    /* INSTAGRAM */

    .instagram-placeholder {

        height: 400px;

        border-radius: 24px;
    }

    /* CONTACT */

    .contact-container {

        gap: 40px;
    }

    .contact-info {

        text-align: center;
    }

    .contact-info h2 {

        font-size: 3rem;
    }

    .contact-details {

        margin-top: 25px;
    }

    .contact-details p {

        justify-content: center;

        font-size: 0.95rem;
    }

    .contact-form {

        padding: 30px 24px;

        border-radius: 26px;
    }

    .contact-form input,
    .contact-form textarea {

        min-height: 54px;

        font-size: 16px;
    }

    /* LOGIN */

    .login-card {

        width: 92%;

        padding: 48px 24px;

        border-radius: 30px;
    }

    .login-card h2 {

        font-size: 3.4rem;
    }

    .login-subtitle {

        font-size: 0.75rem;

        letter-spacing: 3px;

        margin-bottom: 35px;
    }

    .login-form {

        gap: 18px;
    }

    .input-group input {

        min-height: 56px;

        font-size: 16px;
    }

    .login-btn,
    .signup-btn {

        min-height: 56px;

        font-size: 0.9rem;
    }
}

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

@media (max-width: 480px) {

    .hero-content h2 {

        font-size: 2.6rem;
    }

    .section-header h2,
    .stylist-content h2,
    .contact-info h2 {

        font-size: 2.3rem;
    }

    .login-card h2 {

        font-size: 2.9rem;
    }

    .review-card,
    .service-card,
    .contact-form {

        border-radius: 22px;
    }
    .mobile-menu-toggle {

        display: block;
    }

    .desktop-nav {
        display: none;
    }
}
.selected-services-box {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.selected-service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(202, 162, 94, 0.25);
}

.selected-service-row strong {
    color: black;
}

.selected-service-row small {
    color: black;
}

.add-booking-service-btn,
.remove-booking-service {
    width: auto;
    min-width: 130px;
    height: 46px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #c99a55, #e2bd7c);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.add-booking-service-btn:hover,
.remove-booking-service:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(201, 154, 85, 0.28);
}

.remove-booking-service {
    min-width: 100px;
    height: 38px;
    background: linear-gradient(135deg, #c99a55, #e2bd7c);
    color: #ffffff;
    border: 1px solid rgba(202, 162, 94, 0.35);
}

.remove-booking-service:hover {
    background: rgba(202, 162, 94, 0.22);
}

@media (max-width: 700px) {
    .selected-service-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .add-booking-service-btn,
    .remove-booking-service {
        width: 100%;
    }
}
.site-footer {
    position: relative;
    margin-top: 6rem;
    padding: 5rem 6% 2rem;

    background:
        linear-gradient(
            180deg,
            rgba(16,16,16,0.96),
            rgba(8,8,8,1)
        );

    border-top:
        1px solid rgba(255,255,255,0.06);

    overflow: hidden;
}

.footer-glow {
    position: absolute;
    inset: auto 0 -200px 0;

    height: 400px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,0.12),
            transparent 70%
        );

    pointer-events: none;
}

.footer-container {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    gap: 5rem;
    flex-wrap: wrap;
}

.footer-brand {
    flex: 1;
    min-width: 260px;
    max-width: 420px;
}

.footer-brand h2 {
    margin-bottom: 1rem;

    color: #d4af37;

    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.footer-brand p {
    color: rgba(255,255,255,0.72);

    line-height: 1.8;
    font-size: 0.96rem;
}

.footer-socials {
    display: flex;
    gap: 1rem;

    margin-top: 1.75rem;
}

.footer-socials a {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

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

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

    color: #ffffff;

    text-decoration: none;

    transition:
        0.3s ease;
}

.footer-socials a:hover {
    transform:
        translateY(-4px);

    background:
        rgba(212,175,55,0.14);

    border-color:
        rgba(212,175,55,0.35);

    color:
        #d4af37;
}

.footer-links {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-column {
    min-width: 150px;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-column h4 {
    margin-bottom: 0.5rem;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
}

.footer-column a,
.footer-column span {
    color: rgba(255,255,255,0.68);

    text-decoration: none;

    font-size: 0.92rem;

    transition:
        0.25s ease;
}

.footer-column a:hover {
    color: #d4af37;

    transform:
        translateX(4px);
}

.footer-bottom {
    position: relative;
    z-index: 2;

    margin-top: 4rem;
    padding-top: 1.5rem;

    border-top:
        1px solid rgba(255,255,255,0.06);

    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom p {
    color: rgba(255,255,255,0.48);

    font-size: 0.84rem;
}

@media (max-width: 768px) {

    .site-footer {
        padding:
            4rem 1.5rem 2rem;
    }

    .footer-container {
        flex-direction: column;
        gap: 3rem;
    }

    .footer-links {
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.auth-legal-text {
    margin-top: 1.25rem;
    text-align: center;
    color: black;
    font-size: 0.85rem;
    line-height: 1.6;
}

.legal-modal-link {
    border: none;
    background: transparent;
    padding: 0;
    color: #d4af37;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.legal-modal-link:hover {
    text-decoration: underline;
}

.legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(10px);
}

.legal-modal.active {
    display: flex;
}

.legal-modal-content {
    position: relative;
    width: min(620px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    padding: 2.25rem;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(35,25,25,0.98),
            rgba(15,15,15,0.98)
        );
    border: 1px solid rgba(212,175,55,0.22);
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    color: #ffffff;
}

.legal-modal-content h2 {
    margin-bottom: 1.25rem;
    color: #d4af37;
    font-size: 1.7rem;
}

.legal-modal-content p {
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.74);
    line-height: 1.75;
    font-size: 0.95rem;
}

.legal-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
}

.legal-modal-close:hover {
    background: rgba(212,175,55,0.18);
    color: #d4af37;
}
/* ==========================================
   APP MODALS / ALERTS / CONFIRMS
========================================== */

.app-modal-root {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 1.5rem;

    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(12px);
}

.app-modal-root.active {
    display: flex;
}

.app-modal-card {
    position: relative;

    width: min(460px, 100%);

    padding: 2.25rem;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(35,25,25,0.98),
            rgba(12,12,12,0.98)
        );

    border: 1px solid rgba(212,175,55,0.24);

    box-shadow:
        0 24px 70px rgba(0,0,0,0.55);

    text-align: center;
    color: #ffffff;
}

.app-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.08);
    color: #ffffff;

    font-size: 1.35rem;
    cursor: pointer;
}

.app-modal-close:hover {
    background: rgba(212,175,55,0.18);
    color: #d4af37;
}

.app-modal-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 1.1rem;

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

    border-radius: 50%;

    background: rgba(212,175,55,0.12);
    color: #d4af37;

    font-size: 1.75rem;
}

.app-modal-root[data-type="success"] .app-modal-icon {
    background: rgba(134,239,172,0.12);
    color: #86efac;
}

.app-modal-root[data-type="error"] .app-modal-icon {
    background: rgba(252,165,165,0.12);
    color: #fca5a5;
}

.app-modal-root[data-type="warning"] .app-modal-icon {
    background: rgba(212,175,55,0.14);
    color: #d4af37;
}

.app-modal-card h2 {
    margin: 0 0 0.75rem;

    font-size: 1.45rem;
    color: #ffffff;
}

.app-modal-card p {
    margin: 0;

    color: rgba(255,255,255,0.72);
    line-height: 1.65;
    font-size: 0.95rem;
}

.app-modal-actions {
    margin-top: 1.7rem;

    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.app-modal-btn {
    min-width: 125px;

    padding: 0.85rem 1.25rem;

    border: none;
    border-radius: 999px;

    font-weight: 700;
    cursor: pointer;

    transition: 0.25s ease;
}

.app-modal-btn.primary {
    background: #d4af37;
    color: #111111;
}

.app-modal-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
}

.app-modal-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .app-modal-card {
        padding: 2rem 1.5rem;
    }

    .app-modal-actions {
        flex-direction: column-reverse;
    }

    .app-modal-btn {
        width: 100%;
    }
}
/* ========================================
   LOGIN TO DASHBOARD TRANSITION
======================================== */

.login-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;

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

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #ffffff 48%,
            rgba(207,173,112,0.18) 100%
        );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.login-transition-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-transition-overlay.fade-out {
    opacity: 0;
}

.login-transition-corners {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at top left,
            rgba(207,173,112,0.95),
            rgba(207,173,112,0.38) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at top right,
            rgba(207,173,112,0.95),
            rgba(207,173,112,0.38) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(207,173,112,0.95),
            rgba(207,173,112,0.38) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(207,173,112,0.95),
            rgba(207,173,112,0.38) 22%,
            transparent 48%
        );

    opacity: 0;
    transform: scale(1.08);

    transition:
        opacity 1s ease,
        transform 1.4s ease;
}

.login-transition-overlay.active .login-transition-corners {
    opacity: 1;
    transform: scale(1);
}

.login-transition-content {
    position: relative;
    z-index: 2;

    text-align: center;

    padding: 2rem;
}

.login-transition-text {
    font-family: 'Great Vibes', cursive;

    font-size: clamp(3rem, 7vw, 6.6rem);
    letter-spacing: 0.02em;
    font-weight: 500;

    color: #1a1a19;

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}
.login-transition-underline {
    width: 0;
    height: 3px;

    margin: 1rem auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cfad70,
            #9b693c,
            #cfad70,
            transparent
        );

    box-shadow:
        0 0 18px rgba(207,173,112,0.75);

    opacity: 0;

    transition:
        width 2.2s ease,
        opacity 0.7s ease;
}

.login-transition-underline.active {
    width: min(620px, 78vw);
    opacity: 1;
}

.login-transition-overlay.final-white .login-transition-underline {
    opacity: 0;
    width: 0;
}

.login-transition-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.login-transition-text span {
    opacity: 0;
    display: inline-block;

    transform:
        translateY(18px)
        scale(0.98);

    animation:
        welcomeLetterIn 0.45s ease forwards;
}

.login-transition-overlay.final-white {
    background: #ffffff;
}

.login-transition-overlay.final-white .login-transition-text {
    opacity: 0;
    transform: translateY(-12px);
}

.login-transition-overlay.final-white .login-transition-corners {
    opacity: 0;
}

@keyframes welcomeLetterIn {
    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@media (max-width: 768px) {

    .login-transition-text {

        font-size:
            clamp(
                1.8rem,
                7vw,
                2.8rem
            );

        line-height: 1.15;
    }

}
.welcome-word {
    display: inline-block;
    white-space: nowrap;
}

.welcome-word span {
    opacity: 0;
    display: inline-block;

    transform:
        translateY(18px)
        scale(0.98);

    animation:
        welcomeLetterIn 0.45s ease forwards;
}
.contact-map {
    margin-top: 22px;
    width: 100%;
    height: 90%;

    border-radius: 22px;
    overflow: hidden;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.5),
        0 15px 35px rgba(26,26,25,0.18),
        0 40px 80px rgba(26,26,25,0.22),
        0 70px 140px rgba(26,26,25,0.18);

    border: 1px solid rgba(155, 105, 60, 0.20);

    transform: translateY(-2px);
}
.contact-divider {
    position: relative;
    margin-top: auto;
    width: 100%;
    height: 1px;
    


    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(155,105,60,0.4),
            rgba(155,105,60,0.8),
            rgba(155,105,60,0.4),
            transparent
        );
}

.contact-divider::after {
    content: '✦';

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background: #f7f4f0;

    padding: 0 18px;

    color: var(--primary-brown);

    font-size: 1rem;
}
.spacing {
    padding-top: 15px;
    padding-bottom: 15px;
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 768px) {

    .contact-map {
        max-width: 100%;
        width: 100%;
        height: 200px;
        margin-top: 18px;
        border-radius: 16px;
    }
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-divider {
        margin-top: 2rem;
    }

}