#main-title.title-text {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Card Component */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(255, 140, 122, 0.1); /* Reduced glow intensity */
}

/* Button Components */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(255, 140, 122, 0.2); /* Reduced glow intensity */
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Input Group */
.input-group {
    position: relative;
}

.input-group input[type="time"],
.input-group input[type="number"] {
    border: 1px solid var(--primary-orange);
    transition: all 0.3s ease;
    padding: 0.375rem 0.5rem !important;
    height: 2.5rem !important; /* Ensure consistent height */
    box-sizing: border-box !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.input-group input[type="time"]:focus,
.input-group input[type="number"]:focus {
    border-color: var(--accent-red);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 140, 122, 0.08); /* Reduced glow intensity */
}

/* Time inputs support full minutes */
.input-group input[type="time"] {
    padding-right: 0.5rem !important;
    /* Remove any default browser styling that might affect size */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

/* Ensure number inputs match time inputs exactly */
.input-group input[type="number"] {
    -moz-appearance: textfield; /* Remove spinner arrows in Firefox */
    appearance: textfield; /* Remove spinner arrows */
}

.input-group input[type="number"]::-webkit-outer-spin-button,
.input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Remove spinner arrows in Chrome/Safari */
    appearance: none;
    margin: 0;
}

/* Mobile-specific: Ensure inputs align properly in grid */
@media (max-width: 768px) {
    .input-group input[type="time"],
    .input-group input[type="number"] {
        height: 2.5rem !important;
        padding: 0.5rem 0.5rem !important;
        width: 100% !important;
    }
}

/* Style Geoapify autocomplete inputs to match other inputs. Right padding = clear btn (right-2 + w-6) so ellipsis stops just left of ×. */
#origin-search input,
#destination-search input,
#origin-search .geoapify-autocomplete-input,
#destination-search .geoapify-autocomplete-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    border: 1px solid var(--primary-orange) !important;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

/* Hide Geoapify’s built-in close button; we use our own small × only */
#origin-search .geoapify-close-button,
#destination-search .geoapify-close-button {
    display: none !important;
}

#origin-search input:focus,
#destination-search input:focus {
    border-color: var(--accent-red) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 140, 122, 0.08); /* Reduced glow intensity */
}

/* Disabled state for location inputs */
#origin-search.disabled,
#destination-search.disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

#origin-search.disabled::after,
#destination-search.disabled::after {
    content: 'Please sign in to use location search';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--dark-orange);
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Geoapify input padding is set above with other location inputs (right padding keeps text left of ×) */

/* Geoapify autocomplete dropdown (suggestions) */
#origin-search .geoapify-autocomplete-items,
#destination-search .geoapify-autocomplete-items {
    margin-top: 0.4rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 140, 122, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.98);
    z-index: 50;
}

/* Items are usually direct children (often divs / buttons) */
#origin-search .geoapify-autocomplete-items > *,
#destination-search .geoapify-autocomplete-items > * {
    color: #1f2937; /* gray-800 */
    background: transparent;
    padding: 0.65rem 0.75rem;
    line-height: 1.25rem;
}

#origin-search .geoapify-autocomplete-items > *:hover,
#destination-search .geoapify-autocomplete-items > *:hover,
#origin-search .geoapify-autocomplete-item-active,
#destination-search .geoapify-autocomplete-item-active {
    background: rgba(255, 140, 122, 0.10);
}

/* Highlighted match text inside items (Geoapify often uses <strong> or <b>) */
#origin-search .geoapify-autocomplete-items strong,
#destination-search .geoapify-autocomplete-items strong,
#origin-search .geoapify-autocomplete-items b,
#destination-search .geoapify-autocomplete-items b {
    color: var(--dark-orange);
    font-weight: 700;
}

/* Weather Card */
.weather-card {
    background: linear-gradient(135deg, rgba(255, 179, 167, 0.1), rgba(255, 159, 159, 0.1));
    border: 1px solid var(--primary-orange);
}

/* Preferences toggles (destination forecast, results popup) */
.pref-checkbox {
    accent-color: var(--accent-orange);
}
.pref-toggle:has(.pref-checkbox:checked) {
    opacity: 1;
}
.pref-toggle:has(.pref-checkbox:not(:checked)) {
    opacity: 0.85;
}

/* Collapsible sections (Saved Journeys, Input) – collapse when results are shown */
#input-section-card.collapsed #input-section-body {
    display: none;
}
#input-section-card.collapsed #input-section-header {
    display: flex !important;
}
#input-section-card.collapsed #input-section-chevron {
    transform: rotate(-90deg);
}

#saved-journeys-card.collapsed #saved-journeys-body {
    display: none;
}
#saved-journeys-card.collapsed .collapsible-chevron {
    transform: rotate(-90deg);
}

/* Profile page overlay */
.profile-page-content {
    background: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--primary-orange);
    width: 90%;
}
body.dark-mode .profile-page-content {
    background: var(--dark-bg, #1f2937);
}
.profile-tab {
    background: transparent;
}
.profile-tab.active {
    border-color: var(--primary-orange) !important;
    color: var(--dark-orange) !important;
}

/* Calendar day circle: two halves (left = rode, right = forecast accurate) */
.calendar-day-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.calendar-day-circle.travel-day {
    border-color: var(--primary-orange);
    border-width: 1px;
}
.calendar-day-circle:hover.travel-day {
    filter: brightness(1.1);
}

/* Profile journeys: on desktop, calendar is half size and left-aligned */
@media (min-width: 768px) {
    .profile-journey-calendar .calendar-day-circle {
        width: 14px !important;
        height: 14px !important;
    }
    .profile-journey-calendar .flex.flex-col {
        min-height: 1.5rem;
    }
    .profile-journey-calendar .text-gray-500,
    .profile-journey-calendar .text-gray-400 {
        font-size: 0.65rem;
    }
    .profile-journey-calendar.grid {
        gap: 0.125rem;
    }
}

/* Rate journey modal: Yes/No button states */
.rate-btn-yes.active {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}
.rate-btn-no.active {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}