/*
===============================================================================
LOCALIA GUEST APP CSS
===============================================================================

Purpose:
- Main mobile guest app styling.
- Organized with section comments so each screen/module is easier to find.
- Brand rule: primary dark blue (#032050) + premium gold accent only.

Important:
- This cleaned version removes accidental JavaScript/JSON content that was present
  inside the uploaded CSS file.
- Replace assets/css/guest-app.css with this file content.

===============================================================================
*/


/* =============================================================================
   01. APP HEADER
   Top logo + hotel/location label.
============================================================================= */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.app-location {
    font-size: 13px;
    color: var(--color-muted);
    text-align: right;
}


/* =============================================================================
   02. SCREEN CONTENT WRAPPER
   Main scroll/content area. Padding leaves space for fixed bottom navigation.
============================================================================= */

.screen-content {
    flex: 1;
    padding-bottom: 96px;
}


/* =============================================================================
   03. HOME SCREEN — HERO CARD
   Main welcome panel shown on Home.
============================================================================= */

.hero-card {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 12px;
}

.hero-title {
    font-size: 31px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 12px;
}

.hero-text {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}


/* =============================================================================
   04. HOME SCREEN — ASK LOCALIA PREVIEW
   Small prompt card that opens the Ask screen.
============================================================================= */

.ask-card {
    margin-top: 18px;
    background: var(--color-surface);
    border-radius: var(--radius-large);
    padding: 20px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.ask-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.ask-input-preview {
    width: 100%;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 999px;
    padding: 15px 18px;
    color: var(--color-muted);
    font-size: 15px;
    text-align: left;
}


/* =============================================================================
   05. HOME SCREEN — MODULE CARDS
   Explore / Nearby / Your Stay cards.
============================================================================= */

.home-grid {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

.home-module-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 22px;
    box-shadow: var(--shadow-soft);
    text-align: left;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-module-card:active {
    transform: scale(0.985);
}

.home-module-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.home-module-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
}


/* =============================================================================
   06. PLACEHOLDER SCREENS
   Temporary screens for modules not fully implemented yet.
============================================================================= */

.placeholder-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: localiaFadeUp var(--transition-medium);
}

.placeholder-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}

.placeholder-title {
    font-size: 34px;
    line-height: 1.1;
    color: var(--color-primary);
    font-weight: 500;
    margin: 0 0 14px;
}

.placeholder-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-muted);
    margin: 0;
}


/* =============================================================================
   07. ASK LOCALIA SCREEN
   Main Ask screen placeholder and fixed input bar.
============================================================================= */

.ask-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 88px;
}

.ask-main-question {
    font-size: 27px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 28px;
}

.ask-bar {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    width: min(386px, calc(100% - 44px));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 10px 10px 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-soft);
}

.ask-bar input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 15px;
    color: var(--color-text);
    background: transparent;
}

.ask-bar button {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 0;
    background: var(--color-primary);
    color: white;
    font-size: 17px;
}


/* =============================================================================
   08. BOTTOM NAVIGATION
   Fixed mobile navigation: Home / Explore / Ask / Nearby / Stay.
============================================================================= */

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(386px, calc(100% - 32px));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 999px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    box-shadow: var(--shadow-soft);
    z-index: 20;
}

.bottom-nav button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 10px 6px;
    font-size: 12px;
    color: var(--color-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.bottom-nav button.is-active {
    background: rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
}



/* =============================================================================
   09. EXPLORE SCREEN — HERO
   Top section for Explore / city discovery.
============================================================================= */

.explore-hero {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}


/* =============================================================================
   10. EXPLORE SCREEN — SECTIONS AND CARDS
   Shared cards for Guided Tours, Attractions and AI tour card.
============================================================================= */

.explore-section {
    margin-top: 26px;
}

.explore-section-title {
    font-size: 21px;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 14px;
}

.explore-list {
    display: grid;
    gap: 14px;
}

.explore-card {
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-large);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.explore-card:active {
    transform: scale(0.985);
}

.explore-card-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.explore-card-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.explore-card-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
}

.explore-card-meta {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.explore-pill {
    font-size: 12px;
    color: var(--color-primary);
    background: rgba(3, 32, 80, 0.06);
    border-radius: 999px;
    padding: 7px 10px;
}


/* =============================================================================
   11. EXPLORE SCREEN — AI TOUR CARD
   Special premium card for future personalized tours.
============================================================================= */

.ai-tour-card {
    background:
        linear-gradient(135deg, rgba(3, 32, 80, 0.96), rgba(3, 32, 80, 0.88));
    color: white;
    border: 0;
}

.ai-tour-card .explore-card-label,
.ai-tour-card .explore-card-text {
    color: rgba(255, 255, 255, 0.76);
}

.ai-tour-card .explore-card-title {
    color: white;
}

.ai-tour-card .explore-pill {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}


/* =============================================================================
   12. GUIDED TOURS — TOUR DETAIL / BEFORE YOU START
   Tour intro, metadata, route overview and start action.
============================================================================= */

.tour-detail-hero {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.tour-back-button {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    margin-bottom: 22px;
}

.tour-detail-title {
    font-size: 31px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 12px;
}

.tour-detail-text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.tour-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.tour-detail-pill {
    font-size: 12px;
    color: white;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 7px 10px;
}


/* =============================================================================
   13. GUIDED TOURS — TOUR STOPS PREVIEW
   Stop list shown on Tour Detail before starting the tour.
============================================================================= */

.tour-stops-section {
    margin-top: 26px;
}

.tour-stop-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 22px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 14px;
    animation: localiaFadeUp var(--transition-medium);
}

.tour-stop-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 14px;
}

