/* ===== Ship Ticketing - Plain CSS ===== */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f3f4f6; color: #111827; line-height: 1.6;
    display: flex; flex-direction: column; min-height: 100vh;
}

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ===== NAVBAR — Modern Maritime ===== */

/* Sticky wrapper */
.nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.15);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Brand ── */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-brand-icon {
    width: 32px;
    height: 32px;
    color: #60A5FA;
    filter: drop-shadow(0 0 8px rgba(96,165,250,0.3));
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.nav-brand-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.nav-brand-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

/* ── Toggle (mobile) ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Collapse wrapper ── */
.nav-collapse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Menu (center links) ── */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: #60A5FA;
    border-radius: 1px;
    transition: transform 0.25s;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* ── Actions (right) ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Buttons (guest) ── */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-btn-outline {
    color: rgba(255,255,255,0.85);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
}

.nav-btn-outline:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
}

.nav-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

.nav-btn-primary:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    box-shadow: 0 6px 20px rgba(37,99,235,0.4);
    transform: translateY(-1px);
}

/* ── Notification bell ── */
.nav-notif {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    transition: color 0.2s, background 0.2s;
}

.nav-notif svg {
    width: 22px;
    height: 22px;
}

.nav-notif:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.nav-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background: #EF4444;
    border-radius: 999px;
    border: 2px solid #1E3A8A;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}

/* ── Profile ── */
.nav-profile {
    position: relative;
}

.nav-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.06);
}

.nav-profile-trigger:hover {
    background: rgba(255,255,255,0.06);
}

.nav-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    flex-shrink: 0;
}

.nav-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-profile-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    align-self: flex-start;
}

