/* ==========================================================================
   99 Hotels PWA — application stylesheet
   Mobile-first. No framework. Single file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --brand: #b0271f;
    --brand-dark: #8d1f19;
    --highlight: #9e2864;
    --highlight-dark: #7c1e4d;

    /* Page */
    --page-top: #000000;
    --page-bottom: #531032;

    /* Surfaces */
    --surface: #ffffff;
    --surface-2: #f4f4f6;
    --surface-inset: #ebebef;

    /* Text */
    --ink: #1b1b1f;
    --ink-2: #55555f;
    --ink-3: #86868f;
    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, 0.72);

    /* Feedback */
    --green: #1f8a4c;
    --red: #c62828;
    --amber: #e8a33d;
    --whatsapp: #25d366;
    --phone: #1f8a4c;
    --mail: #2b7de9;
    --facebook: #3b5998;
    --twitter: #1da1f2;

    /* Lines & shadows */
    --line: rgba(0, 0, 0, 0.09);
    --line-dark: rgba(255, 255, 255, 0.14);
    --shadow-s: 0 2px 8px rgba(0, 0, 0, 0.14);
    --shadow-m: 0 6px 20px rgba(0, 0, 0, 0.18);
    --shadow-l: 0 12px 32px rgba(0, 0, 0, 0.26);

    /* Radii */
    --r-s: 8px;
    --r-m: 14px;
    --r-l: 22px;
    --r-pill: 999px;

    /* Spacing */
    --gap: 16px;
    --gutter: 16px;

    /* Chrome */
    --nav-h: 62px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* Type — system stack only, so the app ships with zero webfont requests */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        Helvetica, Arial, sans-serif;

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--on-dark);
    background-color: var(--page-top);
    background-image: linear-gradient(0deg, var(--page-bottom), var(--page-top));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Room for the fixed bottom navigation on pages that have one. */
body.has-nav {
    padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.4em;
    line-height: 1.25;
    font-weight: 700;
}

h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.15rem;
}
h4 {
    font-size: 1.05rem;
}
h5 {
    font-size: 0.95rem;
}
h6 {
    font-size: 0.85rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

hr {
    border: 0;
    border-top: 1px solid var(--line-dark);
    margin: 20px 0;
}

/* Visible, consistent keyboard focus everywhere. */
:focus-visible {
    outline: 3px solid var(--highlight);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 16px;
    border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   3. Icons (external SVG sprite)
   -------------------------------------------------------------------------- */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    display: inline-block;
    vertical-align: -0.125em;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    margin-block: 26px;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.section-head h2,
.section-head h1 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--on-dark);
}

.section-head .link {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--on-dark-2);
    text-decoration: underline;
}

.stack > * + * {
    margin-top: var(--gap);
}

/* --------------------------------------------------------------------------
   5. Home top bar (index.html only)

   Deliberately NOT .app-bar — that class is shared by 39 other pages and must
   keep its current appearance. Nothing in this section is used outside the
   home page.
   -------------------------------------------------------------------------- */
.home-bar {
    position: sticky;
    top: 0;
    z-index: 85;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(8px + var(--safe-t)) 10px 8px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-dark);
}

.home-bar-menu {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-s);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.home-bar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    /* min-width:0 lets the tagline ellipsis instead of forcing the bar wider. */
    min-width: 0;
    flex: 1;
}