.tour-stop-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.tour-stop-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}

.tour-stop-instructions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
}


/* =============================================================================
   14. GUIDED TOURS — START BUTTON
   Main action to begin the tour experience.
============================================================================= */

.tour-start-button {
    width: 100%;
    border: 0;
    background: var(--color-primary);
    color: white;
    border-radius: 999px;
    padding: 16px 18px;
    font-size: 15px;
    margin-top: 18px;
}


/* =============================================================================
   15. GUIDED TOURS — ACTIVE TOUR STOP EXPERIENCE
   Current stop screen: progress, title, guide text and stop actions.
============================================================================= */

.tour-experience-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.tour-progress-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.tour-progress-bar {
    width: 100%;
    height: 7px;
    background: rgba(3, 32, 80, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.tour-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width var(--transition-medium);
}

.tour-stop-large-number {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 18px;
}

.tour-experience-title {
    font-size: 30px;
    line-height: 1.12;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 14px;
}

.tour-experience-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-muted);
    margin: 0;
}

.tour-experience-instructions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-muted);
}


/* =============================================================================
   16. GUIDED TOURS — ACTION BUTTONS
   Continue / previous / complete / back buttons.
============================================================================= */

.tour-actions {
    margin-top: 22px;
    display: grid;
    gap: 10px;
}

.tour-primary-action {
    width: 100%;
    border: 0;
    background: var(--color-primary);
    color: white;
    border-radius: 999px;
    padding: 16px 18px;
    font-size: 15px;
}

.tour-secondary-action {
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 15px 18px;
    font-size: 15px;
}


/* =============================================================================
   17. GUIDED TOURS — COMPLETED SCREEN
   End-of-tour summary. Do not show estimated time here unless real session
   duration is tracked later.
============================================================================= */

.tour-completed-card {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.tour-completed-title {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 14px;
}

.tour-completed-text {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.tour-summary-grid {
    margin-top: 24px;
    display: grid;
    gap: 12px;
}

.tour-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
}

.tour-summary-row span:first-child {
    color: rgba(255, 255, 255, 0.68);
}

.tour-summary-row span:last-child {
    color: white;
    text-align: right;
}

/* =============================================================================
   18. GUIDED TOURS — MEDIA / LOOK CLOSER
   Images, image credits and guide-focus detail cards used inside tour stops.
   Note: .tour-stop-image-wrap/.tour-stop-image are retained for compatibility;
   the current active stop hero uses .tour-stop-hero below.
============================================================================= */

.tour-stop-image-wrap {
    margin: 0 0 22px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(3, 32, 80, 0.05);
    box-shadow: 0 12px 28px rgba(3, 32, 80, 0.08);
}

.tour-stop-image {
    width: 100%;
    height: 165px;
    object-fit: cover;
    display: block;
}

.tour-image-credit {
    padding: 7px 11px 9px;
    font-size: 9px;
    line-height: 1.3;
    color: rgba(3, 32, 80, 0.42);
    background: rgba(255, 255, 255, 0.95);
}

.tour-guide-focus {
    margin-top: 20px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(198, 169, 107, 0.08);
    border: 1px solid rgba(198, 169, 107, 0.18);
}

.tour-guide-focus-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.tour-guide-focus-image {
    width: 100%;
    height: 135px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    margin-bottom: 10px;
}

.tour-guide-focus-caption {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-primary);
    margin: 0;
}


/* =============================================================================
   19. GUIDED TOURS — GOOGLE MAPS ACTION CARD
   Premium card that sends the guest to Google Maps for walking directions.
============================================================================= */

.tour-map-card {
    margin-top: 16px;
    padding: 16px;
    border-radius: 22px;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 16px 32px rgba(3, 32, 80, 0.18);
}

.tour-map-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 8px;
}

.tour-map-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 5px;
}

.tour-map-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.76);
    margin: 0 0 14px;
}

.tour-map-action {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    background: white;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.tour-map-action-icon {
    margin-right: 8px;
    font-size: 16px;
}


/* =============================================================================
   20. GUIDED TOURS — TOUR STOP HERO IMAGE
   Main image on each tour stop with overlay and attribution pill.
============================================================================= */

.tour-stop-hero {
    position: relative;
    margin: 0 0 24px;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(3, 32, 80, 0.06);
    box-shadow: 0 18px 42px rgba(3, 32, 80, 0.10);
}

.tour-stop-hero-image {
    width: 100%;
    height: 215px;
    object-fit: cover;
    display: block;
}

.tour-stop-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(3, 32, 80, 0.02),
        rgba(3, 32, 80, 0.30)
    );
    pointer-events: none;
}

.tour-stop-hero-credit {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(3, 32, 80, 0.42);
    backdrop-filter: blur(8px);
}


