/* Peru Local Advisor - Global Styles */

:root {
    --primary-color: #2c3e50;
    --accent-color: #e67e22;
    --text-color: #333;
    --bg-color: #f4f7f6;
    --white: #ffffff;
}

html {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    color: var(--text-color);
    background-color: var(--bg-color);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.main-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1rem 2rem;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-image { height: 40px; width: auto; display: block; }
.logo h1 { margin: 0; font-size: 1.5rem; }
.logo p { margin: 0; font-size: 0.8rem; opacity: 0.8; }

#progress-bar-container {
    width: 200px;
    height: 8px;
    background: #bdc3c7;
    border-radius: 4px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

main {
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    flex: 1 0 auto;
}

.planner-screen {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.hero { text-align: center; }

/* Trip Planner welcome-screen hero (added for the Early Access hero
   update). Purely additive - no existing rule above or below this block
   was changed. */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.hero-subtitle {
    max-width: 640px;
    margin: 0.5rem auto 1.5rem;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.6;
}

button {
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #d35400;
}

button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    opacity: 0.85;
}

button:disabled:hover {
    background-color: #bdc3c7;
}

/* Generate Itinerary button: inline spinner shown while the single-click
   pipeline (recommendations -> cards -> map -> markers -> route -> fit
   bounds -> summary -> PDF enable) is running. */
#wizard-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: var(--white);
    border-radius: 50%;
    display: inline-block;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.generating-status {
    margin-top: 0.6rem;
    color: #555;
    font-size: 0.9rem;
}

#app-root, #itinerary-display {
    min-height: 200px;
}

.day-card {
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
    background: #f9f9f9;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.day-card:hover {
    background: #f4efe9;
}

.day-card.active {
    background: #fff6ee;
    border-left-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}

.actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .header-container { flex-direction: column; }
    #progress-bar-container { margin-top: 1rem; }
}

/* Visibility helpers (added for wizard/map/results screen toggling) */
.planner-screen { display: none; }
.planner-screen.active { display: block; }
.hidden { display: none; }

/* Budget step: selectable cards (added for budget-tier radio options) */
.budget-option {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}
.budget-option label {
    display: block;
    cursor: pointer;
}
.budget-option:has(input:checked) {
    border-color: var(--accent-color);
    background: #fff6ee;
}

/* Interests step: instruction copy and validation message */
.interests-instruction {
    font-size: 0.95rem;
    color: #555;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

#interests-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

#interests-options label {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

#interests-options label:has(input:checked) {
    border-color: var(--accent-color);
    background: #fff6ee;
}

.validation-message {
    color: #c0392b;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.validation-message.hidden {
    display: none;
}

/* Preset-duration badge: shown on the start/duration steps when the
   planner was opened from a homepage itinerary card's "Customize with
   AI" button, which pre-fills the trip length via a ?days= URL param. */
.preset-duration-badge {
    display: inline-block;
    background: #fff6ee;
    border: 1px solid var(--accent-color);
    color: #8a4a10;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

/* Daily itinerary cards: full travel summary with icon-labeled fields */
.day-card h3 {
    margin-top: 0;
    color: var(--primary-color);
}

.day-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.4rem 1.5rem;
    margin: 0.75rem 0;
}

.day-card-grid p {
    margin: 0.25rem 0;
}

.field-icon {
    margin-right: 0.4rem;
}

.day-card-section {
    margin: 0.75rem 0;
}

.day-card-section .section-label {
    margin: 0 0 0.25rem 0;
}

.day-card-section ul {
    margin: 0.25rem 0 0.25rem 1.5rem;
    padding: 0;
}

.day-card-note {
    background: #fff6ee;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

/* Shared inline error/notice — used for itinerary-generation failures and
   the "map couldn't load" notice. Amber, not red: neither case blocks the
   user from continuing (retry is available; the itinerary/PDF still work
   even if the map didn't render), so this should read as a heads-up, not
   an alarming failure. */
.planner-inline-error {
    background: #fff6ee;
    border: 1px solid #f0d9b5;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #8a6d3b;
}

/* Hotel recommendation cards. --2 (Budget: Best Value + Lowest Price)
   lays out two columns side by side; --1 (Mid-range/Luxury, or Budget
   when no Lowest Price qualifies) centers a single card at a readable
   width instead of stretching it or leaving the layout looking empty. */
.hotel-options {
    display: grid;
    gap: 1rem;
    margin: 0.75rem 0;
}

.hotel-options--2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hotel-options--1 {
    grid-template-columns: minmax(220px, 420px);
    justify-content: center;
}

.hotel-card {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hotel-card-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-color);
}

.hotel-card-name {
    margin: 0;
    font-weight: 600;
}

.hotel-card-meta {
    margin: 0;
    color: #b8860b;
    font-size: 0.9rem;
}

.hotel-card-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.hotel-card-note {
    margin: 0.25rem 0 0 0;
    font-size: 0.82rem;
    font-style: italic;
    color: #8a6d3b;
}

.hotel-card-affiliate-btn {
    margin-top: 0.4rem;
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    width: fit-content;
}

.hotel-card-affiliate-btn:hover {
    opacity: 0.9;
}

/* Tour recommendation cards (max 3 per destination, from tours.json).
   Same responsive auto-fit grid pattern as .hotel-options so 1, 2, or 3
   cards all lay out cleanly without ever stretching a lone card full-width. */
.tour-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0.5rem 0 0.75rem;
}

.tour-card {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tour-card:hover,
.tour-card:focus-visible {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.tour-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}

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

.tour-card-body {
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.tour-card-name {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-color);
}

.tour-card-desc {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.35;
}

.tour-card-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #666;
}

.tour-card-duration,
.tour-card-category {
    background: #f4f0eb;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.tour-card-affiliate-btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.tour-card-affiliate-btn:hover {
    opacity: 0.9;
}

/* Trip summary card, shown after the final day's itinerary card */
.trip-summary-card {
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    background: #f4f7f6;
}

.trip-summary-card h2 {
    margin-top: 0;
    color: var(--primary-color);
}

.trip-summary-card button {
    margin-top: 1rem;
}

/* Main site footer. Sits at the end of a column-flex body (see the body/
   main rules above), so on short pages like the welcome screen it's
   pushed down to the bottom of the viewport instead of clinging directly
   under the last piece of content (e.g. the Start Planning button).
   The large margin-top is the primary fix for that "stuck to the button"
   look; flex-shrink:0 keeps the footer from ever being compressed. */
.main-footer {
    flex-shrink: 0;
    margin-top: 4rem;
    padding: 1.75rem 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Keep the two footer lines close together as a single visual unit,
   rather than spaced out like independent paragraphs. */
.footer-content p {
    margin: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .main-footer {
        margin-top: 3rem;
        padding: 1.5rem 1rem 1.75rem;
    }
}

@media (max-width: 480px) {
    .main-footer {
        margin-top: 2.5rem;
        padding: 1.25rem 1rem 1.5rem;
    }
    .footer-content p {
        font-size: 0.8rem;
    }
}