/* ============================================================================
 * t2india_main.css — main page styles for t2india_with_dashboard_redirect.html
 * Extracted from inline <style> block. No behavioural changes.
 * Pair with step3_route_map.css for the v6.2 route map module.
 * ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

/* Header/footer go edge-to-edge, planner content gets padding */
.header { margin: 0; }
.planner-body { padding: 20px; }
.footer { margin-top: 0; }

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.user-info {
    background: #e8f5e9;
    padding: 10px 20px;
    border-radius: 25px;
    color: #2e7d32;
    font-weight: 600;
}

.logout-btn {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.logout-btn:hover {
    background: #d32f2f;
    transform: translateY(-2px);
}

.workflow-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

.section-title {
    font-size: 1.8em;
    color: #667eea;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid #667eea;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
}

.form-group textarea {
    min-height: 120px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

		.interest-checkbox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px 16px;
			border: 2px solid #e0e0e0;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			background: white;
			user-select: none;
		}

		.interest-checkbox:hover {
			border-color: #ff6b35;
			background: #fff5f3;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(255, 107, 53, 0.15);
		}

		.interest-checkbox.selected {
			border-color: #ff6b35;
			background: #fff5f3;
			box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
			font-weight: 600;
		}

		.interest-checkbox span {
			font-size: 14px;
			color: #333;
			transition: all 0.3s ease;
			width: 100%;
			text-align: center;
		}

		.interest-checkbox .check-mark {
			display: none;
			color: #ff6b35;
			font-weight: 700;
			margin-left: 6px;
		}

		.interest-checkbox.selected .check-mark {
			display: inline;
		}

		/* Arrival mode pills (MICE event details) */
		.arrival-mode-pill {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 18px;
			border: 2px solid #e0e0e0;
			border-radius: 999px;
			cursor: pointer;
			transition: all 0.2s ease;
			background: white;
			user-select: none;
			font-size: 0.95em;
			color: #444;
		}
		.arrival-mode-pill:hover {
			border-color: #667eea;
			background: #f5f3ff;
		}
		.arrival-mode-pill input[type="radio"] {
			accent-color: #667eea;
			cursor: pointer;
		}
		.arrival-mode-pill input[type="radio"]:checked ~ span {
			font-weight: 600;
			color: #333;
		}
		.arrival-mode-pill:has(input[type="radio"]:checked) {
			border-color: #667eea;
			background: #f5f3ff;
			box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
		}

		/* Hotel autosuggest dropdown */
		.hotel-suggest-item {
			padding: 10px 14px;
			cursor: pointer;
			border-bottom: 1px solid #f0f0f0;
			transition: background 0.12s ease;
		}
		.hotel-suggest-item:last-child { border-bottom: none; }
		.hotel-suggest-item:hover,
		.hotel-suggest-item.active {
			background: #f5f3ff;
		}
		.hotel-suggest-name {
			font-weight: 500;
			color: #333;
			margin-bottom: 2px;
		}
		.hotel-suggest-meta {
			font-size: 0.82em;
			color: #888;
		}
		.hotel-suggest-empty {
			padding: 14px;
			color: #888;
			font-size: 0.9em;
			text-align: center;
			font-style: italic;
		}

		.interests-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 12px;
			margin-top: 12px;
		}

		/* Optional: Add a subtle animation when checking */
		@keyframes checkBounce {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.05); }
		}

		.interest-checkbox.selected {
			animation: checkBounce 0.3s ease;
		}

