/* ---- Radius tokens (never change) ---- */
:root {
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --aqua:      #FF5249;
    --aqua-dim:  rgba(255,82,73,0.18);
    --aqua-glow: rgba(255,82,73,0.35);
}

/* ---- DARK theme (default) ---- */
[data-theme="dark"] {
    --page-bg:       #050d1a;
    --nav-bg:        rgba(5,13,26,0.75);
    --hero-grad:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,120,180,0.28) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255,82,73,0.15) 0%, transparent 60%),
        linear-gradient(175deg, #050d1a 0%, #0a1f3d 40%, #061428 100%);
    --grid-line:     rgba(255,255,255,0.03);
    --orb1-color:    rgba(0,100,200,0.25);
    --orb2-color:    rgba(255,82,73,0.18);
    --glass-bg:      rgba(255,255,255,0.06);
    --glass-border:  rgba(255,255,255,0.12);
    --glass-hover:   rgba(255,255,255,0.10);
    --text-primary:  #f0f4ff;
    --text-muted:    rgba(240,244,255,0.72);
    --lang-bg:       #0d1e38;
    --select2-bg:    #0d1e38;
    --section-alt:   rgba(255,255,255,0.02);
    --section-border:rgba(255,255,255,0.06);
    --partner-filter:brightness(0) invert(0.6);
    --partner-hover: brightness(0) invert(0.95);
    --about-map:     brightness(0.9) saturate(0.8) hue-rotate(200deg);
    --faq-hover:     rgba(255,255,255,0.2);
    --route-hover:   rgba(255,255,255,0.2);
    --card-bg:       rgba(255,255,255,0.05);
    --selected-bg:   rgba(255,82,73,0.12);
    --selected-bor:  rgba(255,82,73,0.45);
    --row-hover:     rgba(255,255,255,0.05);
    --disabled-c:    rgba(240,244,255,0.25);
}

/* ---- LIGHT theme ---- */
[data-theme="light"] {
    --page-bg:       #f4f7fb;
    --nav-bg:        rgba(244,247,251,0.85);
    --hero-grad:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,140,210,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255,82,73,0.10) 0%, transparent 60%),
        linear-gradient(175deg, #deeaf8 0%, #eaf3fb 40%, #f4f7fb 100%);
    --grid-line:     rgba(0,50,120,0.06);
    --orb1-color:    rgba(0,100,200,0.12);
    --orb2-color:    rgba(255,82,73,0.10);
    --glass-bg:      rgba(255,255,255,0.75);
    --glass-border:  rgba(0,60,120,0.12);
    --glass-hover:   rgba(255,255,255,0.90);
    --text-primary:  #0d1e38;
    --text-muted:    rgba(13,30,56,0.72);
    --lang-bg:       #ffffff;
    --select2-bg:    #ffffff;
    --section-alt:   rgba(255,255,255,0.6);
    --section-border:rgba(0,60,120,0.08);
    --partner-filter:brightness(0) invert(0) opacity(0.45);
    --partner-hover: brightness(0) invert(0) opacity(0.85);
    --about-map:     brightness(1) saturate(1) hue-rotate(0deg);
    --faq-hover:     rgba(0,60,120,0.12);
    --route-hover:   rgba(0,60,120,0.1);
    --card-bg:       rgba(255,255,255,0.85);
    --selected-bg:   rgba(255,82,73,0.08);
    --selected-bor:  rgba(255,82,73,0.4);
    --row-hover:     rgba(0,60,120,0.04);
    --disabled-c:    rgba(13,30,56,0.25);
}

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

html { scroll-behavior: smooth; }

body {
    
    background: var(--page-bg);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.35s, color 0.35s;
}


/* ================================================================
   NAV — base_nav.php
================================================================ */
/* ================================================================
   NAV — included on every page, uses CSS variables from page theme.
   Falls back to safe dark defaults if variables are not defined.
================================================================ */
.hop-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 64px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--nav-bg, rgba(5,13,26,0.82));
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: background 0.35s, border-color 0.35s;
}

/* ---- Logo ---- */
.hop-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.hop-nav-logo img {
    height: 30px;
    max-width: 180px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s;
}
[data-theme="dark"]  .hop-logo-light { display: none; }
[data-theme="light"] .hop-logo-dark  { display: none; }

/* ---- Centre links ---- */
.hop-nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex: 1;
    justify-content: center;
}
.hop-nav-links a {
    color: var(--text-muted, rgba(240,244,255,0.72));
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    transition: color 0.18s;
    white-space: nowrap;
}
.hop-nav-links a:hover { color: var(--text-primary, #f0f4ff); }

/* ---- Right cluster ---- */
.hop-nav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ---- Theme toggle ---- */
.hop-theme-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    background: var(--glass-bg, rgba(255,255,255,0.06));
    color: var(--text-primary, #f0f4ff);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    transition: background 0.2s, transform 0.3s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.hop-theme-toggle:hover {
    background: var(--glass-hover, rgba(255,255,255,0.1));
    transform: rotate(22deg);
}
[data-theme="dark"]  .hop-theme-toggle .t-sun  { display: none; }
[data-theme="dark"]  .hop-theme-toggle .t-moon { display: inline; }
[data-theme="light"] .hop-theme-toggle .t-sun  { display: inline; }
[data-theme="light"] .hop-theme-toggle .t-moon { display: none; }

/* ---- Language picker ---- */
.hop-lang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 99px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    background: var(--glass-bg, rgba(255,255,255,0.06));
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, rgba(240,244,255,0.72));
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.04em;
}
.hop-lang img.flag-current {
    width: 18px; height: 12px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}
.hop-lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px); right: 0;
    background: var(--lang-bg, #0d1e38);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 14px;
    padding: 0.6rem;
    width: 200px;
    flex-wrap: wrap;
    gap: 0.2rem;
    z-index: 300;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    /* Small invisible bridge above the dropdown covers the gap */
    margin-top: 0;
}
/* Invisible bridge that fills the gap so mouse can travel without closing */
.hop-lang-dropdown::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.hop-lang.open .hop-lang-dropdown { display: flex; }
.hop-lang-dropdown a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted, rgba(240,244,255,0.72));
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.hop-lang-dropdown a:hover {
    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary, #f0f4ff);
}
.hop-lang-dropdown img {
    width: 18px; height: 12px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}

