/* Frontend layout */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon { font-variation-settings: 'FILL' 1; }
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.custom-shadow-sm { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); }

/* Booking flow */
.custom-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }

/* Search results */
.trip-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 61, 155, 0.1);
}
.route-line {
    background: linear-gradient(90deg, #003d9b 0%, #c3c6d6 50%, #ff5722 100%);
}
.route-dot-start { box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.12); }
.route-dot-end { box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12); }

/* Seat selection */
.seat-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.seat { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.seat:not(.booked):hover { transform: translateY(-2px); }

.seat-page-summary {
    position: sticky;
    top: 4rem;
    z-index: 30;
}
.seat-page-sidebar {
    position: sticky;
    top: calc(4rem + var(--seat-summary-height, 8.5rem) + 1rem);
    z-index: 20;
    align-self: start;
}
@media (max-width: 1023px) {
    .seat-page-summary,
    .seat-page-sidebar {
        position: static;
        top: auto;
    }
}

/* Payment */
.payment-card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }
.payment-method-option input:checked + .payment-method-card {
    border-color: #003d9b;
    background-color: rgba(218, 226, 255, 0.35);
}

/* Confirmation */
.success-animation { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scaleIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Digital ticket */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html, body {
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body > header,
    body > footer,
    body > div.fixed,
    .no-print {
        display: none !important;
    }

    .flex-grow {
        padding-top: 0 !important;
    }

    main.ticket-page {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ticket-card {
        box-shadow: none !important;
        border: 1px solid #c3c6d6 !important;
        border-radius: 8px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .ticket-jagged-edge::after {
        display: none;
    }
}
.ticket-jagged-edge { position: relative; }
.ticket-jagged-edge::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background-image: radial-gradient(circle, transparent 70%, #ffffff 71%);
    background-size: 20px 20px;
    background-position: 0 -10px;
}

/* CMS content */
.cms-content h1, .cms-content h2, .cms-content h3 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--tw-prose-headings, #191c1e); }
.cms-content h1 { font-size: 1.875rem; }
.cms-content h2 { font-size: 1.5rem; }
.cms-content h3 { font-size: 1.25rem; }
.cms-content p { margin-bottom: 1em; line-height: 1.75; }
.cms-content ul, .cms-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.cms-content ul { list-style-type: disc; }
.cms-content ol { list-style-type: decimal; }
.cms-content a { color: #003d9b; text-decoration: underline; }
.cms-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5em 0; }
.cms-content blockquote { border-left: 4px solid #003d9b; padding-left: 1em; margin: 1.5em 0; font-style: italic; color: #434654; }
.cms-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.cms-content th, .cms-content td { border: 1px solid #c3c6d6; padding: 0.5em 1em; text-align: left; }
.cms-content th { background: #edeef0; font-weight: 600; }