/* CSS for Itinerary Hub Redesign - Dark Theme */
:root {
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent-color: #eebb4d;
    /* Gold/Yellow from image */
    --accent-hover: #d4a53d;
    --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Open Sans', sans-serif;
    /* Fallback to existing font */
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-family: 'Playfair Display', serif;
    /* Use serif for headings if available, otherwise browser default serif */
}

.serif-font {
    font-family: 'Playfair Display', 'Georgia', serif;
}

/* Hero Section */
.itinerary-hero {
    position: relative;
    height: 40vh;
    /* Reduced from 50vh */
    min-height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    /* Move content to bottom */
    margin-top: 70px;
    padding-top: 0;
    padding-bottom: 80px;
    /* Space content from bottom edge */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-overlay);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    /* Ensure content is above potential overlaps */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    color: white;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 600;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 800px;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.creator-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.creator-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-share {
    background-color: var(--accent-color);
    color: #1a1a1a;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.btn-share:hover {
    background-color: var(--accent-hover);
    color: #1a1a1a;
    text-decoration: none;
}

/* Stats Cards */
.stats-container {
    position: absolute;
    bottom: -40px;
    left: 40px;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    z-index: 5;
    /* Ensure above everything */
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px 30px;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Timeline Section */
.timeline-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline {
    position: relative;
    padding: 0;
    margin: 0;
    /* Left aligned border */
    border-left: 2px solid var(--accent-color);
    margin-left: 20px;
    padding-left: 40px;
}

/* Remove centered line */
.timeline::before {
    display: none;
}

.timeline-step {
    position: relative;
    display: block;
    /* Stack vertically */
    margin-bottom: 60px;
    width: 100%;
}

/* Step Dot on the left line */
.timeline-dot {
    position: absolute;
    left: -51px;
    /* 40px padding + 10px half width + 1px border */
    top: 25px;
    width: 20px;
    height: 20px;
    background: var(--bg-color);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    transform: none;
    /* Reset transform */
    z-index: 2;
}

/* Card Styling - Full Width */
.step-card {
    background: #2a2a2a;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    /* Full width */
    position: relative;
    display: flex;
    flex-direction: column;
    /* Vertical layout for full content */
    padding: 0;
    border: 1px solid #333;
}

/* Map Section */
.map-container {
    width: 100%;
    max-width: 1200px;
    height: 480px;
    /* Reduced height by 20% from 600px */
    margin: 120px auto 60px;
    /* More top margin to clear stats cards */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Lower than navbar */
    border: 1px solid #333;
}

.itinerary-map {
    width: 100%;
    height: 100%;
}

/* Ensure the generated leaflet map div fills the container */
#map {
    width: 100%;
    height: 100%;
}

/* Step Activity Map */
.activity-map {
    height: 400px;
    /* Set a fixed height for activity maps */
    width: 100%;
    /* Fill the content column */
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
}

.activity-map .leaflet-container {
    height: 100%;
    width: 100%;
}

/* Ensure leaflet controls are below navbar */
.leaflet-top,
.leaflet-bottom {
    z-index: 400 !important;
    /* Default is 1000, navbar often higher (e.g. 1030 in bootstrap) */
}

/* Image wrapper to handle width constraint */
.step-image-wrapper {
    width: 100%;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Star Ratings */
.stars-outer {
    position: relative;
    display: inline-block;
}

.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.stars-outer::before {
    content: "\f005 \f005 \f005 \f005 \f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #555;
    /* Darker gray for empty stars in dark mode */
}

.stars-inner::before {
    content: "\f005 \f005 \f005 \f005 \f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent-color);
    /* Use gold accent */
}

.star {
    position: relative;
    display: inline-block;
}

.star::before {
    content: '\f005';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    cursor: pointer;
    color: #555;
}

.star.rated::before {
    content: '\f005';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent-color);
}

/* Hide the image in the included template since we show it manually in v2 */
.step-card-body .location-image {
    display: none !important;
}

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

.step-card-body {
    padding: 30px;
    width: 75%;
    /* Constrain content to 75% width */
}

.step-card-title {
    color: var(--accent-color);
    font-size: 2rem;
    margin-bottom: 5px;
}

.step-card-title a {
    color: var(--accent-color) !important;
    text-decoration: none;
    transition: color 0.3s;
}

.step-card-title a:hover {
    color: var(--accent-hover) !important;
    text-decoration: none;
}