/* ---- User dropdown ---- */
.hop-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem 0.3rem 0.55rem;
    border-radius: 99px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    background: var(--glass-bg, rgba(255,255,255,0.06));
    color: var(--text-primary, #f0f4ff);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.hop-user-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--aqua, #FF5249);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.hop-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px); right: 0;
    background: var(--lang-bg, #0d1e38);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 14px;
    padding: 0.5rem;
    min-width: 200px;
    z-index: 300;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.hop-user-dropdown::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.hop-user.open .hop-user-dropdown { display: block; }
.hop-user:hover .hop-user-dropdown,
.hop-user:focus-within .hop-user-dropdown { display: block; }
.hop-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted, rgba(240,244,255,0.72));
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.hop-user-dropdown a:hover {
    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary, #f0f4ff);
}
.hop-user-dropdown a i { width: 14px; font-size: 0.8rem; color: var(--aqua, #FF5249); }
.hop-user-dropdown .dropdown-divider {
    height: 1px;
    background: var(--glass-border, rgba(255,255,255,0.1));
    margin: 0.3rem 0.5rem;
}
.hop-user-dropdown .logout-link { color: rgba(255,100,100,0.7) !important; }
.hop-user-dropdown .logout-link:hover { color: #ff6464 !important; }
.hop-user-dropdown .logout-link i { color: #ff6464 !important; }

/* ---- Login button (guest) ---- */
.hop-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    background: var(--glass-bg, rgba(255,255,255,0.06));
    color: var(--text-primary, #f0f4ff);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s;
    cursor: pointer;
}
.hop-btn-login:hover {
    background: var(--glass-hover, rgba(255,255,255,0.1));
    border-color: rgba(255,255,255,0.22);
    color: var(--text-primary, #f0f4ff);
}

/* ---- Hamburger (mobile) ---- */
.hop-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
    color: var(--text-primary, #f0f4ff);
}
.hop-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
}

/* ---- Mobile drawer ---- */
.hop-mobile-menu {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--lang-bg, #0d1e38);
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    padding: 1rem 1.5rem 1.5rem;
    z-index: 199;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.35s;
}
.hop-mobile-menu.open { display: flex; }
.hop-mobile-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    color: var(--text-muted, rgba(240,244,255,0.72));
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s;
}
.hop-mobile-menu a:hover { color: var(--text-primary, #f0f4ff); }
.hop-mobile-menu a:last-child { border-bottom: none; }
.mob-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.75rem;
}
.mob-lang-row a {
    border: none;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    background: var(--glass-bg, rgba(255,255,255,0.06));
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .hop-nav-links { display: none; }
    .hop-user span.user-name { display: none; }
}
@media (max-width: 600px) {
    .hop-hamburger { display: flex; }
    .hop-lang,
    .hop-btn-login,
    .hop-user { display: none; }
    .hop-nav { padding: 0 1rem; }
}

/* ================================================================
   FOOTER — base_footer.php
================================================================ */
/* ================================================================
   FOOTER — uses CSS variables from page theme, safe fallbacks
================================================================ */

/* ---- Popular routes text block (SEO) ---- */
.hop-routes-section {
    padding: 3rem 1.5rem 2rem;
    border-top: 1px solid var(--section-border, rgba(255,255,255,0.06));
}
.hop-routes-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.hop-routes-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.hop-routes-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #f0f4ff);
    letter-spacing: -0.01em;
}
.hop-routes-header p {
    font-size: 0.9rem;
    color: var(--text-muted, rgba(240,244,255,0.72));
}
.hop-routes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem 1rem;
}
.hop-routes-grid a {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    color: var(--text-muted, rgba(240,244,255,0.72));
    text-decoration: none;
    border-bottom: 1px solid var(--section-border, rgba(255,255,255,0.05));
    transition: color 0.18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hop-routes-grid a:hover { color: var(--aqua, #FF5249); }

/* ---- Main footer ---- */
.hop-footer {
    background: var(--lang-bg, #0d1e38);
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    padding: 3.5rem 1.5rem 2rem;
    transition: background 0.35s;
}
.hop-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem 2rem;
}

/* Brand column */
.hop-footer-brand {}
.hop-footer-logo {
    display: block;
    margin-bottom: 1rem;
}
.hop-footer-logo img {
    height: 28px;
    max-width: 160px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s;
}
[data-theme="dark"]  .hop-flogo-light { display: none; }
[data-theme="light"] .hop-flogo-dark  { display: none; }

.hop-footer-tagline {
    font-size: 0.9rem;
    color: var(--text-muted, rgba(240,244,255,0.68));
    line-height: 1.65;
    margin-bottom: 1.25rem;
    font-weight: 500;
    max-width: 240px;
}
.hop-footer-email {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--text-muted, rgba(240,244,255,0.72));
    text-decoration: none;
    transition: color 0.18s;
    margin-bottom: 1.25rem;
}
.hop-footer-email:hover { color: var(--aqua, #FF5249); }
.hop-footer-email i { font-size: 0.8rem; color: var(--aqua, #FF5249); }

.hop-footer-social {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.hop-footer-social a {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: var(--glass-bg, rgba(255,255,255,0.05));
    color: var(--text-muted, rgba(240,244,255,0.72));
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    font-size: 0.85rem;
}
.hop-footer-social a:hover {
    background: var(--aqua, #FF5249);
    color: #ffffff;
    border-color: transparent;
}

/* Link columns */
.hop-footer-col h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-primary, #f0f4ff);
    margin-bottom: 1rem;
}
.hop-footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.hop-footer-col ul li a {
    font-size: 0.85rem;
    color: var(--text-muted, rgba(240,244,255,0.72));
    text-decoration: none;
    transition: color 0.18s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hop-footer-col ul li a:hover { color: var(--text-primary, #f0f4ff); }
.hop-footer-col ul li a i {
    font-size: 0.78rem;
    color: var(--aqua, #FF5249);
    width: 12px;
    flex-shrink: 0;
}

/* ---- Bottom bar ---- */
.hop-footer-bottom {
    background: var(--page-bg, #050d1a);
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.07));
    padding: 1rem 1.5rem;
    transition: background 0.35s;
}
.hop-footer-bottom-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 auto;
}
.hop-footer-copyright {
    font-size: 0.78rem;
    color: var(--text-muted, rgba(240,244,255,0.4));
}
.hop-footer-payments img {
    height: 50px;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(0.3);
    transition: opacity 0.2s;
}
.hop-footer-payments img:hover { opacity: 1; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .hop-footer-inner { grid-template-columns: 1fr 1fr; }
    .hop-routes-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .hop-footer-inner { grid-template-columns: 1fr; }
    .hop-routes-grid  { grid-template-columns: 1fr; }
    .hop-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   SEARCH PAGE — search.php
================================================================ */
/* ------------------------------------------------------------------ HERO */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 1.5rem 3rem;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--hero-grad);
    z-index: 0;
    transition: background 0.35s;
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
}
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.hero-orb-1 {
    width: 500px; height: 500px;
    top: -100px; left: -100px;
    background: radial-gradient(circle, var(--orb1-color), transparent 70%);
    animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    bottom: 0; right: -80px;
    background: radial-gradient(circle, var(--orb2-color), transparent 70%);
    animation: orb-drift 16s ease-in-out infinite alternate-reverse;
}
@keyframes orb-drift {
    from { transform: translate(0,0); }
    to   { transform: translate(40px, 30px); }
}
.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    animation: fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--aqua-dim);
    border: 1px solid var(--aqua-glow);
    border-radius: 99px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aqua);
    margin-bottom: 1.5rem;
}
.hero-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--aqua);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.7); }
}
.hero-title {
    
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.hero-title em {
    font-style: normal;
    color: var(--aqua);
}
.hero-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.65;
    margin-bottom: 2.5rem;
    max-width: 560px;
}

/* ------------------------------------------------------------------ SEARCH CARD */
.search-card {
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    overflow: hidden;
    animation: fade-up 0.8s 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
[data-theme="light"] .search-card {
    background: #ffffff;
    border-color: rgba(0,60,120,0.10);
    box-shadow: 0 8px 40px rgba(0,60,120,0.10);
}

/* ---- Mode Tabs ---- */
.mode-tabs {
    display: flex;
    padding: 1.2rem 1.5rem 0;
    gap: 0.25rem;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s, background 0.2s;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.mode-tab i { font-size: 0.85rem; }
.mode-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.mode-tab.active {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}
.mode-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--aqua);
    border-radius: 2px 2px 0 0;
}

/* ---- Tab panes ---- */
.tab-pane { display: none; padding: 2rem; }
.tab-pane.active { display: block; }

/* ---- Trip type toggle ---- */
.trip-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.trip-toggle input[type="radio"] { display: none; }
.trip-toggle label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: 99px;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trip-toggle input[type="radio"]:checked + label {
    background: var(--aqua-dim);
    border-color: var(--aqua-glow);
    color: var(--aqua);
}
@media (max-width: 400px) {
    .trip-toggle label {
        font-size: 0.78rem;
        padding: 0.5rem 0.5rem;
        gap: 0.3rem;
    }
    .trip-toggle label i { font-size: 0.75rem; }
}

/* ---- Form grid ---- */
.form-row {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.form-control-hop {
    width: 100%;
    padding: 0.7rem 0.95rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    height: 48px;
}
.form-control-hop::placeholder { color: var(--text-muted); }
.form-control-hop:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.09); }
.form-control-hop:focus { border-color: var(--aqua); background: rgba(255,82,73,0.06); }
.form-control-hop option { background: #0d1e38; color: var(--text-primary); }
[data-theme="light"] .form-control-hop {
    background: #f4f7fb;
    border-color: rgba(0,60,120,0.15);
    color: var(--text-primary);
}
[data-theme="light"] .form-control-hop:hover {
    border-color: rgba(0,60,120,0.30);
    background: #eef2f9;
}
[data-theme="light"] .form-control-hop:focus {
    border-color: var(--aqua);
    background: rgba(255,82,73,0.04);
}
[data-theme="light"] .form-control-hop option { background: #fff; color: var(--text-primary); }

/* Select arrow */
.field-select-wrap { position: relative; }
.field-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
}

/* Number stepper */
.qty-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.qty-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.qty-field label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.qty-field label i { font-size: 0.75rem; color: var(--aqua); opacity: 0.8; }
.qty-stepper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    height: 48px;
    overflow: hidden;
}
.qty-btn {
    width: 44px; height: 100%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.qty-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.qty-val {
    flex: 1;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    pointer-events: none;
    /* Hide native number spinner — Chrome/Safari */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
    /* Prevent the input from expanding to fit the spinner column */
    width: 0;
    min-width: 0;
    padding: 0;
}
/* Firefox — remove inner spin buttons */
.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Submit */
.btn-search {
    width: 100%;
    padding: 0.9rem 2rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--aqua);
    color: #ffffff;
    
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255,82,73,0.35);
    filter: brightness(1.08);
}
.btn-search:active { transform: translateY(0); }
.btn-search i { font-size: 0.9rem; }

/* Return date show/hide */
.return-date-field { transition: opacity 0.2s; }
.return-date-field.hidden { opacity: 0.3; pointer-events: none; }

/* ------------------------------------------------------------------ SECTIONS */
.section { padding: 5rem 1.5rem; }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aqua);
    margin-bottom: 0.75rem;
}
.section-title {
    
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.section-body {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 560px;
    font-weight: 500;
}

/* ---- About / map ---- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-map img { width: 100%; opacity: 0.9;}

/* ---- Video ---- */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.video-embed {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ---- Partners ---- */
.partners-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.partner-logo {
    height: 50px;
    object-fit: contain;
   
    transition: filter 0.2s, transform 0.2s;
}
.partner-logo:hover {transform: scale(1.05); }

/* ---- FAQ ---- */
.support-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: start;
}
.support-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    position: sticky; top: 80px;
}
.support-card img { width: 100%; max-width: 200px; margin-bottom: 1.5rem; }
.btn-email {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--aqua-glow);
    background: var(--aqua-dim);
    color: var(--aqua);
    font-family: inherit; font-size: 0.95rem; font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-email:hover { background: rgba(255,82,73,0.28); color: var(--aqua); }