/* =============================================================================
   21. GUIDED TOURS — INLINE ASK LOCALIA
   Contextual Ask Localia block shown at the end of each tour stop.
============================================================================= */

.tour-ask-card {
    margin-top: 26px;
    padding: 18px;
    border-radius: 24px;
    background: white;
    border: 1px solid rgba(3, 32, 80, 0.08);
    box-shadow: 0 14px 32px rgba(3, 32, 80, 0.06);
}

.tour-ask-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.tour-ask-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0 0 14px;
}

.tour-ask-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.tour-ask-empty {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(3, 32, 80, 0.48);
    background: rgba(3, 32, 80, 0.035);
    border-radius: 18px;
    padding: 12px 14px;
}

.tour-ask-bubble {
    max-width: 88%;
    padding: 11px 13px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.45;
}

.tour-ask-bubble.user {
    align-self: flex-end;
    background: var(--color-primary);
    color: white;
    border-bottom-right-radius: 6px;
}

.tour-ask-bubble.localia {
    align-self: flex-start;
    background: rgba(3, 32, 80, 0.05);
    color: var(--color-primary);
    border-bottom-left-radius: 6px;
}

.tour-ask-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(3, 32, 80, 0.04);
    border: 1px solid rgba(3, 32, 80, 0.08);
}

.tour-ask-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 14px;
    padding: 10px 8px;
    min-width: 0;
}

.tour-ask-input::placeholder {
    color: rgba(3, 32, 80, 0.45);
}

.tour-ask-send {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 0;
    background: var(--color-primary);
    color: white;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tour-ask-note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(3, 32, 80, 0.45);
}


/* =============================================================================
   22. GUIDED TOURS V1 — FRONTEND UPDATE
   New premium UI pieces for Tour List, Before You Start, audio placeholder,
   Learn More and current-stop context. Added after cleanup so it overrides
   older/basic Guided Tours styling without breaking existing screens.
============================================================================= */

/* Tour List card refinements */
.explore-card-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.explore-card-label-row .explore-card-label {
    margin-bottom: 0;
}

.explore-card-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(198, 169, 107, 0.18);
    border: 1px solid rgba(198, 169, 107, 0.35);
}

.tour-card-v1 {
    position: relative;
    overflow: hidden;
}

.tour-card-v1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 84px;
    height: 84px;
    background: radial-gradient(circle at top right, rgba(198, 169, 107, 0.18), transparent 62%);
    pointer-events: none;
}

/* Before You Start supporting cards */
.tour-before-card,
.tour-highlights-card,
.tour-start-point-card {
    margin-top: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.tour-before-section-label,
.tour-start-point-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.tour-before-row {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.tour-before-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.tour-before-row span {
    font-size: 12px;
    color: var(--color-muted);
}

.tour-before-row strong {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-primary);
}

.tour-highlights-list {
    display: grid;
    gap: 10px;
}

.tour-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-primary);
}

.tour-highlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-accent);
    margin-top: 6px;
    flex: 0 0 auto;
}

.tour-start-point-title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.tour-start-point-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0 0 14px;
}

.tour-start-route-button {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(3, 32, 80, 0.12);
    background: rgba(3, 32, 80, 0.04);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Tour stop preview list on Tour Detail */
.tour-stop-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.tour-stop-card .tour-stop-number {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.tour-stop-content {
    min-width: 0;
}

/* Active stop navigation card */
.tour-navigation-card {
    margin-top: 22px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(3, 32, 80, 0.035);
    border: 1px solid rgba(3, 32, 80, 0.08);
}

.tour-navigation-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.tour-navigation-title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.tour-navigation-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
}

/* Audio guide placeholder */
.tour-audio-card {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(198, 169, 107, 0.08);
    border: 1px solid rgba(198, 169, 107, 0.22);
}

.tour-audio-card.is-clicked {
    background: rgba(198, 169, 107, 0.12);
}

.tour-audio-button {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 0;
    background: var(--color-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 12px 24px rgba(3, 32, 80, 0.18);
    flex: 0 0 auto;
}

.tour-audio-copy {
    min-width: 0;
}

.tour-audio-title {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.tour-audio-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-muted);
    margin: 0;
}

/* Look Closer text + image group */
.tour-look-closer-card {
    margin-top: 20px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(198, 169, 107, 0.08);
    border: 1px solid rgba(198, 169, 107, 0.18);
}

.tour-look-closer-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-primary);
    margin: 0 0 14px;
}

.tour-guide-focus-image-card {
    overflow: hidden;
    border-radius: 18px;
    background: white;
    border: 1px solid rgba(3, 32, 80, 0.06);
}

.tour-guide-focus-image-card + .tour-guide-focus-image-card {
    margin-top: 12px;
}

.tour-guide-focus-image-card .tour-image-credit {
    background: white;
}

/* Learn More collapsed section */
.tour-learn-more {
    margin-top: 16px;
    border-radius: 22px;
    background: white;
    border: 1px solid rgba(3, 32, 80, 0.08);
    box-shadow: 0 10px 24px rgba(3, 32, 80, 0.045);
    overflow: hidden;
}