.home-bar-brand > img {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.home-bar-text {
    min-width: 0;
}

.home-bar-text h1 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-bar-text p {
    margin: 1px 0 0;
    font-size: 0.55rem;
    letter-spacing: -0.1px;
    color: var(--on-dark-2);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-bar-text p .icon {
    flex: none;
    font-size: 9px;
}

/* Profile trigger --------------------------------------------------------- */
.home-bar-user {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Capped so a long saved name truncates before the 99 Hotels branding
       has to give up any room. */
    max-width: 33%;
    padding: 2px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
    font: inherit;
}

.home-bar-user:active {
    transform: scale(0.97);
}

.home-bar-name {
    min-width: 0;
    max-width: 96px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* A long saved name truncates rather than pushing the bar out of shape. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-bar-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #2bb6a5, #1f8ad0);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.home-bar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-bar-avatar .icon {
    font-size: 22px;
}

/* --------------------------------------------------------------------------
   5b. Hero carousel — contained rounded card, CSS scroll-snap, no library

   --hero-ratio is the single place the hero shape is defined. The banner
   artwork is authored at this ratio, so object-fit: cover fills the card
   without cropping anything or distorting the image. When new artwork lands
   at a different ratio, change this one value.
   -------------------------------------------------------------------------- */
.hero {
    --hero-ratio: 16 / 9;

    position: relative;
    margin: 14px var(--gutter) 0;
    border-radius: var(--r-l);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-m);
}

.hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Vertical page scrolling stays natural while swiping horizontally. */
    touch-action: pan-y pinch-zoom;
}

.hero-track::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--hero-ratio);
    object-fit: cover;
    /* Reserving the box up front means no layout jump as slides load. */
    background: #000;
}

.hero-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    /* Sits over the artwork; the track underneath stays swipeable. */
    pointer-events: none;
}

.hero-dots button {
    pointer-events: auto;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.hero-dots button[aria-current="true"] {
    background: #fff;
    width: 18px;
    border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-m);
    overflow: hidden;
}

.card-body {
    padding: 14px 16px;
}

.card-body h3,
.card-body h4 {
    margin: 0 0 2px;
}

.card-body p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.88rem;
}

/* Media card with text laid over the image */
.media-card {
    position: relative;
    display: block;
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: var(--shadow-m);
    color: var(--on-dark);
    background: #000;
}

.media-card img {
    width: 100%;
    object-fit: cover;
}

.media-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.15) 55%,
        rgba(0, 0, 0, 0) 100%
    );
}

.media-card .media-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 14px 16px;
}

.media-card .media-top {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   7. State / city grid
   -------------------------------------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.state-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-m);
    overflow: hidden;
    box-shadow: var(--shadow-s);
    transition: transform 0.15s ease;
}

.state-card:active {
    transform: scale(0.98);
}

.state-card img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

.state-card .state-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.state-card .state-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.state-card .state-sub {
    color: var(--ink-3);
    font-size: 0.82rem;
}

.state-card .state-cta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.state-card[aria-disabled="true"] .state-cta {
    color: var(--ink-3);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Search
   -------------------------------------------------------------------------- */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-pill);
    padding: 4px 8px 4px 18px;
    box-shadow: var(--shadow-l);
}

.search-box .icon {
    font-size: 18px;
    color: var(--ink-3);
}

.search-box input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    padding: 14px 0;
    font-size: 1rem;
    min-width: 0;
}

.search-box input::placeholder {
    color: var(--ink-3);
}

.search-clear {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--red);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.search-clear[hidden] {
    display: none;
}

.search-results {
    margin-top: 14px;
}

.result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.result-list li + li {
    border-top: 1px solid var(--line);
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--ink);
}

.result-item img {
    width: 52px;
    height: 52px;
    border-radius: var(--r-s);
    object-fit: cover;
    flex: none;
}

.result-item .result-meta {
    min-width: 0;
    flex: 1;
}

.result-item .result-state {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--highlight);
    font-weight: 600;
}

.result-item .result-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

.result-item .result-price {
    text-align: right;
    flex: none;
}

.result-item .result-price strong {
    display: block;
    font-size: 1.05rem;
}

.result-item .result-price span {
    font-size: 0.65rem;
    color: var(--ink-3);
}

.result-empty {
    padding: 18px;
    text-align: center;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--r-s);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-s);
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-light {
    background: #fff;
    color: var(--ink);
}

.btn-green {
    background: var(--green);
}

.btn-red {
    background: var(--red);
}

.btn-highlight {
    background: var(--highlight);
}

.btn-whatsapp {
    background: var(--whatsapp);
    color: #04301a;
}

.btn-outline {
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--on-dark);
    box-shadow: none;
}