.btn {
    padding: 15px 40px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 10px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.btn:hover {
    transform: translateY(-2px);
}

/* ─── Layer 3 — AI-suggested field affordances ─── */
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(118, 75, 162, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.18); }
}
.ai-suggested-field {
    background: linear-gradient(135deg, #fefce8, #fef9c3) !important;
    border-color: #eab308 !important;
    transition: background 0.3s ease, border-color 0.3s ease;
    animation: aiPulse 2s ease-out 1;
}
.ai-suggested-checkbox {
    background: linear-gradient(135deg, #fefce8, #fef3c7) !important;
    border-color: #eab308 !important;
}
.ai-suggested-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    vertical-align: middle;
}
.ai-suggested-badge::before {
    content: '✨';
    font-size: 0.85em;
}
/* User-edited indicator — wins over AI suggestion */
.user-edited {
    background: white !important;
    border-color: #10b981 !important;
}
/* noUiSlider tweaks to match the planner's purple palette */
.noUi-target {
    background: #e5e7eb;
    border: none;
    box-shadow: none;
    height: 6px;
}
.noUi-connect {
    background: linear-gradient(90deg, #667eea, #764ba2);
}
.noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    border: 2px solid #764ba2;
    background: white;
    box-shadow: 0 2px 6px rgba(118, 75, 162, 0.3);
    top: -8px !important;
    right: -10px !important;
    cursor: grab;
}
.noUi-handle:before, .noUi-handle:after { display: none; }
.noUi-handle:active { cursor: grabbing; }

.btn-container {
    text-align: center;
    margin-top: 30px;
}

.hidden {
    display: none;
}

.loading {
    text-align: center;
    padding: 40px;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.basic-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.basic-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.info-card {
    background: rgba(255,255,255,0.15);
    padding: 15px;
    border-radius: 8px;
}

.info-card h4 {
    font-size: 0.9em;
    opacity: 0.9;
    margin-bottom: 5px;
}

.info-card p {
    font-size: 1.3em;
    font-weight: 600;
}

#svgMap {
    width: 100%;
    height: 500px;
    background: linear-gradient(to bottom, #e3f2fd 0%, #ffffff 100%);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.map-city {
    cursor: pointer;
    transition: all 0.3s;
}

.map-city circle {
    fill: url(#cityGradient);
    stroke: white;
    stroke-width: 3;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-city:hover circle {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.map-line {
    stroke: #667eea;
    stroke-width: 4;
    stroke-dasharray: 10, 10;
    fill: none;
    opacity: 0.7;
    animation: dashMove 20s linear infinite;
}

@keyframes dashMove {
    to { stroke-dashoffset: -1000; }
}

.route-details-section {
    background: #e8f5e9;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.route-leg {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #4caf50;
}

.city-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    border-left: 5px solid #667eea;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.city-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    flex-wrap: wrap;
}

.city-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: bold;
}

.day-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #667eea;
}

.day-card h5 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.experience-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    margin: 5px 5px 5px 0;
    font-weight: 600;
}

.badge-heritage { background: #e3f2fd; color: #1565c0; }
.badge-nature { background: #e8f5e9; color: #2e7d32; }
.badge-wildlife { background: #fff3e0; color: #e65100; }
.badge-spiritual { background: #f3e5f5; color: #6a1b9a; }
.badge-beach { background: #e0f7fa; color: #00838f; }
.badge-art { background: #fce4ec; color: #c2185b; }
.badge-food { background: #fff9c4; color: #f57f17; }
.badge-palace { background: #ede7f6; color: #4527a0; }
.badge-festival { background: #ffebee; color: #b71c1c; }
.badge-photography { background: #eceff1; color: #37474f; }
.badge-cycling { background: #e8f5e9; color: #1b5e20; }

/* City Discovery Cards */
.city-discover-card {
    background: white;
    border: 2px solid #e0e6ed;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.city-discover-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.city-discover-card.selected {
    border-color: #667eea;
    background: #f0f4ff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.city-discover-card.gateway {
    border-color: #4caf50;
    background: #f1f8e9;
    opacity: 0.8;
}
/* Extension card — injected from "Extend your trip" suggestions panel.
   Visually distinct so user understands these are AI-suggested adds,
   not part of the original discovery. Dashed amber border + tinted bg. */
.city-discover-card.extension {
    border-style: dashed;
    border-color: #f0d8a8;
    background: linear-gradient(135deg, #fdfcf7 0%, #fef9eb 100%);
}
.city-discover-card.extension:hover { border-color: #c79a3a; }
.city-discover-card.extension.selected {
    border-style: solid;
    border-color: #d97706;
    background: #fef3c7;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}
.city-discover-card .ext-badge {
    display: inline-block;
    background: #fff8e8;
    border: 1px solid #f0d8a8;
    color: #8b5a08;
    font-size: 0.72em;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.city-score-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.city-score-badge.low { background: linear-gradient(135deg, #bdbdbd, #9e9e9e); }
.city-score-badge.medium { background: linear-gradient(135deg, #ff9800, #f57c00); }
.city-score-badge.high { background: linear-gradient(135deg, #667eea, #764ba2); }

/* Score tooltip */
.city-score-badge { position: absolute; cursor: help; }
.city-score-badge .score-tip {
    display: none; position: absolute; right: 0; top: 48px; z-index: 100;
    background: #1a1a2e; color: #fff; padding: 10px 14px; border-radius: 8px;
    font-size: 0.75em; font-weight: 400; white-space: nowrap; line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.city-score-badge .score-tip::before {
    content: ''; position: absolute; top: -6px; right: 14px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #1a1a2e;
}
.city-score-badge:hover .score-tip { display: block; }

/* ── Compact Info Banner (Step 2 — unified score + flow + marker legend) ──
   Replaces the previous two larger banners (scoring-info, trip-flow)
   to free vertical space for the city cards below. Single banner with
   4 short statements: score formula, day flow, N/D notation, marker. ── */
.info-banner-compact {
    background: linear-gradient(135deg, #f8f9fc 0%, #eef1ff 100%);
    border: 1px solid #d8e0f5;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}
.info-banner-compact .ibc-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}
.info-banner-compact .ibc-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.82em;
    line-height: 1.45;
    color: #5a6478;
    padding: 2px 0;
}
.info-banner-compact .ibc-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 0.95em;
}
.info-banner-compact .ibc-label {
    font-weight: 600;
    color: #2c3e50;
    flex-shrink: 0;
}
.info-banner-compact .ibc-detail { min-width: 0; }
.info-banner-compact .ibc-detail code {
    background: #fff;
    border: 1px solid #d8e0f5;
    border-radius: 4px;
    padding: 0 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95em;
    color: #667eea;
}
.info-banner-compact .ibc-stack {
    display: inline-flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #e7eaf3;
    width: 100px;
    flex-shrink: 0;
    align-self: center;
    margin-right: 4px;
    vertical-align: middle;
}
.info-banner-compact .ibc-stack > span { height: 100%; border-left: 1px solid #fff; }
.info-banner-compact .ibc-stack > span:first-child { border-left: none; }
.info-banner-compact .ibc-marker-demo {
    flex-shrink: 0;
    width: 18px;
    height: 16px;
    position: relative;
    background: #f7f7fb;
    border: 1px solid #e5e5ee;
    border-radius: 2px;
    align-self: center;
}
.info-banner-compact .ibc-marker-demo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #d32f2f transparent transparent;
}
@media (max-width: 600px) {
    .info-banner-compact { padding: 10px 14px; }
    .info-banner-compact .ibc-row { flex-wrap: wrap; gap: 6px; }
}

/* ── Extension Suggestions (Step 2 — bottom of section, above buttons) ──
   Up to 3 amber/honey-themed cards proposing nearby city additions
   that naturally extend the trip. One-click apply: bumps days input,
   ticks the new city cards, re-renders. ── */
.extension-suggestions-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #d8e0f5;
}
.extension-suggestions-section.hidden { display: none; }
.ess-title {
    font-size: 1em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ess-subtitle {
    font-size: 0.83em;
    color: #6b7385;
    margin: 0 0 12px 0;
}
.ess-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.ext-card {
    background: linear-gradient(135deg, #fdfcf7 0%, #fef7e6 100%);
    border: 1px solid #f0d8a8;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ext-card:hover {
    border-color: #c79a3a;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.ext-card.applied {
    opacity: 0.55;
    border-color: #d8e0f5;
    background: #f7f7fb;
}
.ext-title {
    font-size: 0.92em;
    font-weight: 600;
    color: #6b4a08;
    line-height: 1.35;
}
.ext-card.applied .ext-title { color: #6b7385; }
.ext-meta {
    font-size: 0.78em;
    color: #8a6817;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.ext-meta .ext-anchor { font-weight: 600; }
.ext-meta .ext-tag {
    background: #fff8e8;
    border: 1px solid #f0d8a8;
    border-radius: 10px;
    padding: 0 7px;
    font-size: 0.95em;
}
.ext-rationale {
    font-size: 0.83em;
    color: #5a4710;
    line-height: 1.45;
    flex: 1;
    margin: 0;
}
.ext-additions-list {
    font-size: 0.8em;
    color: #5a4710;
    margin: 0;
    padding-left: 18px;
    line-height: 1.5;
}
.ext-apply-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
    align-self: flex-start;
}
.ext-apply-btn:hover { filter: brightness(1.05); }
.ext-apply-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    filter: none;
}
.ext-apply-btn.applied-state {
    background: #4caf50;
    cursor: default;
}

/* ── Extend Consent Banner (actionable, replaces confirm() dialog) ──
   Fires when user ticks a city that pushes over touring budget. User
   confirms → days bump. User cancels → tick reverts. Same amber
   palette as extension cards so the visual link is clear. ── */
.extend-consent-banner {
    background: linear-gradient(135deg, #fdfcf7 0%, #fef9eb 100%);
    border: 2px solid #f0d8a8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.extend-consent-banner.hidden { display: none; }
.extend-consent-banner .ecb-header {
    font-size: 1em;
    color: #6b4a08;
    margin-bottom: 6px;
}
.extend-consent-banner .ecb-message {
    color: #5a4710;
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 12px;
}
.extend-consent-banner .ecb-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.extend-consent-banner .ecb-confirm {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.extend-consent-banner .ecb-confirm:hover { filter: brightness(1.05); }
.extend-consent-banner .ecb-cancel {
    background: #fff;
    color: #5a4710;
    border: 1px solid #f0d8a8;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.extend-consent-banner .ecb-cancel:hover { background: #fef7e6; }

/* Over-cap banner — error state, can't extend past 35 days */
.overcap-banner {
    background: #ffebee;
    border: 1px solid #ef5350;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    color: #b71c1c;
    font-size: 0.9em;
    line-height: 1.5;
}
.overcap-banner.hidden { display: none; }

        /* ── Excel-style "has comment" indicator (small red corner triangle) ──
   Applied to elements that have a tooltip / hover popover, so the
   hint is visually obvious — same convention as Excel cell comments.
   Two variants:
     .tip-marker → full inline pill (background + border) for compact
                   notation labels like N/D. Used standalone.
     .tip-corner → marker-only, doesn't change host styling. Layer on
                   elements that already have their own visual style
                   (score badge, attraction items, etc.).
   Both share the same red corner triangle via ::after. ── */
.tip-marker::after,
.tip-corner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #d32f2f transparent transparent;
    pointer-events: none;
    z-index: 2;
}
.tip-marker {
    position: relative;
    cursor: help;
    padding: 1px 9px 1px 4px;
    border-radius: 3px;
    background: #f7f7fb;
    border: 1px solid #e5e5ee;
    transition: background 0.15s;
}
.tip-marker:hover { background: #eef1ff; }
/* .tip-corner intentionally has no position/cursor overrides — relies
   on the host element's existing positioning + cursor styling. */

/* Attraction hover image */
.attraction-item {
    display: inline; cursor: pointer; position: relative;
    border-bottom: 1px dotted #999; transition: color 0.2s;
}
.attraction-item:hover { color: #667eea; }
.attraction-popup {
    display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    z-index: 200; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 6px; min-width: 180px; text-align: center; margin-bottom: 8px;
}
.attraction-popup img {
    width: 180px; height: 120px; object-fit: cover; border-radius: 6px;
}
.attraction-popup .att-name {
    font-size: 0.8em; color: #333; padding: 4px 0 2px; font-weight: 600;
}
.attraction-popup .att-loading {
    width: 180px; height: 120px; display: flex; align-items: center; justify-content: center;
    color: #999; font-size: 0.8em;
}
.attraction-item:hover .attraction-popup { display: block; }
.city-exp-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.city-exp-dot {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #555;
}
.exp-filter-btn {
    padding: 6px 14px;
    border: 2px solid #e0e6ed;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
}
.exp-filter-btn:hover { border-color: #667eea; }
.exp-filter-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.entry-badge {
    background: #4caf50;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    margin-left: 10px;
}

.exit-badge {
    background: #f44336;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    margin-left: 10px;
}

.confirmation-box {
    background: #e8f5e9;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border-left: 4px solid #4caf50;
}

.confirmation-box h3 {
    color: #2e7d32;
    margin-bottom: 20px;
    font-size: 2em;
}

.user-form {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    margin: 20px 0;
}

.success-animation {
    font-size: 4em;
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.redirect-message {
    background: #fff3e0;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border-left: 3px solid #ff9800;
}
/* AUTO-SUGGEST CITY INPUT STYLES */
.city-input-wrapper {
    position: relative;
    width: 100%;
}

.city-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    background: white;
}

.city-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.suggestions-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 350px;
    overflow-y: auto;
    background: white;
    border: 2px solid #6366f1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: -2px;
}

.suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
}

.suggestion-item.no-results {
    cursor: default;
    color: #999;
    text-align: center;
    padding: 20px;
}

.city-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 16px;
    gap: 8px;
}

.city-name strong {
    color: #1a1a1a;
    flex: 1;
}

.airport-code {
    background: #6366f1;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.category-tag {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.airport-name {
    font-size: 13px;
    color: #666;
}

.city-name mark {
    background: #fef3c7;
    color: #92400e;
    font-weight: bold;
}

.city-input-helper {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}	
		.enquiry-explanation {
			animation: slideIn 0.5s ease-out;
		}

		@keyframes slideIn {
			from {
				opacity: 0;
				transform: translateY(-20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		#registrationSection button[onclick*="submitEnquiry"] {
			transition: all 0.3s ease;
		}

		#registrationSection button[onclick*="submitEnquiry"]:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
		}

		/* ============================================================================ */
		/* CITY MAP STYLES */
		/* ============================================================================ */
		.city-map-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			padding-bottom: 16px;
			border-bottom: 2px solid #e0e6ed;
		}

		.city-map-title {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.city-map-title h3 {
			font-size: 24px;
			color: #2c3e50;
			font-weight: 600;
			margin: 0;
		}

		.city-map-title .icon {
			font-size: 28px;
		}

		.city-selector {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.city-selector label {
			font-weight: 500;
			color: #5a6c7d;
			font-size: 14px;
		}

		.city-dropdown {
			padding: 10px 16px;
			border: 2px solid #e0e6ed;
			border-radius: 8px;
			font-size: 15px;
			color: #2c3e50;
			background: white;
			cursor: pointer;
			min-width: 200px;
			transition: all 0.3s ease;
		}

		.city-dropdown:hover {
			border-color: #667eea;
		}

		.city-dropdown:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		}

		.map-wrapper {
			position: relative;
			width: 100%;
			height: 500px;
			border-radius: 8px;
			overflow: hidden;
			border: 2px solid #e0e6ed;
		}

		.map-iframe {
			width: 100%;
			height: 100%;
			border: none;
		}

		.map-loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			z-index: 10;
			background: white;
			padding: 20px;
			border-radius: 8px;
		}

		.map-info {
			margin-top: 16px;
			padding: 16px;
			background: #f8f9fa;
			border-radius: 8px;
			border-left: 4px solid #667eea;
		}

		.map-info-row {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;
			font-size: 14px;
			color: #5a6c7d;
		}

		.map-info-row:last-child {
			margin-bottom: 0;
		}

		.map-info-row strong {
			color: #2c3e50;
			min-width: 120px;
		}

		.info-badge {
			display: inline-block;
			padding: 4px 12px;
			background: #667eea;
			color: white;
			border-radius: 12px;
			font-size: 12px;
			font-weight: 500;
		}

		.alternative-maps {
			margin-top: 20px;
			padding: 16px;
			background: #fff9e6;
			border-radius: 8px;
			border-left: 4px solid #f39c12;
		}

		.alternative-maps h4 {
			color: #e67e22;
			margin-bottom: 12px;
			font-size: 16px;
		}

		.map-buttons {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
		}

		.map-btn {
			padding: 10px 20px;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.map-btn-primary {
			background: #667eea;
			color: white;
		}

		.map-btn-primary:hover {
			background: #5568d3;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
		}

		.map-btn-secondary {
			background: #ecf0f1;
			color: #2c3e50;
		}

		.map-btn-secondary:hover {
			background: #bdc3c7;
		}

		@media (max-width: 768px) {
			.city-map-header {
				flex-direction: column;
				align-items: flex-start;
				gap: 16px;
			}

			.city-selector {
				width: 100%;
			}

			.city-dropdown {
				width: 100%;
			}

			.map-wrapper {
				height: 400px;
			}
		}