.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg);
    transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--faq-hover); }
.faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: transparent; border: none; text-align: left;
    color: var(--text-primary); font-family: inherit;
    font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
.faq-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: var(--text-muted);
    transition: transform 0.25s, background 0.2s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--aqua-dim); color: var(--aqua); border-color: var(--aqua-glow); }
.faq-answer {
    display: none;
    padding: 0 1.3rem 1.2rem;
    font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; padding-top:10px;}

/* ---- Popular routes (text SEO block) ---- */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-top: 2rem;
}
.route-chip {
    padding: 0.55rem 0.85rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.4rem;
}
.route-chip:hover { color: var(--text-primary); border-color: var(--route-hover); background: var(--glass-hover); }
.route-chip::before { content: '→'; color: var(--aqua); font-size: 0.75rem; }

/* ---- Footer ---- */
.footer-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 0;
}

/* ------------------------------------------------------------------ SELECT2 OVERRIDE */
.select2-container--default .select2-selection--single {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    height: 48px !important;
    display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    
    font-size: 0.9rem !important;
    padding: 0 0.95rem !important;
    line-height: 46px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent !important;
}
.select2-dropdown {
    background: var(--select2-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}
.select2-container--default .select2-results__option {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
}
.select2-container--default .select2-results__option--highlighted {
    background: rgba(255,82,73,0.15) !important;
    color: var(--text-primary) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.4rem 0.7rem !important;
    
}

/* ---- Section alternate background ---- */
.section-alt-bg { background: var(--section-alt); border-top: 1px solid var(--section-border); border-bottom: 1px solid var(--section-border); }

/* ------------------------------------------------------------------ RESPONSIVE */
@media (max-width: 768px) {
    .hop-nav-links { display: none; }
    .form-row.cols-2,
    .form-row.cols-3,
    .qty-row,
    .about-grid,
    .video-grid,
    .support-grid { grid-template-columns: 1fr; }
    .about-grid { gap: 2rem; }
    .support-card { position: static; }
    .hero-title { font-size: 2.2rem; }
}

/* ================================================================
   BOOKING RESULTS PAGE — booking_s.php
================================================================ */
/* ------------------------------------------------------------------ PROGRESS STEPS */
.hop-steps {
    position: sticky;
    top: 64px;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    padding: 0 1.5rem;
    transition: background 0.35s;
    overflow-x: auto;
    scrollbar-width: none;
}
.hop-steps::-webkit-scrollbar { display: none; }
.hop-steps-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    min-width: max-content;
}
.hop-step {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    border-bottom: 2px solid transparent;
}
.hop-step.done   { color: var(--aqua); border-bottom-color: var(--aqua); }
.hop-step.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.hop-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hop-step.done .hop-step-num {
    background: var(--aqua);
    border-color: var(--aqua);
    color: #ffffff;
}

