:root {
    --nijio-brand: #6d2c91;
    --nijio-brand-dark: #4a1d63;
    --nijio-brand-pale: #f3e8ff;
    --nijio-focus: #c026d3;
}

/* Installable account notification card. iPhone instructions only appear when needed. */
.nijio-push-install { display:none; }
.nijio-push-card[data-state="install"] .nijio-push-install { display:block; }
.nijio-push-card[data-state="install"] .nijio-push-options,
.nijio-push-card[data-state="install"] .nijio-push-actions,
.nijio-push-card[data-state="unconfigured"] .nijio-push-options,
.nijio-push-card[data-state="unconfigured"] .nijio-push-actions { display:none; }
.nijio-push-card[data-state="enabled"] [data-push-enable] { display:none; }
.nijio-push-card[data-state="ready"] [data-push-save],
.nijio-push-card[data-state="ready"] [data-push-disable] { display:none; }
.nijio-push-card input[type="checkbox"] { width:18px;height:18px;accent-color:#6D2C91; }

html {
    scroll-behavior: smooth;
}

/* Keep the homepage access box comfortably below the fixed navigation. */
#code-card { scroll-margin-top: 7rem; }

:focus-visible {
    outline: 3px solid var(--nijio-focus) !important;
    outline-offset: 3px !important;
}

.skip-link {
    position: fixed;
    z-index: 100000;
    top: .75rem;
    left: .75rem;
    transform: translateY(-180%);
    border-radius: .75rem;
    background: #fff;
    color: var(--nijio-brand-dark);
    padding: .7rem 1rem;
    font-weight: 800;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .24);
    transition: transform .16s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.nijio-help-card {
    border: 1px solid #e9d5ff;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
    box-shadow: 0 12px 34px rgba(74, 29, 99, .08);
}

.nijio-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: .7rem;
    background: var(--nijio-brand);
    color: #fff;
    font-weight: 900;
}

.nijio-language-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .4rem .65rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.nijio-language-link:hover {
    border-color: #d8b4fe;
    color: var(--nijio-brand);
    background: #faf5ff;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :focus-visible { outline: 3px solid CanvasText !important; }
}
.nijio-nav-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.16em;
}
.nijio-nav-icon-lg {
    width: 1.55rem;
    height: 1.55rem;
}

.nijio-mobile-dock { display: none; }

/* -------------------------------------------------------------------------
   Phone and tablet foundation
   All customer pages include this file through header.php. Keep the rules
   structural: individual pages retain their existing colours and identity.
   ------------------------------------------------------------------------- */
html, body {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
}

body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }

@media (max-width: 767px) {
    :root { --nijio-phone-gutter: 1rem; }

    body {
        min-width: 0;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        background-color: #f6f3f8;
    }

    /* Prevent iPhone Safari from zooming the whole page when a field opens. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important;
    }

    button,
    [role="button"],
    input[type="button"],
    input[type="submit"] {
        touch-action: manipulation;
    }

    #site-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    #site-header > .container {
        width: 100%;
        padding-left: var(--nijio-phone-gutter);
        padding-right: var(--nijio-phone-gutter);
    }

    #site-header {
        background: rgba(255, 255, 255, .94) !important;
        border-bottom-color: rgba(109, 44, 145, .10) !important;
        box-shadow: 0 4px 24px rgba(30, 10, 48, .08) !important;
    }
    #site-header .h-20 { height: 3.75rem; }
    #site-header + .h-20 { height: calc(3.75rem + env(safe-area-inset-top, 0px)); }
    #site-header .font-black.text-2xl { font-size: 1.18rem; letter-spacing: .02em; }
    #site-header .w-10.h-10 { width: 2.2rem; height: 2.2rem; border-radius: .72rem; }

    #mob-menu-btn {
        width: 48px;
        height: 48px;
        display: inline-grid;
        place-items: center;
        margin-right: -.5rem;
        border-radius: .9rem;
    }

    #mob-menu {
        position: fixed !important;
        top: calc(3.75rem + env(safe-area-inset-top, 0px));
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #mob-menu > div {
        display: grid;
        gap: .45rem;
        padding: 1rem 1rem 1.5rem;
    }

    #mob-menu a { min-height: 54px; border: 1px solid #ede8f2; background: #fff; }

    .nijio-mobile-dock {
        position: fixed;
        z-index: 90;
        left: 8px;
        right: 8px;
        bottom: calc(7px + env(safe-area-inset-bottom, 0px));
        height: 62px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 5px;
        border: 1px solid rgba(109, 44, 145, .14);
        border-radius: 20px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 12px 38px rgba(30, 10, 48, .20);
        backdrop-filter: blur(18px);
    }
    .nijio-mobile-dock a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        border-radius: 15px;
        color: #8290a3;
        font-size: .65rem;
        line-height: 1;
        font-weight: 800;
        text-decoration: none;
    }
    .nijio-mobile-dock a .nijio-nav-icon { width: 1.22rem; height: 1.22rem; }
    .nijio-mobile-dock a.is-active { color: #6d2c91; background: #f4eafa; }
    .nijio-mobile-dock a.is-active::after { content: ""; position: absolute; top: 3px; width: 18px; height: 3px; border-radius: 99px; background: #8b3fbf; }

    main,
    #main-content { min-width: 0; }

    /* Tailwind containers are intentionally a little tighter on phones. */
    main.container,
    main[class*="max-w-"],
    #main-content[class*="max-w-"] {
        padding-left: var(--nijio-phone-gutter) !important;
        padding-right: var(--nijio-phone-gutter) !important;
    }

    h1 { overflow-wrap: anywhere; }

    .nijio-help-card { border-radius: 1.1rem; }

    /* Phone pages use edge-to-edge content sections and calm card hierarchy. */
    main[class*="max-w-"], #main-content[class*="max-w-"] { max-width: none !important; }
    .card { border-radius: 1rem !important; box-shadow: 0 5px 22px rgba(30, 41, 59, .06); }
    section[class*="py-20"], section[class*="py-24"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

    /* Customer dialogs become bottom sheets, with room for the Home bar. */
    .modal-wrap,
    .modal-bg {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-wrap .modal-box,
    .modal-bg .modal-box {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 1.35rem 1.35rem 0 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Shared compact cards used by the portal, booking and contact pages. */
    .card[class*="p-6"], .card[class*="p-8"] { padding: 1.1rem !important; }

    .overflow-x-auto,
    .nijio-mobile-scroll {
        margin-left: calc(-1 * var(--nijio-phone-gutter));
        margin-right: calc(-1 * var(--nijio-phone-gutter));
        padding-left: var(--nijio-phone-gutter);
        padding-right: var(--nijio-phone-gutter);
        scroll-padding-inline: var(--nijio-phone-gutter);
        -webkit-overflow-scrolling: touch;
    }

    /* Booking pages */
    .booking-schedule-page .max-w-5xl.mx-auto.px-5.py-10,
    .location-booking-page main[class*="max-w-"] { padding-top: 1.25rem !important; padding-bottom: 2rem !important; }
    .booking-schedule-page .bg-white.border-b .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .booking-schedule-page h1.text-5xl,
    .booking-schedule-page h1.sm\:text-6xl { font-size: 2.35rem !important; }
    .booking-schedule-page .px-7.py-6 { padding: 1rem !important; }
    .booking-schedule-page .modal-box { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .booking-schedule-page #mainGrid > div:first-child > div { border-radius: 1rem !important; }
    .booking-schedule-page #cartPanel > div { border-radius: 1rem !important; }
    .booking-schedule-page .slot-card { border-radius: 14px; box-shadow: 0 4px 14px rgba(76, 29, 149, .06); }
    .booking-schedule-page .slot-card.available { background: #fff; border-left-width: 5px; }
    .booking-schedule-page .slot-card.booked,
    .booking-schedule-page .slot-card.too-short { min-height: 64px; }
    .booking-schedule-page .pkg-card { border-radius: 16px; box-shadow: 0 5px 18px rgba(30, 10, 48, .08); }
    .location-booking-page .grid.sm\:grid-cols-2,
    .location-booking-page .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .location-booking-page .flex.items-center.gap-3:has(input) { flex-wrap: wrap; }
    .location-booking-page .page-hero { border-radius: 0 0 28px 28px; }
    .location-booking-page #step-choose-type { padding-left: .75rem !important; padding-right: .75rem !important; }
    .location-booking-page .type-card { min-height: 0; padding: 1.2rem !important; }
    .location-booking-page .type-card .w-16.h-16 { width: 3.1rem; height: 3.1rem; }
    .location-booking-page .form-section { border: 1px solid #e8e2ed; box-shadow: 0 4px 18px rgba(30, 10, 48, .05); }
    .location-booking-page .package-card { border-radius: 14px !important; }
    .location-booking-page .price-panel { margin-left: -.25rem; margin-right: -.25rem; }

    /* Client account */
    .client-portal-page #main-content { padding-top: 1.25rem !important; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
    .client-portal-page #main-content > .mb-8 { align-items: flex-start; }
    .client-portal-page #main-content > .mb-8 > .flex { width: 100%; }
    .client-portal-page #main-content > .mb-8 a { flex: 1; justify-content: center; min-height: 48px; }
    .client-portal-page .card .flex.items-center.justify-between { gap: .75rem; flex-wrap: wrap; }
    .client-portal-page .card a[class*="rounded-full"],
    .client-portal-page .card button[class*="rounded-full"] { min-height: 44px; }
    .client-portal-page .lg\:grid-cols-3 { display: flex !important; flex-direction: column; }
    .client-portal-page .lg\:col-span-2 { order: 1; }
    .client-portal-page .lg\:grid-cols-3 > .space-y-4 { order: 2; }
    .client-portal-page .card.overflow-hidden { border: 0; box-shadow: 0 7px 24px rgba(30, 10, 48, .10); }
    .client-portal-page .card.overflow-hidden .relative.flex { align-items: stretch !important; flex-direction: column; }
    .client-portal-page .card.overflow-hidden .flex-col.items-end { width: 100%; align-items: stretch; }
    .client-portal-page .card.overflow-hidden .flex-col.items-end a { justify-content: center; }

    /* Gallery and portfolio viewers */
    .gallery-page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
    .gallery-page .sticky-bar {
        position: fixed !important;
        z-index: 210;
        top: auto !important;
        left: 8px;
        right: 8px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        padding: .5rem .55rem !important;
        border: 1px solid rgba(109,44,145,.16);
        border-radius: 18px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 13px 36px rgba(30,10,48,.22);
        backdrop-filter: blur(18px);
    }
    .gallery-page .sticky-bar .max-w-7xl { padding-left: 0 !important; padding-right: 0 !important; }
    .gallery-page .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 5px !important; margin-left: -1rem; margin-right: -1rem; }
    .gallery-page .photo-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .gallery-page .photo-img-wrap { height: 50vw !important; border-radius: 0 !important; }
    .gallery-page .photo-img-wrap img { width: 100%; height: 100%; max-height: none !important; object-fit: cover; }
    .gallery-page .card-footer { padding: .5rem !important; }
    .gallery-page .gallery-guide { margin-left: -.25rem; margin-right: -.25rem; }
    body.nijio-photo-viewer-open .nijio-mobile-dock { display: none; }
    .portfolio-page #lb { padding: calc(54px + env(safe-area-inset-top, 0px)) 0 calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
    .portfolio-page #lb-prev, .portfolio-page #lb-next, .portfolio-page #lb-close { min-width: 48px; min-height: 48px; }
    .portfolio-page #lb-caption { bottom: calc(38px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 88px); }
    .portfolio-page .port-hero { padding: 2.4rem 1rem !important; }
    .portfolio-page .port-hero h1 { font-size: 2.5rem !important; }
    .portfolio-page .m-caption { opacity: 1; transform: none; padding: 1.8rem .55rem .45rem; font-size: .65rem; }

    /* Home page: a focused first screen instead of a scaled desktop poster. */
    .home-page > section:first-of-type { min-height: auto !important; padding: 1.4rem 0 2rem; }
    .home-page { background-color: #06000f; }
    .home-page > section:first-of-type .relative.z-10 { padding-top: 1rem !important; padding-bottom: 0 !important; }
    .home-page > section:first-of-type .chibi-float { width: 88px !important; }
    .home-page .hero-title { font-size: clamp(2.75rem, 16vw, 4rem) !important; line-height: .88 !important; }
    .home-page .hero-title + p { font-size: .96rem !important; line-height: 1.55 !important; }
    .home-page > section:first-of-type .flex.flex-wrap.gap-3 { display: grid; grid-template-columns: 1fr; }
    .home-page > section:first-of-type .flex.flex-wrap.gap-3 a { width: 100%; min-height: 50px; justify-content: center; }
    .home-page .code-glass { padding: 1rem !important; border-radius: 18px; }
    .home-page #events .hero-title, .home-page #reviews .hero-title { font-size: 2.7rem !important; }
    .home-page .featured-card, .home-page .event-card { border-radius: 18px !important; }
    .home-page .featured-card a, .home-page .event-card a { width: 100%; justify-content: center; }

    .terms-page .hero-bg { padding-top: 3rem !important; padding-bottom: 3rem !important; border-radius: 0 0 28px 28px; }
    .terms-page .hero-bg h1 { font-size: 2.45rem !important; }
    .terms-page .hero-bg p.text-lg { font-size: .95rem !important; }
    .terms-page > div[class*="max-w-screen"] { padding: 1.25rem .6rem 2rem !important; }
    .terms-page .legal-block { padding: 5px 16px 20px; }
    .terms-page .plain-speak { margin-left: 10px; margin-right: 10px; }
    .review-page main { padding-top: 1.25rem !important; }
}

@media (max-width: 420px) {
    #site-header .font-black.text-2xl { font-size: 1.25rem; }
    #site-header .w-10.h-10 { width: 2.35rem; height: 2.35rem; }
}

@media (max-width: 330px) {
    .gallery-page .photo-grid { grid-template-columns: 1fr !important; }
    .gallery-page .photo-img-wrap { height: 82vw !important; }
}

/* Shared interaction finish. Motion is deliberately short and functional: it
   clarifies page/sheet changes without delaying booking or gallery work. */
@keyframes nijio-content-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main{animation:nijio-content-arrive .34s cubic-bezier(.22,.8,.24,1) both}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button:not(:disabled),a[href]{transition-property:transform,box-shadow,background-color,border-color,color,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.22,.8,.24,1)}
@media(hover:hover){button:not(:disabled):active,a[href]:active{transform:scale(.985)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}