.tour-learn-more-summary {
    cursor: pointer;
    list-style: none;
    padding: 15px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tour-learn-more-summary::-webkit-details-marker {
    display: none;
}

.tour-learn-more-summary::after {
    content: "+";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(3, 32, 80, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.tour-learn-more[open] .tour-learn-more-summary::after {
    content: "–";
}

.tour-learn-more-text {
    padding: 0 16px 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-muted);
}

/* Responsive polish for smaller screens */
@media (max-width: 360px) {
    .tour-detail-hero,
    .tour-experience-hero,
    .tour-completed-card,
    .hero-card,
    .explore-hero {
        padding: 22px;
    }

    .tour-detail-title,
    .tour-experience-title,
    .tour-completed-title,
    .hero-title {
        font-size: 27px;
    }

    .tour-stop-hero-image {
        height: 185px;
    }

    .tour-audio-button {
        width: 46px;
        height: 46px;
    }
}


/* =============================================================================
   23. GUIDED TOURS — VISUAL POLISH PASS 1
   Purpose:
   - Move Guided Tours closer to the approved premium render.
   - Keep Localia identity strict: dark blue #032050 + gold accent only.
   - CSS-only pass: no behavior changes, no database/API changes.
============================================================================= */

/* Global screen rhythm for a calmer premium mobile feel */
.localia-screen {
    background:
        radial-gradient(circle at top right, rgba(198, 169, 107, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(3, 32, 80, 0.025), rgba(255, 255, 255, 0));
}

.screen-content {
    padding-bottom: 108px;
}

/* Stronger, cleaner brand header */
.localia-logo {
    color: var(--color-primary);
    letter-spacing: 0.22em;
    font-weight: 600;
}

.app-location {
    line-height: 1.35;
}

/* Shared premium cards */
.hero-card,
.explore-hero,
.tour-detail-hero,
.tour-completed-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(198, 169, 107, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(3, 32, 80, 1), rgba(3, 32, 80, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-card::after,
.explore-hero::after,
.tour-detail-hero::after,
.tour-completed-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 169, 107, 0.45), transparent);
}

.hero-eyebrow,
.placeholder-eyebrow,
.explore-card-label,
.tour-progress-label,
.tour-navigation-label,
.tour-map-label,
.tour-before-section-label,
.tour-start-point-label,
.tour-guide-focus-label {
    color: var(--color-accent);
}

/* Explore / Tour list refinements */
.explore-section {
    margin-top: 30px;
}

.explore-section-title {
    letter-spacing: -0.02em;
}

.explore-card {
    border-color: rgba(3, 32, 80, 0.08);
    box-shadow: 0 16px 36px rgba(3, 32, 80, 0.055);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.explore-card:active {
    transform: scale(0.982);
    box-shadow: 0 10px 24px rgba(3, 32, 80, 0.06);
}

.tour-card-v1 {
    padding: 24px;
    border-radius: 28px;
}

.explore-card-badge {
    background: rgba(198, 169, 107, 0.16);
    border-color: rgba(198, 169, 107, 0.34);
    color: var(--color-primary);
}

.explore-pill,
.tour-detail-pill {
    border: 1px solid rgba(3, 32, 80, 0.06);
}

/* Before You Start */
.tour-detail-hero {
    padding: 26px;
    border-radius: 30px;
}

.tour-back-button {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.tour-detail-title {
    letter-spacing: -0.035em;
}

.tour-detail-text {
    max-width: 32rem;
}

.tour-before-card,
.tour-highlights-card,
.tour-start-point-card {
    border-radius: 26px;
    border-color: rgba(3, 32, 80, 0.08);
    box-shadow: 0 16px 36px rgba(3, 32, 80, 0.055);
}

.tour-start-point-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(3, 32, 80, 0.018));
}

.tour-start-route-button {
    text-decoration: none;
}

.tour-start-button,
.tour-primary-action {
    background: var(--color-primary);
    box-shadow: 0 14px 26px rgba(3, 32, 80, 0.18);
}

/* Tour Stop active experience */
.tour-experience-hero {
    padding: 22px;
    border-radius: 30px;
    border-color: rgba(3, 32, 80, 0.08);
    box-shadow: 0 18px 42px rgba(3, 32, 80, 0.07);
}

.tour-stop-hero {
    margin-bottom: 22px;
    border-radius: 26px;
    box-shadow: 0 18px 38px rgba(3, 32, 80, 0.10);
}

.tour-stop-hero-image {
    height: clamp(185px, 52vw, 235px);
}

.tour-stop-hero-credit {
    color: rgba(255, 255, 255, 0.82);
}

.tour-progress-bar {
    background: rgba(3, 32, 80, 0.07);
}

.tour-progress-fill {
    background: linear-gradient(90deg, var(--color-primary), rgba(198, 169, 107, 0.95));
}

.tour-stop-large-number {
    background: rgba(198, 169, 107, 0.14);
    border: 1px solid rgba(198, 169, 107, 0.28);
    color: var(--color-primary);
}

.tour-experience-title {
    letter-spacing: -0.035em;
}

.tour-experience-text {
    color: rgba(3, 32, 80, 0.68);
}

/* Audio guide — premium round control */
.tour-audio-card {
    background: linear-gradient(135deg, rgba(198, 169, 107, 0.10), rgba(198, 169, 107, 0.04));
    border-color: rgba(198, 169, 107, 0.26);
}

.tour-audio-button {
    background:
        radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 0.32), transparent 30%),
        var(--color-primary);
}