.badge-passenger { background: rgba(59,130,246,0.2); color: #93C5FD; }
.badge-admin { background: rgba(239,68,68,0.2); color: #FCA5A5; }
.badge-boarding { background: rgba(34,197,94,0.2); color: #86EFAC; }
.badge-deportation { background: rgba(251,146,60,0.2); color: #FDBA74; }
.badge-counter { background: rgba(168,85,247,0.2); color: #D8B4FE; }

.nav-chevron {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.25s;
    flex-shrink: 0;
}

.nav-profile-trigger:hover .nav-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown ── */
.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    padding: 0.5rem;
    z-index: 1001;
}

.nav-dropdown.show {
    display: block;
    animation: dropIn 0.2s ease;
}

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

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

.nav-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.nav-dropdown-item:hover svg {
    color: #60A5FA;
}

.nav-dropdown-logout button {
    all: unset;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}

.nav-dropdown-logout:hover button,
.nav-dropdown-logout:hover button svg {
    color: #FCA5A5;
}

.nav-dropdown-divider {
    height: 1px;
    margin: 0.375rem 0.75rem;
    background: rgba(255,255,255,0.06);
}

.hidden { display: none !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }

    .nav-inner { padding: 0 1rem; }

    .nav-collapse {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        padding: 1rem;
        background: rgba(15,23,42,0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .nav-collapse.show { display: flex; }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }

    .nav-link::after { display: none; }

    .nav-actions {
        flex-direction: row;
        width: 100%;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        justify-content: space-between;
    }

    .nav-profile-info {
        display: none;
    }

    .nav-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        overflow-y: auto;
        padding: 1rem;
    }

    .nav-profile-trigger {
        padding: 0.25rem;
        border: none;
    }

    .nav-chevron { display: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .nav-inner { padding: 0 1.25rem; }
    .nav-link { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
    .nav-profile-info { display: none; }
}

/* Main content */
.main { flex: 1; display: flex; flex-direction: column; }
.main:not(.main-padded) > .container { display: flex; flex-direction: column; flex: 1; }
.main-padded { padding: 2rem 0; }

/* Footer */
.footer { background: #fff; border-top: 1px solid #e5e7eb; padding: 1.5rem 0; text-align: center; font-size: 0.875rem; color: #6b7280; }

/* Cards */
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; }
.card-sm { padding: 1rem; }
.card-lg { padding: 2rem; }

/* Alerts */
.alert { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9375rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-info { background: #eff6ff; color: #1e40af; }
.alert-warning { background: #fef3c7; color: #92400e; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
.form-input, .form-select, .form-textarea {
    display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.9375rem;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    color: #111827; transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.form-textarea { min-height: 80px; resize: vertical; }
.form-error { font-size: 0.8125rem; color: #dc2626; margin-top: 0.25rem; }
.form-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }

/* Buttons */
.btn { display: inline-block; padding: 0.5rem 1.25rem; font-size: 0.9375rem; font-weight: 500;
       border-radius: 6px; border: none; cursor: pointer; text-decoration: none;
       text-align: center; transition: background 0.15s; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-warning { background: #ea580c; color: #fff; }
.btn-warning:hover { background: #c2410c; }
.btn-outline { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.btn-outline:hover { background: #f9fafb; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1.0625rem; }
.btn-block { display: block; width: 100%; }
.btn-link { background: none; border: none; color: #2563eb; padding: 0; font-size: 0.875rem; cursor: pointer; text-decoration: underline; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
th { font-weight: 600; color: #374151; }
td { color: #4b5563; }

/* Status badges */
.badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef3c7; color: #78350f; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-orange { background: #fed7aa; color: #9a3412; }
.badge-gray { background: #f3f4f6; color: #374151; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.capitalize { text-transform: capitalize; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.text-blue-600 { color: #2563eb; }
.text-green-600 { color: #16a34a; }
.text-yellow-600 { color: #ca8a04; }
.text-white { color: #fff; }

/* Links */
.link { color: #2563eb; text-decoration: underline; font-size: 0.875rem; }
.link:hover { color: #1d4ed8; }

/* Spacing */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Flex/Grid */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Inline */
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.hidden { display: none; }

/* Borders */
.border { border: 1px solid #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.border-b { border-bottom: 1px solid #e5e7eb; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-l-blue-500 { border-left-color: #2563eb; }
.rounded { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }

/* Width */
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xs { max-width: 20rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Auth pages - vertical center */
.flex-center { display: flex; align-items: center; justify-content: center; flex: 1; }
.w-auth { width: 500px; }

/* Misc */
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.opacity-60 { opacity: 0.6; }
.cursor-pointer { cursor: pointer; }
.overflow-x-auto { overflow-x: auto; }
.border-gray-300 { border-color: #d1d5db; }

/* Backgrounds */
.bg-white { background: #fff; }
.bg-blue-50 { background: #eff6ff; }
.bg-blue-600 { background: #2563eb; }
.bg-green-50 { background: #f0fdf4; }
.bg-green-100 { background: #dcfce7; }
.bg-green-600 { background: #16a34a; }
.bg-red-50 { background: #fef2f2; }
.bg-red-100 { background: #fee2e2; }
.bg-yellow-50 { background: #fefce8; }
.bg-yellow-100 { background: #fef3c7; }
.bg-orange-50 { background: #fff7ed; }
.bg-orange-600 { background: #ea580c; }
.bg-gray-50 { background: #f9fafb; }
.bg-gray-100 { background: #f3f4f6; }
.bg-gray-200 { background: #e5e7eb; }

/* ===== SEARCH HERO ===== */

.search-hero {
    position: relative;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1E40AF 100%);
    border-radius: 20px;
    overflow: hidden;
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 40px rgba(15,23,42,0.2);
}

.search-hero-bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
}

.search-hero-content {
    position: relative;
    z-index: 1;
}

.search-hero-text { margin-bottom: 1.5rem; }

.search-hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.search-hero-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Search form row */
.search-form-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-field {
    flex: 1;
    min-width: 140px;
}

.search-field-from, .search-field-to {
    flex: 1.5;
    min-width: 160px;
}

.search-field-narrow {
    flex: 0.7;
    min-width: 80px;
}

.search-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.search-icon {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.4);
}

.search-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    outline: none;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    min-height: 48px;
}

.search-input::placeholder { color: rgba(255,255,255,0.3); }

.search-input:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}

.search-input:focus {
    background: rgba(255,255,255,0.14);
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.search-input option { color: #111827; background: #fff; }

/* Swap button */
.search-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.search-swap svg { width: 16px; height: 16px; }

.search-swap:hover {
    background: rgba(255,255,255,0.15);
    color: #60A5FA;
}

/* Search button */
.search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    min-height: 48px;
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}

.search-btn svg { width: 18px; height: 18px; }

.search-btn:hover {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    box-shadow: 0 6px 24px rgba(37,99,235,0.45);
    transform: translateY(-1px);
}

.search-btn:active { transform: translateY(0); }

/* === RESULTS === */

.results-section {
    margin-top: 1rem;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.results-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* === TICKET CARD === */

.ticket-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.25s;
    overflow: hidden;
}

.ticket-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: rgba(30,58,138,0.1);
}

.ticket-card-body { padding: 1.5rem; }

/* Top / Vessel */
.ticket-top { margin-bottom: 1rem; }

.ticket-vessel {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ticket-vessel-icon {
    width: 22px;
    height: 22px;
    color: #1E3A8A;
    flex-shrink: 0;
}

.ticket-vessel-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
}

.ticket-vessel-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1E3A8A;
    background: rgba(30,58,138,0.08);
    border-radius: 4px;
}

/* Route visual */
.ticket-route {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ticket-route-point {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ticket-route-origin { align-items: flex-start; }
.ticket-route-dest { align-items: flex-end; }

.ticket-route-label {
    font-size: 0.675rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-route-port {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
}

.ticket-route-flag {
    font-size: 1rem;
    line-height: 1;
}

.ticket-route-line {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    position: relative;
    padding: 0 0.5rem;
}

.ticket-route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
}

.ticket-route-arrow {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #93C5FD);
    position: relative;
}

.ticket-route-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 8px solid #93C5FD;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* Times */
.ticket-times {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.ticket-time-block {
    display: flex;
    flex-direction: column;
}

.ticket-time-block-right { align-items: flex-end; }

.ticket-time-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ticket-time-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    margin-top: 0.125rem;
}

.ticket-time-duration {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
}

.ticket-time-duration svg {
    width: 14px;
    height: 14px;
    color: #9CA3AF;
}

/* Seats */
.ticket-seats {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.ticket-seat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-seat-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.ticket-seat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vip-dot { background: #F59E0B; }
.regular-dot { background: #3B82F6; }

.ticket-seat-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.seat-good { color: #059669; background: rgba(5,150,101,0.1); }
.seat-warn { color: #D97706; background: rgba(217,119,6,0.1); }
.seat-low { color: #DC2626; background: rgba(220,38,38,0.1); }

.ticket-seat-bar {
    width: 100%;
    height: 4px;
    background: #F3F4F6;
    border-radius: 2px;
    overflow: hidden;
    flex-basis: 100%;
}

.ticket-seat-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.ticket-seat-fill.seat-good { background: #10B981; }
.ticket-seat-fill.seat-warn { background: #F59E0B; }
.ticket-seat-fill.seat-low { background: #EF4444; }

/* Prices */
.ticket-prices {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.ticket-price-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    background: #F9FAFB;
    border-radius: 10px;
    border: 1px solid #F3F4F6;
}

.ticket-price-label {
    font-size: 0.675rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
}

.ticket-prices .ticket-price-item:first-child .ticket-price-label { color: #D97706; }
.ticket-prices .ticket-price-item:last-child .ticket-price-label { color: #3B82F6; }

.ticket-price-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.01em;
}

/* Bottom */
.ticket-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.ticket-bottom-left { flex: 1; }

.ticket-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #065F46;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    border-radius: 8px;
    border: 1px solid rgba(5,150,101,0.15);
}

.ticket-promo-badge span { font-size: 0.875rem; }

.ticket-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(37,99,235,0.25);
}

.ticket-book-btn svg { width: 18px; height: 18px; }

.ticket-book-btn:hover {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    box-shadow: 0 6px 24px rgba(37,99,235,0.4);
    transform: translateY(-1px);
    color: #fff;
}

.ticket-status-closed {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #9CA3AF;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.04);
}

.empty-icon {
    width: 48px;
    height: 48px;
    color: #D1D5DB;
    margin-bottom: 1rem;
}

.empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

.empty-desc {
    font-size: 0.875rem;
    color: #9CA3AF;
    max-width: 320px;
    margin: 0 auto;
}

/* === RESPONSIVE SEARCH === */

@media (max-width: 768px) {
    .search-hero { padding: 1.5rem 1.25rem; }

    .search-hero-title { font-size: 1.375rem; }

    .search-form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .search-field,
    .search-field-from,
    .search-field-to,
    .search-field-narrow {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .search-swap {
        align-self: center;
        transform: rotate(90deg);
        margin: 0;
    }

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

    .ticket-card-body { padding: 1.25rem; }

    .ticket-route { flex-direction: column; gap: 0.5rem; }

    .ticket-route-line { width: 100%; }

    .ticket-route-origin,
    .ticket-route-dest {
        align-items: center;
        width: 100%;
    }

    .ticket-times { flex-direction: column; align-items: center; text-align: center; }
    .ticket-time-block-right { align-items: center; }

    .ticket-seats { flex-direction: column; gap: 0.75rem; }

    .ticket-prices { flex-direction: column; }

    .ticket-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-bottom-left { text-align: center; }

    .ticket-book-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .search-form-row { gap: 0.5rem; }
    .search-field { min-width: 120px; }
    .search-field-from,
    .search-field-to { min-width: 140px; }
    .search-btn { padding: 0.75rem 1.25rem; }
}

/* ===== CUSTOMER AREA ===== */

/* ── Shared ── */
.capitalize { text-transform: capitalize; }

/* Ticket status badges (small) */
.ts-active { background: rgba(5,150,101,0.12); color: #059669; border: 1px solid rgba(5,150,101,0.15); }
.ts-used { background: rgba(59,130,246,0.12); color: #2563EB; border: 1px solid rgba(59,130,246,0.15); }
.ts-inactive { background: rgba(107,114,128,0.12); color: #6B7280; border: 1px solid rgba(107,114,128,0.15); }

/* Booking status badges */
.bs-green { background: rgba(5,150,101,0.12); color: #059669; border: 1px solid rgba(5,150,101,0.15); }
.bs-yellow { background: rgba(217,119,6,0.12); color: #D97706; border: 1px solid rgba(217,119,6,0.15); }
.bs-blue { background: rgba(37,99,235,0.12); color: #2563EB; border: 1px solid rgba(37,99,235,0.15); }
.bs-red { background: rgba(220,38,38,0.12); color: #DC2626; border: 1px solid rgba(220,38,38,0.15); }
.bs-orange { background: rgba(234,88,12,0.12); color: #EA580C; border: 1px solid rgba(234,88,12,0.15); }
.bs-gray { background: rgba(107,114,128,0.12); color: #6B7280; border: 1px solid rgba(107,114,128,0.15); }

/* ── E-TICKET VIEW ── */
.ticket-page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.ticket-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s;
}

.ticket-back svg { width: 18px; height: 18px; }

.ticket-back:hover { color: #1E3A8A; }

.ticket-status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
}

.ticket-boarding-pass {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Header */
.ticket-pass-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
}

.ticket-pass-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ticket-pass-vessel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ticket-pass-ship { width: 28px; height: 28px; color: #60A5FA; flex-shrink: 0; }

.ticket-pass-vessel-name {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.ticket-pass-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #93C5FD;
    background: rgba(59,130,246,0.2);
    border-radius: 4px;
    margin-top: 0.125rem;
}

.ticket-pass-code {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.06em;
}

.ticket-pass-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ticket-pass-qr canvas,
.ticket-pass-qr img,
.ticket-pass-qr svg {
    display: block;
    width: 100px !important;
    height: 100px !important;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}

.ticket-pass-qr-label {
    font-size: 0.5625rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    text-align: center;
    max-width: 100px;
    word-break: break-all;
}

/* Route */
.ticket-pass-route {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ticket-pass-point { display: flex; flex-direction: column; gap: 0.125rem; flex-shrink: 0; }
.ticket-pass-point-right { align-items: flex-end; }

.ticket-pass-point-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-pass-point-port {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
}

.ticket-pass-point-flag { font-size: 1rem; line-height: 1; }

.ticket-pass-connect {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.ticket-pass-line {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.25rem;
}

.ticket-pass-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
}

.ticket-pass-bar {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #93C5FD);
}

.ticket-pass-arrow-head {
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #93C5FD;
}

.ticket-pass-duration {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9CA3AF;
}

.ticket-pass-duration svg { width: 12px; height: 12px; }

/* Times */
.ticket-pass-times {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ticket-pass-time-block { display: flex; flex-direction: column; }
.ticket-pass-time-block-right { align-items: flex-end; }

.ticket-pass-time-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-pass-time-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ticket-pass-time-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    margin-top: 0.125rem;
}

/* Passenger */
.ticket-pass-passenger {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ticket-pass-passenger-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.ticket-pass-passenger-item { display: flex; flex-direction: column; gap: 0.125rem; }

.ticket-pass-info-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-pass-info-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0F172A;
}

.ticket-pass-info-sm { font-size: 0.75rem; word-break: break-all; }

/* Payment */
.ticket-pass-payment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: #F9FAFB;
}

.ticket-pass-payment-item { display: flex; flex-direction: column; gap: 0.125rem; }

/* Actions */
.ticket-pass-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ticket-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.ticket-action-btn svg { width: 18px; height: 18px; }

.ticket-action-download {
    color: #fff;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}

.ticket-action-download:hover {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    box-shadow: 0 6px 20px rgba(37,99,235,0.35);
    transform: translateY(-1px);
    color: #fff;
}

.ticket-action-back {
    color: #374151;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
}

.ticket-action-back:hover {
    background: #F3F4F6;
    color: #1E3A8A;
}

/* Notice */
.ticket-pass-notice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    font-size: 0.8125rem;
    color: #6B7280;
    background: #F9FAFB;
}

.ticket-pass-notice svg {
    width: 18px;
    height: 18px;
    color: #3B82F6;
    flex-shrink: 0;
}

/* ── MY BOOKINGS ── */

.bookings-page { width: 100%; }

.bookings-header { margin-bottom: 1.5rem; }

.bookings-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.bookings-sub {
    font-size: 0.875rem;
    color: #6B7280;
    margin-top: 0.25rem;
}

/* Tabs */
.bookings-tabs {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E7EB;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bookings-tab {
    display: inline-flex;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6B7280;
    background: transparent;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.bookings-tab:hover { color: #1E3A8A; background: #F3F4F6; }

.bookings-tab-active {
    color: #fff;
    background: #1E3A8A;
}

.bookings-tab-active:hover { color: #fff; background: #1E3A8A; }

.bookings-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

/* Booking card */
.booking-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 1.25rem;
    transition: all 0.25s;
}

.booking-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-color: rgba(30,58,138,0.08);
}

.booking-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.booking-card-code { display: flex; flex-direction: column; }
.booking-code-label { font-size: 0.625rem; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.06em; }
.booking-code-value { font-size: 0.9375rem; font-weight: 700; color: #0F172A; letter-spacing: -0.01em; }

.booking-card-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
}

/* Route mini */
.booking-card-route {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    margin-bottom: 0.75rem;
}

.booking-card-route-point {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.booking-card-route-point-right { margin-left: auto; }

.booking-card-port {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
}

.booking-card-flag { font-size: 0.875rem; line-height: 1; }

.booking-card-route-line {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.5rem;
}

.booking-card-line-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
}

.booking-card-line-bar {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #3B82F6, #93C5FD);
}

/* Info row */
.booking-card-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.booking-card-info-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6B7280;
}

.booking-card-info-item svg { width: 14px; height: 14px; color: #9CA3AF; flex-shrink: 0; }

.booking-card-info-amount {
    margin-left: auto;
    font-weight: 700;
    color: #0F172A;
    font-size: 0.9375rem;
}

/* Bottom */
.booking-card-bottom { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(0,0,0,0.04); }

.booking-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1E3A8A;
    text-decoration: none;
    transition: gap 0.2s;
}

.booking-card-btn svg { width: 16px; height: 16px; }

.booking-card-btn:hover { gap: 0.75rem; color: #2563EB; }

/* Empty */
.bookings-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.04);
}

.bookings-empty svg {
    width: 48px; height: 48px;
    color: #D1D5DB;
    margin-bottom: 1rem;
}

.bookings-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.375rem;
}

.bookings-empty-desc {
    font-size: 0.875rem;
    color: #9CA3AF;
    margin-bottom: 1.25rem;
}

.bookings-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #2563EB);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.bookings-empty-btn:hover {
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
    transform: translateY(-1px);
    color: #fff;
}

/* Pagination */
.bookings-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.bookings-pagination nav[role="navigation"] {
    display: flex;
    gap: 0.375rem;
}

.bookings-pagination nav[role="navigation"] a,
.bookings-pagination nav[role="navigation"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    color: #6B7280;
    background: #fff;
    border: 1px solid #E5E7EB;
    transition: all 0.15s;
}

.bookings-pagination nav[role="navigation"] a:hover {
    color: #1E3A8A;
    border-color: #93C5FD;
    background: #EFF6FF;
}

.bookings-pagination nav[role="navigation"] span[aria-current="page"] {
    color: #fff;
    background: #1E3A8A;
    border-color: #1E3A8A;
}

/* ── BOOKING DETAIL ── */

.detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s;
}

.detail-back svg { width: 18px; height: 18px; }
.detail-back:hover { color: #1E3A8A; }

.detail-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
}

.detail-hero {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(15,23,42,0.2);
}

.detail-hero-code {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.detail-hero-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.5rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.detail-card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: #F9FAFB;
}

.detail-card-header svg { width: 20px; height: 20px; color: #1E3A8A; flex-shrink: 0; }

.detail-card-body { padding: 1rem 1.25rem; }

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    gap: 1rem;
}

.detail-row + .detail-row { border-top: 1px solid rgba(0,0,0,0.03); }

.detail-row-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.detail-row-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0F172A;
    text-align: right;
}

.detail-row-amount {
    font-size: 1rem;
    font-weight: 800;
    color: #059669;
}

.detail-divider {
    height: 1px;
    background: rgba(0,0,0,0.04);
    margin: 0.5rem 0;
}

/* Passengers */
.detail-passengers { display: flex; flex-direction: column; gap: 0.75rem; }

.detail-passenger-card {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.detail-passenger-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.detail-passenger-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #F9FAFB;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.detail-passenger-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    flex-shrink: 0;
}

.detail-passenger-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.detail-passenger-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
}

.detail-passenger-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
}

.detail-passenger-ticket-status {
    padding: 0.1875rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
}

.detail-passenger-body {
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.detail-passenger-info { display: flex; flex-direction: column; gap: 0.125rem; }

.detail-passenger-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0,0,0,0.04);
    background: #FAFAFA;
}

.detail-passenger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #2563EB);
    box-shadow: 0 2px 8px rgba(30,58,138,0.15);
}

.detail-passenger-btn svg { width: 14px; height: 14px; }

.detail-passenger-btn:hover {
    box-shadow: 0 4px 16px rgba(30,58,138,0.25);
    transform: translateY(-1px);
    color: #fff;
}

.detail-passenger-btn-secondary {
    color: #374151;
    background: #fff;
    border: 1px solid #E5E7EB;
    box-shadow: none;
}

.detail-passenger-btn-secondary:hover {
    background: #F3F4F6;
    color: #1E3A8A;
    box-shadow: none;
    transform: none;
}

/* Refund */
.detail-refund-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #EFF6FF;
    border: 1px solid rgba(37,99,235,0.1);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.detail-refund-card-orange {
    background: #FFF7ED;
    border-color: rgba(234,88,12,0.12);
}

.detail-refund-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.detail-refund-icon svg { width: 22px; height: 22px; color: #3B82F6; }

.detail-refund-body { flex: 1; }

.detail-refund-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.375rem;
}

.detail-refund-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8125rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.detail-refund-info {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.detail-refund-reason {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-bottom: 0.25rem;
}

.detail-refund-reason span { font-weight: 600; color: #374151; }

.detail-refund-notice {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 0.5rem;
    font-style: italic;
}

.detail-refund-form { display: flex; flex-direction: column; gap: 0.75rem; }

.detail-refund-textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #0F172A;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.detail-refund-textarea:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.detail-refund-textarea::placeholder { color: #9CA3AF; }

.detail-refund-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: #EA580C;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.detail-refund-btn svg { width: 18px; height: 18px; }

.detail-refund-btn:hover {
    background: #C2410C;
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
    transform: translateY(-1px);
}

/* Bottom actions */
.detail-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
}

.detail-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.detail-action-btn svg { width: 18px; height: 18px; }

.detail-action-outline {
    color: #374151;
    background: #fff;
    border: 1px solid #E5E7EB;
}

.detail-action-outline:hover {
    background: #F3F4F6;
    color: #1E3A8A;
}

/* ── RESPONSIVE CUSTOMER AREA ── */

@media (max-width: 768px) {
    .ticket-pass-header { flex-direction: column; align-items: stretch; }
    .ticket-pass-qr { align-self: center; }
    .ticket-pass-route { flex-direction: column; gap: 0.5rem; }
    .ticket-pass-connect { width: 100%; }
    .ticket-pass-line { width: 100%; }
    .ticket-pass-times { flex-direction: column; align-items: center; text-align: center; }
    .ticket-pass-time-block-right { align-items: center; }
    .ticket-pass-passenger-grid { grid-template-columns: 1fr; }
    .ticket-pass-payment { grid-template-columns: 1fr; }
    .ticket-pass-actions { flex-direction: column; }

    .detail-grid { grid-template-columns: 1fr; }
    .detail-hero { padding: 1.5rem; }
    .detail-hero-code { font-size: 1.375rem; }
    .detail-passenger-body { grid-template-columns: 1fr; }
    .detail-passenger-actions { flex-direction: column; }
    .detail-refund-card { flex-direction: column; }

    .booking-card-info { flex-direction: column; align-items: flex-start; }
    .booking-card-info-amount { margin-left: 0; }
    .booking-card-route { flex-wrap: wrap; }
}

/* ===== BOARDING SCANNER ===== */

.scanner-page { width: 100%; max-width: 800px; margin: 0 auto; }

.scanner-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scanner-card { overflow: hidden; }

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.scanner-controls {
    display: flex;
    gap: 0.5rem;
}

.scanner-controls .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
}

.scanner-viewfinder {
    position: relative;
}

#scanner-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    aspect-ratio: 4/3;
}

#scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scanner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scanner-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border: 2px solid rgba(59, 130, 246, 0.6);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}

.scan-status {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: #6B7280;
}

.manual-card { margin-top: 0; }

/* Result Overlay */
.result-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.result-dialog {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

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

.result-success { border: 2px solid #86EFAC; }
.result-error { border: 2px solid #FECACA; }

.result-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.result-icon svg { width: 32px; height: 32px; }

.result-icon-success { background: #DCFCE7; color: #16A34A; }
.result-icon-error { background: #FEE2E2; color: #DC2626; }

.result-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.text-success { color: #166534; }
.text-error { color: #991B1B; }

.result-message {
    font-size: 0.9375rem;
    color: #6B7280;
    margin-bottom: 1.25rem;
}

.result-details {
    text-align: left;
    background: #F9FAFB;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1.25rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}

.detail-label { color: #9CA3AF; font-weight: 500; }
.detail-value { color: #111827; font-weight: 600; }
.detail-divider { height: 1px; background: #E5E7EB; margin: 0.375rem 0; }

@media (max-width: 640px) {
    .result-dialog { max-width: 100%; margin: 1rem; }
    #scanner-container { max-width: 100%; }
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */

/* ── Auth pages fix (login/register was cut off on mobile) ── */
@media (max-width: 640px) {
    .w-auth {
        width: 100%;
        max-width: 100%;
    }
    .card-lg {
        padding: 1.5rem 1.25rem;
    }
    .flex-center {
        padding: 1rem 0;
    }
}

/* ── Profiles page ── */
.profiles-page {
    width: 100%;
}

.profiles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.profiles-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.profiles-sub {
    font-size: 0.875rem;
    color: #6B7280;
    margin-top: 0.25rem;
}

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .profiles-grid {
        grid-template-columns: 1fr;
    }
    .profiles-header {
        flex-direction: column;
        align-items: stretch;
    }
    .profiles-header .btn {
        width: 100%;
        justify-content: center;
    }
}

.profile-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.profile-card-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    flex-shrink: 0;
}

.profile-card-body {
    flex: 1;
}

.profile-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
}

.profile-card-rel {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #3B82F6;
    background: rgba(59,130,246,0.1);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.profile-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #6B7280;
}

.profile-card-actions {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.btn-danger {
    background: #EF4444;
    color: #fff;
}

.btn-danger:hover {
    background: #DC2626;
}

/* ── Modal ── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6B7280;
    padding: 0.25rem;
    line-height: 1;
}

@media (max-width: 640px) {
    .modal-content {
        margin: 0 0.5rem;
        max-height: 85vh;
    }
    .modal {
        padding: 0.5rem;
    }
}

/* ── Form row (used in profiles) ── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Detail page mobile ── */
@media (max-width: 640px) {
    .detail-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .detail-card-header {
        padding: 0.75rem 1rem;
    }
    .detail-card-body {
        padding: 0.75rem 1rem;
    }
    .detail-actions {
        flex-direction: column;
    }
    .detail-action-btn {
        justify-content: center;
    }
    .detail-hero {
        padding: 1.25rem;
    }
}

/* ── Booking card mobile ── */
@media (max-width: 640px) {
    .booking-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ── Payment page mobile ── */
@media (max-width: 640px) {
    .flex.items-center.gap-3.border.rounded.p-3 {
        padding: 0.75rem;
    }
}

/* ── Deportation pages mobile ── */
@media (max-width: 640px) {
    .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Reports page (admin) mobile ── */
@media (max-width: 768px) {
    .reports-header {
        flex-direction: column;
        align-items: stretch;
    }
    .reports-export-form {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
    .reports-export-form select,
    .reports-export-form button {
        width: 100%;
    }
    .reports-table-wrap {
        margin: 0 -0.75rem;
        border-radius: 8px;
    }
}

/* ── Detail page wrapper ── */
.detail-page {
    width: 100%;
}

/* ── General small-screen improvements ── */
@media (max-width: 640px) {
    .main-padded {
        padding: 1rem 0;
    }
    .container {
        padding: 0 0.75rem;
    }
}