/* ------------------------------------------------------------------ LAYOUT */
.hop-results {
    max-width: 1100px;
    margin: 0 auto;
    padding: 6rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
    color: var(--text-primary);
}
.hop-results-main { min-width: 0; overflow: hidden; }
.hop-results-side {
    position: sticky;
    top: calc(64px + 53px + 1rem); /* nav + steps + gap */
}

/* ------------------------------------------------------------------ SECTION HEADER */
.hop-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid var(--section-border);
    margin-bottom: 0.75rem;
}
.hop-route-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hop-route-label i { color: var(--aqua); font-size: 0.85rem; }
.hop-date-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ------------------------------------------------------------------ DATE STRIP */
.hop-dates {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: none;
    margin-bottom: 1rem;
}
.hop-dates::-webkit-scrollbar { display: none; }
.hop-dates a {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.18s;
    flex-shrink: 0;
}
.hop-dates a:hover:not(.disabled):not(.current) {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.2);
}
.hop-dates a.current {
    background: var(--aqua-dim);
    border-color: var(--aqua-glow);
    color: var(--aqua);
    font-weight: 700;
}
.hop-dates a.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* ------------------------------------------------------------------ TRIP ROWS */
.trip-row,
.trip-row_r {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.trip-row:hover,
.trip-row_r:hover {
    background: var(--row-hover);
    border-color: rgba(255,255,255,0.18);
    transform: translateX(2px);
}
.trip-row.selected-div,
.trip-row_r.selected-div {
    background: var(--selected-bg);
    border-color: var(--selected-bor);
}
.trip-row.selected-div::before,
.trip-row_r.selected-div::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--aqua);
    border-radius: 3px 0 0 3px;
}