.btn-s {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.field {
    margin-bottom: 16px;
}

.field > label,
.fieldset-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.form-dark .field > label,
.form-dark .fieldset-label {
    color: var(--on-dark-2);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink);
    outline: none;
    min-height: 46px;
}

.field textarea {
    min-height: 96px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--highlight);
    box-shadow: 0 0 0 3px rgba(158, 40, 100, 0.18);
}

.field .hint {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--ink-3);
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.field-inline input[type="checkbox"],
.field-inline input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    accent-color: var(--highlight);
    flex: none;
}

.field-inline label {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
}

.form-note {
    font-size: 0.8rem;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   11. List rows (contact list, menus)
   -------------------------------------------------------------------------- */
.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rows li + li {
    border-top: 1px solid var(--line);
}

.row-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-height: 56px;
    color: var(--ink);
}

.row-link .icon {
    font-size: 26px;
    flex: none;
}

.row-link .row-label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: var(--r-s);
    background: var(--highlight);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-green {
    background: var(--green);
}
.badge-red {
    background: var(--red);
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 4px 16px;
}

/* --------------------------------------------------------------------------
   12. Deals banner
   -------------------------------------------------------------------------- */
.deal {
    position: relative;
    display: block;
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: var(--shadow-m);
}

.deal img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.deal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

.deal-cta {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.deal-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    color: #fff;
}

.deal-content h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.deal-content p {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--on-dark-2);
    line-height: 1.3;
}

.deal-off {
    margin-left: auto;
    text-align: right;
    flex: none;
}

.deal-off strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
}

.deal-off span {
    font-size: 0.65rem;
    color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    text-align: center;
    padding: 20px 0 24px;
}

.site-footer .footer-logo {
    width: 110px;
    margin: 4px auto 12px;
}

.site-footer address {
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    margin: 0 16px 16px;
    text-align: center;
    text-wrap: balance;
}

.site-footer address .icon {
    margin-right: 6px;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 4px;
}

.socials a,
.socials button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--r-s);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    box-shadow: var(--shadow-s);
    cursor: pointer;
}

.s-facebook {
    background: var(--facebook);
}
.s-twitter {
    background: var(--twitter);
}
.s-phone {
    background: var(--phone);
}
.s-share {
    background: var(--highlight);
}
.s-top {
    background: #5a5a63;
}

.footer-meta {
    color: var(--ink-3);
    font-size: 0.78rem;
    margin: 14px 16px 0;
}

.footer-links {
    margin: 8px 16px 0;
    font-size: 0.78rem;
}

.footer-links a {
    color: var(--highlight);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Fixed bottom navigation
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    background: var(--surface);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.28);
    padding-bottom: var(--safe-b);
}

.bottom-nav a {
    flex: 1;
    min-height: var(--nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    color: var(--ink-2);
    font-size: 0.68rem;
    font-weight: 500;
    text-align: center;
}

.bottom-nav a .icon {
    font-size: 20px;
}

.bottom-nav a[aria-current="page"] {
    color: var(--brand);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. App bar (inner pages)
   -------------------------------------------------------------------------- */
.app-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + var(--safe-t)) var(--gutter) 10px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-dark);
}

.app-bar h1 {
    font-size: 1.05rem;
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-bar .icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: none;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   16. Hotel listing rows
   -------------------------------------------------------------------------- */
.hotel-card {
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: var(--shadow-m);
}

.hotel-card > img {
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
}

.hotel-card .hotel-body {
    padding: 14px 16px 16px;
}

.hotel-card h3 {
    margin: 0 0 2px;
    font-size: 1.1rem;
}

.hotel-card .hotel-area {
    color: var(--ink-3);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.rate-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.88rem;
}

.rate-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
}

.rate-list li:last-child {
    border-bottom: 0;
}

.rate-list strong {
    white-space: nowrap;
}

.availability {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 10px;
}

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

.actions .btn {
    width: 100%;
}

/* --------------------------------------------------------------------------
   17. Tabs
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

/* The database-driven catalogue uses anchors here instead of tab buttons,
   because each city is its own URL. Identical pill styling either way. */