/* Content Styles */
.step-card-body h4 {
    color: white;
    font-size: 1.2rem;
    margin-top: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.step-card-body p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Location title in description */
.description h4 a {
    color: var(--accent-color) !important;
    text-decoration: none;
    transition: color 0.3s;
}

.description h4 a:hover {
    color: var(--accent-hover) !important;
    text-decoration: none;
}

/* Days Badge */
.days-recommended-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(238, 187, 77, 0.1);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(238, 187, 77, 0.1);
    transition: all 0.3s ease;
}

.days-recommended-badge:hover {
    background: rgba(238, 187, 77, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 187, 77, 0.15);
}

.days-recommended-badge i {
    font-size: 1rem;
}

/* Table Styles for Dark Mode */
.table {
    color: var(--text-secondary);
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.table td,
.table th {
    border-top: 1px solid #444;
}

/* Accordion Styles */
.card {
    background-color: transparent;
    border: 1px solid #444;
}

.card-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #444;
}

.btn-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 1.1rem;
}

.btn-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

/* Route/Travel Styles */
.travel h4 {
    font-size: 1rem;
    color: var(--text-secondary);
}

.travel h2 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 15px;
}

.travel .arrow {
    font-size: 2rem;
    color: var(--accent-color);
    padding: 0 20px;
}

/* Map specific */
.small-map {
    height: 300px;
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
}

/* Ensure all Leaflet containers respect rounded corners */
.leaflet-container {
    border-radius: 16px;
    overflow: hidden;
}

/* Map Marker Styling - Fix Alignment */
.myDivIcon {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    background: transparent !important;
    border: none !important;
}

.myDivIcon i {
    font-size: 24px; /* Increased for better visibility */
    line-height: 1;
    margin-bottom: 0;
    text-shadow: 0 0 3px rgba(0,0,0,0.5); /* Boost contrast */
}

/* Reset specific overrides from previous CSS */
.timeline-step:nth-child(even) {
    flex-direction: column;
}

.timeline-step:nth-child(odd) .step-card {
    margin-right: 0;
}

/* Route Card Specifics */
.route-card-body {
    width: 100% !important;
    /* Force full width for route cards */
    padding: 30px;
}

/* 12GO Timetable (Dark Mode Adaptation) */
.one2go-left {
    font-size: 12px;
    color: var(--accent-color);
    /* Change green to gold accent per request or logic */
}

/* Re-reading request: "hover gives green color... prefer gold". The base text is dark */

/* Transport Option Text - Force lighter color */
.one2go-timetable,
.one2go-route-info,
.one2go-trips li,
.one2go-operator {
    color: var(--text-secondary);
}