/* Trip row columns */
.tr-logo { flex-shrink: 0; }
.tr-logo img {
    width: 52px; height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    padding: 2px;
}
.tr-vessel { flex: 1; min-width: 0; }
.tr-vessel-name { font-weight: 600;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tr-company-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.tr-times {
    text-align: center;
    flex-shrink: 0;
    min-width: 0;
}
.tr-time-range { font-weight: 700;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.tr-duration {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.tr-icons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.tr-icons img {
    width: 22px; height: 22px;
    object-fit: contain;
}
/* Dark mode: available=white, unavailable=dimmed */
[data-theme="dark"]  .tr-icons img        { opacity: 0.22; filter: invert(1); }
[data-theme="dark"]  .tr-icons img.avail  { opacity: 0.90; filter: invert(1); }
/* Light mode: available=dark, unavailable=dimmed */
[data-theme="light"] .tr-icons img        { opacity: 0.20; filter: none; }
[data-theme="light"] .tr-icons img.avail  { opacity: 0.85; filter: none; }
.tr-price {
    text-align: right;
    flex-shrink: 0;
    min-width: 0;
}
.tr-price-from {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tr-price-amount {
    font-weight: 800;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--aqua);
}

.hop-no-results {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.hop-no-results i {
    font-size: 2rem;
    color: var(--glass-border);
    display: block;
    margin-bottom: 0.75rem;
}

/* Show-all button */
.hop-show-all {
    display: none;
    width: 100%;
    padding: 0.65rem;
    margin: 0.25rem 0 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.hop-show-all:hover { background: var(--glass-hover); color: var(--text-primary); }
.hop-show-all i { margin-right: 0.4rem; }

/* ------------------------------------------------------------------ SUMMARY CARD (sidebar) */
.hop-summary {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hop-summary-leg {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border);
}
.hop-summary-leg:last-of-type { border-bottom: none; }
.hop-summary-route {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aqua);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hop-summary-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.hop-summary-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.hop-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.hop-field input {
    width: 100%;
    height: 36px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0 0.65rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.18s;
}
.hop-field input:not([readonly]):focus { border-color: var(--aqua); }
.hop-summary-actions {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--glass-border);
}
.hop-btn-next {
    width: 100%;
    padding: 0.8rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--aqua);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.18s, transform 0.12s;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.hop-btn-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hop-btn-next:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.hop-btn-back {
    width: 100%;
    padding: 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.hop-btn-back:hover { background: var(--glass-hover); color: var(--text-primary); }

/* Summary placeholder state */
.hop-summary-placeholder {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.hop-summary-placeholder i {
    font-size: 1.8rem;
    color: var(--glass-border);
    display: block;
    margin-bottom: 0.75rem;
}

/*footer*/
.hop-footer *{
  margin: 0 auto;
}
.hop-footer-social a{
    margin:0;
}
.hop-footer-social{
    justify-content:center;
}

.hop-footer-brand{
    text-align:center;
}

.hop-footer-email{
     padding-bottom:10px;
}

 .hop-footer-copyright {
  margin: 0 auto;
  margin-top:10px;
}
.hop-footer-bottom{
    padding:0;
}
/* ------------------------------------------------------------------ RESPONSIVE */
@media (max-width: 860px) {
    .hop-results {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }
    /* Sidebar goes BELOW trips on mobile — user picks trip first */
    .hop-results-side {
        position: static;
        order: 2;
    }
    .hop-results-main {
        order: 1;
    }
    /* Steps — hide text labels, keep numbers */
    .hop-step span { display: none; }
    .hop-step { padding: 0.75rem 0.5rem; }
    .hop-step-num { width: 26px; height: 26px; font-size: 0.75rem; }
    /* Summary fields grid → single column */
    .hop-summary-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .hop-results { padding: 0.75rem; }

    /* Trip rows: two-line layout */
    .trip-row,
    .trip-row_r {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        padding: 0.75rem;
    }
    /* Line 1: logo + vessel + price */
    .tr-logo   { flex: 0 0 40px; }
    .tr-vessel { flex: 1 1 0; min-width: 0; }
    .tr-times  { flex: 0 0 auto; font-size: 0.85rem; text-align: right; }
    .tr-icons  { display: none; }
    .tr-price  { flex: 0 0 auto; text-align: right; }
    .tr-price-amount { font-size: 0.95rem; }
    .tr-price-from   { display: none; }

    /* Vessel name truncate */
    .tr-vessel-name  { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tr-company-name { font-size: 0.75rem; }

    /* Steps bar tighter */
    .hop-steps { padding: 0 0.25rem; }
    .hop-step  { padding: 0.65rem 0.4rem; gap: 0.3rem; }
    .hop-step-num { width: 22px; height: 22px; font-size: 0.68rem; }
}

/* ================================================================
   PASSENGER / VEHICLE DATA ENTRY — order_step2s.php
================================================================ */

/* ---- Data cards ---- */
.hop-data-card {
    background: var(--card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
    width: 100%;
    float: none;
}
.hop-data-card-header {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-wrap: wrap;
    margin: 0;
}
[data-theme="light"] .hop-data-card-header { background: rgba(0,0,0,0.03); }
.hop-data-card-header i { color: var(--aqua); font-size: 0.85rem; }
.hop-data-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin: 0;
}
.hop-price-tag {
    background: var(--aqua-dim);
    border: 1px solid var(--aqua-glow);
    color: var(--aqua);
    border-radius: 99px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.hop-data-card-body {
    padding: 1.25rem;
    display: flex !important;
    flex-direction: column;
    gap: 0.85rem;
}

/* ---- Form rows and fields ---- */
.hop-form-row {
    display: grid !important;
    width: 100%;
    gap: 0.85rem;
}
.hop-form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.hop-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.hop-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    float: none;
    width: auto;
}
.req { color: var(--aqua); }
.hop-input {
    width: 100%;
    height: 42px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0 0.85rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s, background 0.18s;
    appearance: none;
    -webkit-appearance: none;
}
.hop-input::placeholder { color: var(--text-muted); }
.hop-input:hover  { border-color: rgba(255,255,255,0.22); }
.hop-input:focus  { border-color: var(--aqua); background: rgba(255,82,73,0.05); }
[data-theme="light"] .hop-input:hover { border-color: rgba(0,60,120,0.25); }
[data-theme="light"] .hop-input:focus { background: rgba(255,82,73,0.04); }

.hop-select-wrap { position: relative; }
.hop-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
}
.hop-select {
    width: 100%;
    height: 42px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0 2rem 0 0.85rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.hop-select:focus { border-color: var(--aqua); }
.hop-select option { background: var(--lang-bg, #0d1e38); color: var(--text-primary); }

/* ---- Price summary lines ---- */
.hop-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--section-border, rgba(255,255,255,0.05));
    gap: 0.5rem;
}
.hop-price-line:last-of-type { border-bottom: none; }
.hop-price-line span:last-child { font-weight: 600; color: var(--text-primary); white-space: nowrap; }

.hop-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--glass-border);
    margin-top: 0.25rem;
}
.hop-total-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--aqua);
}

/* ---- Select2 overrides for new fields ---- */
.select2-container .select2-selection--single {
    height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hop-form-row.cols-2 { grid-template-columns: 1fr; }
}

/* ================================================================
   SEAT SELECTION PAGE — order_step1s.php
================================================================ */

.hop-step1s-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    color: var(--text-primary);
}

/* ---- Leg header ---- */
.hop-leg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid var(--section-border, rgba(255,255,255,0.06));
    margin-bottom: 0.85rem;
}
.hop-leg-route {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.hop-leg-route i { color: var(--aqua); font-size: 0.85rem; }
.hop-leg-date {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ---- Trip info strip ---- */
.hop-trip-strip {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    list-style: none;
}
.hop-trip-strip-item {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}
.hop-trip-strip-item i { color: var(--aqua); font-size: 0.78rem; width: 14px; }
.hop-strip-label { color: var(--text-muted); margin: 0; }
.hop-strip-val   { color: var(--text-primary); font-weight: 600; margin: 0; }

/* ---- Seat/Cabin toggle pills ---- */
.hop-toggle-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.hop-toggle-pill {
    cursor: pointer;
}
.hop-toggle-pill input[type="radio"] { display: none; }
.hop-toggle-pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 99px;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.18s;
    user-select: none;
}
.hop-toggle-pill input:checked + span {
    background: var(--aqua-dim);
    border-color: var(--aqua-glow);
    color: var(--aqua);
}
.hop-toggle-pill input:disabled + span {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---- 3-column form row ---- */
.hop-form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ---- Nav buttons at bottom ---- */
.hop-step1s-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--section-border, rgba(255,255,255,0.06));
}
.hop-step1s-nav .hop-btn-next {
    width: auto;
    padding: 0.75rem 2rem;
}
.hop-step1s-nav .hop-btn-back {
    width: auto;
}

@media (max-width: 700px) {
    .hop-form-row.cols-3 { grid-template-columns: 1fr; }
    .hop-trip-strip { flex-direction: column; gap: 0.4rem; }
}


/* ================================================================
   CUSTOM AUTOCOMPLETE — origin/destination on search page
================================================================ */
.hop-autocomplete-wrap {
    position: relative;
    width: 100%;
}

/* The text input looks identical to form-control-hop */
.hop-autocomplete-input {
    padding-right: 2.2rem !important;
}
.hop-autocomplete-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Dropdown list */
.hop-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--lang-bg, #0d1e38);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
    padding: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}
.hop-autocomplete-dropdown::-webkit-scrollbar { width: 4px; }
.hop-autocomplete-dropdown::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

/* Individual option */
.hop-ac-item {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hop-ac-item:hover,
.hop-ac-item.active {
    background: var(--aqua-dim);
    color: var(--text-primary);
}

/* ================================================================
   FAQ PAGE — faq.php
================================================================ */
.hop-faq-hero {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    transition: background 0.35s;
}
.hop-faq-hero-inner { max-width: 680px; margin: 0 auto; }
.hop-faq-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}
.hop-faq-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.65;
}

.hop-faq-section { padding: 3rem 1.5rem 5rem; }
.hop-faq-inner   { max-width: 720px; margin: 0 auto; }

