:root {
    /* Brand from staff uniform */
    --jm-blue: #1743a7;
    --jm-blue-deep: #0b1b3f;
    --jm-blue-hover: #12358b;
    --jm-blue-bright: #2254c7;
    --jm-blue-soft: #e8eeff;

    /* Spa warmth from interior */
    --jm-bg-deep: #18100b;
    --jm-bg-warm: #24160e;
    --jm-bg-panel: rgba(38, 25, 17, 0.78);
    --jm-bg-panel-strong: rgba(22, 13, 8, 0.86);
    --jm-bg-panel-soft: rgba(255, 246, 232, 0.1);

    /* Honey / wood */
    --jm-honey: #d49332;
    --jm-honey-deep: #a96722;
    --jm-honey-soft: #f1c57a;

    /* Lotus accent */
    --jm-lotus: #c87976;
    --jm-lotus-soft: #f1d1ce;

    /* Text */
    --jm-text: #fff7ec;
    --jm-text-muted: #d8c4ae;
    --jm-text-dark: #2a1608;

    /* Borders / shadows */
    --jm-border-honey: rgba(212, 147, 50, 0.28);
    --jm-border-honey-soft: rgba(212, 147, 50, 0.2);
    --jm-border-blue: rgba(23, 67, 167, 0.45);
    --jm-shadow-warm: rgba(19, 10, 5, 0.38);

    --bg: var(--jm-bg-deep);
    --overscroll-bg: #100905;
    --page-bg:
        radial-gradient(circle at 50% -10%, rgba(212, 147, 50, 0.2), transparent 24%),
        linear-gradient(180deg, #2d1a10 0%, var(--jm-bg-warm) 32%, var(--jm-bg-deep) 68%, #100905 100%);
    --surface: var(--jm-bg-panel);
    --ink: var(--jm-text);
    --muted: var(--jm-text-muted);
    --accent: var(--jm-blue);
    --line: #04883a;
    --fb: #1877f2;
    --dark: #100905;
    --border: var(--jm-border-honey);
    --shadow: 0 24px 70px var(--jm-shadow-warm);
}

body {
    background-attachment: fixed;
}

.topbar {
    background: linear-gradient(90deg, #130d0a 0%, #17100d 52%, #101525 100%);
    border-bottom-color: rgba(212, 147, 50, 0.14);
}

.brand {
    color: var(--jm-text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lang-btn {
    background: rgba(255, 246, 232, 0.08);
    border-color: rgba(212, 147, 50, 0.18);
    color: var(--jm-text-muted);
}

.lang-btn.is-active {
    background: rgba(23, 67, 167, 0.82);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(232, 238, 255, 0.16), 0 10px 24px rgba(11, 27, 63, 0.24);
}

.hero-full-shade {
    background:
        linear-gradient(130deg, rgba(16, 9, 5, 0.44), rgba(16, 9, 5, 0.08) 36%, rgba(16, 9, 5, 0.56)),
        linear-gradient(145deg, rgba(23, 67, 167, 0.2), transparent 42%, rgba(212, 147, 50, 0.1) 100%);
}

.hero-copy,
.hero-hours {
    background: linear-gradient(180deg, rgba(43, 26, 16, 0.78), rgba(22, 13, 8, 0.82));
    border-color: rgba(212, 147, 50, 0.26);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-copy h1,
.services-main > h2,
.location-layout h2,
.reviews-header h2,
.why-compose h2,
.footer h2 {
    color: var(--jm-text);
}

.hero-copy .muted,
.muted,
.review-meta {
    color: var(--jm-text-muted);
}

.hero-hours,
.booking-card,
.map-card,
.info-card,
.service-card,
.review-card,
.why-card,
.gallery-marquee,
.google-pill {
    border-color: var(--jm-border-honey);
    box-shadow: var(--shadow);
}

.booking-card,
.map-card,
.info-card,
.review-card {
    background: linear-gradient(180deg, rgba(43, 28, 18, 0.76), rgba(19, 12, 8, 0.82));
}

.why-card {
    background: linear-gradient(180deg, rgba(255, 246, 232, 0.105), rgba(255, 246, 232, 0.055));
    border-color: var(--jm-border-honey-soft);
    color: var(--jm-text);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.why-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex: 0 0 72px;
    transform-origin: center;
    filter: brightness(0) saturate(100%) invert(77%) sepia(98%) saturate(1019%) hue-rotate(348deg) brightness(108%) contrast(102%);
}

.why-card .why-icon {
    max-width: 72px;
    max-height: 72px;
}

.why-card:nth-child(2) .why-icon,
.why-card:nth-child(3) .why-icon {
    transform: scale(2.15);
}

.why-card:nth-child(4) .why-icon {
    transform: scale(0.98);
}

.services-section::before {
    background:
        linear-gradient(rgba(30, 18, 11, 0.72), rgba(30, 18, 11, 0.78)),
        url("images/junee-services-texture-art.png") center top no-repeat;
    background-position: center top;
    background-size: 100vw auto;
    background-repeat: repeat-y;
}

.service-card,
.services-loading,
.services-error {
    background: linear-gradient(180deg, rgba(255, 246, 232, 0.12), rgba(255, 246, 232, 0.06));
    border-color: rgba(212, 147, 50, 0.24);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.location-section::before {
    background:
        linear-gradient(120deg, rgba(19, 12, 8, 0.94), rgba(20, 16, 37, 0.78)),
        radial-gradient(circle at top right, rgba(212, 147, 50, 0.14), transparent 28%);
}

.option-btn {
    background: rgba(255, 246, 232, 0.07);
    color: var(--jm-text-muted);
    border-color: rgba(212, 147, 50, 0.18);
    opacity: 0.82;
}

.option-btn.is-active {
    background: linear-gradient(180deg, rgba(34, 84, 199, 0.92), rgba(23, 67, 167, 0.92));
    border-color: rgba(232, 238, 255, 0.24);
    color: #fff;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(232, 238, 255, 0.12), 0 14px 30px rgba(11, 27, 63, 0.26);
}

.service-price {
    color: var(--jm-honey-soft);
}

.field,
.counter-btn {
    background: rgba(255, 246, 232, 0.08);
    border-color: rgba(212, 147, 50, 0.2);
    color: var(--jm-text);
}

.field:focus-visible,
.counter-btn:focus-visible,
.btn:focus-visible,
.lang-btn:focus-visible,
.option-btn:focus-visible {
    outline: 2px solid rgba(232, 238, 255, 0.7);
    outline-offset: 3px;
}

.field::placeholder {
    color: #bea991;
}

.btn-line,
.btn-facebook,
.btn-booking-system,
.btn-outline,
.btn-call,
.btn-light,
.fab-booking {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.btn-line {
    background: var(--line);
    color: #fff;
    box-shadow: 0 12px 24px rgba(4, 136, 58, 0.22);
}

.btn-facebook {
    background: var(--fb);
    color: #fff;
    box-shadow: 0 12px 24px rgba(24, 119, 242, 0.2);
}

.btn-booking-system,
.btn-call,
#services .service-card .btn-line,
.fab-booking {
    background: linear-gradient(180deg, var(--jm-blue-bright), var(--jm-blue));
    color: #fff;
    border-color: rgba(232, 238, 255, 0.18);
    box-shadow: 0 18px 34px rgba(11, 27, 63, 0.28);
}

.btn-outline {
    background: rgba(23, 67, 167, 0.16);
    border-color: var(--jm-border-blue);
    color: var(--jm-blue-soft);
}

.btn-light {
    background: linear-gradient(180deg, #e2a447, #c47e25);
    border-color: rgba(241, 197, 122, 0.32);
    color: #241204;
    box-shadow: 0 14px 28px rgba(77, 39, 10, 0.22);
}

#reviews-link,
#toggle-services {
    background: linear-gradient(180deg, #e2a447, #c47e25);
    border-color: rgba(241, 197, 122, 0.32);
    color: #241204;
}

#footer-line-link {
    background: var(--line);
    color: #fff;
    box-shadow: 0 12px 24px rgba(4, 136, 58, 0.22);
}

#footer-facebook-link {
    background: var(--fb);
    color: #fff;
    box-shadow: 0 12px 24px rgba(24, 119, 242, 0.2);
}

.btn-booking-system:hover,
.btn-call:hover,
#services .service-card .btn-line:hover,
.fab-booking:hover {
    background: linear-gradient(180deg, #2a61db, var(--jm-blue-hover));
}

.btn-light:hover,
#reviews-link:hover,
#toggle-services:hover {
    background: linear-gradient(180deg, #edb45a, var(--jm-honey-deep));
}

.btn-outline:hover {
    background: rgba(23, 67, 167, 0.24);
    border-color: rgba(232, 238, 255, 0.32);
}

.btn-outline:hover,
.btn-call:hover,
.btn-light:hover,
.fab-booking:hover,
#services .service-card .btn-line:hover {
    transform: translateY(-2px);
    filter: none;
}

.gallery-marquee {
    background: linear-gradient(180deg, rgba(43, 28, 18, 0.5), rgba(16, 9, 5, 0.56));
}

.gallery-marquee-row img,
.map-card iframe {
    border-color: rgba(212, 147, 50, 0.28);
}

.open-state-island {
    border-color: rgba(255, 255, 255, 0.1);
}

.open-state-island.is-open {
    background: linear-gradient(120deg, rgba(25, 90, 69, 0.92), rgba(33, 110, 83, 0.92));
    border-color: rgba(122, 219, 176, 0.28);
}

.open-state-island.is-closed {
    background: linear-gradient(120deg, rgba(104, 53, 49, 0.92), rgba(126, 62, 56, 0.92));
    border-color: rgba(255, 174, 160, 0.28);
}

.review-card-summary {
    position: relative;
    overflow: hidden;
}

.review-card-summary::after {
    content: "";
    position: absolute;
    inset: auto -24px -24px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(200, 121, 118, 0.2), rgba(200, 121, 118, 0) 72%);
    pointer-events: none;
}

.google-pill {
    background: rgba(255, 246, 232, 0.08);
}

.footer {
    background:
        linear-gradient(180deg, rgba(18, 11, 7, 0.98), rgba(16, 9, 5, 1)),
        rgba(16, 9, 5, 1);
}

.footer-links .btn {
    min-width: 132px;
}

@media (max-width: 640px) {
    .brand {
        font-size: 0.95rem;
    }

    .lang-switch {
        width: 100%;
    }

    .lang-btn {
        flex: 1 1 calc(33.333% - 6px);
        justify-content: center;
        padding-inline: 10px;
    }

    .hero-copy,
    .hero-hours,
    .booking-card,
    .map-card,
    .info-card,
    .service-card,
    .review-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .why-icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .why-card:nth-child(2) .why-icon,
    .why-card:nth-child(3) .why-icon {
        transform: scale(2.05);
    }

    .why-card:nth-child(4) .why-icon {
        transform: scale(0.98);
    }

    .why-card .why-icon {
        max-width: 64px;
        max-height: 64px;
    }
}