/* Specifically target the dark text links */
.one2go-timetable a,
.one2go-route-header a,
.one2go-operator,
.one2go-route-name {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

/* Hover State - Gold */
.one2go-timetable a:hover,
.one2go-route-header a:hover {
    color: var(--accent-color);
}

.one2go-right {
    font-size: 12px;
    color: #ff3b30;
    /* Brighter red */
}

.one2go-route-info {
    float: right;
    font-size: 10pt;
    white-space: nowrap;
}

.one2go-route-price {
    margin-right: 20px;
    color: white;
    font-weight: bold;
}

li.country {
    background-position: 90%;
    background-repeat: no-repeat;
}

.one2go-trips {
    width: 60%;
    /* Slightly wider for better fit */
}

.one2go-trips ul {
    padding-left: 0px;
    margin-top: auto !important;
    margin-bottom: auto !important;
    list-style: none !important;
}

.one2go-trips li {
    line-height: 16pt;
    padding-left: 8px;
    color: var(--text-secondary);
}

.one2go-timetable {
    width: 100%;
    font-size: 12px;
    border-spacing: 10px;
    border-collapse: collapse;
}

.one2go-timetable td,
.one2go-timetable tr.one2go-route-detail th {
    padding: 10px;
    vertical-align: middle !important;
    border: 1px solid #444;
    /* Dark border */
    color: var(--text-secondary);
}

.one2go-route-name {
    padding: 15px;
    font-size: 14px;
    color: white;
}

span.one2go-departures {
    color: var(--text-secondary);
}

span.one2go-class {
    font-weight: bold;
    color: white;
}

tr.one2go-route-detail th {
    text-align: center;
    color: #b0b0b0;
}

/* Style the buy button - Fix Overlap */
a[href*="12go.asia"] button,
.one2go-buy-button {
    font-family: inherit;
    font-size: 12pt;
    /* Remove float to prevent overlay issues, use flex alignment locally if needed by HTML structure,
       but if HTML relies on float, we might need a clear fix.
       Let's try inline-block or check context.
       User said "overlaying other text". */
    float: none;
    display: inline-block;
    margin-top: 10px;

    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background: transparent;
    padding: 5px 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

a[href*="12go.asia"] button:hover,
.one2go-buy-button:hover {
    background: var(--accent-color);
    color: #1a1a1a;
    text-decoration: none;
}

.one2go-route-header {
    display: flex;
    justify-content: space-between;
    /* Push title left, button right */
    align-items: center;
    flex-wrap: wrap;
    /* innovative wrap to avoid overlap on small screens */

    padding: 8px;
    background-color: rgba(238, 187, 77, 0.1);
    letter-spacing: 0px;
    border: 1px solid var(--accent-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.one2go-route-header a {
    color: white;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}

.one2go-route-container {
    padding: 0;
    border: 1px solid var(--accent-color);
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: #2a2a2a;
}

/* Accordion V2 Styling */
.accordion-v2 .card {
    background: transparent;
    border: none;
    margin-bottom: 15px;
}

.accordion-v2 .card-header {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
}

.accordion-v2 .card-header:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
}

.accordion-v2 .btn-link {
    color: white;
    text-decoration: none;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
}

.accordion-v2 .btn-link:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.accordion-v2 .btn-link i {
    color: var(--accent-color);
}

.accordion-v2 .btn-link .toggle-icon {
    transition: transform 0.3s ease;
}

.accordion-v2 .btn-link[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* Grid Layout for items */
.items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0;
}

/* Item Card (Activity/Hotel) */
.item-card {
    background: #222;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

/* Image styling - Ensuring they show up! */
.item-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 500;
    object-fit: cover;
    display: block;
    /* Explicitly display block to ensure visibility */
}

.item-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    margin-bottom: 10px;
    line-height: 1.3;
}

.item-card-title a {
    color: var(--accent-color);
    text-decoration: none;
}

.item-card-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.6;
    flex-grow: 1;
}

.item-card-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #333;
}

/* Override the hiding rule specifically for these cards */
.item-card .location-image {
    display: block !important;
}

/* Booking Button Styling */
.btn-booking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #003580;
    /* Booking.com blue */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-booking:hover {
    background: #00224f;
    color: white;
    text-decoration: none;
}

.btn-booking img {
    height: 16px;
    filter: brightness(0) invert(1);
    /* Make logo white */
}

/* Enhanced Route Section */
.route-section-title {
    font-family: 'Playfair Display', serif;
    color: var(--accent-color);
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    font-size: 1.5rem;
}

.route-card {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.route-journey {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.route-segment {
    position: relative;
    display: flex;
    gap: 20px;
}

/* Timeline dot and line */
.route-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    min-width: 30px;
}

.timeline-node {
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid rgba(238, 187, 77, 0.5);
    z-index: 2;
    flex-shrink: 0;
}

.timeline-node.hollow {
    background: #2a2a2a;
    border-color: var(--accent-color);
}

.timeline-connector {
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), rgba(255, 255, 255, 0.1));
    flex-grow: 1;
    min-height: 40px;
    margin: -2px 0;
    /* Overlap slightly */
}

.route-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #333;
    margin-bottom: 20px;
    /* Space between segments if multiple */
}

/* Connect the last segment properly */
.route-segment:last-child .route-content {
    margin-bottom: 0;
}

.route-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.location-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    font-family: 'Playfair Display', serif;
}

.transport-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.transport-meta i {
    color: var(--accent-color);
    width: 20px;
    text-align: center;
}

.route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.btn-route-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-weight: 600;
}

.btn-12go {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-color: #28a745;
}

.btn-12go:hover {
    background: #28a745;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}

.btn-gmaps {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
    border-color: #17a2b8;
}

.btn-gmaps:hover {
    background: #17a2b8;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(23, 162, 184, 0.2);
}

.timetable-wrapper {
    margin-top: 10px;
    overflow-x: auto;
}

/* Enhanced Route Section Styles */
.route-card {
    background: #2a2a2a;
    /* Match other cards */
    border: 1px solid #333;
    border-radius: 16px;
    padding: 25px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.route-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.route-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--accent-color);
}