/* Look Closer / Learn More */
.tour-look-closer-card {
    background: rgba(198, 169, 107, 0.075);
    border-color: rgba(198, 169, 107, 0.20);
}

.tour-guide-focus-image-card {
    box-shadow: 0 10px 26px rgba(3, 32, 80, 0.06);
}

.tour-learn-more {
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(3, 32, 80, 0.045);
}

.tour-learn-more-summary::after {
    background: rgba(198, 169, 107, 0.16);
    color: var(--color-primary);
}

/* Navigation / Google Maps */
.tour-navigation-card {
    background: rgba(3, 32, 80, 0.035);
    border-color: rgba(3, 32, 80, 0.08);
}

.tour-map-card {
    background:
        radial-gradient(circle at top right, rgba(198, 169, 107, 0.20), transparent 38%),
        var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-map-action {
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
}

/* Ask Localia inline */
.tour-ask-card {
    border-radius: 26px;
    border-color: rgba(3, 32, 80, 0.08);
    box-shadow: 0 16px 36px rgba(3, 32, 80, 0.055);
}

.tour-ask-send {
    background: var(--color-primary);
}

/* Bottom navigation */
.bottom-nav {
    border-color: rgba(3, 32, 80, 0.08);
    box-shadow: 0 18px 38px rgba(3, 32, 80, 0.12);
}

.bottom-nav button.is-active {
    background: var(--color-primary);
    color: white;
}

/* Responsive tuning */
@media (min-width: 430px) {
    .tour-stop-hero-image {
        height: 245px;
    }
}

@media (max-width: 360px) {
    .tour-card-v1,
    .tour-detail-hero,
    .tour-experience-hero,
    .tour-before-card,
    .tour-highlights-card,
    .tour-start-point-card {
        border-radius: 24px;
    }

    .tour-detail-title,
    .tour-experience-title {
        font-size: 26px;
    }
}

/* =========================================================
   23. GUIDED TOURS — FILTERS
   Used on Explore > Guided Tours to filter tours by duration
   and tour type. Final visual polish comes later.
========================================================= */

.explore-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.explore-section-heading-row .explore-section-title {
    margin-bottom: 0;
}

.explore-section-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--color-muted);
    background: rgba(3, 32, 80, 0.05);
    border-radius: 999px;
    padding: 7px 10px;
}

.tour-filter-panel {
    display: grid;
    gap: 14px;
    margin: 0 0 16px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(3, 32, 80, 0.08);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(3, 32, 80, 0.05);
}

.tour-filter-group {
    display: grid;
    gap: 9px;
}

.tour-filter-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(3, 32, 80, 0.48);
}

.tour-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tour-filter-chip {
    border: 1px solid rgba(3, 32, 80, 0.10);
    background: rgba(3, 32, 80, 0.045);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1;
}

.tour-filter-chip.is-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.tour-filter-empty {
    padding: 20px;
    border: 1px dashed rgba(3, 32, 80, 0.18);
    border-radius: 22px;
    background: rgba(3, 32, 80, 0.035);
}

.tour-filter-empty-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.tour-filter-empty-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-muted);
    margin: 0;
}


/* =====================================================
   23. GUIDED TOURS V1 — RESUME TOUR CARD
   =====================================================
   Shows when a guest started a tour but did not complete it.
   The progress is saved only on the guest device for V1.
*/

.resume-tour-card {
    margin-top: 18px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(3, 32, 80, 0.96);
    color: white;
    box-shadow: 0 16px 34px rgba(3, 32, 80, 0.16);
}

.resume-tour-card-explore {
    margin-bottom: 4px;
}

.resume-tour-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.resume-tour-title {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 6px;
}

.resume-tour-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.76);
    margin: 0 0 14px;
}

.resume-tour-actions {
    display: flex;
    gap: 9px;
}

.resume-tour-primary,
.resume-tour-secondary {
    border: 0;
    border-radius: 999px;
    min-height: 42px;
    padding: 11px 14px;
    font-size: 13px;
}

.resume-tour-primary {
    flex: 1;
    background: white;
    color: var(--color-primary);
}

.resume-tour-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

/* =============================================================================
   27. ATTRACTION DETAIL V1
   Functional styling for standalone attraction pages.
   Final render-level visual polish comes later.
============================================================================= */

.attraction-card-v1 {
    text-align: left;
}

.attraction-detail-screen {
    animation: localiaFadeUp var(--transition-medium);
}

.attraction-detail-label {
    display: inline-flex;
    align-items: center;
    margin: 18px 0 10px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.attraction-detail-title {
    margin-top: 0;
}

.attraction-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}

.attraction-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 500;
}

.attraction-facts-card,
.attraction-practical-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 18px;
    margin: 18px 0;
    box-shadow: var(--shadow-soft);
}

.attraction-fact-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.attraction-fact-row:first-child {
    padding-top: 0;
}

.attraction-fact-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.attraction-fact-row span {
    color: var(--color-muted);
}

.attraction-fact-row strong {
    color: var(--color-primary);
    font-weight: 600;
    text-align: right;
}