/* Re-use .faq-list / .faq-item / .faq-question / .faq-answer
   from the shared section in hop.css — only additions needed: */
.faq-item { margin-bottom: 0.6rem; }
.faq-icon { transition: transform 0.25s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.hop-faq-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.hop-faq-contact p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.faq-answer {
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

@media (max-width: 560px) {
    .hop-faq-contact { flex-direction: column; align-items: flex-start; }
    .hop-faq-hero    { padding: 3rem 1rem 2rem; }
}

/* ================================================================
   CONTACT PAGE — contact.php
================================================================ */
.hop-contact-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ---- Info cards column ---- */
.hop-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 240px;
    flex: 0 0 260px;
}
.hop-contact-info-card {
    display: flex !important;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    background: var(--card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: border-color 0.18s, background 0.18s;
}
.hop-contact-info-card:hover {
    border-color: var(--aqua-glow);
    background: var(--glass-hover);
}
.hop-contact-info-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--aqua-dim);
    border: 1px solid var(--aqua-glow);
    color: var(--aqua);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.hop-contact-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.hop-contact-info-val {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s;
    display: block;
}
a.hop-contact-info-val:hover { color: var(--aqua); }

/* ---- Textarea ---- */
.hop-textarea {
    height: auto !important;
    resize: vertical;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    line-height: 1.6;
}

/* ---- Alert banners ---- */
.hop-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.hop-alert-success {
    background: rgba(255,82,73,0.12);
    border: 1px solid rgba(255,82,73,0.35);
    color: var(--aqua);
}
.hop-alert-error {
    background: rgba(255,70,70,0.10);
    border: 1px solid rgba(255,70,70,0.30);
    color: #ff6b6b;
}

/* ---- Checkbox ---- */
.hop-contact-agree {
    margin-top: 0.85rem;
}
.hop-checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}
.hop-checkbox-label input[type="checkbox"] { display: none; }
.hop-checkbox-box {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--glass-border);
    background: var(--glass-bg);
    flex-shrink: 0;
    margin-top: 1px;
    transition: border-color 0.18s, background 0.18s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hop-checkbox-label input:checked + .hop-checkbox-box {
    background: var(--aqua);
    border-color: var(--aqua);
}
.hop-checkbox-label input:checked + .hop-checkbox-box::after {
    content: '';
    display: block;
    width: 5px; height: 9px;
    border: 2px solid #021a18;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}
.hop-checkbox-label a { color: var(--aqua); }

/* ---- Responsive ---- */
@media (max-width: 680px) {
    .hop-contact-grid  { flex-direction: column; }
    .hop-contact-info  { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
    .hop-contact-info-card { flex: 1 1 calc(50% - 0.5rem); }
}
@media (max-width: 420px) {
    .hop-contact-info-card { flex: 1 1 100%; }
}

/* ================================================================
   LOGIN PAGE — login.php
================================================================ */
.hop-login-wrap {
    min-height: calc(100vh - 64px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--text-primary);
}
.hop-login-card {
    width: 100%;
    max-width: 420px;
}
.hop-login-links {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border);
}
.hop-login-links a {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.45rem 0;
    transition: color 0.18s;
}
.hop-login-links a:hover { color: var(--text-primary); }
.hop-login-links a i { color: var(--aqua); font-size: 0.82rem; width: 14px; }
.hop-login-admin { font-weight: 600; }

/* ---- Form validation errors ---- */
.hop-field-error {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: #ff6b6b;
    font-weight: 500;
}

/* ================================================================
   CHECKOUT PAGE — checkout.php
================================================================ */
.hop-checkout-badge {
    background: var(--aqua-dim);
    border: 1px solid var(--aqua-glow);
    border-radius: var(--radius-lg);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    min-width: 220px;
}
.hop-checkout-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.hop-checkout-code {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--aqua);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.hop-checkout-qr {
    margin-bottom: 0.75rem;
}
.hop-checkout-qr img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 3px solid var(--glass-border);
    padding: 8px;
    background: #fff; /* QR codes need white background to scan */
}

/* ================================================================
   PROSE CONTENT — terms, privacy, business_text rich content
================================================================ */
.hop-prose {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-primary);
}
.hop-prose h1, .hop-prose h2, .hop-prose h3, .hop-prose h4 {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.25;
}
.hop-prose h1 { font-size: 1.5rem; }
.hop-prose h2 { font-size: 1.2rem; }
.hop-prose h3 { font-size: 1.05rem; }
.hop-prose p  { margin-bottom: 1rem; color: var(--text-muted); }
.hop-prose ul, .hop-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}
.hop-prose li { margin-bottom: 0.35rem; }
.hop-prose a  { color: var(--aqua); text-decoration: underline; }
.hop-prose a:hover { opacity: 0.8; }
.hop-prose strong { color: var(--text-primary); font-weight: 700; }
.hop-prose hr {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 1.5rem 0;
}

/* ================================================================
   TRANSFERS LISTING PAGE — booking_tr_list.php
================================================================ */
.hop-tr-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    align-items: start;
    color: var(--text-primary);
}

/* ---- Map ---- */
.hop-tr-map-wrap {
    position: sticky;
    top: calc(64px + 1rem);
}
#map2 {
    height: calc(90vh - 80px);
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}
/* Hide Leaflet routing panel and attribution */
.leaflet-routing-container h2  { display: none; }
.leaflet-routing-alt table     { display: none; }
.leaflet-control-attribution   { display: none !important; }