.tabs button,
.tabs a {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    color: var(--on-dark-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tabs a {
    display: inline-block;
    text-decoration: none;
}

.tabs button[aria-selected="true"],
.tabs a[aria-current="page"] {
    background: var(--surface);
    color: var(--ink);
    border-color: transparent;
}

[role="tabpanel"][hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   18. Sheets (bottom modals) & overlay
   -------------------------------------------------------------------------- */
.sheet {
    position: fixed;
    z-index: 120;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-l) var(--r-l) 0 0;
    padding: 22px var(--gutter) calc(22px + var(--safe-b));
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: var(--shadow-l);
}

.sheet.open {
    transform: translateY(0);
}

.sheet h2 {
    margin-top: 0;
}

.sheet-side {
    top: 0;
    bottom: 0;
    right: auto;
    width: min(310px, 86vw);
    border-radius: 0 var(--r-l) var(--r-l) 0;
    transform: translateX(-105%);
    padding-top: calc(22px + var(--safe-t));
    background: var(--surface-2);
}

.sheet-side.open {
    transform: translateX(0);
}

/* Right-hand variant, used by the home profile drawer. The existing
   .sheet-side (left) is untouched so the home menu keeps its behaviour. */
.sheet-side-right {
    left: auto;
    right: 0;
    border-radius: var(--r-l) 0 0 var(--r-l);
    transform: translateX(105%);
    /* .sheet caps height at 86vh for bottom sheets; the profile drawer is a
       full-height panel. Scoped to this class so the left menu is unaffected. */
    max-height: none;
    height: 100%;
}

.sheet-side-right.open {
    transform: translateX(0);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}

.overlay.open {
    opacity: 1;
    visibility: visible;
}

.sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-inset);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   19. Toast / status messages
   -------------------------------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
    transform: translate(-50%, 20px);
    z-index: 130;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: var(--r-pill);
    background: #1b1b1f;
    color: #fff;
    font-size: 0.85rem;
    box-shadow: var(--shadow-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.toast.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.alert {
    padding: 12px 16px;
    border-radius: var(--r-s);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.alert-error {
    background: rgba(198, 40, 40, 0.14);
    border: 1px solid rgba(198, 40, 40, 0.4);
    color: #ffb4b4;
}

.alert-ok {
    background: rgba(31, 138, 76, 0.14);
    border: 1px solid rgba(31, 138, 76, 0.4);
    color: #a9e9c4;
}

/* --------------------------------------------------------------------------
   20. Utilities (deliberately few)
   -------------------------------------------------------------------------- */
.text-center {
    text-align: center;
}
.muted {
    color: var(--on-dark-2);
}
.mt-0 {
    margin-top: 0;
}
.mb-0 {
    margin-bottom: 0;
}
[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   21. Larger screens — the app stays a phone-shaped column, centred
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --gutter: 20px;
    }

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

    .bottom-nav {
        left: 50%;
        right: auto;
        width: 100%;
        max-width: 720px;
        transform: translateX(-50%);
        border-radius: var(--r-l) var(--r-l) 0 0;
    }

    .sheet:not(.sheet-side) {
        max-width: 520px;
        left: 50%;
        transform: translate(-50%, 105%);
        border-radius: var(--r-l);
        bottom: 24px;
    }

    .sheet:not(.sheet-side).open {
        transform: translate(-50%, 0);
    }
}

@media (min-width: 1024px) {
    .grid-2 {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

/* --------------------------------------------------------------------------
   23. Profile drawer (index.html only)
   -------------------------------------------------------------------------- */
.profile-drawer {
    width: min(400px, 92vw);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.profile-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(16px + var(--safe-t)) 16px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.profile-drawer-head h2 {
    margin: 0;
    font-size: 1.05rem;
    flex: 1;
}

.profile-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(24px + var(--safe-b));
}

/* Photo picker ------------------------------------------------------------ */
.profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.profile-photo-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #2bb6a5, #1f8ad0);
    color: #fff;
    box-shadow: var(--shadow-s);
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-preview .icon {
    font-size: 44px;
}

/* The real file input is hidden but still focusable via its label. */
.profile-photo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.profile-photo label.btn {
    cursor: pointer;
}

.profile-photo input[type="file"]:focus-visible + label.btn {
    outline: 3px solid var(--highlight);
    outline-offset: 2px;
}

.profile-photo .hint {
    font-size: 0.72rem;
    color: var(--ink-3);
    text-align: center;
}

.profile-readonly {
    background: var(--surface-inset);
    color: var(--ink-2);
}

.profile-status {
    margin-top: 14px;
}

.profile-status[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   24. Home top bar / hero — wider screens
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .home-bar {
        max-width: 720px;
        margin-inline: auto;
        border-bottom-left-radius: var(--r-m);
        border-bottom-right-radius: var(--r-m);
    }

    .hero {
        max-width: 720px;
        margin-inline: auto;
    }

    .home-bar-text h1 {
        font-size: 1.05rem;
    }
}

@media (min-width: 1024px) {
    .profile-drawer {
        width: 420px;
    }
}

/* Narrow phones: give the name less room so the branding stays readable. */
@media (max-width: 400px) {
    .home-bar {
        gap: 6px;
        padding-inline: 8px;
    }

    .home-bar-brand {
        gap: 6px;
    }

    .home-bar-brand > img {
        width: 30px;
        height: 30px;
    }

    .home-bar-name {
        max-width: 72px;
    }

    .home-bar-text h1 {
        font-size: 0.83rem;
    }

    .home-bar-text p {
        font-size: 0.52rem;
    }
}

/* Very small phones: drop the tagline rather than let the bar wrap. */
@media (max-width: 359px) {
    .home-bar-text p {
        display: none;
    }

    .home-bar-name {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   25. AI Agent / Get Started card (index.html only)

   Scoped under .home-cta so nothing here can reach another page. Colours are
   local to this card because it is the one deliberately bright surface in an
   otherwise dark layout; everything else reuses the existing tokens.
   -------------------------------------------------------------------------- */
.home-cta {
    --cta-ink: #ffffff;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Indigo into brand magenta, sitting on the page's own dark gradient. */
    background:
        radial-gradient(120% 100% at 12% 0%, rgba(107, 91, 255, 0.55), transparent 60%),
        radial-gradient(120% 100% at 100% 100%, rgba(158, 40, 100, 0.75), transparent 62%),
        linear-gradient(150deg, #1a1140 0%, #2a0f2c 55%, #150a26 100%);
    color: var(--cta-ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-m), 0 0 44px rgba(107, 91, 255, 0.18);
    padding: 26px 18px 26px;
    text-align: center;
}

/* A slow sheen drifting behind the content, so the card feels alive without
   competing with the microphone. Purely decorative. */
.home-cta-aurora {
    position: absolute;
    inset: -40% -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 30% 30%, rgba(107, 91, 255, 0.35), transparent 70%),
        radial-gradient(35% 28% at 70% 60%, rgba(196, 64, 127, 0.35), transparent 70%);
    filter: blur(6px);
    animation: h99-aurora 14s ease-in-out infinite alternate;
}

@keyframes h99-aurora {
    0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

.home-cta-title {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Microphone — the future voice-agent entry point. */
.home-cta-mic-wrap {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
}

/* Idle rings. They are siblings, not pseudo-elements, because ::before and
   ::after on the button are already used by the connecting/listening/speaking
   states — these must never fight those. */
.mic-ring {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(140, 125, 255, 0.55);
    pointer-events: none;
    opacity: 0;
    animation: h99-mic-idle 3s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.mic-ring:nth-of-type(2) { animation-delay: 1s; }
.mic-ring:nth-of-type(3) { animation-delay: 2s; }

@keyframes h99-mic-idle {
    0%   { transform: scale(0.85); opacity: 0.75; }
    70%  { opacity: 0.12; }
    100% { transform: scale(2.05); opacity: 0; }
}

/* The moment a real conversation state takes over, the idle rings stand down
   so only one thing is animating at a time. */
.home-cta-mic.is-connecting ~ .mic-ring,
.home-cta-mic.is-listening ~ .mic-ring,
.home-cta-mic.is-speaking ~ .mic-ring,
.home-cta-mic.is-error ~ .mic-ring {
    animation: none;
    opacity: 0;
}

.home-cta-mic {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #6b5bff, #4b3fd6);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-cta-mic:not(.is-connecting):not(.is-listening):not(.is-speaking):not(.is-error) {
    animation: h99-mic-breath 3s ease-in-out infinite;
}

@keyframes h99-mic-breath {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(107, 91, 255, 0.5); }
    50%      { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 0 26px 6px rgba(107, 91, 255, 0.45); }
}

.home-cta-mic:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
}

.home-cta-mic:active {
    transform: scale(0.95);
}

.home-cta-greet {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
}

/* The one line that matters — the reason to tap the mic. */
.home-cta-lead {
    margin: 0 auto 12px;
    max-width: 30ch;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    background: linear-gradient(92deg, #ffffff 0%, #f3d7ff 45%, #ffb9dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
}

/* A long saved name must not stretch the card. */
.home-cta-greet [data-greet-name] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.home-cta-copy {
    margin: 0 0 20px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    text-wrap: pretty;
}

.home-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 22px;
    border-radius: var(--r-pill);
    background: linear-gradient(100deg, #ffffff 0%, #f2ecff 100%);
    color: #17102e;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-s);
    transition: transform 0.12s ease;
}

.home-cta-btn:active {
    transform: scale(0.98);
}

.home-cta-alt {
    margin: 14px 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.66);
}

.home-cta-alt a {
    color: #ffb9dd;
}

.home-cta-alt a {
    font-weight: 700;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .home-cta {
        padding: 28px 32px 30px;
    }

    .home-cta-btn {
        max-width: 380px;
        margin-inline: auto;
    }
}

/* --------------------------------------------------------------------------
   26. Aarthi voice-agent microphone states (index.html only)

   Every state below is applied by app.js from a real ElevenLabs SDK event.
   The rings are drawn with ::before / ::after on the existing button, so no
   extra markup was needed and the idle appearance is unchanged.
   -------------------------------------------------------------------------- */
.home-cta-mic {
    position: relative;
    isolation: isolate;
}

.home-cta-mic::before,
.home-cta-mic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Connecting — a slow, patient breath. */
.home-cta-mic.is-connecting {
    background: linear-gradient(145deg, #7b6cff, #5a4ae0);
}

.home-cta-mic.is-connecting::before {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(107, 91, 255, 0.55);
    animation: h99-mic-breathe 1.6s ease-in-out infinite;
}

/* Listening — green, an outward ripple while Aarthi hears the guest. */
.home-cta-mic.is-listening {
    background: linear-gradient(145deg, #2fbf71, #12924f);
}

.home-cta-mic.is-listening::before,
.home-cta-mic.is-listening::after {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.5);
    animation: h99-mic-ripple 1.9s ease-out infinite;
}

/* The second ring trails the first, which reads as a pulse rather than a blink. */
.home-cta-mic.is-listening::after {
    animation-delay: 0.95s;
}

/* Aarthi speaking — brand magenta with a steadier, fuller glow. */
.home-cta-mic.is-speaking {
    background: linear-gradient(145deg, #c4407f, var(--highlight));
}

.home-cta-mic.is-speaking::before {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(196, 64, 127, 0.55);
    animation: h99-mic-ripple 1.3s ease-out infinite;
}

.home-cta-mic.is-speaking::after {
    opacity: 1;
    animation: h99-mic-glow 1.3s ease-in-out infinite;
}

/* Error — brief, non-alarming. */
.home-cta-mic.is-error {
    background: linear-gradient(145deg, #e05252, var(--red));
}

@keyframes h99-mic-ripple {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; }
    100% { box-shadow: 0 0 0 22px currentColor; opacity: 0; }
}

@keyframes h99-mic-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.35; }
    50%      { transform: scale(1.12); opacity: 0.6; }
}

@keyframes h99-mic-glow {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(196, 64, 127, 0.5); }
    50%      { box-shadow: 0 0 22px 8px rgba(196, 64, 127, 0.75); }
}

/* Colour still communicates state when motion is unwelcome; only the
   animation is dropped. (The global reduced-motion block already neutralises
   durations — this makes the intent explicit for the rings.) */
@media (prefers-reduced-motion: reduce) {
    .home-cta-mic::before,
    .home-cta-mic::after {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Promotional video card — "List Your Hotel on 99 Hotels" (index.html)

   Built from the existing tokens: the frame is a .card, so radius, shadow and
   surface come from there. The poster is shown clean with nothing over it and
   the play control sits in the body beneath it. Nothing here touches .deal,
   which signedinpage.php still uses.
   -------------------------------------------------------------------------- */
.promo-video {
    background: #000;
    line-height: 0;
}

.promo-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* contain, never cover: a film of a different ratio letterboxes rather
       than being cropped or stretched. */
    object-fit: contain;
    background: #000;
}

.promo-body {
    padding: 20px 18px 22px;
    text-align: center;
}

/* Play control — a pill beneath the poster, as in the approved design. */
.promo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 13px 26px;
    border: 0;
    border-radius: var(--r-pill);
    background: #111114;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}

.promo-play svg {
    flex: none;
    width: 13px;
    height: 13px;
    padding: 6px 5px 6px 7px;
    border-radius: 50%;
    background: #fff;
    color: #111114;
    box-sizing: content-box;
}

.promo-play:hover { background: #26262c; }

.promo-play span {
    text-align: left;
    line-height: 1.3;
}

/* Once the film is running the button has done its job. */
.promo.is-playing .promo-play { display: none; }

.promo-body h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    color: var(--ink);
}

.promo-body > p {
    margin: 0 0 18px;
    color: var(--ink-3);
    font-size: 0.95rem;
}

/* Outlined pill, matching the approved design. */
.promo-cta {
    display: block;
    padding: 14px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.promo-cta:hover {
    background: var(--surface-2);
    border-color: var(--ink-3);
}

.promo-fallback {
    line-height: 1.5;
    padding: 18px;
    color: var(--on-dark-2);
}

@media (max-width: 400px) {
    .promo-body { padding: 18px 14px 20px; }
    .promo-play { padding: 12px 18px; font-size: 0.78rem; }
    .promo-cta { font-size: 0.9rem; padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-play,
    .promo-cta { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer card — index.html only

   Every rule is scoped under .site-footer, so the shared .socials, .card and
   .footer-* classes keep their current appearance on every other page that
   uses them. Nothing above this block was changed.
   -------------------------------------------------------------------------- */
.card.site-footer {
    /* Magenta into deep navy, matching the approved design. */
    background:
        radial-gradient(115% 85% at 0% 0%, rgba(178, 33, 110, 0.55), transparent 58%),
        radial-gradient(115% 85% at 100% 100%, rgba(26, 62, 150, 0.55), transparent 58%),
        linear-gradient(155deg, #1b0f2b 0%, #0c1330 100%);
    color: var(--on-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 26px 18px 26px;
}

.site-footer address {
    color: var(--on-dark);
}

.site-footer address .icon {
    color: var(--on-dark);
}

/* Contact rows: framed icon, centred label, outlined action pill ----------- */
.footer-contacts {
    list-style: none;
    margin: 20px 0 4px;
    padding: 0;
}

.footer-contacts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-contacts li:last-child {
    border-bottom: 0;
}

.fc-icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-m);
    font-size: 20px;
}

.footer-contacts li:nth-child(1) .fc-icon { color: var(--on-dark); }
.footer-contacts li:nth-child(2) .fc-icon { color: #e879b8; border-color: rgba(232, 121, 184, 0.55); }
.footer-contacts li:nth-child(3) .fc-icon { color: var(--on-dark); }

.fc-label {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.95rem;
    /* A long address must wrap rather than push the pill off the card. */
    overflow-wrap: anywhere;
}

.fc-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--r-m);
    color: var(--on-dark);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.fc-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Social row: uniform outlined squares, overriding the brand-coloured tiles. */
.site-footer .socials {
    padding: 22px 0 6px;
    flex-wrap: wrap;
}

.site-footer .socials a,
.site-footer .socials button {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-m);
    background: transparent;
    color: var(--on-dark);
    font-size: 20px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.site-footer .socials a:hover,
.site-footer .socials button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Copyright, ruled either side as in the approved design. */
.footer-copy {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 0;
    color: var(--on-dark-2);
    font-size: 0.8rem;
}

.footer-copy::before,
.footer-copy::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 121, 184, 0.75));
}

.footer-copy::after {
    background: linear-gradient(90deg, rgba(232, 121, 184, 0.75), transparent);
}

.site-footer .footer-meta {
    color: var(--on-dark-2);
}

.site-footer .footer-meta a {
    color: var(--on-dark-2);
}

.site-footer .footer-links a {
    color: #e879b8;
}

@media (max-width: 430px) {
    .card.site-footer { padding: 22px 12px; }
    .footer-contacts li { gap: 8px; padding: 12px 0; }
    .fc-icon { width: 44px; height: 44px; font-size: 16px; }
    /* Sized so the longest label, the email address, stays on one line
       instead of breaking mid-word. */
    .fc-label { font-size: 0.78rem; }
    .fc-action { padding: 10px 9px; font-size: 0.62rem; gap: 5px; letter-spacing: 0.03em; }
    .fc-action .icon { font-size: 12px; }
    .site-footer .socials { gap: 8px; }
    .site-footer .socials a,
    .site-footer .socials button { width: 44px; height: 44px; font-size: 17px; }
    .footer-copy { font-size: 0.72rem; gap: 10px; }
}

@media (max-width: 340px) {
    /* Last resort on the narrowest phones: let the pill drop under the label
       rather than squeeze the address until it breaks. */
    .footer-contacts li { flex-wrap: wrap; justify-content: center; }
    .fc-label { flex: 1 1 100%; order: 2; }
    .fc-action { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-action,
    .site-footer .socials a,
    .site-footer .socials button { transition: none; }
}

/* Install-the-app control, footer card only (index.html). ------------------ */
.footer-install {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.install-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--r-m);
    background: rgba(255, 255, 255, 0.06);
    color: var(--on-dark);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.install-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
}

.install-btn .icon {
    font-size: 18px;
    flex: none;
}

.install-note {
    margin: 8px 0 0;
    color: var(--on-dark-2);
    font-size: 0.74rem;
}

.install-note:empty {
    display: none;
}

@media (max-width: 430px) {
    .install-btn { font-size: 0.72rem; padding: 13px 14px; letter-spacing: 0.03em; }
}

@media (prefers-reduced-motion: reduce) {
    .install-btn { transition: none; }
}

/* Secondary (iPhone) install button — same shape, quieter weight. */
.install-btn-ios {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.install-btn-ios:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Numbered steps inside the iPhone install sheet. */
.install-steps {
    margin: 0 0 12px;
    padding-left: 1.15em;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.install-steps li + li {
    margin-top: 6px;
}

/* Motion in the AI card is decorative. When motion is unwelcome the gradient,
   the colour states and the layout all remain — only the movement stops. */
@media (prefers-reduced-motion: reduce) {
    .home-cta-aurora,
    .mic-ring,
    .home-cta-mic:not(.is-connecting):not(.is-listening):not(.is-speaking):not(.is-error) {
        animation: none !important;
    }

    .mic-ring { opacity: 0.25; }
}

/* Profile-photo control on the Create Account form. ------------------------ */
.reg-photo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reg-photo-preview {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--surface-inset);
    color: var(--ink-3);
    font-size: 24px;
}

.reg-photo-preview img {
    width: 100%;
    height: 100%;
    /* Fills the circle without distorting a non-square photo. */
    object-fit: cover;
}

.reg-photo-btn {
    cursor: pointer;
    margin: 0;
}