.route-segment {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
}

.route-segment:last-child {
    padding-bottom: 0;
}

/* Timeline visual guide */
.route-visual-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.route-node-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 2px solid var(--accent-color);
    z-index: 2;
}

.fill-dot {
    background: var(--accent-color);
}

.route-line {
    flex-grow: 1;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color) 40%, rgba(255, 255, 255, 0.1) 100%);
    margin: 5px 0;
    min-height: 50px;
}

.route-content-wrapper {
    flex-grow: 1;
    min-width: 0;
}

.location-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.transport-details-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid var(--text-secondary);
    transition: all 0.3s ease;
}

.transport-details-box:hover {
    background: rgba(255, 255, 255, 0.05);
}

.transport-details-box.active-transport {
    border-left-color: var(--accent-color);
}

.transport-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.transport-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transport-meta-item i {
    color: var(--accent-color);
}

.booking-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-route-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none !important;
    border: 1px solid transparent;
}

.btn-12go {
    background: rgba(40, 167, 69, 0.1);
    color: #4ade80;
    border-color: rgba(40, 167, 69, 0.3);
}

.btn-12go:hover {
    background: rgba(40, 167, 69, 0.2);
    transform: translateY(-2px);
    color: #4ade80;
}

.btn-gmaps {
    background: rgba(23, 162, 184, 0.1);
    color: #67e8f9;
    border-color: rgba(23, 162, 184, 0.3);
}

.btn-gmaps:hover {
    background: rgba(23, 162, 184, 0.2);
    transform: translateY(-2px);
    color: #67e8f9;
}

.leaflet-route-map {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid #444;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 992px) {
    .leaflet-route-map {
        margin-top: 20px;
    }

    .itinerary-hero {
        height: auto;
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .stats-container {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        padding: 0 20px;
        margin-top: 30px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .stat-card {
        min-width: calc(33.333% - 10px);
        padding: 12px 15px;
        flex-grow: 1;
    }

    .step-card-body {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .btn-share {
        width: 100%;
        justify-content: center;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .stat-card {
        min-width: calc(50% - 10px);
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .map-container {
        height: 400px;
        margin: 40px auto 40px; /* Reduced from 120px since stats are not absolute anymore */
        border-radius: 8px;
    }

    .timeline-section {
        padding: 40px 15px;
    }

    .timeline {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    .timeline-dot {
        display: none;
    }

    .step-card-body {
        padding: 20px 15px;
    }

    .step-card-title {
        font-size: 1.6rem;
    }

    .route-segment {
        gap: 15px;
        padding-bottom: 20px;
    }

    .route-visual-guide {
        min-width: 30px;
    }

    .route-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .booking-buttons {
        width: 100%;
        flex-direction: column;
    }

    .btn-route-action {
        width: 100%;
        justify-content: center;
    }

    .one2go-timetable {
        font-size: 11px;
    }
    
    .one2go-timetable td,
    .one2go-timetable tr.one2go-route-detail th {
        padding: 8px;
    }
}

@media (max-width: 576px) {
    .stat-card {
        min-width: 100%;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .map-container {
        height: 300px;
    }

    .step-card-title {
        font-size: 1.4rem;
    }

    .location-name {
        font-size: 1.1rem;
    }

    [id^="filter-wrapper-"] {
        width: 100%;
    }
}

/* Info Icon & Tooltip Styles */
.info-icon {
    color: #777 !important;
    font-size: 0.8rem !important;
    cursor: help !important;
    transition: all 0.2s ease !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

.info-icon:hover {
    color: var(--accent-color, #eebb4d) !important;
    transform: scale(1.2) !important;
}

/* Global Tooltip Override */
.tooltip-inner {
    max-width: 280px !important;
    padding: 10px 15px !important;
    background-color: #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    border: 1px solid #444 !important;
    text-align: left !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

/* Tooltip Arrow Color Overrides */
.bs-tooltip-top .arrow::before, 
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #333 !important;
}

.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #333 !important;
}

.bs-tooltip-left .arrow::before, 
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #333 !important;
}

.bs-tooltip-right .arrow::before, 
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #333 !important;
}

/* Map Marker Styling - Fix Alignment */
.myDivIcon {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    background: transparent !important;
    border: none !important;
}

.myDivIcon i {
    font-size: 18px !important; /* Reduced size as requested */
    line-height: 1 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.5) !important;
}