.attraction-detail-story,
.attraction-practical-text {
    white-space: pre-line;
}

.attraction-navigation-card {
    margin-top: 18px;
}


/* =============================================================================
   28. ATTRACTIONS V1 — NEAR ME SORTING
   Functional controls for sorting attractions by recommended order or by
   distance from the guest's current location. Final polish comes later.
============================================================================= */

.attraction-sort-panel {
    display: grid;
    gap: 9px;
    margin: 0 0 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(3, 32, 80, 0.08);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(3, 32, 80, 0.05);
}

.attraction-location-note {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(3, 32, 80, 0.05);
    border: 1px solid rgba(3, 32, 80, 0.08);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

.attraction-location-note.is-success {
    background: rgba(198, 169, 107, 0.10);
    border-color: rgba(198, 169, 107, 0.22);
    color: var(--color-primary);
}

.attraction-location-note.is-error {
    background: rgba(120, 40, 40, 0.06);
    border-color: rgba(120, 40, 40, 0.16);
    color: #783030;
}


/* =============================================================================
   29. NEARBY / AROUND ME V1
   Google Maps shortcut module.
   V1 rule: no inline map, no Google Places API, no manual dynamic places list.
============================================================================= */

.nearby-hero {
    background: linear-gradient(150deg, var(--color-primary), #061a3a);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.nearby-search-card,
.nearby-info-card {
    margin-top: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.nearby-card-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
    font-weight: 600;
}

.nearby-search-label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.nearby-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.nearby-search-input {
    min-width: 0;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 999px;
    padding: 14px 16px;
    color: var(--color-primary);
    font-size: 14px;
    outline: none;
}

.nearby-search-input:focus {
    border-color: rgba(198, 169, 107, 0.75);
    box-shadow: 0 0 0 4px rgba(198, 169, 107, 0.13);
}

.nearby-search-button {
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.nearby-search-hint {
    margin: 12px 0 0;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

.nearby-section {
    margin-top: 24px;
}

.nearby-section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.nearby-section-title {
    margin: 0;
    font-size: 20px;
    color: var(--color-primary);
    font-weight: 500;
}

.nearby-section-meta {
    color: var(--color-muted);
    font-size: 12px;
}

.nearby-action-grid {
    display: grid;
    gap: 12px;
}

.nearby-action-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(3, 32, 80, 0.08);
    border-radius: 22px;
    padding: 15px;
    box-shadow: 0 12px 26px rgba(3, 32, 80, 0.05);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.nearby-action-card:hover,
.nearby-action-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(198, 169, 107, 0.28);
    box-shadow: 0 16px 30px rgba(3, 32, 80, 0.08);
}

.nearby-action-icon {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: rgba(3, 32, 80, 0.06);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 16px;
}

.nearby-action-title {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.nearby-action-text {
    margin: 0 0 8px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.4;
}

.nearby-action-link-text {
    display: inline-flex;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
}

.nearby-info-title {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.nearby-info-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.nearby-disclaimer {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(3, 32, 80, 0.05);
    border: 1px solid rgba(3, 32, 80, 0.08);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 380px) {
    .nearby-search-row {
        grid-template-columns: 1fr;
    }

    .nearby-search-button {
        width: 100%;
    }
}


/* =============================================================================
   30. YOUR STAY V1
   Official hotel information, notices, services, resort map and FAQ.
   Final visual polish will come later; this keeps the module structured and usable.
============================================================================= */

.home-notice-card {
    width: 100%;
    margin-top: 18px;
    background: rgba(198, 169, 107, 0.12);
    border: 1px solid rgba(198, 169, 107, 0.35);
    border-radius: var(--radius-large);
    padding: 18px;
    box-shadow: var(--shadow-soft);
    text-align: left;
}

.home-notice-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 8px;
}

.home-notice-title {
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.home-notice-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.stay-hero {
    background: linear-gradient(150deg, var(--color-primary), #061a3a);
    color: white;
    border-radius: var(--radius-large);
    padding: 28px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.stay-ask-card,
.stay-info-card,
.stay-service-card,
.stay-notice-card,
.stay-map-card,
.stay-faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.stay-ask-card {
    margin-top: 18px;
    padding: 20px;
}

.stay-card-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
    font-weight: 600;
}

.stay-ask-title {
    margin: 0 0 8px;
    color: var(--color-primary);
    font-size: 21px;
    font-weight: 500;
}

.stay-ask-text {
    margin: 0 0 14px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
}

.stay-ask-input-preview {
    width: 100%;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 999px;
    padding: 14px 16px;
    color: var(--color-muted);
    font-size: 14px;
    text-align: left;
}

.stay-quick-questions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.stay-quick-question {
    border: 1px solid rgba(198, 169, 107, 0.28);
    background: rgba(198, 169, 107, 0.08);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
}

.stay-section {
    margin-top: 24px;
}

.stay-section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.stay-section-title {
    margin: 0;
    font-size: 20px;
    color: var(--color-primary);
    font-weight: 500;
}

.stay-notice-list,
.stay-service-list,
.stay-map-list,
.stay-faq-list {
    display: grid;
    gap: 12px;
}

.stay-notice-card {
    padding: 18px;
    border-color: rgba(198, 169, 107, 0.35);
    background: rgba(198, 169, 107, 0.09);
}

.stay-notice-urgent {
    background: rgba(120, 40, 40, 0.06);
    border-color: rgba(120, 40, 40, 0.18);
}

.stay-notice-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
    font-weight: 700;
}

.stay-notice-title {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 600;
}

.stay-notice-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.stay-info-grid {
    display: grid;
    gap: 12px;
}

.stay-info-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 13px;
}

.stay-info-icon,
.stay-service-icon,
.stay-map-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(3, 32, 80, 0.06);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 15px;
    flex: 0 0 auto;
}

.stay-info-title,
.stay-service-title,
.stay-map-title {
    margin: 0;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
}

.stay-info-value {
    margin-top: 4px;
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 700;
}

.stay-info-description,
.stay-service-description,
.stay-service-short {
    margin: 7px 0 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.stay-service-card {
    padding: 18px;
}

.stay-service-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.stay-service-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.stay-service-meta span {
    background: rgba(3, 32, 80, 0.05);
    border: 1px solid rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
}

.stay-map-card {
    display: flex;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    padding: 16px;
}

.stay-map-text {
    margin-top: 4px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
}

.stay-faq-item {
    overflow: hidden;
}

.stay-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    padding: 16px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
}

.stay-faq-indicator {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(198, 169, 107, 0.13);
    color: var(--color-accent);
    font-size: 18px;
    line-height: 1;
}

.stay-faq-answer {
    border-top: 1px solid var(--color-border);
    padding: 14px 16px 16px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* =============================================================================
   31. ASK LOCALIA V1 FREE
   Live Ask screen using local hotel knowledge only.
   No paid AI/API call is used in this version.
============================================================================= */

.ask-screen-live {
    justify-content: flex-start;
    padding-top: 18px;
}

.ask-intro-text {
    margin: -16px 0 10px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.ask-mode-pill {
    align-self: center;
    width: fit-content;
    margin: 0 auto 18px;
    border: 1px solid rgba(198, 169, 107, 0.28);
    background: rgba(198, 169, 107, 0.08);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ask-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 4px 0 18px;
    max-height: calc(100vh - 330px);
}

.ask-empty-state {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.ask-empty-title {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ask-empty-text {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.ask-bubble {
    max-width: 86%;
    border-radius: 22px;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: var(--shadow-soft);
}

.ask-bubble.user {
    align-self: flex-end;
    background: var(--color-primary);
    color: #fff;
    border-bottom-right-radius: 8px;
}

.ask-bubble.localia {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 8px;
}

.ask-bubble.localia.fallback {
    background: rgba(198, 169, 107, 0.08);
    border-color: rgba(198, 169, 107, 0.28);
}

.ask-bubble.is-loading {
    color: var(--color-muted);
    font-style: italic;
}

.ask-source-label {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(3, 32, 80, 0.08);
    font-size: 11px;
    color: var(--color-accent);
    font-weight: 700;
}

.ask-suggestions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 14px;
}

.ask-suggestion {
    white-space: nowrap;
    border: 1px solid rgba(198, 169, 107, 0.28);
    background: rgba(198, 169, 107, 0.08);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
}

.ask-error {
    margin-bottom: 12px;
    color: #7a2f2f;
    background: rgba(122, 47, 47, 0.08);
    border: 1px solid rgba(122, 47, 47, 0.14);
    border-radius: var(--radius-medium);
    padding: 10px 12px;
    font-size: 13px;
}

.ask-bar input:disabled,
.ask-bar button:disabled {
    opacity: 0.6;
}


/* =============================================================================
   32. ASK LOCALIA CONTEXT UX PATCH
   Keeps Ask as one central concierge screen, but shows where the question came
   from and lets the guest return to the previous screen.
============================================================================= */

.ask-context-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.ask-back-button {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.ask-context-pill {
    border: 1px solid rgba(198, 169, 107, 0.3);
    background: rgba(198, 169, 107, 0.09);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* =============================================================================
   33. CREATE MY TOUR V1
   Controlled route planner from approved Localia attractions.
   No paid AI/API call and no Google Places API in this V1.
============================================================================= */

.custom-tour-hero {
    background: linear-gradient(150deg, var(--color-primary), #061a3a);
    color: white;
    border-radius: var(--radius-large);
    padding: 22px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-soft);
    animation: localiaFadeUp var(--transition-medium);
}

.custom-tour-planner,
.custom-tour-result,
.custom-tour-stop-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.custom-tour-planner {
    margin-top: 18px;
    padding: 18px;
}

.custom-tour-section + .custom-tour-section {
    margin-top: 20px;
}

.custom-tour-section-title {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 600;
}

.custom-tour-options {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.custom-tour-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-tour-option {
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-primary);
    border-radius: 999px;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 700;
}

.custom-tour-option.is-active {
    border-color: rgba(198, 169, 107, 0.45);
    background: rgba(198, 169, 107, 0.12);
    color: var(--color-primary);
}

.custom-tour-create-button {
    width: 100%;
    margin-top: 22px;
    border: 0;
    background: var(--color-primary);
    color: white;
    border-radius: 999px;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.custom-tour-create-button:disabled {
    opacity: 0.65;
}

.custom-tour-note {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.custom-tour-error {
    margin-top: 16px;
    color: #7a2f2f;
    background: rgba(122, 47, 47, 0.08);
    border: 1px solid rgba(122, 47, 47, 0.14);
    border-radius: var(--radius-medium);
    padding: 12px;
    font-size: 13px;
}

.custom-tour-result {
    margin-top: 20px;
    padding: 18px;
}

.custom-tour-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.custom-tour-result-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 800;
    margin-bottom: 8px;
}

.custom-tour-result-title {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 21px;
    font-weight: 600;
}

.custom-tour-result-subtitle {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.custom-tour-reset-button {
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
}

.custom-tour-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.custom-tour-meta-row span {
    background: rgba(3, 32, 80, 0.05);
    border: 1px solid rgba(3, 32, 80, 0.08);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
}

.custom-tour-stop-list {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.custom-tour-stop-card {
    padding: 15px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
}

.custom-tour-stop-number {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(198, 169, 107, 0.14);
    color: var(--color-primary);
    font-weight: 800;
}

.custom-tour-stop-title {
    margin: 0;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
}

.custom-tour-stop-text {
    margin: 7px 0 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.custom-tour-stop-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.custom-tour-stop-meta span {
    background: rgba(3, 32, 80, 0.05);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
}

.custom-tour-stop-map {
    display: inline-flex;
    margin-top: 10px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.custom-tour-map-button {
    display: block;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: white;
    padding: 15px 18px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.custom-tour-empty {
    margin-top: 16px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}


/* =============================================================================
   34. CREATE MY TOUR — GUIDED TOUR STYLE PATCH
   Generated tours should feel like Guided Tours, not like a plain result list.
============================================================================= */

.custom-tour-generated-hero {
    margin-top: 20px;
}

.custom-tour-generated-hero.has-image {
    min-height: 390px;
    padding: 0;
}

.custom-tour-generated-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-tour-generated-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 32, 80, 0.12), rgba(3, 32, 80, 0.78)),
        radial-gradient(circle at top right, rgba(198, 169, 107, 0.18), transparent 44%);
}

.custom-tour-generated-hero-content {
    position: relative;
    z-index: 2;
    padding: 26px;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.custom-tour-generated-hero-credit {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    z-index: 3;
    width: fit-content;
    max-width: calc(100% - 28px);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(3, 32, 80, 0.42);
    backdrop-filter: blur(8px);
}

.custom-tour-before-card,
.custom-tour-attention-card,
.custom-tour-start-card {
    margin-top: 18px;
}

.custom-tour-guided-stop-card {
    position: relative;
}

.custom-tour-guided-stop-image {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(3, 32, 80, 0.10);
}

.custom-tour-guided-stop-card:has(.custom-tour-guided-stop-image) {
    grid-template-columns: 36px 68px 1fr;
}

.custom-tour-stop-meta.guided-style {
    margin-top: 10px;
}

@supports not selector(:has(*)) {
    .custom-tour-guided-stop-card {
        grid-template-columns: 36px 1fr;
    }

    .custom-tour-guided-stop-image {
        grid-column: 2;
        margin-bottom: 6px;
    }

    .custom-tour-guided-stop-card .tour-stop-content {
        grid-column: 2;
    }
}


/* Shared tour cover: one image is reused across every language translation. */
.tour-card-v1.has-image {
    overflow: hidden;
}

.tour-card-main-image-wrap {
    margin: -1rem -1rem 1rem;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: rgba(3, 32, 80, 0.08);
}

.tour-card-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* =============================================================================
   38. ASK LOCALIA GLOBAL CONCIERGE ACTIONS
   Ask Localia is one concierge across the whole guest app. Context helps the
   answer, while action buttons can open the relevant Localia module directly.
============================================================================= */

.ask-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(3, 32, 80, 0.08);
}

.ask-action-button {
    border: 1px solid rgba(198, 169, 107, 0.34);
    background: rgba(198, 169, 107, 0.11);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-align: left;
}

.ask-action-button:active {
    transform: translateY(1px);
}

.ask-action-list-inline {
    margin-top: 9px;
    padding-top: 9px;
}

.tour-ask-bubble.localia.has-actions {
    max-width: 100%;
}

.tour-ask-bubble-text {
    white-space: pre-line;
}

.stay-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.stay-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(3, 32, 80, 0.12);
    border-radius: 999px;
    color: var(--color-primary);
    background: rgba(3, 32, 80, 0.04);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.stay-action-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Media rights attribution details */
.tour-image-credit,
.tour-stop-hero-credit {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
    align-items: center;
}

.tour-image-credit a,
.tour-stop-hero-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tour-image-modification-note {
    opacity: 0.82;
}

.tour-image-credit-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}

.custom-tour-generated-hero-credit,
.custom-tour-image-credit {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
    align-items: center;
}

.custom-tour-generated-hero-credit a,
.custom-tour-image-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.custom-tour-image-credit {
    padding: 7px 11px 9px;
    font-size: 9px;
    line-height: 1.3;
    color: rgba(3, 32, 80, 0.48);
    background: rgba(255, 255, 255, 0.95);
}