/* Shared visual tokens for marketing, guest and manager shells. */
:root {
    --hostpass-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hostpass-action: #3c6e71;
    --hostpass-action-hover: #284b63;
    --hostpass-radius: 0.75rem;
    --hostpass-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --hostpass-duration: 180ms;
    --hostpass-focus: #0a0a0a;
    /* Text-safe status colours: each passes 4.5:1 on white and on the pale tints. */
    --hostpass-text-success: #166534;
    --hostpass-text-danger: #b42318;
    --hostpass-text-warning: #8a5300;
    --hostpass-text-muted: #5f6368;
    /* Brand cyan #00AEEF is decorative only (2.5:1 on white); text uses this. */
    --hostpass-cyan-text: #00729c;
}

.mobile-shell {
    font-family: var(--hostpass-font);
    /* Bootstrap's default blue (#0d6efd) must never surface in a HostPass shell. */
    --bs-primary: var(--hostpass-action);
    --bs-primary-rgb: 60, 110, 113;
    --bs-link-color: var(--hostpass-action);
    --bs-link-color-rgb: 60, 110, 113;
    --bs-link-hover-color: var(--hostpass-action-hover);
    --bs-link-hover-color-rgb: 40, 75, 99;
    --bs-focus-ring-color: rgba(60, 110, 113, 0.25);
    --bs-secondary-color: var(--hostpass-text-muted);
}

.mobile-shell .btn {
    border-radius: var(--hostpass-radius);
    transition: transform 140ms var(--hostpass-ease-out),
                background-color var(--hostpass-duration) ease,
                color var(--hostpass-duration) ease,
                border-color var(--hostpass-duration) ease;
}

.mobile-shell .btn-primary {
    --bs-btn-bg: var(--hostpass-action);
    --bs-btn-border-color: var(--hostpass-action);
    --bs-btn-hover-bg: var(--hostpass-action-hover);
    --bs-btn-hover-border-color: var(--hostpass-action-hover);
    --bs-btn-active-bg: var(--hostpass-action-hover);
    --bs-btn-active-border-color: var(--hostpass-action-hover);
    background: var(--hostpass-action);
    border-color: var(--hostpass-action);
    color: #fff;
}

.mobile-shell .btn-outline-primary {
    --bs-btn-color: var(--hostpass-action);
    --bs-btn-border-color: var(--hostpass-action);
    --bs-btn-hover-bg: var(--hostpass-action);
    --bs-btn-hover-border-color: var(--hostpass-action);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--hostpass-action);
    --bs-btn-active-border-color: var(--hostpass-action);
    --bs-btn-active-color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .mobile-shell .btn-primary:hover {
        background: var(--hostpass-action-hover);
        color: #fff;
    }

    .mobile-shell .btn-outline-primary:hover {
        background: var(--hostpass-action);
        color: #fff;
    }
}

/* Platform behavior shared by the guest, marketing and manager shells. */
html {
    -webkit-text-size-adjust: 100%; /* Keep landscape text at the authored size. */
    -webkit-tap-highlight-color: transparent; /* Controls provide their own press feedback. */
    color-scheme: light; /* Do not auto-darken our light form and card surfaces. */
}

.mobile-shell {
    /* viewport-fit=cover lets the background extend under landscape cutouts. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.mobile-shell > .header,
.mobile-shell > .navbar {
    border-top: env(safe-area-inset-top, 0px) solid transparent;
}

.mobile-shell > .nav {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.mobile-shell > .footer {
    border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
}

.mobile-shell h1,
.mobile-shell h2,
.mobile-shell h3,
.mobile-shell h4,
.mobile-shell h5,
.mobile-shell h6 {
    overflow-wrap: anywhere; /* Long property names must wrap, not hide outside the phone. */
}

/* Keep document scrolling/pull-to-refresh; only overlays contain scroll chaining. */
.modal,
#two-sided-camera-overlay {
    overscroll-behavior: contain;
}

#two-sided-camera-overlay .bg-white {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem);
    overflow-y: auto; /* Camera actions must remain reachable in landscape. */
}

button,
a,
[role="button"] {
    touch-action: manipulation; /* Fast taps without disabling pinch-to-zoom. */
}

button,
[role="button"],
.btn,
.hamburger {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* Only controls, never addresses or access codes. */
}

/* :focus-visible excludes keyboard activation from pointer press motion. */
.mobile-shell button:not(:disabled):not(:focus-visible):active,
.mobile-shell .btn:not(.disabled):not(:disabled):not(:focus-visible):active {
    transform: scale(0.97);
}

/*
 * One focus ring for every shell: a white inner band and a dark outer ring stay
 * visible on white pages and on the teal headers alike. Loaded last, this beats
 * Bootstrap's `.btn:focus-visible` (same specificity), which removes the outline.
 */
:is(a, button, .btn, [role="button"], [role="switch"], [tabindex], summary, select):focus-visible {
    outline: 3px solid var(--hostpass-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.property-gallery .carousel {
    /* Bootstrap owns horizontal swipes; retain vertical page scroll and pinch zoom. */
    touch-action: pan-y pinch-zoom;
}

@media (pointer: coarse) {
    input,
    textarea,
    select,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 16px; /* Include Bootstrap's more-specific small input-group selectors. */
    }

    button,
    .btn,
    .form-select,
    .navbar .nav-link,
    .nav-links a,
    summary {
        min-height: 44px;
    }

    button,
    .btn {
        min-width: 44px;
    }

    .property-gallery .carousel-control-prev,
    .property-gallery .carousel-control-next {
        opacity: 1; /* Touch users cannot reveal controls by hovering. */
    }
}

@media (hover: none) {
    .btn {
        /* Bootstrap's vendor hover colors must not stick after a touch tap. */
        --bs-btn-hover-color: var(--bs-btn-color);
        --bs-btn-hover-bg: var(--bs-btn-bg);
        --bs-btn-hover-border-color: var(--bs-btn-border-color);
    }
}

/* Routine page entrances should never delay a task or flash staggered content. */
.mobile-shell .fade-in,
.mobile-shell .slide-in,
.mobile-shell .slide-in-up {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .mobile-shell *,
    .mobile-shell *::before,
    .mobile-shell *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .mobile-shell button:not(:disabled):active,
    .mobile-shell .btn:not(.disabled):not(:disabled):active {
        transform: none;
    }

    /* A frozen spinner reads as a broken ring: keep a slow, linear rotation so
       "still working" stays visible. Higher specificity wins over the blanket rule. */
    .mobile-shell .spinner-border {
        animation: spinner-border 1.6s linear infinite !important;
    }

    .mobile-shell .spinner-grow {
        animation: spinner-grow 2s linear infinite !important;
    }
}