/* ---- Cards grid ---- */
.hop-tr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
.hop-tr-card {
    display: flex !important;
    flex-direction: column;
    background: var(--card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
    color: var(--text-primary);
}
.hop-tr-card:hover {
    border-color: var(--aqua-glow);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.hop-tr-card-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}
.hop-tr-card-cat {
    position: absolute;
    bottom: 0.6rem;
    left: 0.75rem;
    background: var(--aqua);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
}
.hop-tr-card-body {
    padding: 0.85rem 1rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.hop-tr-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.hop-tr-card-price {
    white-space: nowrap;
    flex-shrink: 0;
}
.hop-tr-card-price .price-number {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--aqua);
}
.hop-tr-card-currency {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .hop-tr-layout         { grid-template-columns: 1fr; }
    .hop-tr-map-wrap       { position: static; order: -1; }
    #map2                  { height: 300px; }
}
@media (max-width: 480px) {
    .hop-tr-grid           { grid-template-columns: 1fr; }
}

/* ---- Qty buttons (transfers passenger count) ---- */
.hop-qty-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
.hop-qty-btn:hover {
    background: var(--aqua-dim);
    border-color: var(--aqua-glow);
    color: var(--aqua);
}

/* ---- Payment icons strip ---- */
.hop-payment-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 1.1rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.hop-payment-icons img {
    height: 28px;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(0.2);
    transition: opacity 0.18s, filter 0.18s;
}
.hop-payment-icons img:hover { opacity: 1; filter: none; }

/* ---- Latin fields auto-uppercase ---- */
.validate-latin { text-transform: uppercase; }
.hop-prose img {
    background: #ffffff;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    max-height: 48px;
    object-fit: contain;
    display: inline-block;
    margin: 0.35rem 0.25rem;
    border: 1px solid var(--glass-border);
}
/* "We accept" and coloured headings in payment-methods-text */
.hop-prose h3, .hop-prose h4 { color: var(--aqua); }
/* Override ALL inline background colours in prose — handles yellow note boxes */
.hop-prose * {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
}
/* But restore white bg on actual images */
.hop-prose img {
    background-color: #ffffff !important;
}
/* Re-apply card bg to block-level note divs */
.hop-prose div, .hop-prose blockquote, .hop-prose aside {
    background-color: var(--glass-bg) !important;
}
/* Fix text colours forced by inline styles */
.hop-prose * { color: var(--text-primary) !important; }
.hop-prose a  { color: var(--aqua) !important; }
.hop-prose h1, .hop-prose h2 { color: var(--text-primary) !important; }
.hop-prose h3, .hop-prose h4 { color: var(--aqua) !important; }
.hop-prose strong, .hop-prose b { color: var(--text-primary) !important; }

/* Fix payment method "credit card" input-like divs in prose */
.hop-prose input[type="text"],
.hop-prose input[type="number"],
.hop-prose input {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    font-family: inherit !important;
}

/* ================================================================
   BOOKING CONFIRMATION PAGE — confirmation.php
================================================================ */
.hop-confirm-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--text-primary);
}

/* ---- Hero banner ---- */
.hop-confirm-hero {
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--glass-border);
}
.hop-confirm-success {
    background: linear-gradient(135deg, rgba(0,196,180,0.12) 0%, rgba(0,196,180,0.04) 100%);
    border-color: var(--aqua-glow);
}
.hop-confirm-error {
    background: rgba(255,70,70,0.08);
    border-color: rgba(255,70,70,0.3);
}
.hop-confirm-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}
.hop-confirm-success .hop-confirm-icon { color: var(--aqua); }
.hop-confirm-error   .hop-confirm-icon { color: #ff6b6b; }
.hop-confirm-hero h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.hop-confirm-ref {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 99px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.hop-confirm-ref strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--aqua);
    letter-spacing: 0.04em;
}

/* ---- Trip info strip ---- */
.hop-confirm-trip-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.hop-confirm-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.hop-confirm-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hop-confirm-label i { color: var(--aqua); margin-right: 0.3rem; }
.hop-confirm-val {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.hop-confirm-val small { font-weight: 400; color: var(--text-muted); margin-left: 0.25rem; }
.hop-confirm-code {
    font-family: monospace;
    font-size: 1rem;
    color: var(--aqua);
    letter-spacing: 0.06em;
}

/* ---- Section label ---- */
.hop-confirm-section-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.hop-confirm-section-label i { color: var(--aqua); margin-right: 0.35rem; }

/* ---- Tables ---- */
.hop-confirm-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}
.hop-confirm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.hop-confirm-table thead tr {
    background: var(--aqua-dim);
    border-bottom: 1px solid var(--aqua-glow);
}
.hop-confirm-table thead th {
    padding: 0.7rem 1rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aqua);
    white-space: nowrap;
}
.hop-confirm-table tbody tr {
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.12s;
}
.hop-confirm-table tbody tr:last-child { border-bottom: none; }
.hop-confirm-table tbody tr:hover { background: var(--row-hover); }
.hop-confirm-table tbody td {
    padding: 0.7rem 1rem;
    color: var(--text-primary);
}
.hop-confirm-price {
    font-weight: 700;
    color: var(--aqua);
    white-space: nowrap;
}

/* ---- Bottom row ---- */
.hop-confirm-bottom {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .hop-confirm-wrap     { padding: 1rem; }
    .hop-confirm-bottom   { flex-direction: column; }
    .hop-confirm-bottom .hop-data-card { flex: 1 1 100%; }
    .hop-confirm-trip-strip { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   FORM VALIDATION STATES
================================================================ */
.hop-input.valid,
.hop-select.valid {
    border-color: #22c55e !important;
    background: rgba(34,197,94,0.05) !important;
}
.hop-input.invalid,
.hop-select.invalid {
    border-color: #ef4444 !important;
    background: rgba(239,68,68,0.05) !important;
}
.hop-field-msg {
    font-size: 0.75rem;
    margin-top: 0.3rem;
    display: none;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
}
.hop-field-msg.error  { color: #ef4444; display: flex; }
.hop-field-msg.success { color: #22c55e; display: flex; }

/* ================================================================
   INTL-TEL-INPUT THEME OVERRIDES
================================================================ */
.iti { width: 100%; }
.iti__tel-input {
    width: 100% !important;
    height: 42px;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    padding-left: 90px !important; /* room for flag + dial code */
    outline: none !important;
    transition: border-color 0.2s, background 0.2s;
}
.iti__tel-input:focus {
    border-color: var(--aqua) !important;
    background: rgba(255,82,73,0.05) !important;
}
/* Flag button */
.iti__flag-container { height: 42px; }
.iti__selected-dial-code { color: var(--text-primary) !important; font-size: 0.88rem; }
.iti__arrow { border-top-color: var(--text-muted) !important; }
.iti__arrow--up { border-bottom-color: var(--text-muted) !important; }

/* Dropdown */
.iti__dropdown-content {
    background: var(--lang-bg, #0d1e38) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}
.iti__search-input {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.75rem !important;
    outline: none !important;
    width: calc(100% - 1.5rem) !important;
    margin: 0.35rem 0.75rem !important;
}
.iti__country {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 6px;
    margin: 1px 4px;
}
.iti__country:hover,
.iti__country--highlight {
    background: var(--aqua-dim) !important;
    color: var(--text-primary) !important;
}
.iti__dial-code { color: var(--text-muted) !important; font-size: 0.8rem !important; }
.iti__country-name { color: var(--text-primary) !important; }

/* Light mode adjustments */
[data-theme="light"] .iti__tel-input {
    background: #f4f7fb !important;
    border-color: rgba(0,60,120,0.15) !important;
}
[data-theme="light"] .iti__dropdown-content { background: #fff !important; }
[data-theme="light"] .iti__search-input { background: #f4f7fb !important; }
[data-theme="light"] .iti__country { color: #0d1e38 !important; }

/* ================================================================
   RETURN TRIP DISCOUNT BADGE — booking_s.php trip rows
================================================================ */

/* Fixed-width column — always present so all rows align */
.tr-disc-col {
    flex: 0 0 76px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.tr-return-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.08) 100%);
    border: 1px solid rgba(34,197,94,0.4);
    color: #22c55e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: default;
    text-align: center;
    line-height: 1.2;
}
.tr-return-badge i { font-size: 0.65rem; margin-bottom: 0.1rem; }
.tr-return-badge-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.85;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .tr-disc-col { display: none; }
}

/* ---- Select2 valid/invalid container states ---- */
.s2-valid .select2-selection {
    border-color: #22c55e !important;
    background: rgba(34,197,94,0.05) !important;
}
.s2-invalid .select2-selection {
    border-color: #ef4444 !important;
    background: rgba(239,68,68,0.05) !important;
}

/* ---- intl-tel-input valid/invalid wrapper states ---- */
.iti:has(input.valid) .iti__tel-input,
.iti:has(input.valid) {
    border-color: #22c55e !important;
}
.iti:has(input.invalid) .iti__tel-input,
.iti:has(input.invalid) {
    border-color: #ef4444 !important;
}

.iti.iti-valid .iti__tel-input   { border-color: #22c55e !important; background: rgba(34,197,94,0.05) !important; }
.iti.iti-invalid .iti__tel-input { border-color: #ef4444 !important; background: rgba(239,68,68,0.05) !important; }

/* ================================================================
   ORDER STEP 2 — MOBILE FIXES
================================================================ */
@media (max-width: 860px) {
    /* Stack form above summary on mobile */
    .hop-results[style*="320px"] {
        grid-template-columns: 1fr !important;
        padding: 0.75rem !important;
    }
    /* Summary goes below the form */
    .hop-results[style*="320px"] .hop-results-side {
        order: 2;
        position: static;
    }
    .hop-results[style*="320px"] > div:first-child {
        order: 1;
    }
}

@media (max-width: 520px) {
    /* Force all form rows to single column */
    .hop-form-row.cols-2,
    .hop-form-row.cols-3,
    .hop-form-row { grid-template-columns: 1fr !important; }

    /* Passenger card header — allow wrapping */
    .hop-data-card-header {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    /* Price badges in header */
    .hop-data-card-header .hop-price-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
    }
    /* Prevent any card from overflowing */
    .hop-data-card {
        min-width: 0;
        overflow: hidden;
    }
    /* Ensure inputs don't overflow */
    .hop-input, .hop-select, .iti, .iti__tel-input {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Select2 container */
    .select2-container { max-width: 100% !important; }
    /* Steps bar */
    .hop-steps { padding: 0; }
}

/* ================================================================
   ORDER STEP 2 — LAYOUT (replaces inline style)
================================================================ */
.hop-step2-layout {
    grid-template-columns: 1fr 320px;
}
@media (max-width: 860px) {
    .hop-step2-layout {
        grid-template-columns: 1fr !important;
        padding: 0.75rem;
    }
    .hop-step2-layout > .hop-results-side {
        order: 2;
        position: static;
    }
    .hop-step2-layout > div:first-child { order: 1; }
}

/* ================================================================
   MODE TABS SCROLL HINT
================================================================ */
.mode-tabs-wrap {
    position: relative;
}
/* Fade gradient on right edge — only on mobile */
.mode-tabs-wrap::after {
    content: '';
    display: none;
    position: absolute;
    top: 0; right: 0;
    width: 56px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--card-bg, rgba(10,18,40,0.98)));
    pointer-events: none;
    z-index: 2;
    border-radius: 0 var(--radius-xl) 0 0;
    transition: opacity 0.3s;
}
/* Chevron icon hint */
.mode-tabs-wrap::before {
    content: '›';
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-60%);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--aqua);
    pointer-events: none;
    z-index: 3;
    animation: hop-scroll-hint 1.2s ease-in-out infinite;
}
@keyframes hop-scroll-hint {
    0%, 100% { opacity: 1;   right: 10px; }
    50%       { opacity: 0.4; right: 6px;  }
}
@media (max-width: 600px) {
    .mode-tabs-wrap::after,
    .mode-tabs-wrap::before { display: block; }
    /* Hide hint once user has scrolled */
    .mode-tabs-wrap.scrolled::after,
    .mode-tabs-wrap.scrolled::before { display: none; }
}

/* ================================================================
   GLOBAL PAGE LOADER
================================================================ */
#hop-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#hop-loader.active {
    opacity: 1;
    pointer-events: all;
}
.hop-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Ship icon */
.hop-loader-ship {
    font-size: 2.8rem;
    color: var(--aqua);
    animation: loader-ship-bob 1.6s ease-in-out infinite;
}
@keyframes loader-ship-bob {
    0%, 100% { transform: translateY(0)   rotate(-2deg); }
    50%       { transform: translateY(-10px) rotate(2deg);  }
}

/* Wave dots */
.hop-loader-waves {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 24px;
}
.hop-loader-waves span {
    display: block;
    width: 8px;
    border-radius: 99px;
    background: var(--aqua);
    opacity: 0.7;
    animation: loader-wave 1.1s ease-in-out infinite;
}
.hop-loader-waves span:nth-child(1) { animation-delay: 0s;    height: 8px;  }
.hop-loader-waves span:nth-child(2) { animation-delay: 0.18s; height: 16px; }
.hop-loader-waves span:nth-child(3) { animation-delay: 0.36s; height: 8px;  }
@keyframes loader-wave {
    0%, 100% { transform: scaleY(1);   opacity: 0.5; }
    50%       { transform: scaleY(1.9); opacity: 1;   }
}

/* Text */
.hop-loader-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* ================================================================
   DATE NAVIGATION — label + legend
================================================================ */
.hop-dates-section { margin-bottom: 0.5rem; }

.hop-dates-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.hop-dates-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.8;
}
.hop-legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hop-legend-current  { background: var(--aqua); }
.hop-legend-disabled { background: var(--glass-border); }

/* Disabled date buttons — no pointer */
.hop-dates .disabled {
    pointer-events: none;
    cursor: default;
}

/* ---- Date inputs: full click area, consistent across browsers ---- */
input[type="date"].form-control-hop {
    cursor: pointer;
    /* Make the whole input clickable, not just the icon */
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    /* Ensure width is fully clickable */
    min-width: 100%;
}
/* Chromium: make the calendar icon area full width */
input[type="date"].form-control-hop::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---- Passenger field hint (e.g. 18+ notice) ---- */
.hop-field-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    opacity: 0.8;
}