/* colors.css/fonts.css/shared-ui.css used to be @import'd here - all moved
   to their own cache-busted <link> tags in default-layout.php/
   not-found-layout.php instead (see those files' comments), since a plain
   CSS @import can't append a "?t=" query string and browsers could keep
   serving a stale cached copy of them indefinitely across deploys. */

/* Color/design tokens (--primary-color, --ink, --shadow-*, etc.) now live
   in colors.css, imported above. */

/* Cross-document View Transitions were tried here (slide/fade the page,
   keep the header static) and removed after repeated live-recording
   review - the browser's cross-document transition timing kept producing
   visible artifacts (header ghosting, then a brief header blank-flash at
   the transition's start) that couldn't be fully eliminated through CSS
   alone. Removed entirely rather than kept half-working: navigation is now
   a plain instant page load, same as before this was ever added. If this
   is revisited, budget time for real devtools/live-browser debugging
   rather than only screen-recording analysis - several of the timing
   issues only showed up 1-2 video frames at a time. */

body,
pre {

    background: var(--surface-muted);
  color: var(--ink);
  font-family: FiraSans, Krasar, sans-serif;
  font-size: 96%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.25;
    padding-top: 0;
}

.navbar.navbar-expand-md {
    z-index: 1;
    padding: 0;
    background: var(--primary-color);
}

h6,
.h6 {
    font-size: 1.2rem;
}

#qrcode img {
    border: 1px solid #fff;
    border-radius: 4px;
    margin: 0 auto;
    padding: 8px;
}

.datepicker {
    border-radius: 12px !important;
}

.me-n9 {
    margin-right: -11rem !important;
}

.mt-n7 {
    margin-top: -4rem !important;
}

.top-menu::before {
    content: '';
    position: absolute;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, transparent, #c1c1c1, transparent);
}

.navbar-nav .nav-link {
    padding: 8px 12px;
    text-transform: uppercase;
    position: relative;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.navbar-nav .nav-link.active {
    color: #fff;
}

.navbar-nav .nav-link.active::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: 4px;
    background: #ffd700;
    z-index: 100;
    border-radius: 4px;
    width: 100%;
    bottom: -16px;
}

.navbar-nav .nav-link .flex-column {
    align-items: center;
    justify-content: center;
}

.fs-1 {
    font-size: 0.812rem;
}

.title-gradient {
    background: linear-gradient(90deg, var(--primary-color) 0%, #6dbb2a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.6;
}

.btn.btn-lg,
.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
    height: calc(3.8rem + 2px);
}

.text-small {
    color: #777;
    font-size: 14px;
}

/* The hero search form's actual .form-floating/label/img geometry and
   Material-style skin live together in one place: the "Search bar" section
   further down this file (search ".main .lead .form-floating" there). This
   used to have its own separate, older copy of the same selectors with
   conflicting values (margin-bottom:1rem vs that section's !important 0,
   margin-left:36px positioning vs that section's absolute+left:3.15rem,
   etc) - dead weight since the later rules always won the cascade, removed
   rather than left as a confusing duplicate. */

.list-inline-item:not(:last-child) {
    margin: 0;
}

.dropdown-menu {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(8, 27, 55, 0.2);
}

.main {
    padding-bottom: 0;
}

.main .lead {
    background: var(--primary-color);
    position: relative;
}

.main .lead h1 {
    font-size: 1.5rem;
    font-weight: 400;
}

.btn {
    border-radius: 6px;
}

.main .lead .btn.disabled,
.main .lead .btn:disabled,
.main .lead fieldset:disabled .btn {
    opacity: 0.55;
}

input[readonly] {
    cursor: pointer;
}

.text-success {
    color: var(--primary-color);
}

/* ── Terms & conditions page (about/terms-and-conditions.php) ──────────── */
.terms-card {
    background: var(--surface);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.06);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    width: 100%;
}

/* .terms-content wraps a <ul> returned directly from the get_condition API
   (see About::term_and_condition()) - targeted generically by tag rather
   than any specific class the API happens to output today.
   Two-column grid on wider screens: each rule is a short one-liner, so a
   capped single-column box just left more empty space per row as the box
   got wider - a grid actually uses the extra width instead of stretching
   whitespace. */
.terms-content ul {
    column-gap: 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .terms-content ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

.terms-content li {
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.06);
    color: var(--ink-soft, var(--ink-soft));
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.75rem 0 0.75rem 1.9rem;
    position: relative;
}

.terms-content li::before {
    color: var(--primary-color);
    content: "\2713";
    font-weight: 900;
    left: 0;
    position: absolute;
    top: 0.75rem;
}

.terms-disclaimer {
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid rgba(234, 88, 12, 0.2);
    border-radius: 14px;
    display: flex;
    gap: 0.65rem;
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
}

.terms-disclaimer i {
    color: #ea580c;
    font-size: 1.05rem;
    margin-top: 0.15rem;
}

.terms-disclaimer p {
    color: #9a3412;
    font-size: 0.86rem;
    margin: 0;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.unlisted {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.carousel-item img,
.carousel-inner {
    border: 0;
    border-radius: 12px;
    box-shadow: 5px 5px 20px 10px #ddd;
}

h2.title {
    color: #202124;
    font-size: 1.62rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.75rem;
}

.blockquote {
    background-color: #31a50552;
    border-radius: 12px;
    font-size: 16px;
    padding: 18px;
}

.blockquote h5 {
    font-size: 16px;
}

.text-info {
    color: var(--info-color);
}

.sub-title {
    align-items: center;
    color: #555;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
}

.swiper-container {
    border-radius: 4px;
    height: 100%;
    width: 100%;
}

.h-20px {
    height: 20px !important;
}

.h-30px {
    height: 30px !important;
}

.h-40px {
    height: 40px !important;
}

.h-50px {
    height: 50px !important;
}

.h-60px {
    height: 60px !important;
}

.h-150px {
    height: 150px !important;
}

.h-200px {
    height: 200px !important;
}

.h-250px {
    height: 250px !important;
}

.h-300px {
    height: 300px !important;
}

.h-400px {
    height: 400px !important;
}

.h-500px {
    height: 500px !important;
}

.h-600px {
    height: 600px !important;
}

.h-700px {
    height: 700px !important;
}

.h-750px {
    height: 750px !important;
}

.swiper-slide {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

.mb-n5 {
    margin-bottom: -2.5rem !important;
}

.mb-n6 {
    margin-bottom: -3.5rem !important;
}

.mb-n7 {
    margin-bottom: -4rem !important;
}

.mb-n8 {
    margin-bottom: -8rem !important;
}

.mb-n9 {
    margin-bottom: -11rem !important;
}

.ms-n1 {
    margin-left: -0.25rem !important;
}

.ms-n2 {
    margin-left: -0.5rem !important;
}

.ms-n3 {
    margin-left: -1rem !important;
}

.ms-n4 {
    margin-left: -1.6rem !important;
}

.ms-n5 {
    margin-left: -2.5rem !important;
}

.ms-n6 {
    margin-left: -3.5rem !important;
}

.ms-n7 {
    margin-left: -4rem !important;
}

.ms-n8 {
    margin-left: -8rem !important;
}

.ms-n9 {
    margin-left: -11rem !important;
}

.swiper-slide img {
    border-radius: 12px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bg-grey {
    background-color: #f7f7f7;
}

.card {
    border: 0;
    border-radius: 0.5rem;
}

.card.card-schedule {
    background: #ffffff;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.seat {
    align-items: center;
    color: #444;
    display: flex;
    font-weight: 700;
    height: 68px;
    justify-content: center;
    position: relative;
    width: 68px;
    transition: transform 0.2s var(--ease);
}

/* Was .seat:hover with no scoping - lifted every seat on hover, including
   the driver icon and booked/busy seats that aren't actually clickable,
   implying interactivity where there isn't any. Scoped to .available (the
   only seats select_seats() can act on) so hover only appears where it
   means something. */
.seat.available:hover {
    transform: scale(1.24);
}

.seat i {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-style: normal;
    justify-content: center;
    margin-top: 6px;
}

.seat .seat-gender {
    align-items: center;
    background: #da16d0;
    border: 0;
    border-radius: 100%;
    color: white;
    display: flex;
    font-size: 8px;
    font-weight: 300;
    height: 15px;
    justify-content: center;
    position: absolute;
    right: -7px;
    text-transform: uppercase;
    top: -7px;
    width: 15px;
}

.seat.available {
    background: url(../img/seat-icon/seat_available.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
    color: black;
}

.seat.available[data-name="selected_true"] {
    background: url(../img/seat-icon/seat_booking.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.booked {
    background: url(../img/seat-icon/seat_booked.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.busy {
    background: url(../img/seat-icon/seat_busy.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
    color: white;
}

.seat.selected {
    background: url(../img/seat-icon/seat_selected.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.available[data-night="1"] {
    background: url(../img/seat-icon/sp_seat_available.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
    color: black;
}

.seat.available[data-name="selected_true"][data-night="1"] {
    background: url(../img/seat-icon/sp_seat_booking.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.booked[data-night="1"] {
    background: url(../img/seat-icon/sp_seat_booked.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.busy[data-night="1"] {
    background: url(../img/seat-icon/sp_seat_busy.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.seat.selected[data-night="1"] {
    background: url(../img/seat-icon/sp_seat_selected.png) no-repeat center;
    background-clip: content-box;
    background-size: cover;
}

.driver {
    /* background-size shrunk from cover (fills the full 68px box) to 60% -
       the icon itself renders smaller and centered, without shrinking the
       .seat box it sits in. Keeping the box at the same 68px as every real
       seat matters here: each seat lives in its own independent per-row
       flex wrapper (see schedules/index.php's seat map markup), not a
       shared grid track, so columns only line up across rows because every
       .seat - driver included - has the same footprint. Actually resizing
       the box would throw off that alignment for every row below it. */
    background: url(../img/seat-icon/driving-control.png) no-repeat center;
    background-clip: content-box;
    background-size: 60%;
    opacity: 1;
}

[name="chSeat"] {
    cursor: pointer;
    height: 1rem;
    margin-top: -5px;
    width: 1rem;
}

[name="chSeat"]:hover {
    opacity: 0.6;
}

hr {
    border-top: 1px solid;
    margin: 8px 0;
    opacity: 0.2;
}


.sub-head-title {
    border-left: 4px solid #ffd700;
    border-radius: 0;
    font-size: 22px;
    font-weight: 400;
    padding-left: 16px;
}

h1 {
    font-size: 22px;
}

.sub-title .circle {
    align-items: center;
    background: var(--secondary-color);
    border-radius: 100%;
    color: #fff;
    display: flex;
    float: left;
    font-size: 14px;
    height: 35px;
    justify-content: center;
    margin-right: 8px;
    margin-top: -5px;
    width: 35px;
}

.form-wrap {
    margin-bottom: 2rem;
}

.p-2 {
    padding: 0.125rem !important;
}

.form-text p {
    font-size: 14px;
}

.payment-item {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 10px;
    position: relative;
}

.payment-item.selected {
    background-color: #f6fffb;
    border: 1px solid var(--primary-color);
}

.payment-item .media img {
    /*border-radius: 4px;*/
    height: 28px;
}

.payment-item .media-body img {
    height: 14px;
}

.payment-item .media-body h5 {
    color: #222;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
}

.payment-item .media-body p {
    color: #666;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.payment-item .trailing-wrap {
    position: absolute;
    right: 10px;
    top: 10px;
}

.radio {
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 10px;
    position: relative;
}

.radio__input {
    height: 20px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 4px;
    width: 36px;
    z-index: 0;
}

.radio__label {
    cursor: pointer;
    display: block;
    padding: 0 0 0 24px;
}

.radio__label:before {
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.54);
    border-radius: 14px;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    top: 4px;
    transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: 16px;
    z-index: 1;
}

.radio__label:after {
    background-color: var(--primary-color);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 4px;
    position: absolute;
    top: 8px;
    transform: scale(0, 0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: 8px;
    z-index: 2;
}

.radio__input:checked+.radio__label:before {
    border-color: var(--primary-color);
}

.radio__input:checked+.radio__label:after {
    transform: scale(1, 1);
}

/* Was a small 28x28 box centered (via no top/left + margin-top:-5px) inside
   the much bigger 68x68 .seat icon - only the middle of each seat was
   actually clickable, with a real dead margin around the edges where taps
   did nothing. inset:0 stretches this invisible hit target to the seat's
   full size (position:relative on .seat above anchors it there) so the
   entire visible seat icon is clickable, not just its center. */
.checkbox {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.destination-block .card-body {
    background: #f6f6f6;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.destination-block .card-body .card-title {
    color: #222;
}

.bg-success {
    background: var(--primary-color) !important;
}

.figure-caption {
    font-size: 14px;
}

.rounded {
    border-radius: 12px !important;
}

.__loading {
    background: var(--primary-color);
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(8, 27, 55, 0.2);
    color: white;
    font-weight: bold;
    left: 50%;
    letter-spacing: 1.2px;
    margin-left: -50px;
    min-width: min-content;
    padding: 5px;
    position: fixed;
    text-transform: capitalize;
    top: 50%;
    z-index: 9999;
}

.no-data {
    height: 20vh;
    justify-content: center;
}

.input-group-text {
    border: none;
    background-color: transparent;
    border-radius: 22px;
}

.trip-summary {
    background-color: transparent;
}

.trip-summary .table {
    font-size: 90%;
}

.list-group-flush {
    border: 2px dashed #ddd;
    border-radius: 4px;
}

.list-group-flush>.list-group-item {
    border-style: dashed;
    padding: 8px;
}


.skeleton {
    animation: skeleton-loading 0.36s linear infinite alternate;
    opacity: 0.7;
}

.qrcode {
    align-items: center;
    background: #fff;
    justify-content: center;
    margin: 0 auto;
    max-width: 300px;
    width: auto;
}

.loader {
    -webkit-animation: spin 0.52s linear infinite;
    animation: spin 0.52s linear infinite;
    border: 4px solid #fff3cd;
    border-radius: 50%;
    border-top: 4px solid #ff6e26;
    height: 50px;
    width: 50px;
}

/* legacy top bar rule removed — see .top-bar below */

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

    100% {
        transform: rotate(360deg);
    }
}

.loading {
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    position: absolute;
    top: 50%;
}

@keyframes skl-wave {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }

    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

.pax-form {
    background: white;
    padding: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    /*box-shadow: 0 0 8px 2px rgba(59, 59, 59, 0.05);*/
}

/* .pax-form .form-control's box/pill look is superseded by the Material
   underline treatment in the "Material form inputs" section below. */
.pax-form .form-control {
    font-size: 1.1rem;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-left: 0;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    cursor: not-allowed;
    pointer-events: inherit;
}

.btn:disabled.btn-success {
    opacity: 1;
    font-weight: bold;
    background: #979797;
    border: none;
}

.text-end {
    text-align: right !important;
}

ul.list {
    padding-left: 15px;
}

.modal-footer,
.modal-header {
    padding: 8px 16px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 400;
}

.modal-footer i.bi {
    font-size: 12px;
}

.modal-dialog-scrollable .modal-content {
    transition: all 0.2s ease;
}

.card-header {
    background-color: #ebf0f4;
    background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
    background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
    border-color: #ccd1d5;
    border-color: rgba(31, 35, 40, 0.15);
    padding: 12px 16px;
}

.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}

.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}

.me-n4 {
    margin-right: -1.6rem !important;
}

.mt-n3 {
    margin-top: -1rem !important;
}

.mt-n8 {
    margin-top: -8rem !important;
}

.fill-mode {
    fill: #fff !important;
}

.end-0 {
    right: 0 !important;
}

.top-0 {
    top: 0 !important;
}

footer {
    color: #c4c5c7;
}

img {
    height: auto;
    max-width: 100%;
}

footer h6 {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
}

.nav-link:hover,
.nav-link:focus {
    color: white;
    opacity: 0.8;
}

footer .nav-item .nav-link {
    color: #c4c5c7;
    font-size: 14px;
    padding: 2px 0;
}

#CDSWIDEXC {
    border-radius: 4px;
    font-family: "OpenSans", "Krasar", "KantumruyPro", Roboto, Arial, sans-serif;
    font-size: 14px;
    margin: 0 !important;
    width: inherit;
}

.text-body {
    color: rgb(222 226 230) !important;
}

.text-success {
    color: var(--primary-color) !important;
}

.btn-success {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.badge.badge-outline-success {
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    border-color: var(--primary-dark-color);
}

.btn-icon {
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    -ms-flex-negative: 0;
    -ms-flex-pack: center;
    flex-shrink: 0;
    height: 1.8rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 1.8rem;
}

.btn-icon.btn-xs {
    background: #515255;
    border-color: #515255;
    color: white;
    font-size: 0.8rem;
    height: 2rem;
    width: 2rem;
}

.btn-light {
    background: #3c3e41;
    border-color: #3c3e41;
    color: #fff;
}

.btn-light.active,
.btn-light:active,
.btn-light:focus,
.btn-light:hover {
    background: #3c3e41;
    border-color: #3c3e41;
    color: #fff;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #333;
    border-radius: 0.5rem;
    padding: 8px;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    border-radius: 8px;
    color: #c5c6cc;
}

[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.bg-map {
    background-image: url(../img/map.svg);
    background-position: center;
    background-size: cover;
}

/* Return-trip page's "pick a return schedule" heads-up (schedules/
   return-trip.php) - a small, non-blocking popup card, not the site's
   custom-notify toast. No backdrop/overlay and no close button on purpose:
   it self-dismisses after 3s (SchedulesReturnTripCtrlImpl.init() flips
   showReturnHint back off via $timeout), so it never needs manual
   dismissal. Own keyframe rather than reusing .popup-app-card's
   popupEnter - that one's final frame is a bare "transform: scale(1)",
   which would wipe out the translateX(-50%) this needs for centering once
   the animation finished. ng-if removes it from the DOM on exit rather
   than needing a separate fade-out animation. */
.return-hint-popup {
    align-items: flex-start;
    animation: returnHintPopupEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    display: flex;
    gap: 0.85rem;
    left: 50%;
    max-width: min(calc(100vw - 2rem), 420px);
    padding: 1.1rem 1.35rem;
    position: fixed;
    top: 1.25rem;
    transform: translateX(-50%);
    z-index: 1090;
}

.return-hint-popup-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.16);
    border-radius: 50%;
    color: var(--primary-light);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.3rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.return-hint-popup-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.return-hint-popup-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

@keyframes returnHintPopupEnter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.popup {
    align-items: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 12, 18, 0.62);
    display: flex;
    height: 100dvh;
    inset: 0;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    position: fixed;
    width: 100%;
    z-index: 9999;
}

/* ── App download popup card ───────────────────────────────────────── */
/* Concept B - dark premium: fixed dark card regardless of the site's own
   light/dark theme toggle (unlike var(--ink)/var(--ink-muted), which flip
   with that toggle and would go dark-on-dark here) - text colors below are
   intentionally hardcoded light tones for that reason, not a shortcut. */
.popup-app-card {
    align-items: center;
    animation: popupEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    background: radial-gradient(circle at 20% 0%, #1d3122 0%, #101d15 60%);
    border: 1px solid rgba(132, 202, 72, 0.18);
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 720px;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem);
    position: relative;
    width: min(92vw, 720px);
}

.popup-app-card::before {
    background: radial-gradient(circle, rgba(132, 202, 72, 0.28) 0, transparent 70%);
    content: '';
    height: 380px;
    pointer-events: none;
    position: absolute;
    right: -120px;
    top: -160px;
    width: 380px;
}

.popup-app-body {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.popup-app-eyebrow {
    align-items: center;
    color: var(--primary-light);
    display: flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.45rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.popup-app-title {
    color: #f4f8f2;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 0 0 0.75rem;
    text-transform: none;
}

.popup-app-sub {
    color: #9fb0a3;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    max-width: 360px;
}

.popup-app-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.popup-store-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    display: inline-flex;
    padding: 0.5rem 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.popup-store-link:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.popup-store-link img {
    display: block;
    height: 30px;
    width: auto;
}

.popup-app-qr-panel {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(132, 202, 72, 0.25);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.popup-app-qr-img {
    background: #ffffff;
    border-radius: 14px;
    display: block;
    padding: 0.5rem;
    width: 130px;
}

.popup-app-qr-label {
    color: var(--primary-light);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

/* Close button */
.popup-close-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #cbd5c9;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    height: 38px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    width: 38px;
    z-index: 10;
}

.popup-close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    transform: rotate(90deg);
}

@keyframes popupEnter {
    from { transform: translateY(14px) scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* MODAL ENTER */
.modal.fade .modal-dialog {
    transform: translateY(80px) scale(0.95);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, filter 0.35s ease;
}

.modal.fade.show .modal-dialog {
    /* Was translateY(0) scale(1) - visually identical to no transform, but
       any non-"none" transform (even this identity one) makes .modal-dialog
       a new containing block for position:fixed descendants. That broke the
       mobile bottom-sheet rule on .sch-selection-panel (position:fixed;
       bottom:0 in the seat-selection modal), which ended up anchored to
       this centered, height-capped modal box instead of the real viewport -
       floating over the seat map instead of docking to the screen's bottom
       edge. transform: none keeps the same resting look (transitions
       to/from none animate fine) without creating that containing block. */
    transform: none;
    opacity: 1;
}

.modal.fade:not(.show) .modal-dialog {
    transform: translateY(40px) scale(0.2);
    opacity: 0;
}
.modal-backdrop.show {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(36, 36, 78, 0.5);
}

.table-payment thead td{
    background-color: #d8e5de !important;
}

/* .login-form .form-control's box/pill look is superseded by the Material
   underline treatment in the "Material form inputs" section below. */
.login-form .form-control {
    font-size: 1.1rem;
}

.login-form .btn {
    font-size: 1.1rem;
    padding: 8px 16px;
    border-radius: 22px;
    border: none;
}

.login-form .btn-sm {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 22px;
    border: none;
}

.btn-login-primary {
    transition: all 0.2s ease;
    border: none;
}

/* Same fill/border/height as .btn-login-google and .login-modal-input-group
   now - the Google button, email field, and Continue button all share one
   consistent look. Text stays in the brand color (rather than also
   matching exactly) so the primary action is still distinguishable, same
   idea as an outlined button set where only the label color differs.
   Translucent (not solid #f8f9fa) for the same reason as the other two -
   .login-modal-content became glass after this was written. */
.btn-login-primary {
    align-items: center;
    background: rgba(248, 249, 250, 0.85);
    border: 1.5px solid #c9ccd1;
    border-radius: var(--login-modal-radius, 18px);
    color: var(--primary-dark-color);
    display: flex;
    font-size: 0.95rem;
    font-weight: 700;
    justify-content: center;
    min-height: 52px;
    padding: 0.6rem 1.1rem;
}

.btn-login-primary:hover {
    color: var(--primary-dark-color);
    background: #f1f3f4;
    border-color: #adb1b8;
    transform: translateY(-2px);
}

.btn-login-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-login-primary:disabled,
.btn-login-primary.disabled {
    background: #dcdcdc !important;
    color: #999 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.7;
}

.spin {
    animation: spin 1s linear infinite;
}

/* Tablet + Mobile (≤991.98px): flex column, hide model, clean stacked layout */
@media only screen and (max-width: 991.98px) {
    .install-content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-height: 0;
    }

    .install-heading {
        font-size: clamp(1.5rem, 4vw, 1.85rem);
    }

    /* Model girl hidden on tablet + mobile — avoids all overlap issues */
    .install-visual {
        display: none !important;
    }

    /* Download side by side: QR left, store buttons right */
    .install-download {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: auto 1fr;
        padding-bottom: 0.5rem;
    }

    .install-stores img {
        height: 38px;
    }
}

/* Mobile only (≤575.98px): full-bleed edge-to-edge green card */
@media only screen and (max-width: 575.98px) {
    .install-outer > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .install-wrap {
        border-radius: 0 !important;
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .install-heading {
        font-size: 1.5rem;
    }

    .install-download {
        gap: 1rem;
        grid-template-columns: auto 1fr;
    }

    .install-stores img {
        height: 34px;
    }
}

/* Generic mobile styles (≤767.98px) */
@media only screen and (max-width: 767.98px) {
    .swiper-slide img {
        margin-left: 24px;
        margin-right: 23px;
    }

    #navbarCollapse {
        overflow-x: auto;
    }

    .navbar-nav {
        display: block;
        overflow: auto;
        white-space: nowrap;
        width: 100%;
    }

    .drop-lang .btn {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .__loading {
        left: 58%;
    }

    .navbar .collapse:not(.show) {
        display: block;
    }

    .footer {
        position: relative !important;
    }

    .table-print {
        display: grid;
        font-size: 11px;
    }

    .table-payment {
        font-size: 11px;
    }

    .table-payment thead td{
        background-color: #d8e5de !important;
    }

    .main .lead {
        background: #f8f9fa;
    }

    .main .lead h1 {
        color: #000 !important;
    }

    .main .lead h3.sub-head-title {
        border-left: 0;
        border-left: 0;
        font-size: 18px;
        line-height: 1;
        padding-left: 0;
    }

    .navbar-nav {
        padding: 0;
    }

    .offcanvas {
        width: 300px !important;
        color: #1d1d1d;
        background: #fff;
    }

    .offcanvas-header {
        border-bottom: solid 1px #dee2e6;
    }

    .offcanvas-body {
        padding: 0;
    }

    .offcanvas .nav-link {
        color: #1d1d1d;
        font-size: 18px;
        font-weight: 500;
        padding: 18px;
        border-bottom: solid 1px #dee2e6;
        transition: color 0.2s ease;
    }

    .offcanvas .nav-item .dropdown-item {
        padding: 10px 20px !important;
    }

    .offcanvas .nav-link.active {
        font-weight: 600;
        color: var(--primary-color);
    }

    .offcanvas .nav-link.active::after {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        height: 100%;
        background: var(--primary-color);
        z-index: 100;
        border-radius: 4px;
        width: 3px;
        bottom: 0;
    }

    [data-bs-toggle="collapse"] i {
        transition: transform 0.25s ease;
    }

    [data-bs-toggle="collapse"].collapsed i {
        transform: rotate(0deg);
    }

    [data-bs-toggle="collapse"]:not(.collapsed) i {
        transform: rotate(180deg);
    }

    .col-auto {
        flex: 1 0 auto;
        width: auto;
    }

    .seat {
        width: 50px;
    }

    #schedule-collapse {
        padding: 8px !important;
    }

    .trip-summary-responsive {
        margin-top: 16px;
    }

    .bg-selected-set {
        background: none;
    }

    .selected-set {
        background-color: #eaeaea;
        border-radius: 12px;
        text-align: center;
        padding: 10px;
    }

    .selected-sets {
        text-align: -webkit-center;
    }

    .seat {
        height: 42px;
        width: 42px;
        zoom: 1.2;
    }

    .legend-box {
        position: relative;
        padding-top: 12px;
    }

    .legend-box::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, transparent, #a4a4a4, transparent);
    }

    .seat.available[data-night="1"],
    .seat.booked[data-night="1"],
    .seat.busy[data-night="1"],
    .seat.busy[data-night="1"],
    .seat.selected[data-night="1"] {
        height: 54px;
        width: 54px;
    }

    .popup-app-card {
        grid-template-columns: 1fr;
        max-height: calc(100dvh - 1.5rem);
        max-width: 92vw;
        overflow-y: auto;
        padding: 1.75rem 1.5rem;
        width: 92vw;
    }

    .popup-app-title {
        font-size: 1.6rem;
    }

    .popup-app-sub {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .popup-app-stores {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .popup-app-qr-panel {
        flex-direction: row;
        justify-content: center;
        margin-top: 1.5rem;
        padding: 1.1rem;
    }

    .popup-app-qr-img {
        width: 90px;
    }

    .popup-store-link img {
        height: 28px;
    }

    .popup-close-btn {
        height: 34px;
        right: 0.75rem;
        top: 0.75rem;
        width: 34px;
    }

}
.text-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.legend-box-set {
    position: relative;
    padding-top: 12px;
}

.legend-box-set::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, transparent, #c1c1c1, transparent);
}

.progress {
    height: 10px;
}

/* width */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

/* Track */
.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 18px;
}

/* Handle on hover */
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#qrcode {
    background: white;
    border-radius: 4px;
    margin: 0 auto;
    max-width: max-content;
}

.accordion-item:not(:first-of-type),
.accordion-item {
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.cdsROW.narrow {
    width: 100% !important;
    text-align: center;
    padding: 7px 12px 1px;
    border-radius: 12px;
}

.accordion-item .collapse.show .accordion-body {
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.accordion-button {
    border: 0;
    border-radius: 8px;
}

.accordion-button:not(.collapsed) {
    background-color: #f1f1f1;
    font-size: 16px;
    color: #000;
}

.accordion-button:not(.collapsed)::after {
    filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.emoji {
    font-family: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji",
        "Twemoji", sans-serif;
}

.bus-card {
    border-radius: 10px;
    background: #fff;
}

.bus-image {
    width: 100%;
    max-width: 200px;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

.time {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.btn-warning {
    font-weight: bold;
    border-radius: 5px;
}

.dropdown-menu.show {
    padding: 8px;
    border-radius: 0.5rem;
}

.dropdown-menu .dropdown-item {
    border-radius: 0.5rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--primary-color);
    color: white;
}

/* ── App install section ───────────────────────────────────── */
/* Dark-premium treatment (same visual language as the mobile-app download
   popup's Concept B) - a light gradient card with a soft top-left glow,
   replacing the previous solid bright-green card. */
.install-wrap {
    background: radial-gradient(circle at 20% 0%, #eef7e6 0%, #ffffff 60%);
    border: 1px solid rgba(15, 23, 20, 0.06);
    border-radius: 28px;
    box-shadow: 0 22px 55px rgba(5, 16, 8, 0.16);
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2rem);
    position: relative;
}

.install-wrap::before {
    background: radial-gradient(circle, rgba(132, 202, 72, 0.22) 0, transparent 70%);
    content: '';
    height: 420px;
    pointer-events: none;
    position: absolute;
    right: -140px;
    top: -180px;
    width: 420px;
    z-index: 0;
}

/* Install content — mobile-first: stacked flex column */
.install-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.install-heading {
    color: #111827;
    font-size: clamp(1.5rem, 4vw, 1.85rem);
    font-weight: 800;
    margin: 0;
}

/* Matches the "— LABEL" kicker on every other homepage section (steps,
   why-choose-us, routes, branches, FAQ) - this was the one section without
   one. Uses "GET THE APP", the same copy already used by the mobile app
   popup's eyebrow elsewhere in this view. Same accent green as the popup's
   eyebrow (var(--primary-color)) now that .install-wrap's background is
   light instead of solid bright green. */
.install-heading::before {
    color: var(--primary-color);
    content: '— GET THE APP';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.install-copy {
    min-width: 0;
}

/* Desktop: CSS Grid — heading+copy col1, download col2, model col3 */
@media (min-width: 992px) {
    .install-content {
        display: grid;
        grid-template-columns: 1fr 230px clamp(160px, 20vw, 240px);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "heading  download  visual"
            "copy     download  visual";
        gap: 0.85rem clamp(1.5rem, 3vw, 2.5rem);
        min-height: 340px;
    }

    .install-heading {
        grid-area: heading;
        align-self: end;
        font-size: clamp(1.5rem, 2.8vw, 2rem);
    }

    .install-copy {
        align-self: start;
        grid-area: copy;
    }
}

/* Light-tinted panel - same treatment as the popup's QR panel (pale green
   fill + green-tinted border) so both surfaces read as one family. */
.app-card {
    background: rgba(132, 202, 72, 0.05);
    border: 1px solid rgba(132, 202, 72, 0.25);
    border-radius: 20px;
    padding: 1.2rem;
    position: relative;
    z-index: 1;
}

.app-benefit {
    align-items: center;
    color: #111827;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.8rem;
    min-height: 40px;
}

.app-benefit img {
    background: rgba(132, 202, 72, 0.16);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0.34rem;
    width: 30px;
}

.app-rating-row {
    border-top: 1px solid rgba(15, 23, 20, 0.08);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding-top: 1rem;
}

.app-rating {
    display: grid;
    gap: 0.2rem;
}

.app-rating + .app-rating {
    border-left: 1px solid rgba(15, 23, 20, 0.08);
    padding-left: 1rem;
}

.app-rating strong {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.app-rating strong i {
    color: var(--action-warning);
    font-size: 0.88rem;
}

.app-rating span {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.3;
}

.app-rating small {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
}

/* Centre column: QR | Stores — mobile default */
.install-download {
    align-items: flex-start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: auto 1fr;
}

.install-qr,
.install-stores {
    color: #111827;
    position: relative;
    z-index: 1;
}

.install-qr h3,
.install-stores h3 {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.install-qr img {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 20, 0.14);
    display: block;
    padding: 0.4rem;
    width: 112px;
}

.install-stores {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.install-stores a {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 20, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 20, 0.08);
    display: inline-flex;
    padding: 0.25rem 0.45rem;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    width: fit-content;
}

.install-stores img {
    display: block;
    height: 34px;
    width: auto;
}

.install-stores a:hover {
    box-shadow: 0 12px 26px rgba(15, 23, 20, 0.14);
    transform: translateY(-2px);
}

/* Right column: model image — hidden by default, shown only on desktop */
.install-visual {
    align-items: flex-end;
    align-self: flex-end;
    display: none;
    justify-content: flex-end;
    overflow: visible;
    pointer-events: none;
}

@media (min-width: 992px) {
    .install-download {
        align-self: center;
        gap: 1.5rem;
        grid-area: download;
        grid-template-columns: auto auto;
    }

    .install-visual {
        display: flex;
        grid-area: visual;
        margin-bottom: calc(-1 * clamp(1.5rem, 3vw, 2rem));
        margin-right: calc(-1 * clamp(1.5rem, 3vw, 2rem));
    }
}

.install-wrap .image {
    display: block;
    filter: drop-shadow(4px 6px 14px rgba(0, 0, 0, 0.28));
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: bottom right;
    width: 100%;
}

.datepicker td,
.datepicker th {
    font-size: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.datepicker th.datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    border-radius: 25px;
}

.datepicker-dropdown.datepicker-orient-left:before {
    left: 16px;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
    background-image: none;
    background-color: var(--primary-color);
    color: white;
}
/* ==========================================================================
   Merged from modern-ui.css (2026-06-30) — previously a separate stylesheet
   loaded after style.css for the layout.php pilot. Folded into this single
   file per request; see the Material form-input section at the very end
   for the latest treatment of .form-control/.form-select/.form-floating,
   which supersedes the older boxed/filled rules above and below.
   ========================================================================== */


/* -------------------------------------------------------------------------
   Global polish
   ------------------------------------------------------------------------- */

body { color: var(--ink); }
::selection { background: #dc2626; color: #fff; }
a { transition: color 0.2s var(--ease); }

h2.title {
    color: var(--ink);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

/* Visible focus rings on every interactive element — a Nuxt UI hallmark
   and a real accessibility upgrade over the relying-on-browser-default
   behaviour the site had before. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
input:focus-visible,
select:focus-visible,
.accordion-button:focus {
    outline: none;
    box-shadow: var(--ring-primary);
}

/* ── Top contact bar ───────────────────────────────────────────────────── */
.top-bar {
    background: linear-gradient(90deg, #0d1410 0%, #111d0e 100%);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.30);
    position: relative;
    z-index: 4;
}

.top-bar-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 36px;
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

.top-bar-phone {
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 500;
    gap: 0.45rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.18s;
}

.top-bar-phone:hover {
    color: #ffffff;
}

.top-bar-phone .bi {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.top-bar-socials {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    overflow: visible;
}

.top-bar-social-link {
    align-items: center;
    display: inline-flex;
    opacity: 0.82;
    position: relative;
    transition: opacity 0.18s, transform 0.18s;
}

.top-bar-social-link:hover,
.top-bar-social-link:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    z-index: 5;
}

.top-bar-social-link img {
    display: block;
    height: 20px;
    object-fit: contain;
    width: 20px;
}

.top-bar-social-link[data-contact-label*="mail" i] > img,
.ftr-social-btn[data-contact-label*="mail" i] > img,
.top-bar-social-link[data-contact-label*="mail" i] .contact-popover img,
.ftr-social-btn[data-contact-label*="mail" i] .contact-popover img {
    background: #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
    object-fit: contain;
    padding: 2px;
}

.contact-popover {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.13) 0 3px, transparent 3px),
        linear-gradient(180deg, #ffffff 0%, #f4faef 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(var(--primary-rgb), 0.08);
    color: #132018;
    display: flex;
    gap: 0.65rem;
    left: 50%;
    min-width: 190px;
    opacity: 0;
    padding: 0.72rem 0.82rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    visibility: hidden;
    z-index: 25;
}

.contact-popover img {
    flex: 0 0 auto;
    height: 28px !important;
    width: 28px !important;
}

.contact-popover-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.contact-popover-copy strong {
    color: #132018;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-popover-copy small {
    color: rgba(67, 82, 72, 0.78);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.contact-popover em {
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 999px;
    color: var(--primary-dark-color);
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 0.32rem 0.46rem;
}

.top-bar-social-link::after,
.ftr-social-btn::after {
    background: #f4faef;
    border-color: rgba(var(--primary-rgb), 0.42);
    border-style: solid;
    content: "";
    height: 9px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) rotate(45deg);
    transition: opacity 0.18s ease, visibility 0.18s ease;
    visibility: hidden;
    width: 9px;
    z-index: 24;
}

.top-bar-social-link > img,
.ftr-social-btn > img {
    position: relative;
    z-index: 1;
}

.top-bar-social-link .contact-popover {
    top: calc(100% + 0.55rem);
}

.top-bar-social-link:nth-last-child(-n+2) .contact-popover {
    left: auto;
    right: -0.55rem;
    transform: translateY(6px);
}

.top-bar-social-link::after {
    border-width: 1px 0 0 1px;
    top: calc(100% + 0.28rem);
}

.top-bar-social-link:nth-last-child(-n+2)::after {
    left: auto;
    right: 0.35rem;
}

.ftr-social-btn .contact-popover {
    bottom: calc(100% + 0.7rem);
    transform: translateX(-50%) translateY(-6px);
}

.ftr-social-btn::after {
    border-width: 0 1px 1px 0;
    bottom: calc(100% + 0.45rem);
}

.top-bar-social-link:hover::after,
.top-bar-social-link:focus-visible::after,
.ftr-social-btn:hover::after,
.ftr-social-btn:focus-visible::after,
.top-bar-social-link:hover .contact-popover,
.top-bar-social-link:focus-visible .contact-popover,
.ftr-social-btn:hover .contact-popover,
.ftr-social-btn:focus-visible .contact-popover {
    opacity: 1;
    visibility: visible;
}

.top-bar-social-link:hover .contact-popover,
.top-bar-social-link:focus-visible .contact-popover,
.ftr-social-btn:hover .contact-popover,
.ftr-social-btn:focus-visible .contact-popover {
    transform: translateX(-50%) translateY(0);
}

.top-bar-social-link:nth-last-child(-n+2):hover .contact-popover,
.top-bar-social-link:nth-last-child(-n+2):focus-visible .contact-popover {
    transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */

.navbar.navbar-expand-md {
    background: var(--primary-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.06);
    padding: 0.4rem 0;
}

.top-menu::before { display: none; }

.navbar-nav .nav-link {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

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

.navbar-nav .nav-link.active::after {
    background: #fff;
    height: 3px;
    bottom: -14px;
    opacity: 0.9;
}

.btn-outline-light {
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Hero / search panel  (".main .lead")
   ------------------------------------------------------------------------- */

.main .lead {
    /* Explicit background-color fallback, separate from the gradient below -
       a `background: linear-gradient(...)` shorthand alone leaves no solid
       color behind it, so any transient repaint gap (e.g. the GPU
       recompositing .lead-decor's blur(40px) during scroll) shows the
       page's near-white body background through instead of brand green. */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 65%, #1f6b03 100%);
    background-color: var(--primary-color);
    padding-top: 3.25rem !important;
    padding-bottom: 3rem !important;
    border-radius: 0;
}

.main .lead-decor {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    /* No z-index here on purpose - this is the first child inside .lead
       (before .container), so plain DOM order already paints it behind the
       h1/form content that follows without needing z-index at all. A
       negative z-index (like the old .lead::before/::after had) would
       force this element to establish its own stacking context, which -
       combined with .lead no longer isolating - would trap the Direction
       dropdown's z-index back inside .lead's layer, right back to it
       being painted under the next section again. */
}

.main .lead-decor::before,
.main .lead-decor::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    /* Promotes each blob to its own GPU layer so scrolling doesn't force
       Chrome/Safari to re-rasterize a 40px blur on the main thread every
       frame - that re-rasterization is a known source of a brief blank/
       white flicker over blurred backgrounds during scroll. */
    transform: translateZ(0);
}

.main .lead-decor::before { width: 280px; height: 280px; background: rgba(255, 255, 255, 0.1); top: -100px; left: -70px; }
.main .lead-decor::after { width: 220px; height: 220px; background: var(--accent-color, var(--accent-color)); opacity: 0.16; bottom: -100px; right: 8%; }

.main .lead h1 {
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0;
}

.main .lead form {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
}

/* The per-field filled-box look (background + border on .form-floating)
   is superseded by the Material underline treatment at the end of this
   file. */

.main .lead .btn.btn-lg,
.main .lead .btn-warning {
    border-radius: 12px !important;
    height: 100%;
}

/* The depart/return date label-floating fix (forcing the label to stay
   floated even while the date input is empty) now lives in the Material
   form inputs section at the end of this file, alongside the rest of the
   underline treatment, since the padding values changed with it. */

@media (max-width: 767.98px) {
    .main .lead {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
        border-radius: 0;
    }

    /* style.css forces a light hero background + black h1 below 760px;
       keep the gradient hero's light text readable at that breakpoint too. */
    .main .lead h1 {
        color: #fff !important;
    }
}

/* -------------------------------------------------------------------------
   Buttons — flat, solid, no gradient/glow; a subtle lift only on hover.
   ------------------------------------------------------------------------- */

.btn {
    border-radius: var(--radius-sm);
}

.btn-warning {
    background: #ffb703;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #2a1d00;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.btn-warning:hover,
.btn-warning:focus {
    background: #ffc224;
    color: #2a1d00;
    box-shadow: var(--shadow-soft);
}

.btn-success {
    box-shadow: var(--shadow-xs);
}

/* -------------------------------------------------------------------------
   Promo carousel + testimonial blockquote
   ------------------------------------------------------------------------- */

.carousel-item img,
.carousel-inner {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.blockquote {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.blockquote .bi-quote { color: var(--primary-color); opacity: 0.35; }
.blockquote h5 { color: var(--ink); }

/* -------------------------------------------------------------------------
   Destinations grid
   ------------------------------------------------------------------------- */

.destination-block .card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.destination-block .card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.destination-block .card img { transition: transform 0.5s var(--ease); }
.destination-block .card:hover img { transform: scale(1.03); }

.text-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 65%);
}

/* -------------------------------------------------------------------------
   App install section
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------------------- */

.accordion-item {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 0.625rem;
}

.accordion-button { font-weight: 600; }

.accordion-button:not(.collapsed) {
    background: var(--primary-50);
    color: var(--primary-dark-color);
}

/* -------------------------------------------------------------------------
   Promo popup
   ------------------------------------------------------------------------- */

/* ── Payment Success Page ───────────────────────────────────── */
.pay-success-page {
    background:
        radial-gradient(circle at 78% 8%, rgba(83, 174, 39, 0.13), transparent 26rem),
        radial-gradient(circle at 15% 45%, rgba(var(--secondary-rgb), 0.08), transparent 22rem),
        linear-gradient(180deg, #f5fbed 0%, #ffffff 56%);
}

.pay-success-hero {
    align-items: flex-end;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.1), transparent 13rem),
        linear-gradient(135deg, #102a16 0%, #18391b 58%, #296b18 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(25, 91, 18, 0.18);
    color: #ffffff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.25rem);
    position: relative;
}

.pay-success-hero::before {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    content: "";
    height: 18rem;
    pointer-events: none;
    position: absolute;
    right: -5rem;
    top: -5rem;
    width: 18rem;
}

.pay-success-icon-wrap {
    display: none;
}

.pay-success-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.04);
    color: #ffffff;
    display: flex;
    font-size: 2rem;
    height: 68px;
    justify-content: center;
    width: 68px;
}

.pay-success-meta {
    flex: 1 1 auto;
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.pay-success-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.pay-success-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.pay-success-sub {
    color: rgba(226, 232, 240, 0.82);
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    margin: 0.9rem 0 0;
    max-width: 680px;
}

.pay-success-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pay-code-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 750;
    padding: 0.45rem 0.75rem;
}

.pay-success-tags .text-bg-success {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff !important;
}

.pay-success-cta {
    align-self: flex-end;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.pay-print-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 750;
    gap: 0.5rem;
    line-height: 1.5;
    padding: 0.65rem 0.9rem;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.pay-print-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Info cards */
.pay-info-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.07);
    height: 100%;
    overflow: hidden;
}

.pay-info-card-header {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.06);
    color: var(--ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 850;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pay-info-card-header i {
    align-items: center;
    background: #f1f8ec;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    font-size: 1rem;
    width: 34px;
}

.pay-info-rows {
    padding: 0.5rem 0;
}

.pay-info-row {
    align-items: baseline;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.05);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
}

.pay-info-row:last-child {
    border-bottom: none;
}

.pay-info-label {
    color: var(--ink-muted);
    flex: 0 0 auto;
    font-size: 0.83rem;
    min-width: 110px;
}

.pay-info-val {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

.pay-id-val {
    font-family: monospace;
    font-size: 0.8rem;
}

.pay-info-row .text-bg-primary {
    background: #f1f8ec !important;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    color: var(--primary-dark-color) !important;
    font-weight: 800;
}

/* Booking table */
.pay-table-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.07);
    overflow: hidden;
}

.pay-table-header {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.06);
    color: var(--ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 850;
    gap: 0.65rem;
    letter-spacing: 0.08em;
    padding: 0.85rem 1.25rem;
    text-transform: uppercase;
}

.pay-table-header i {
    align-items: center;
    background: #f1f8ec;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    font-size: 1rem;
    width: 34px;
}

.pay-success-table {
    font-size: 0.875rem;
}

.pay-success-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.07);
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.pay-success-table tbody td {
    border-color: rgba(var(--ink-rgb), 0.05);
    color: var(--ink);
    font-weight: 500;
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.pay-grand-total td {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(255, 255, 255, 0.92));
    border-top: 1px solid rgba(var(--primary-rgb), 0.15);
    color: var(--primary-dark-color);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.9rem 1rem;
}

@media (max-width: 575.98px) {
    .pay-success-hero {
        border-radius: 18px;
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }

    .pay-success-cta {
        width: auto;
    }

    .pay-print-btn {
        width: auto;
        text-align: center;
    }

    .pay-info-label {
        min-width: 90px;
    }
}

/* ── Payment Cancel Page ────────────────────────────────────── */
.pay-cancel-hero {
    align-items: center;
    background:
        radial-gradient(ellipse 55% 80% at 0% 50%, rgba(220,50,30,0.22) 0%, transparent 65%),
        linear-gradient(135deg, #1a1010 0%, #2e1a1a 55%, #2a1818 100%);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
    position: relative;
}

.pay-cancel-hero::before {
    background: radial-gradient(circle, rgba(220,50,30,0.12) 0%, transparent 70%);
    border-radius: 50%;
    content: '';
    height: 300px;
    pointer-events: none;
    position: absolute;
    right: -60px;
    top: -80px;
    width: 300px;
}

.pay-cancel-icon-wrap {
    flex: 0 0 auto;
}

.pay-cancel-icon {
    align-items: center;
    background: rgba(220,50,30,0.20);
    border: 2px solid rgba(220,80,60,0.35);
    border-radius: 50%;
    color: #f87171;
    display: flex;
    font-size: 1.8rem;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.pay-cancel-meta {
    flex: 1 1 200px;
}

.pay-cancel-title {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 0.4rem;
}

.pay-cancel-sub {
    color: rgba(255,255,255,0.65);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 0.4rem;
}

.pay-cancel-note {
    color: rgba(255,255,255,0.42);
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.pay-cancel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.pay-retry-btn {
    background: #dc2626;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.35rem;
    transition: background 0.2s;
}

.pay-retry-btn:hover {
    background: #b91c1c;
    color: #fff;
}

.pay-home-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.35rem;
    transition: background 0.2s;
}

.pay-home-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* Reason cards */
.pay-cancel-info-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, 1fr);
}

.pay-cancel-info-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px;
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.pay-cancel-info-icon {
    align-items: center;
    background: rgba(220,50,30,0.08);
    border-radius: 10px;
    color: #dc2626;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.pay-cancel-info-title {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.pay-cancel-info-desc {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .pay-cancel-hero {
        border-radius: 14px;
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }

    .pay-cancel-info-grid {
        grid-template-columns: 1fr;
    }

    .pay-cancel-actions {
        flex-direction: column;
    }

    .pay-retry-btn,
    .pay-home-btn {
        text-align: center;
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

footer#footer {
    position: relative;
}

footer#footer img {
    height: auto;
    max-width: 100%;
}

footer#footer .col-md-5 .row img {
    display: block;
    height: 38px;
    object-fit: contain;
    width: auto;
}

/* -------------------------------------------------------------------------
   Calendar widget (bootstrap-datepicker on the depart/return date fields)
   --------------------------------------------------------------------------
   The library ships 2012-era Bootstrap 2 styling (a blue/mustard gradient,
   no shadow, a tiny pointer triangle) that clashes hard with everything
   else on the page. style.css already tried to brand the "active" (picked)
   cell green, but its override selector list is missing the plain
   ".active" case, so the default blue gradient still shows through on the
   un-hovered selected day. This section replaces the whole look: a clean
   floating card, brand-green selected/today states, soft hover, and no
   leftover gradients.
   ------------------------------------------------------------------------- */

.datepicker {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 18px !important;
    box-shadow: 0 24px 65px rgba(var(--ink-rgb), 0.16);
    color: var(--ink);
    font-family: inherit;
    overflow: hidden;
    padding: 0.85rem;
    width: auto;
    z-index: 1080 !important;
}

.datepicker-dropdown {
    margin-top: 0.55rem;
}

/* Drop the dated pointer triangle; the floating card shadow is cleaner. */
.datepicker-dropdown:before,
.datepicker-dropdown:after {
    display: none;
}

.datepicker table {
    border-collapse: separate;
    border-spacing: 0.2rem;
    margin: 0;
    width: 100%;
}

.datepicker table tr th,
.datepicker table tr td {
    border: 0 !important;
    height: 2.2rem;
    line-height: 2.2rem;
    padding: 0 !important;
    text-align: center;
    width: 2.2rem;
}

.datepicker table tr th {
    color: var(--ink);
    font-weight: 800;
}

.datepicker table tr th.dow {
    color: var(--ink-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.7rem;
    text-transform: uppercase;
}

.datepicker .datepicker-switch {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 850;
    letter-spacing: 0;
}

.datepicker .prev,
.datepicker .next,
.datepicker .datepicker-switch,
.datepicker tfoot tr th {
    border-radius: 12px;
}

.datepicker .prev,
.datepicker .next {
    color: var(--ink-muted);
    font-size: 1.2rem;
    font-weight: 800;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary-color);
}

.datepicker table tr td {
    border-radius: 999px;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 750;
    text-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary-color);
    transform: translateY(-1px);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #cbd5e1;
    font-weight: 650;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background: #fff8df !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(252, 194, 36, 0.72);
    color: #8a6500 !important;
    font-weight: 850;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.today {
    background: linear-gradient(135deg, var(--primary-color), #5bab2e) !important;
    background-color: var(--primary-color) !important;
    background-image: linear-gradient(135deg, var(--primary-color), #5bab2e) !important;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
    color: #ffffff !important;
    font-weight: 900;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: transparent !important;
    color: #cbd5e1;
    opacity: 0.65;
    transform: none;
}

.datepicker .datepicker-months table tr td,
.datepicker .datepicker-years table tr td,
.datepicker .datepicker-decades table tr td,
.datepicker .datepicker-centuries table tr td {
    height: auto;
    line-height: 1.25;
    width: auto;
}

.datepicker span.month,
.datepicker span.year,
.datepicker span.decade,
.datepicker span.century {
    border-radius: 12px;
    font-weight: 750;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 0.15rem;
    width: 4.25rem;
}

.datepicker span.month:hover,
.datepicker span.year:hover,
.datepicker span.decade:hover,
.datepicker span.century:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary-color);
}

/* Mobile calendar popup - same centered-card + dimmed-backdrop treatment
   as the Telegram mini-app's calendar (t-miniapp.css), sized to 80% of the
   device width instead of the small anchored dropdown used on desktop.
   The `date-picker-open` body class is toggled by the shared datePicker2
   directive (public/js/directives.js) on the plugin's own show/hide
   events, so this covers every date field on every page that uses it. */
@media (max-width: 767.98px) {
    body.date-picker-open {
        overflow: hidden;
    }

    body.date-picker-open::after {
        background: rgba(8, 15, 8, 0.48);
        content: "";
        inset: 0;
        position: fixed;
        z-index: 1070;
    }

    body.date-picker-open .datepicker {
        left: 50% !important;
        margin-top: 0;
        max-width: 448px;
        position: fixed !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(80vw, 448px);
    }

    body.date-picker-open .datepicker-dropdown {
        margin-top: 0;
    }
}

/* Below tablet width the anchored/centered calendar becomes a full-screen
   bottom sheet so every date is comfortable to tap with one thumb - same
   treatment as the Fast Booking page's calendar (public/css/fast-booking.css,
   body.fb-datepicker-open). This used to instead shrink the cells down to
   2rem on small screens, the opposite of what a mobile calendar needs. */
@media (max-width: 575.98px) {
    body.date-picker-open::after {
        background: rgba(8, 15, 8, 0.58);
    }

    body.date-picker-open .datepicker {
        border-radius: 24px 24px 0 0 !important;
        bottom: 0 !important;
        box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.34);
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        left: 0 !important;
        max-width: none;
        min-height: min(84vh, 680px);
        padding: 18px 14px 18px;
        position: fixed !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        width: 100vw;
        z-index: 1080 !important;
    }

    body.date-picker-open .datepicker table {
        border-spacing: 0.28rem;
        table-layout: fixed;
    }

    body.date-picker-open .datepicker table tr th,
    body.date-picker-open .datepicker table tr td {
        height: clamp(46px, 12vw, 58px);
        line-height: clamp(46px, 12vw, 58px);
        width: auto;
    }

    body.date-picker-open .datepicker table tr th.dow {
        font-size: 0.74rem;
        height: 32px;
        line-height: 32px;
    }

    body.date-picker-open .datepicker .datepicker-switch {
        font-size: 1.12rem;
    }

    body.date-picker-open .datepicker .prev,
    body.date-picker-open .datepicker .next {
        font-size: 1.45rem;
        height: 46px;
        line-height: 46px;
    }

    body.date-picker-open .datepicker table tr td {
        font-size: 1.05rem;
    }

    body.date-picker-open .datepicker span.month,
    body.date-picker-open .datepicker span.year,
    body.date-picker-open .datepicker span.decade,
    body.date-picker-open .datepicker span.century {
        height: 50px;
        line-height: 50px;
        margin: 0.22rem;
        width: calc(50% - 0.5rem);
    }
}

/* ==========================================================================
   Material form inputs
   --------------------------------------------------------------------------
   Replaces the older boxed/filled/pill looks above (search bar fields,
   passenger-details form, login modal) with a single underline treatment:
   transparent background, a thin bottom border that thickens and turns
   brand-green on focus, and the floating label animation Bootstrap's
   .form-floating already provides. Covers three field patterns used on
   the site:
     1. .form-floating (search bar on the homepage/booking/schedules pages)
     2. .pax-form / .login-form standalone "<label> then <input>" fields
     3. .form-select everywhere — same underline, native <select> kept
        (no custom dropdown JS), just a custom chevron replacing the
        browser's default arrow so it reads as a clean dropdown control.
   Pure CSS — no markup or AngularJS changes required.
   ========================================================================== */

.form-control,
.form-select {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s var(--ease);
}

.form-control:focus,
.form-select:focus {
    border-bottom-color: var(--primary-color) !important;
}

.form-control:disabled,
.form-select:disabled {
    border-bottom-style: dashed !important;
    color: var(--ink-faint);
}

/* Animated underline: a second, thicker line that grows from the center
   on focus — the classic Material text-field "tap" cue. Lives on the
   .form-floating wrapper, the .pax-form input-group (payment.php's
   passenger fields), and the .login-form field wrapper (a plain .mb-3 —
   the login modal has no .input-group, just <label> then <input>) since
   each is the positioned ancestor that stays the same size whether the
   child is an <input> or a <select>. */
.form-floating,
.pax-form .input-group,
.login-form div.mb-3 {
    position: relative;
}

.form-floating::after,
.pax-form .input-group::after,
.login-form div.mb-3::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.2s var(--ease);
    pointer-events: none;
}

.form-floating:focus-within::after,
.pax-form .input-group:focus-within::after,
.login-form div.mb-3:focus-within::after {
    transform: scaleX(1);
}

/* Native <select>, styled to read as a flat dropdown: browser default
   arrow swapped for a slim chevron, no box — just the shared underline
   above. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    padding-right: 2rem !important;
}

/* --- Search bar (.main .lead .form-floating) ---------------------------- */

.main .lead form > .row,
.main .lead form .row {
    --bs-gutter-x: 0.55rem;
    --bs-gutter-y: 0.55rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    /* One flat 5-column grid (Direction / Departure / Return / Nationality
       / Search) instead of a 4-column grid with Nationality+Search nested
       inside their own separate .row.gx-2 grid. That nested grid never had
       its own gap defined (so Nationality/Search touched with zero space
       between them), and its own presence as a box added padding/min-content
       slack that made the gap before it look inconsistent with the other
       three. .col-lg-4 and its nested .row.gx-2 are set to display:contents
       below, which removes them from the box model entirely so their
       children (.col-md-7 Nationality, .col-md-5 Search) become direct
       items of this one grid - every gap is now the same column-gap value,
       guaranteed, because there's only one grid instead of two.
       Triggers at lg (992px) rather than md (768px) - below that, a 720px
       Bootstrap container can't fit 5 fields without truncating the date
       values (they were rendering as "2" instead of "2026-07-07"). Below
       lg the fields fall back to the full-width stacked layout instead
       (see the max-width: 991.98px block). */
    .main .lead form > .row {
        display: grid;
        column-gap: 0.55rem;
        grid-template-columns: minmax(0, 1.4fr) minmax(175px, 1fr) minmax(175px, 1fr) minmax(180px, 1.3fr) 130px;
        margin-left: 0;
        margin-right: 0;
    }

    .main .lead form > .row > .col-lg-4:last-child,
    .main .lead form > .row > .col-lg-4:last-child > .row {
        display: contents;
    }

    /* display:contents on the two wrapper levels above only removes them
       from the box model/layout - it does NOT change the DOM tree, so the
       ">" direct-child selector below still only matches .row's actual
       children (Direction/Departure/Return/.col-lg-4 itself), never
       reaching .col-md-7 (Nationality) / .col-md-5 (Search), which are
       grandchildren. Those two kept Bootstrap's own default
       width:58.33%/41.67%, rendering far short of the grid track they'd
       been flattened into - this second selector (descendant, not direct
       child) is what actually resets them too. */
    .main .lead form > .row > [class*="col-"],
    .main .lead form > .row > .col-lg-4:last-child > .row > [class*="col-"] {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }
}

.main .lead form [class*="col-"],
.main .lead form .d-grid {
    display: flex;
}

.main .lead form .form-floating {
    /* Option A: flat white card, uniform thin border on every side - no
       more the old thick gold accent stripe on the left only. */
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.12);
    flex: 1 1 auto;
    min-height: 72px;
    margin-bottom: 0 !important;
    overflow: hidden;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.main .lead form .form-floating:hover {
    border-color: rgba(var(--primary-rgb), 0.28);
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.15);
}

.main .lead form .form-floating:focus-within {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12), 0 14px 30px rgba(var(--primary-rgb), 0.18);
}

.main .lead form .form-floating::after {
    display: none;
}

.main .lead .form-floating > .form-control,
.main .lead .form-floating > .form-select {
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 800;
    height: 100%;
    min-height: 72px;
    padding: 2rem 2rem 0.35rem 3.15rem !important;
    text-overflow: ellipsis;
}

.main .lead .form-floating > .form-control,
.main .lead .form-floating > .form-select {
    border-bottom-color: transparent !important;
}

.main .lead .form-floating > .form-control:focus,
.main .lead .form-floating > .form-select:focus {
    border-bottom-color: transparent !important;
}

.main .lead .form-floating::after {
    background: transparent;
}

.main .lead .form-floating > .form-select option {
    color: #000;
}

.main .lead .form-floating > .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230a5d0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-position: right 0.8rem center !important;
}

/* Direction picker: <button data-bs-toggle="dropdown"> standing in for the
   old <select>, so it picks up all the ".form-floating > .form-select"
   rules above for free (border, padding, chevron, height). Only the bits a
   <select> gets from the browser for free need restating here - centered
   button text and text overflow don't happen automatically on a <button>. */
.direction-dropdown-trigger {
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.direction-dropdown-trigger span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .form-floating clips overflow (rounded-corner mask for the plain
   <select> it used to contain) - the dropdown menu is a direct child of
   that same box now, so it would get clipped shut the moment it opens
   unless this one field opts out of the clipping. Needs the full
   ".main .lead form .form-floating" ancestor chain repeated here - that's
   the rule actually setting overflow:hidden (line ~3347), and a bare
   ".direction-dropdown-field" alone loses the specificity fight against it,
   silently staying clipped despite this override being declared later in
   the file. */
.main .lead form .form-floating.direction-dropdown-field {
    overflow: visible;
}

.direction-dropdown-menu {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(var(--primary-rgb), 0.18);
    margin-top: 0.4rem !important;
    max-height: min(340px, calc(100vh - 220px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem;
    /* The native scrollbar ignores border-radius (a long-standing browser
       quirk - it paints as a hard rectangle regardless of the rounded
       clip), which is why the bottom-right corner looked square whenever
       the list was tall enough to scroll. A slim custom scrollbar (same
       pattern as .fb-country-list) sits inset from the edge instead. */
    scrollbar-color: rgba(var(--primary-rgb), 0.35) transparent;
    scrollbar-width: thin;
}

.direction-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.direction-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.direction-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.35);
    border-radius: 12px;
}

.direction-dropdown-item {
    align-items: center;
    border-radius: 8px;
    color: var(--ink);
    display: flex;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
}

.direction-dropdown-item:hover,
.direction-dropdown-item:focus {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--ink);
}

.direction-dropdown-item.is-selected {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
}

.direction-dropdown-item .bi-check-lg {
    color: var(--primary-color);
    flex: 0 0 auto;
}

/* First-visit search-form walkthrough (HomeCtrl.startSearchTour(),
   public/js/controllers/home.controller.js). Dimmed backdrop + a
   "spotlight" cutout: the active field gets lifted above the overlay via
   z-index instead of literally punching a hole in the backdrop, which
   is why it needs position:relative too (its z-index is otherwise
   meaningless). Popover z-index (1070, Bootstrap's own default) already
   sits above this overlay - only needed to pick a value below that. */
.search-tour-overlay {
    background: rgba(8, 15, 8, 0.55);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 1060;
}

.search-tour-overlay.is-active {
    display: block;
}

.search-tour-highlight {
    /* Just a glow ring - the actual dimming/click-catching is the separate
       #searchTourOverlay div (a giant box-shadow spread here would double
       up on top of that overlay instead of replacing it, since both exist
       at once). z-index lifts the field itself above the overlay so it
       reads as "cut out" of the dimmed backdrop. */
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1065;
}

.search-tour-popover {
    --bs-popover-max-width: 260px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

.search-tour-popover .popover-body {
    padding: 0;
}

.search-tour-popover-body {
    padding: 0.9rem 1rem;
}

.search-tour-popover-text {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.75rem;
}

.search-tour-popover-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.search-tour-popover-count {
    color: var(--ink-faint);
    font-size: 0.75rem;
    font-weight: 700;
}

.search-tour-popover-actions {
    display: flex;
    gap: 0.5rem;
}

.search-tour-skip {
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
}

.search-tour-skip:hover {
    color: var(--ink);
}

.search-tour-next {
    background: var(--primary-color);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.35rem 0.85rem;
}

.search-tour-next:hover {
    background: var(--primary-dark-color);
}

@media (max-width: 575.98px) {
    .direction-dropdown-menu {
        max-height: min(50vh, 320px);
        max-width: calc(100vw - 1.5rem);
        padding: 0.4rem;
    }

    .direction-dropdown-item {
        /* ~44px tap target, the usual minimum comfortable touch size, vs.
           the tighter desktop padding above. */
        font-size: 0.92rem;
        min-height: 44px;
        padding: 0.65rem 0.6rem;
    }
}

/* The Direction/Nationality <select>s always show a floated label
   (Bootstrap floats .form-select labels unconditionally). The depart/
   return date <input>s start empty, and Bootstrap only floats a
   .form-control's label on focus or once it has a value — so empty they'd
   render as one centered line instead of matching the selects' "small
   label + value" look. Force the same floated layout on the date fields
   unconditionally so all four fields share one consistent rhythm. */
.main .lead .form-floating.date-picker-field > input[date-picker2] {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.main .lead .form-floating.date-picker-field:focus-within > input[date-picker2],
.main .lead .form-floating.date-picker-field.has-value > input[date-picker2] {
    padding-top: 2rem !important;
    padding-bottom: 0.35rem !important;
}

.main .lead .form-floating.date-picker-field > label {
    color: var(--ink-muted);
    font-size: 0.95rem;
    font-weight: 700;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.main .lead .form-floating.date-picker-field:focus-within > label,
.main .lead .form-floating.date-picker-field.has-value > label {
    color: #3f7b2b;
    font-size: 0.78rem;
    top: 0.7rem !important;
    transform: none !important;
}

.main .lead .form-floating > label {
    color: #3f7b2b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    margin-left: 0;
    max-width: calc(100% - 3.9rem);
    opacity: 1;
    overflow: visible;
    padding: 0 !important;
    position: absolute;
    left: 3.15rem;
    top: 0.7rem;
    text-overflow: ellipsis;
    transform: none !important;
    white-space: nowrap;
    z-index: 3;
}

.main .lead .form-floating > img {
    background: linear-gradient(180deg, #fffdf6 0%, #f8fbf4 100%);
    border: 1px solid rgba(212, 169, 54, 0.28);
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.08);
    height: 30px;
    left: 0.78rem;
    max-width: 30px;
    object-fit: contain;
    padding: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    filter: none;
    opacity: 0.95;
    z-index: 4;
}

.main .lead .form-floating:focus-within > img {
    border-color: rgba(var(--primary-rgb), 0.32);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.14);
    opacity: 1;
}

/* Option A refresh: flat Bootstrap-icon badge replacing the old
   photographic PNG icon (direction.png/date-go.png/date-back.png/
   nation.png) - same position/size as the .form-floating > img rule above,
   just a flex-centered glyph instead of an <img>, and a flat brand-green
   circle instead of the cream/gold-bordered one. */
.main .lead .form-floating > .field-icon-badge {
    align-items: center;
    background: var(--section-green-strong);
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    display: flex;
    font-size: 0.98rem;
    height: 30px;
    justify-content: center;
    left: 0.78rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    z-index: 4;
}

.main .lead .form-floating:focus-within > .field-icon-badge {
    background: var(--section-green-chip);
    border-color: rgba(var(--primary-rgb), 0.32);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.14);
}

.main .lead .form-floating > .form-control:disabled,
.main .lead .form-floating > .form-select:disabled {
    color: var(--ink-muted);
    opacity: 1;
}

.main .lead form .form-floating.date-picker-field:not(.has-value):not(:focus-within) > input[date-picker2] {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.main .lead form .form-floating.date-picker-field:not(.has-value):not(:focus-within) > label {
    color: var(--ink-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.main .lead form .form-floating.date-picker-field > input[date-picker2].ng-empty:not(:focus) {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.main .lead form .form-floating.date-picker-field > input[date-picker2].ng-empty:not(:focus) ~ label {
    color: var(--ink-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.main .lead form .btn-warning {
    align-items: center;
    /* Matches the search fields' 12px radius - Bootstrap's own .btn class
       (border-radius: var(--radius-sm), 8px) left Search with visibly
       sharper corners than every field next to it in the same row. */
    border-radius: 12px;
    display: flex;
    font-size: 1.1rem;
    font-weight: 800;
    justify-content: center;
    min-height: 72px;
    width: 100%;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.14);
    transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}

/* Matches the lift the search fields already get on :focus-within and
   other hero buttons (e.g. Fast Booking) get on :hover - Search had a
   color/shadow change but no lift, the odd one out interaction-wise. */
.main .lead form .btn-warning:hover,
.main .lead form .btn-warning:focus {
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.22);
    transform: translateY(-1px);
}


@media (max-width: 991.98px) {
    /* Matches the stacked layout below (max-width: 991.98px block further
       down) - fields are full-width down through tablet now, not just
       phone, so the compact sizing applies at the same breakpoint. */
    .main .lead form {
        padding: 0;
    }

    .main .lead form .form-floating,
    .main .lead .form-floating > .form-control,
    .main .lead .form-floating > .form-select,
    .main .lead form .btn-warning {
        min-height: 64px;
    }

    .main .lead .form-floating > .form-control,
    .main .lead .form-floating > .form-select {
        padding-top: 1.75rem !important;
    }
}

.main .lead .collapse-toggle {
    color: #fff !important;
    font-weight: 700;
}

/* Quick "Today"/"Tomorrow" shortcuts for a date field - set via
   window.setDatePickerQuickDate() in directives.js, which drives the same
   datepicker('setDate', ...) path a manual calendar pick uses. Sits below
   the search form on the green .lead hero background. Used directly as a
   form child on every page (home, schedule, return-schedule) - no wrapper
   div needed, so the spacing above it lives here instead of being
   duplicated per page. */
.main .lead .quick-date-picks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.main .lead .quick-date-pick-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.main .lead .quick-date-pick-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.main .lead .quick-date-pick-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    outline: none;
}

/* ── Sticky compact search bar (appears once the hero scrolls out of view,
   see nav-guard.js's syncStickySearchBar) ─────────────────────────────── */
.sticky-search-bar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.1);
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: calc(var(--site-menu-height, 56px) - 2px);
    transform: translateY(-100%);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    opacity: 0;
    z-index: 1029;
}

.sticky-search-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sticky-search-bar-inner {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
}

.sticky-search-summary {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink);
    display: flex;
    flex: 1 1 auto;
    font-weight: 700;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.4rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.sticky-search-summary i {
    color: var(--primary-color);
    flex-shrink: 0;
}

.sticky-search-route {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-search-dates {
    color: var(--ink-muted);
    flex-shrink: 0;
    font-weight: 600;
}

.sticky-search-dates-hint {
    font-style: italic;
    font-weight: 500;
}

.sticky-search-btn.btn {
    border-radius: 999px !important;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.5rem 1.3rem;
}

@media (max-width: 575.98px) {
    .sticky-search-dates {
        display: none;
    }
}

/* Title and Fast Book sit inline on the same row - .hero-title-row is a
   real Bootstrap .row (gx-2, same gutter as the search form's own .row
   below it), with the title in .col (grows to fill) and the button in
   .col-auto (last column). Using the exact same row/col mechanics as the
   search row guarantees this lines up with it pixel-for-pixel, instead of
   trying to hand-replicate Bootstrap's gutter/negative-margin math with a
   plain flex div. */
.main .lead .hero-title-row {
    margin-bottom: 1.5rem;
    margin-left: 0;
    margin-right: 0;
}

.main .lead .hero-title-row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

/* "New" tag next to the Fast Booking nav link (desktop top-nav and mobile
   drawer). Chip itself stays put (no scale-jump) - a border ring on ::after
   expands out from the chip's own edge and fades, repeating. Same "brief
   pulse, then a pause" pacing as the old hero button's ring animation had. */
.nav-new-badge {
    background: #e0332f;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-left: 0.4rem;
    padding: 0.1rem 0.38rem;
    position: relative;
    text-transform: uppercase;
}

.nav-new-badge--mobile {
    margin-left: 0.5rem;
}

.nav-new-badge::after {
    animation: navNewBadgeRing 2.6s var(--ease) infinite;
    border: 1.5px solid #e0332f;
    border-radius: 999px;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

@keyframes navNewBadgeRing {
    0%, 55% {
        opacity: 0.9;
        transform: scale(1);
    }

    90%, 100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-new-badge::after {
        animation: none;
    }
}


/* HTTP loading is handled globally by public/js/page-progress.js. Keep old
   full-screen overlay markup inert so it no longer blocks the page while
   Angular requests are running. */
.__loading {
    display: none !important;
}

/* --- Passenger-details form (.pax-form) and login modal (.login-form) --- */

.pax-form label,
.login-form label,
.login-form .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.pax-form .input-group .form-control,
.login-form div.mb-3 .form-control,
.login-form .form-control {
    padding: 0.5rem 0.25rem;
}

.pax-form .input-group-text {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* ==========================================================================
   Global app polish layer
   --------------------------------------------------------------------------
   Final overrides for a Nuxt/Tailwind-inspired feel: tighter shell rhythm,
   smoother page entry, taller cleaner nav, better mobile menu, and safer
   responsive defaults across legacy PHP views.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    /* overflow-x: hidden (any value but "visible") makes body a scroll
       container per spec, which is a well-known way position: sticky
       silently breaks on mobile Safari/Chrome specifically - "clip" gives
       the same no-horizontal-scroll result without creating that scroll
       container, so .payment-summary-card (and anything else using
       sticky) actually sticks on mobile too. */
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

[ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

/* .container/.container-* intentionally left at Bootstrap's stock padding
   (0.75rem) and responsive max-width (540/720/960/1140/1320px per
   breakpoint) - no site-wide override. Previously had a custom
   clamp(1rem, 2.5vw, 1.5rem) padding here; removed per request to just use
   Bootstrap's own defaults instead of a custom size. */

.site-header {
    --site-menu-height: 56px;
    position: relative;
    z-index: 1030;
}

/* position: sticky was tried here and reverted - .top-menu's containing
   block is <header>, which is only as tall as .top-bar + .top-menu
   themselves (~140px), so the sticky element ran out of room and scrolled
   away entirely past that point instead of staying pinned. Back to a
   JS-toggled position: fixed, but every part of the transition that *can*
   be animated now is (box-shadow, and the header's spacer below), so the
   only truly instant change left is the position switch itself - and that
   happens at the exact scrollY where .top-menu's static position already
   coincides with its fixed one (threshold == topBarHeight), so there's
   nothing to visibly jump at that instant. */
.site-header.is-scrolled .top-menu {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
}

/* Pinning .top-menu to the viewport (above) pulls it out of the document
   flow, so `header` collapses by the menu's own height and everything
   below it jumps up underneath the now-fixed bar - hiding that sliver of
   content. This spacer reserves the vacated height so nothing shifts, and
   transitions smoothly instead of snapping so the reflow doesn't read as
   a flash. */
.site-header {
    transition: padding-bottom 0.2s ease;
}

.site-header.is-scrolled {
    padding-bottom: var(--nav-fixed-offset, 56px);
}

.site-header.is-scrolled .top-menu {
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.16);
}

.navbar.navbar-expand-md.top-menu {
    transition: box-shadow 0.25s ease;
}

.navbar.navbar-expand-md.top-menu {
    min-height: var(--site-menu-height);
    padding: 0;
}

.top-menu .navbar-brand img {
    display: block;
    max-height: none;
    object-fit: contain;
}

.top-menu .navbar-nav {
    align-items: center;
    gap: 0.1rem;
}

.top-menu .navbar-nav .nav-link {
    align-items: center;
    display: flex;
    min-height: 0;
    padding: 8px 12px;
}

.top-menu .nav-icon-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    min-height: 38px;
    padding: 0;
    position: relative;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
    width: 38px;
}

.top-menu .nav-icon-btn:hover,
.top-menu .nav-icon-btn:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.52);
    color: #fff;
    transform: translateY(-1px);
}

.top-menu .nav-icon-btn .bi {
    font-size: 1rem;
    line-height: 1;
}

.nav-notification-dot {
    background: var(--action-warning);
    border: 2px solid var(--primary-color);
    border-radius: 999px;
    height: 9px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 9px;
}

.nav-notification-menu {
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(var(--ink-rgb), 0.16);
    min-width: 240px;
    overflow: hidden;
    padding: 0;
}

.nav-notification-header {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
    padding: 0.85rem 1rem 0.55rem;
}

.nav-notification-empty {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 0.88rem;
    gap: 0.65rem;
    padding: 0.8rem 1rem 1rem;
}

.nav-notification-empty .bi {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.top-menu .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 10px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    min-height: 38px;
    padding-left: 0.82rem;
    padding-right: 0.82rem;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

.top-menu .nav-login-btn {
    gap: 0.38rem;
}

.top-menu .nav-login-btn .bi {
    font-size: 0.98rem;
}

.top-menu .btn-outline-light:hover,
.top-menu .btn-outline-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--primary-dark-color);
    transform: translateY(-1px);
}

.navbar-toggler {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

/* Space before the mobile hamburger toggle (.navbar-toggler) - it only
   needs this margin below the navbar-expand-md breakpoint, since Bootstrap
   hides the toggle entirely at md+ and Sign In/the profile menu become the
   last item in the bar there. A flat .me-2 left a dangling trailing margin
   on desktop with nothing after it to space from. */
@media (max-width: 767.98px) {
    .top-menu .nav-right-spacer {
        margin-right: 0.5rem;
    }
}

.navbar-toggler:focus {
    box-shadow: var(--ring-primary);
}

.offcanvas {
    border-right: 0;
    max-width: min(88vw, 340px);
}

.offcanvas-header {
    min-height: 72px;
}

.offcanvas-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offcanvas .nav-link,
.offcanvas .dropdown-item {
    min-height: 52px;
}

.offcanvas .nav-link {
    align-items: center;
    display: flex;
}

.main.bg-grey,
.main.bg-map,
.main:not(.col-md-4) {
    min-height: calc(100vh - 180px);
}

.main > .container,
.main .container.py-4 {
    padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
    padding-top: clamp(1.5rem, 4vw, 3rem) !important;
}

.card,
.accordion-item,
.blockquote,
.bus-card {
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-xs);
}

.card,
.accordion-item,
.bus-card {
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.card:hover,
.accordion-item:hover,
.bus-card:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-card);
}

.table-responsive,
.table-payment,
.table-print {
    -webkit-overflow-scrolling: touch;
}

.table {
    vertical-align: middle;
}

.btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
}

.btn-sm {
    min-height: 34px;
}

.form-control,
.form-select,
.btn {
    touch-action: manipulation;
}

.modal-content {
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: var(--shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 991.98px) {
    .top-menu .navbar-brand img {
        max-height: 48px;
    }

    .main .lead {
        padding-bottom: 2.75rem !important;
        padding-top: 2.25rem !important;
    }

    .main .lead h1 {
        font-size: clamp(1.45rem, 7vw, 2.1rem);
        line-height: 1.25;
    }

}

@media (max-width: 767.98px) {
    .top-bar {
        display: none !important;
    }

    .navbar.navbar-expand-md.top-menu {
        min-height: 66px;
        padding: 0.4rem 0;
    }

    .top-menu .navbar-brand img {
        max-height: 44px;
        width: auto;
    }

    .main .lead {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 70%, #1f6b03 100%) !important;
    }

    /* Pin the Fast Booking button to the row's right edge with absolute
       positioning instead of relying on flex-grow - the flex-based version
       (.col growing to push .col-auto to the end) left a large unexplained
       gap after the button on narrow screens. Absolute positioning is
       deterministic: the button sits flush right no matter what, and the
       title column reserves just enough right padding to clear it, so the
       title gets to use all the remaining width instead of stopping short. */
    .main .lead .hero-title-row {
        position: relative;
    }

    .main .lead .hero-title-row > .col {
        padding-right: 132px;
        width: 100%;
    }

    .main .lead .hero-title-row > .col-auto {
        position: absolute;
        right: 0;
        top: 0;
    }

    .bus-card {
        padding: 1rem !important;
    }

    .offcanvas .nav-link {
        font-size: 1rem;
        font-weight: 700;
        padding: 0.95rem 1.1rem;
    }
}

/* Search form stacking - shares the lg breakpoint with the flat 5-column
   desktop grid above (min-width: 992px block) so there's no gap between
   "still trying to be one row" and "fully stacked": below lg every field
   is full-width, above lg they sit in one row. */
@media (max-width: 991.98px) {
    .main .lead form > .row {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    /* Same flattening as the desktop grid (min-width: 992px block above):
       .col-lg-4 wraps Nationality+Search in their own nested .row.gx-2,
       which on tablet/mobile falls back to Bootstrap's default flex-row
       behavior while its columns are forced to width:100% below - that
       wraps Search onto its own line under Nationality with no defined gap
       between them, since the nested row never picks up this outer row's
       0.65rem gap. display:contents removes both wrapper levels from the
       box model so Nationality and Search become direct items of this
       single-column stack instead, inheriting the same 0.65rem gap as
       every other field. */
    .main .lead form > .row > .col-lg-4:last-child,
    .main .lead form > .row > .col-lg-4:last-child > .row {
        display: contents;
    }

    .main .lead form [class*="col-"],
    .main .lead form .d-grid {
        display: block;
        width: 100%;
    }

    .main .lead form .form-floating,
    .main .lead form .btn-warning {
        width: 100%;
    }
}

/* Today/Tomorrow quick-date chips - inline copy docked inside the date
   field's own box (right edge, vertically centered) instead of only in the
   detached row below the whole form, so the shortcut reads as part of that
   field rather than a separate control. Shown at any width where the
   fields are stacked full-width - mobile AND tablet share this treatment
   now, matching the same lg (992px) breakpoint the layout itself switches
   on (see the max-width: 991.98px stacking block above); the original
   .quick-date-picks row is d-none d-lg-flex, this copy is d-flex d-lg-none.
   Reuses .quick-date-pick-btn but recolored/shrunk - the original's
   translucent white/border styling and size were tuned for a full-height
   pill on the green hero background, not a compact chip sitting inside a
   white field. */
.main .lead .date-picker-field.has-inline-picks {
    position: relative;
}

.main .lead .quick-date-picks-inline {
    align-items: center;
    display: flex;
    gap: 0.3rem;
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.main .lead .quick-date-picks-inline .quick-date-pick-btn {
    background: var(--section-green-strong);
    border: 1px solid var(--border-soft);
    color: var(--primary-color);
}

.main .lead .quick-date-picks-inline .quick-date-pick-btn:hover {
    background: var(--section-green-chip);
    border-color: var(--border-strong);
}

@media (max-width: 991.98px) {
    /* Room for the two chips docked on the right - without this the date
       value/label would render underneath them. Matches the lg breakpoint
       above so tablet (where fields are already full-width) gets the same
       treatment as phones instead of falling back to the detached row. */
    .main .lead .has-inline-picks > .form-control {
        padding-right: 7.3rem !important;
    }

    .main .lead .has-inline-picks > label {
        max-width: calc(100% - 8.5rem) !important;
    }

    .main .lead .quick-date-picks-inline .quick-date-pick-btn {
        font-size: 0.66rem;
        min-height: auto;
        padding: 0.3rem 0.55rem;
    }
}

@media (max-width: 575.98px) {
    .main > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Tighter vertical section spacing on mobile */
    .main > .container,
    .main .container.py-4 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Bootstrap .py-4 wrappers between homepage sections */
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    h1,
    .title,
    h2.title {
        word-break: break-word;
    }

    .btn,
    .form-control,
    .form-select {
        font-size: 0.95rem;
    }

    .modal-dialog {
        margin: 0.75rem;
    }

    .toast-container {
        left: 0.5rem !important;
        right: 0.5rem !important;
    }
}

/* Keep Bootstrap modals centered even when the markup does not include
   .modal-dialog-centered. */
.modal {
    height: 100vh;
    height: 100dvh;
}

.modal .modal-dialog:not(.modal-fullscreen) {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    min-height: calc(100vh - 1.5rem);
    min-height: calc(100dvh - 1.5rem);
}

.modal .modal-dialog:not(.modal-fullscreen) .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1.5rem);
    width: 100%;
}

.modal .modal-dialog:not(.modal-fullscreen) .modal-body {
    overflow-y: auto;
}

#loginModal .modal-content {
    height: auto !important;
    max-height: calc(100vh - 1.5rem);
    min-height: min(500px, calc(100vh - 1.5rem)) !important;
    overflow-y: auto !important;
}

#loginModal .h-500px {
    height: min(500px, calc(100vh - 1.5rem)) !important;
}

@media (min-width: 576px) {
    .modal .modal-dialog:not(.modal-fullscreen) {
        margin-bottom: 1.75rem;
        margin-top: 1.75rem;
        min-height: calc(100vh - 3.5rem);
        min-height: calc(100dvh - 3.5rem);
    }

    .modal .modal-dialog:not(.modal-fullscreen) .modal-content,
    #loginModal .modal-content {
        max-height: calc(100vh - 3.5rem);
    }

    #loginModal .modal-content {
        min-height: min(500px, calc(100vh - 3.5rem)) !important;
    }

    #loginModal .h-500px {
        height: min(500px, calc(100vh - 3.5rem)) !important;
    }
}

/* Modern mobile drawer */
#mobileDrawer.offcanvas {
    background: #f8faf7;
    border-right: 0;
    box-shadow: 20px 0 60px rgba(var(--ink-rgb), 0.2);
    color: #172016;
    max-width: 100vw;
    width: 100vw !important;
}

#mobileDrawer .offcanvas-header {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    min-height: 94px;
    padding: 1.1rem 1.2rem;
}

#mobileDrawer .offcanvas-title {
    line-height: 1;
    margin: 0;
}

#mobileDrawer .offcanvas-title img {
    display: block;
    height: auto;
    max-height: 72px;
    max-width: 126px;
    object-fit: contain;
    width: 112px;
}

#mobileDrawer .btn-close {
    background-size: 0.85rem;
    border-radius: 999px;
    box-shadow: none;
    height: 40px;
    margin: 0;
    opacity: 0.65;
    padding: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    width: 40px;
}

#mobileDrawer .btn-close:hover {
    background-color: #eef4eb;
    opacity: 1;
    transform: rotate(90deg);
}

#mobileDrawer .offcanvas-body {
    overflow-x: hidden;
    padding: 0.85rem;
}

#mobileDrawer .mobile-drawer-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0.25rem;
    overflow: visible !important;
    padding: 0;
    white-space: normal !important;
    width: 100%;
}

#mobileDrawer .mobile-drawer-menu .nav-item {
    margin: 0;
}

#mobileDrawer .nav-link,
#mobileDrawer .dropdown-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: #1f2933;
    display: flex;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    text-transform: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#mobileDrawer .nav-link:hover,
#mobileDrawer .dropdown-item:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    transform: translateX(2px);
}

#mobileDrawer .nav-link.active {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    font-weight: 800;
}

#mobileDrawer .nav-link.active::after {
    display: none !important;
}

#mobileDrawer .mobile-nav-icon {
    align-items: center;
    background: #eef4eb;
    border-radius: 12px;
    color: var(--ink-muted);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    margin-right: 0.75rem;
    width: 34px;
}

#mobileDrawer .nav-link.active .mobile-nav-icon,
#mobileDrawer .nav-link:hover .mobile-nav-icon {
    background: #e2f2dc;
    color: var(--primary-color);
}

#mobileDrawer .mobile-language-toggle {
    border-top: 1px solid rgba(var(--ink-rgb), 0.08);
    margin-top: 0.65rem;
    padding-top: 0.65rem;
}

#mobileDrawer .mobile-language-toggle .nav-link > span {
    align-items: center;
    display: flex;
}

#mobileDrawer .arrow-icon {
    color: var(--ink-muted);
    font-size: 0.88rem;
}

#mobileDrawer .mobile-language-list {
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0.25rem 0 0.35rem 2.75rem;
}

#mobileDrawer .mobile-language-list.collapsing {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
}

#mobileDrawer .mobile-language-list.collapse.show {
    display: block;
    overflow: visible !important;
}

#mobileDrawer .mobile-language-list .dropdown-item {
    box-sizing: border-box;
    color: #334155;
    font-weight: 600;
    margin-left: 0;
    min-height: 44px;
    overflow: visible !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    white-space: normal;
    width: 100%;
}

#mobileDrawer .mobile-language-list img {
    border-radius: 50%;
    height: 24px;
    object-fit: cover;
    width: 24px;
}

#mobileDrawer .mobile-language-list .bi-check-lg {
    color: var(--primary-color) !important;
    font-size: 1.05rem;
}

/* Payment confirmation page */
.payment-page {
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.08), transparent 32rem),
        linear-gradient(180deg, #f6f8f5 0%, #eef3ed 100%);
}

.payment-container {
    padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
    padding-top: clamp(1.25rem, 3vw, 2.25rem) !important;
}

/* ── Shared page hero (FAQ, Branch, T&C, Privacy, Print ticket) ── */
.page-hero {
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(var(--primary-rgb),0.28) 0%, transparent 65%),
        linear-gradient(135deg, #111a10 0%, #1c2e1a 55%, #1a2a18 100%);
    border-radius: 20px;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
    position: relative;
}

.page-hero::before {
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 50%;
    content: "";
    height: 280px;
    pointer-events: none;
    position: absolute;
    right: -60px;
    top: -80px;
    width: 280px;
}

.page-hero::after {
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 50%;
    content: "";
    height: 160px;
    pointer-events: none;
    position: absolute;
    right: -10px;
    top: -15px;
    width: 160px;
}

.page-hero-title {
    color: #ffffff;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0 0 0.6rem;
}

.page-hero-sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    max-width: 640px;
}

@media (max-width: 575.98px) {
    .page-hero {
        border-radius: 16px;
        margin-bottom: 1.25rem;
        padding: 1.25rem;
    }
    .page-hero-title {
        font-size: 1.5rem;
    }
    .page-hero-sub {
        font-size: 0.83rem;
    }
}

/* ── Legal document pages (about/privacy.php) ─────────────────────────── */
.legal-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: 220px minmax(0, 1fr);
}

.legal-toc {
    position: sticky;
    top: 1.5rem;
}

.legal-toc-title {
    color: var(--ink-soft, var(--ink-muted));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.legal-toc-nav {
    border-left: 2px solid rgba(var(--ink-rgb), 0.08);
    display: flex;
    flex-direction: column;
}

.legal-toc-link {
    color: var(--ink-soft, var(--ink-muted));
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.4rem 0 0.4rem 0.9rem;
    text-decoration: none;
    transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease);
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.legal-toc-link-sub {
    font-size: 0.8rem;
    font-weight: 500;
    padding-left: 1.6rem;
}

.legal-toc-link:hover {
    color: var(--ink, var(--ink));
}

.legal-toc-link-active {
    border-left-color: var(--primary-color);
    color: var(--primary-dark-color);
}

.legal-content {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.06);
    color: var(--ink-soft, var(--ink-soft));
    max-width: 820px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.legal-updated-badge {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    color: var(--primary-dark-color);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.85rem;
}

.legal-content h2 {
    color: var(--ink, var(--ink));
    font-size: 1.35rem;
    font-weight: 800;
    margin: 2.25rem 0 0.9rem;
    scroll-margin-top: 1.5rem;
}

.legal-content h2:first-of-type {
    margin-top: 0.5rem;
}

.legal-content h3 {
    color: var(--ink, var(--ink));
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.6rem 0 0.7rem;
    scroll-margin-top: 1.5rem;
}

.legal-content h4 {
    color: var(--ink, var(--ink));
    font-size: 0.98rem;
    font-weight: 700;
    margin: 1.3rem 0 0.6rem;
}

.legal-content p {
    font-size: 0.94rem;
    line-height: 1.75;
    margin: 0 0 0.9rem;
}

.legal-content ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.legal-content li {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.legal-content li p {
    margin-bottom: 0.3rem;
}

.legal-content a {
    color: var(--primary-dark-color);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-toc {
        position: static;
    }

    .legal-toc-nav {
        border-left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .legal-toc-link {
        background: #f3f8f1;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        border-left: 1px solid rgba(var(--primary-rgb), 0.12);
        border-radius: 999px;
        margin-left: 0;
        padding: 0.35rem 0.75rem;
    }

    .legal-toc-link-sub {
        padding-left: 0.75rem;
    }

    .legal-toc-link-active {
        background: rgba(var(--primary-rgb), 0.14);
        border-color: var(--primary-color);
    }
}

.payment-hero {
    align-items: center;
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(var(--primary-rgb),0.28) 0%, transparent 65%),
        linear-gradient(135deg, #111a10 0%, #1c2e1a 55%, #1a2a18 100%);
    border-radius: 20px;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
    position: relative;
}

/* subtle decorative ring */
.payment-hero::before {
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 50%;
    content: "";
    height: 300px;
    pointer-events: none;
    position: absolute;
    right: -80px;
    top: -80px;
    width: 300px;
}

.payment-hero::after {
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 50%;
    content: "";
    height: 180px;
    pointer-events: none;
    position: absolute;
    right: -20px;
    top: -20px;
    width: 180px;
}

.payment-title {
    color: #ffffff;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}

.payment-subtitle {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.93rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.payment-hero-badge {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.18);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 999px;
    color: #7dd856;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.83rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    white-space: nowrap;
}

.payment-card {
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.07);
    padding: clamp(1rem, 2.4vw, 1.35rem);
}

.payment-summary-card {
    position: sticky;
    top: 1rem;
}

.payment-section {
    margin-bottom: 1.35rem;
}

.payment-section-title {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.payment-section-title h2 {
    color: #1f2933;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.payment-section-icon {
    align-items: center;
    background: #eef7eb;
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.payment-method-title {
    border-top: 1px solid rgba(var(--ink-rgb), 0.08);
    padding-top: 1.15rem;
}

.payment-page .form-wrap {
    margin-bottom: 1.15rem;
}

.payment-page .pax-form label {
    color: #536171;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 0.1rem;
}

.payment-page .pax-form .input-group {
    background: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 14px;
    margin-bottom: 0.85rem !important;
    margin-top: 0.35rem !important;
    padding: 0.15rem 0.65rem;
}

.payment-page .pax-form .input-group::after {
    display: none;
}

.payment-page .pax-form .form-control {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    color: #101828;
    font-size: 1rem;
    min-height: 44px;
    padding-left: 0;
    padding-right: 0;
}

.payment-page .pax-form .input-group-text {
    background: transparent !important;
    border: 0;
    color: #334155;
    font-weight: 800;
    padding-left: 0;
}

.payment-page .pax-form .dropdown-menu {
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 16px !important;
    box-shadow: 0 20px 45px rgba(var(--ink-rgb), 0.12);
    padding: 0.6rem;
}

/* Country-code picker (phone field) - was a bare, unstyled Bootstrap
   dropdown: no background on the toggle pill, an invisible search box
   (".pax-form .form-control" above resets border/background to nothing,
   which also stripped this nested search input), and no hover/selected
   state on the list items. Rebuilt with the same visual language as the
   Direction dropdown (.direction-dropdown-menu/-item below) for one
   consistent "dropdown" look across the site instead of two different ones. */
.payment-page .pax-form .country-code-toggle {
    /* var(--surface-muted) is the same token .country-search-wrap uses,
       kept consistent rather than a one-off hardcoded hex here. */
    background: var(--surface-muted) !important;
    border-radius: 12px;
    margin-right: 0.5rem;
    padding: 0.35rem 0.6rem !important;
}

.country-dropdown-trigger {
    background: transparent;
    border: 0;
    color: var(--ink);
    font-weight: 800;
    gap: 0.35rem;
    padding: 0;
}

.country-dropdown-trigger .bi-chevron-down {
    color: var(--ink-muted);
    font-size: 0.72rem;
}

.country-dropdown-menu {
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 16px !important;
    box-shadow: 0 20px 45px rgba(var(--ink-rgb), 0.12);
    padding: 0.6rem;
    width: 280px;
}

.country-search-wrap {
    align-items: center;
    background: var(--surface-muted);
    border-radius: 10px;
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.7rem;
}

.country-search-icon {
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.country-search-input {
    background: transparent;
    border: 0;
    color: var(--ink);
    flex: 1 1 auto;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
    outline: none;
}

.country-search-input::placeholder {
    color: var(--ink-faint);
    font-weight: 500;
}

.country-dropdown-list {
    list-style: none;
    margin: 0;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}

.country-dropdown-item {
    align-items: center;
    border-radius: 8px;
    color: var(--ink);
    display: flex;
    font-weight: 700;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
}

.country-dropdown-item:hover,
.country-dropdown-item:focus {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--ink);
}

.country-dropdown-item.is-selected {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
}

.country-dropdown-item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-dropdown-item-code {
    color: var(--ink-muted);
    flex: 0 0 auto;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .country-dropdown-menu {
        max-width: calc(100vw - 3rem);
        width: 280px;
    }

    .country-dropdown-item {
        min-height: 44px;
    }
}

.payment-page .payment-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 16px;
    display: flex;
    margin-bottom: 0.75rem;
    min-height: 72px;
    padding: 0.85rem 3rem 0.85rem 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.payment-page .payment-item:hover {
    border-color: rgba(var(--primary-rgb), 0.34);
    box-shadow: 0 12px 30px rgba(var(--ink-rgb), 0.08);
    transform: translateY(-1px);
}

.payment-page .payment-item.selected {
    background: #f4fbf1;
    border-color: var(--primary-color);
    box-shadow: 0 14px 35px rgba(var(--primary-rgb), 0.14);
}

.payment-page .payment-item .media {
    min-width: 0;
}

.payment-page .payment-item .media > .shrink-0 {
    align-items: center;
    background: #f1f5f0;
    border-radius: 12px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.payment-page .payment-item .media img {
    max-height: 28px;
    max-width: 32px;
    object-fit: contain;
}

.payment-page .payment-item .media-body h5 {
    color: #1f2933;
    font-size: 0.98rem;
    font-weight: 800;
}

.payment-page .payment-item .media-body img {
    height: auto;
    max-height: 18px;
    max-width: 150px;
}

.payment-page .payment-item .media-body p {
    color: var(--ink-muted);
    font-size: 0.84rem;
}

.payment-page .payment-item .trailing-wrap {
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
}

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

.payment-countdown {
    align-items: center;
    background: #fff1f1;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 999px;
    color: #b42318;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 900;
    padding: 0.5rem 0.75rem;
}

.payment-table-shell {
    background: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 16px;
    overflow-x: auto;
}

.payment-page .table-payment {
    margin-bottom: 0;
    min-width: 100%;
}

.payment-page .table-payment thead td {
    background: #edf5ea !important;
    border-bottom: 0;
    color: #52606d;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 0.85rem 0.75rem;
    text-transform: uppercase;
}

.payment-page .table-payment tbody td {
    background: #ffffff;
    border-color: rgba(var(--ink-rgb), 0.06);
    color: #1f2933;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.85rem 0.75rem;
}

.payment-terms {
    align-items: flex-start;
    background: #f6faf4;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 14px;
    display: flex;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding: 0.85rem;
}

.payment-terms .form-check-input {
    flex: 0 0 auto;
    margin-left: 0;
    margin-top: 0.2rem;
}

.payment-terms .form-check-label {
    color: #2f7d1a !important;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
}

.payment-pay-button {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 16px 35px rgba(var(--primary-rgb), 0.22);
    font-size: 1.05rem;
    font-weight: 900;
    min-height: 58px;
}

.payment-security {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 0.25rem 0;
}

.payment-security-item {
    align-items: flex-start;
    color: var(--ink-muted);
    display: flex;
    font-size: 0.9rem;
    gap: 0.65rem;
    line-height: 1.5;
}

.payment-security-item i {
    color: var(--primary-color);
    flex: 0 0 auto;
    font-size: 1rem;
    margin-top: 0.1rem;
}

@media (max-width: 991.98px) {
    .payment-hero {
        display: block;
    }

    .payment-hero-badge {
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .payment-hero {
        border-radius: 16px;
        margin-bottom: 1.25rem;
        padding: 1.25rem;
    }

    .payment-title {
        font-size: 1.55rem;
    }

    .payment-subtitle {
        font-size: 0.85rem;
        line-height: 1.55;
    }

    .payment-hero-badge {
        font-size: 0.78rem;
        padding: 0.45rem 0.8rem;
        margin-top: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .payment-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .payment-card {
        border-radius: 16px;
    }

    .payment-summary-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .payment-countdown {
        width: 100%;
        justify-content: center;
    }

    .payment-page .payment-item {
        padding-right: 2.8rem;
    }

    .payment-page .payment-item .media-body h5 {
        font-size: 0.92rem;
    }

    .payment-page .table-payment {
        min-width: 680px;
    }

    .payment-security {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modern Schedule Listing Cards  (.sch-* namespace)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card base — remove legacy p-4 shadow-sm that was inline in the view */
.card-schedule {
    margin-bottom: 1rem;
    overflow: visible; /* allow discount badge to bleed outside */
}

/* ── Discount badge ────────────────────────────────────────────────────── */
.sch-discount-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    z-index: 2;
    pointer-events: none;
}

/* ── Bus image thumbnail ───────────────────────────────────────────────── */
.sch-bus-image-wrap {
    flex-shrink: 0;
    width: 80px;
}

@media (min-width: 768px) {
    .sch-bus-image-wrap { width: 100px; }
}

/* ── Bus name / remark ─────────────────────────────────────────────────── */
.sch-bus-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .sch-bus-name { font-size: 1.1rem; }
}

/* ── Seat availability badge ───────────────────────────────────────────── */
.sch-seats-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Trip timeline ─────────────────────────────────────────────────────── */
.sch-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 0;
    border-top: 1px solid var(--border-soft, rgba(var(--ink-rgb),.09));
    border-bottom: 1px solid var(--border-soft, rgba(var(--ink-rgb),.09));
}

.sch-stop {
    flex-shrink: 0;
    text-align: center;
    min-width: 72px;
}

.sch-stop-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8e9aaf;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.sch-stop-time {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
    letter-spacing: 0;
}

.sch-route {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-width: 0;
}

.sch-route-bar {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, rgba(var(--primary-rgb),.15), rgba(var(--primary-rgb),.4));
    border-radius: 2px;
}

.sch-route .sch-route-bar:last-child {
    background: linear-gradient(to left, rgba(var(--primary-rgb),.15), rgba(var(--primary-rgb),.4));
}

.sch-duration-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--primary-rgb), 0.07);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.sch-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-left: 18px;
    border-left: 1px solid var(--border-soft, rgba(var(--ink-rgb),.09));
    margin-left: 4px;
}

.sch-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    white-space: nowrap;
}

.sch-book-btn {
    padding: 7px 16px;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 8px;
    white-space: nowrap;
    min-height: 36px;
}

/* ── Boarding strip ────────────────────────────────────────────────────── */
.sch-boarding-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 12px;
}

.sch-boarding-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: #555;
}

.sch-boarding-item a {
    color: #555;
    text-decoration: none;
    transition: color 0.15s;
}

.sch-boarding-item a:hover {
    color: var(--primary-color);
}

.sch-boarding-label {
    font-weight: 600;
    color: #333;
}

.sch-boarding-sep {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

.sch-panel-header {
    align-items: center;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 0;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
}

.sch-panel-route {
    align-items: center;
    color: #1f2933;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 850;
    gap: 0.45rem;
    line-height: 1.35;
    min-width: 0;
}

.sch-panel-route .bi {
    align-items: center;
    background: #eaf5e5;
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 0.82rem;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.seat-select-modal .btn-close {
    border-radius: 999px;
    box-shadow: none;
    flex: 0 0 auto;
    height: 38px;
    opacity: 0.62;
    padding: 0;
    width: 38px;
}

.seat-select-modal .btn-close:hover {
    background-color: #f3f4f6;
    opacity: 0.9;
}

/* Wraps the refresh button and the close button as one unit, so the mobile
   header (which stacks into a column - see the max-width:767.98px block
   below) can position both together in the corner with a single absolute
   rule, instead of needing separate positioning math for each. */
.sch-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
}

.sch-refresh-btn {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border: 0;
    border-radius: 999px;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    transition: background-color 0.15s var(--ease);
    width: 38px;
}

.sch-refresh-btn:hover {
    background: rgba(var(--primary-rgb), 0.16);
}

.sch-refresh-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.sch-refresh-spinning {
    animation: sch-refresh-spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes sch-refresh-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sch-refresh-spinning {
        animation: none;
    }
}

.sch-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.sch-legend-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 999px;
    color: var(--ink-muted);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.4rem;
    line-height: 1;
    padding: 0.45rem 0.65rem;
    white-space: nowrap;
}

.sch-legend-dot {
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.08);
    display: inline-block;
    flex: 0 0 10px;
    height: 10px;
    width: 10px;
}

.sch-panel-body {
    /* Was align-items: flex-start - with that, .sch-selection-col below
       (the flex item) only got as tall as its own content, so
       .sch-selection-panel's position:sticky ran out of room to stay
       pinned partway through scrolling a long seat grid, well before the
       seatmap-wrap column ran out. Stretch instead, so the (invisible)
       column matches the seatmap's full height and gives the sticky card
       room to stay stuck for the whole scroll - .sch-seatmap-wrap gets its
       own align-self below so this doesn't change its own sizing. */
    align-items: stretch;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.sch-seatmap-wrap {
    align-self: flex-start; /* keep its old flex-start sizing under the new stretch default above */
    flex: 0 0 auto; /* never grows or shrinks — seat card keeps its natural size */
}

/* Invisible wrapper around .sch-selection-panel - stretches to match
   .sch-seatmap-wrap's height (see .sch-panel-body above), giving the
   sticky card room to move. The card itself stays compact (no visible
   empty box), sticking within this taller, unstyled column instead of
   being the stretched element itself. */
.sch-selection-col {
    flex: 1 1 0;
    min-width: 220px;
}

/* ── Seat-selection modal (replaces the old per-card collapse) ─────────── */
.seat-select-modal .modal-dialog {
    max-width: min(1040px, calc(100vw - 32px));
}

.seat-select-modal .modal-content {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(var(--primary-rgb), 0.22);
    overflow: hidden;
}

.seat-select-modal .modal-header.sch-panel-header {
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 0;
    margin-bottom: 0;
    padding: 1rem 1.35rem;
}

.seat-select-modal .modal-body {
    background: #fbfdfb;
    max-height: min(72vh, 640px);
    padding: 1rem 1.1rem 1.25rem;
}

@media (max-width: 767.98px) {
    .seat-select-modal .modal-header.sch-panel-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.6rem;
    }

    .seat-select-modal .sch-header-actions {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }
}

.sch-seatmap-card {
    background: linear-gradient(160deg, #fafffe 0%, #f5f8f4 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(var(--ink-rgb), 0.08), 0 1px 4px rgba(var(--primary-rgb),0.06);
    display: block;
    overflow: visible;
    width: fit-content;
}

.sch-seatmap-card .card-body {
    padding: 1rem;
}

.sch-seatmap-card .card-body > .d-flex {
    justify-content: flex-start;
}

.sch-seatmap-inner {
    overflow: visible;
    padding: 0.1rem 0.1rem 0.4rem;
    text-align: left;
}

.sch-seatmap-skeleton {
    background: linear-gradient(160deg, #fafffe 0%, #f5f8f4 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(var(--ink-rgb), 0.06);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
}

/* shimmer base */
.skl-seat {
    animation: skl-wave 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, #e4eae4 25%, #f0f5f0 50%, #e4eae4 75%);
    background-size: 500px 100%;
    border-radius: 5px;
    height: 36px;
    width: 36px;
}

.skl-row {
    align-items: flex-end;
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.skl-spacer {
    width: 36px;
}

/* stagger the shimmer per row so wave travels across the map */
.skl-row:nth-child(1) .skl-seat { animation-delay: 0s; }
.skl-row:nth-child(2) .skl-seat { animation-delay: 0.08s; }
.skl-row:nth-child(3) .skl-seat { animation-delay: 0.16s; }
.skl-row:nth-child(4) .skl-seat { animation-delay: 0.24s; }
.skl-row:nth-child(5) .skl-seat { animation-delay: 0.32s; }

/* driver circle */
.skl-driver {
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

/* ── Payment page skeleton ──────────────────────────────────── */
.pay-skl {
    animation: skl-wave 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, #eaecef 25%, #f5f7f5 50%, #eaecef 75%);
    background-size: 500px 100%;
    border-radius: 6px;
}

.pay-skl-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

.pay-skl-section-title {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.pay-skl-icon {
    border-radius: 8px;
    flex-shrink: 0;
    height: 32px;
    width: 32px;
}

.pay-skl-heading {
    height: 18px;
    width: 140px;
}

.pay-skl-label {
    height: 12px;
    margin-bottom: 0.45rem;
    width: 90px;
}

.pay-skl-input {
    border-radius: 8px;
    height: 42px;
    margin-bottom: 1rem;
    width: 100%;
}

.pay-skl-item {
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    margin-bottom: 0.6rem;
    padding: 0.85rem 1rem;
}

.pay-skl-gw-icon {
    border-radius: 8px;
    flex-shrink: 0;
    height: 36px;
    width: 36px;
}

.pay-skl-gw-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
}

.pay-skl-gw-name {
    height: 14px;
    width: 110px;
}

.pay-skl-gw-sub {
    height: 12px;
    width: 65px;
}

.pay-skl-radio {
    border-radius: 50%;
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

.pay-skl-summary-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.pay-skl-countdown {
    border-radius: 8px;
    height: 28px;
    width: 70px;
}

.pay-skl-table {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem;
}

.pay-skl-thead {
    height: 13px;
    width: 100%;
}

.pay-skl-tr {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.pay-skl-td {
    border-radius: 4px;
    flex: 2;
    height: 14px;
}

.pay-skl-td-sm {
    border-radius: 4px;
    flex: 1;
    height: 14px;
}

.pay-skl-total {
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.pay-skl-total-label {
    height: 16px;
    width: 80px;
}

.pay-skl-total-amount {
    height: 20px;
    width: 110px;
}

.pay-skl-terms {
    border-radius: 8px;
    height: 20px;
    width: 72%;
}

.pay-skl-btn {
    border-radius: 10px;
    height: 52px;
    width: 100%;
}

.sch-seatmap-wrap .seat {
    filter: drop-shadow(0 4px 8px rgba(var(--ink-rgb), 0.08));
}

/* Scoped to .available only - see the base .seat.available:hover rule for
   why (this is the one that actually wins in the real seat map, since it's
   more specific than that base rule). Slightly stronger shadow on hover on
   top of the lift, for clearer "this is pickable" feedback. */
.sch-seatmap-wrap .seat.available:hover {
    filter: drop-shadow(0 8px 14px rgba(var(--ink-rgb), 0.16));
    transform: translateY(-2px) scale(1.08);
}

.sch-seatmap-wrap .seat.available {
    cursor: pointer;
}

.sch-selection-panel {
    /* Was align-self: stretch (when this was itself the flex item) - made
       this panel match the seat map's full (often much taller/scrollable)
       height, leaving a big empty gap under the Confirm button. Then
       became align-self: flex-start + position: sticky directly on this
       flex item - fixed the empty-gap, but the item's own box was only as
       tall as its own content, so sticky ran out of room to stay pinned
       partway through scrolling a long seat grid. Now a plain block inside
       .sch-selection-col (the actual flex item, stretched to match the
       seat map - see .sch-panel-body), so this card keeps its natural
       compact height while still having the *wrapper's* full height as
       room to stick within. */
    position: sticky;
    top: 0;
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 18px;
    box-shadow: 0 16px 35px rgba(var(--ink-rgb), 0.07);
    padding: 1rem;
}

.sch-selection-empty {
    align-items: center;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    min-height: 220px;
    justify-content: center;
    padding: 1.35rem;
    text-align: center;
}

.sch-selection-empty-icon {
    align-items: center;
    background: #eef7eb;
    border-radius: 18px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 1.45rem;
    height: 54px;
    justify-content: center;
    margin-bottom: 0.8rem;
    width: 54px;
}

.sch-selection-empty h3 {
    color: #1f2933;
    font-size: 1rem;
    font-weight: 850;
    margin-bottom: 0.45rem;
}

.sch-selection-empty p {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* Broad page polish: home, print ticket, FAQ */
.print-ticket-page,
.faq-page {
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 28rem),
        linear-gradient(180deg, #f7faf6 0%, #eef3ed 100%);
}

.print-ticket-container,
.branch-container,
.faq-container {
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
    padding-top: clamp(1.25rem, 3vw, 2rem) !important;
}

.print-ticket-card,
.faq-page .accordion-item {
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.07);
    overflow: hidden;
}

.print-ticket-card .card-body {
    padding: clamp(1.15rem, 3vw, 1.6rem) !important;
}

/* ── Print ticket page ─────────────────────────────────────────────────── */
.ptk-page-bg {
    background:
        radial-gradient(circle at 78% 8%, rgba(83, 174, 39, 0.13), transparent 26rem),
        radial-gradient(circle at 15% 45%, rgba(var(--secondary-rgb), 0.08), transparent 22rem),
        linear-gradient(180deg, #f5fbed 0%, #ffffff 56%);
    min-height: 60vh;
    padding-bottom: clamp(2.25rem, 5vw, 4rem);
}

/* Final page-style overrides: align Branch/About/FAQ/Payment with print-ticket */
.branch-page .inner-page-hero,
.about-page .inner-page-hero,
.faq-page .inner-page-hero,
.payment-page .payment-hero.inner-page-hero {
    align-items: flex-end;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.1), transparent 13rem),
        linear-gradient(135deg, #102a16 0%, #18391b 58%, #296b18 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(25, 91, 18, 0.18);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.4rem;
    padding: clamp(1.6rem, 3vw, 2.25rem);
}

.branch-page .page-hero-title,
.about-page .page-hero-title,
.faq-page .page-hero-title,
.payment-page .payment-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.branch-page .page-hero-sub,
.about-page .page-hero-sub,
.faq-page .page-hero-sub,
.payment-page .payment-subtitle {
    color: rgba(226, 232, 240, 0.82);
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    margin: 0.9rem 0 0;
}

.faq-page .faq-accordion,
.payment-page .payment-layout,
.payment-page .pay-skl-layout,
.about-page .about-story-grid,
.about-page .about-services-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.08);
    padding: clamp(1rem, 2.6vw, 1.5rem);
}

.about-page .about-story-image img {
    border-radius: 18px;
    box-shadow: none;
}

.payment-page .payment-card,
.faq-page .faq-accordion .accordion-item,
.about-page .about-service-card {
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: none;
}

/* Route SEO sections: crawlable schedule/fare/how-to content. */
.schedule-page .route-seo-summary {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(var(--ink-rgb), 0.07);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 1rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
}

.schedule-page .route-seo-eyebrow {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    color: var(--primary-dark-color);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    gap: 0.4rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.55rem;
    padding: 0.32rem 0.75rem;
    text-transform: uppercase;
}

.schedule-page .route-seo-eyebrow i {
    color: var(--primary-color);
    font-size: 0.82rem;
}

.schedule-page .route-seo-summary h2,
.schedule-page .route-guide-card h2 {
    color: var(--ink);
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.schedule-page .route-seo-summary p,
.schedule-page .route-guide-card p,
.schedule-page .route-guide-card li {
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.65;
}

.schedule-page .route-seo-summary p {
    margin: 0.55rem 0 0;
    max-width: 780px;
}

.schedule-page .route-seo-pills {
    align-content: start;
    display: grid;
    gap: 0.45rem;
    min-width: 220px;
}

.schedule-page .route-seo-pills span {
    align-items: center;
    background: #f3f8f1;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--primary-dark-color);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.42rem;
    padding: 0.48rem 0.7rem;
    white-space: nowrap;
}

.schedule-page .route-guide-section {
    padding: 0 0 clamp(2rem, 4vw, 3rem);
}

.schedule-page .route-guide-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schedule-page .route-guide-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.schedule-page .route-guide-card::before {
    background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-rgb), 0.25));
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.schedule-page .route-guide-card:hover {
    box-shadow: 0 22px 50px rgba(var(--ink-rgb), 0.1);
    transform: translateY(-3px);
}

.schedule-page .route-guide-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05rem;
    height: 42px;
    justify-content: center;
    margin-bottom: 0.85rem;
    width: 42px;
}

.schedule-page .route-guide-card p {
    margin: 0.7rem 0 0;
}

.schedule-page .route-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
}

.schedule-page .route-guide-steps li {
    align-items: flex-start;
    display: flex;
    gap: 0.6rem;
}

.schedule-page .route-guide-step-num {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 999px;
    color: var(--primary-dark-color);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    margin-top: 0.1rem;
    width: 22px;
}

.home-routes-section {
    padding: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.home-section-heading {
    margin-bottom: 1.75rem;
    /*max-width: 780px;*/
}

/* Matches the "— LABEL" kicker style used by .home-steps-title,
   .home-feature-title and .home-destinations-title (::before content on
   those) so every homepage section header looks consistent. */
.home-section-heading .section-kicker {
    color: var(--primary-color);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.home-section-heading h2 {
    color: var(--ink);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.home-section-heading p {
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0.55rem 0 0;
}

.home-route-groups {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-route-group {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(var(--ink-rgb), 0.05);
    padding: 1.1rem 1.2rem;
}

.home-route-group--full {
    grid-column: 1 / -1;
}

.home-route-group-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.home-route-group-head h3 {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0;
}

.home-route-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.home-route-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.home-route-pill {
    align-items: center;
    background: #f3f8f1;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--primary-dark-color);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

.home-route-pill i {
    font-size: 0.76rem;
}

.home-route-pill:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .schedule-page .route-seo-summary,
    .schedule-page .route-guide-grid,
    .home-route-groups {
        grid-template-columns: 1fr;
    }

    .schedule-page .route-seo-pills {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .branch-page .inner-page-hero,
    .about-page .inner-page-hero,
    .faq-page .inner-page-hero,
    .payment-page .payment-hero.inner-page-hero {
        align-items: flex-start;
        border-radius: 18px;
        flex-direction: column;
    }
}

.print-ticket-page .print-ticket-container {
    padding-bottom: clamp(2.25rem, 5vw, 4rem) !important;
    padding-top: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.print-ticket-hero {
    align-items: flex-end;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.1), transparent 13rem),
        linear-gradient(135deg, #102a16 0%, #18391b 58%, #296b18 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(25, 91, 18, 0.18);
    color: #ffffff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.25rem);
    position: relative;
}

.print-ticket-hero::after {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    content: "";
    height: 18rem;
    position: absolute;
    right: -5rem;
    top: -5rem;
    width: 18rem;
}

.print-ticket-hero-copy {
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.print-ticket-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.print-ticket-page .page-hero-title,
.print-ticket-page .sub-head-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.print-ticket-page .page-hero-sub {
    color: rgba(226, 232, 240, 0.82);
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    margin: 0.9rem 0 0;
    max-width: 680px;
}

.print-ticket-hero-badge {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.34);
    border: 1px solid rgba(var(--brand-green-rgb), 0.42);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.85rem;
    min-width: 11.75rem;
    padding: 0.85rem 1rem;
    position: relative;
    z-index: 1;
}

.print-ticket-hero-badge > i {
    align-items: center;
    background: var(--brand-green);
    border-radius: 14px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.65rem;
    justify-content: center;
    width: 2.65rem;
}

.print-ticket-hero-badge span {
    display: block;
    min-width: 0;
}

.print-ticket-hero-badge small {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

.print-ticket-hero-badge strong {
    color: #ffffff;
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.16;
    margin-top: 0.2rem;
    max-width: 12rem;
}

.ptk-scan-card {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.08);
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    margin-top: 1.4rem;
    padding: clamp(1rem, 2.6vw, 1.5rem);
}

.ptk-scan-info {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.ptk-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ptk-scan-icon {
    align-items: center;
    background: #f1f8ec;
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 16px;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 58px;
    font-size: 1.75rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.ptk-scan-title {
    color: var(--ink);
    font-size: clamp(1.3rem, 2.4vw, 1.72rem);
    font-weight: 900;
    line-height: 1.18;
    margin: 0 0 0.4rem;
}

.ptk-scan-hint {
    color: var(--ink-muted);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0;
    max-width: 520px;
}

.ptk-steps {
    display: grid;
    gap: 0.72rem;
    margin-top: auto;
}

.ptk-step {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 14px;
    display: flex;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.7rem 0.85rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ptk-step:hover {
    border-color: rgba(var(--primary-rgb), 0.24);
    box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.06);
    transform: translateY(-1px);
}

.ptk-step-num {
    align-items: center;
    background: var(--primary-color);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.2);
    color: #fff;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 0.76rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.ptk-step-text {
    color: #334155;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
}

.ptk-scan-qr {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    justify-content: center;
    min-height: 100%;
    padding: clamp(1.25rem, 3vw, 1.7rem);
}

.ptk-qr-label {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 850;
    gap: 0.45rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.ptk-qr-label i {
    color: var(--primary-color);
    font-size: 1rem;
    letter-spacing: 0;
}

.ptk-qr-area {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 2px dashed rgba(var(--primary-rgb), 0.28);
    border-radius: 22px;
    box-shadow: inset 0 0 0 8px rgba(var(--primary-rgb), 0.035);
    display: flex;
    justify-content: center;
    max-width: 230px;
    padding: 1.1rem;
    position: relative;
    width: min(100%, 230px);
}

.ptk-qr-caption {
    color: var(--ink-faint);
    font-size: 0.82rem;
    font-weight: 650;
    margin: 0;
    text-align: center;
}

@media (max-width: 991.98px) {
    .ptk-scan-card {
        grid-template-columns: 1fr;
    }

    .ptk-scan-qr {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .print-ticket-hero {
        align-items: flex-start;
        border-radius: 18px;
        flex-direction: column;
    }

    .print-ticket-hero-badge {
        border-radius: 14px;
        min-width: min(100%, 16rem);
    }

    .ptk-section-head {
        flex-direction: column;
    }

    .ptk-step {
        align-items: flex-start;
    }
}

.print-ticket-page .title,
.faq-page .title-gradient {
    letter-spacing: 0;
}

.print-ticket-page .lead {
    background:
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.16), transparent 18rem),
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
}

.print-ticket-page .print-ticket-container {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.print-ticket-page .print-ticket-card {
    background: #ffffff;
    border-radius: 20px;
    min-height: 100%;
}

.print-ticket-page .print-ticket-card .title {
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 850;
    margin-bottom: 1rem !important;
}

.print-ticket-page .form-floating > .form-control {
    background: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 14px;
    min-height: 58px;
}

.print-ticket-page .form-floating > label {
    color: var(--ink-muted);
    font-weight: 700;
}

.print-ticket-page .form-floating > .form-control:focus {
    background: #ffffff;
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.print-ticket-page .btn-warning {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(245, 179, 1, 0.22);
    font-weight: 850;
    min-height: 54px;
}

.print-ticket-page .table-print,
.print-ticket-page .table-striped {
    font-size: 0.92rem;
}

.print-ticket-page .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(var(--ink-rgb), 0.18);
    overflow: hidden;
}

.print-ticket-page .modal-header,
.print-ticket-page .card-header {
    background: rgba(244, 251, 241, 0.5);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
    padding: 1rem 1.25rem;
}

.print-ticket-page .modal-footer {
    background: rgba(248, 250, 252, 0.5);
    border-top: 1px solid rgba(var(--ink-rgb), 0.06);
}

.ptk-qr-area #qrcode {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

/* ── Inner content pages: branch, about, FAQ, payment, confirm-email ──── */
.branch-page,
.about-page,
.faq-page,
.payment-page,
.confirm-email-page {
    background:
        radial-gradient(circle at 78% 8%, rgba(83, 174, 39, 0.13), transparent 26rem),
        radial-gradient(circle at 15% 45%, rgba(var(--secondary-rgb), 0.08), transparent 22rem),
        linear-gradient(180deg, #f5fbed 0%, #ffffff 56%);
}

.inner-page-container {
    padding-bottom: clamp(2.25rem, 5vw, 4rem) !important;
    padding-top: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.inner-page-hero,
.payment-hero.inner-page-hero {
    align-items: flex-end;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.1), transparent 13rem),
        linear-gradient(135deg, #102a16 0%, #18391b 58%, #296b18 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(25, 91, 18, 0.18);
    color: #ffffff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.4rem;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.25rem);
    position: relative;
}

.inner-page-hero::before,
.payment-hero.inner-page-hero::before {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    content: "";
    height: 18rem;
    pointer-events: none;
    position: absolute;
    right: -5rem;
    top: -5rem;
    width: 18rem;
}

.inner-page-hero::after,
.payment-hero.inner-page-hero::after {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    content: "";
    height: 9rem;
    pointer-events: none;
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 9rem;
}

.inner-page-hero-copy {
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.inner-page-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.inner-page-hero .page-hero-title,
.payment-hero.inner-page-hero .payment-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.inner-page-hero .page-hero-sub,
.payment-hero.inner-page-hero .payment-subtitle {
    color: rgba(226, 232, 240, 0.82);
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    margin: 0.9rem 0 0;
    max-width: 680px;
}

.inner-page-hero-badge,
.payment-hero-badge.inner-page-hero-badge {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.34);
    border: 1px solid rgba(var(--brand-green-rgb), 0.42);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.85rem;
    min-width: 11.75rem;
    padding: 0.85rem 1rem;
    position: relative;
    z-index: 1;
}

.inner-page-hero-badge > i,
.payment-hero-badge.inner-page-hero-badge > i {
    align-items: center;
    background: var(--brand-green);
    border-radius: 14px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.65rem;
    justify-content: center;
    width: 2.65rem;
}

.inner-page-hero-badge span,
.payment-hero-badge.inner-page-hero-badge span {
    display: block;
    min-width: 0;
}

.inner-page-hero-badge small,
.payment-hero-badge.inner-page-hero-badge small {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

.inner-page-hero-badge strong,
.payment-hero-badge.inner-page-hero-badge strong {
    color: #ffffff;
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.16;
    margin-top: 0.2rem;
    max-width: 12rem;
}

.faq-page .faq-accordion,
.payment-layout,
.pay-skl-layout {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.08);
    margin-top: 1.4rem !important;
    padding: clamp(1rem, 2.6vw, 1.5rem);
}

.faq-page .faq-accordion {
    display: grid;
    gap: 0.85rem;
}

.faq-page .faq-accordion .accordion-item {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06) !important;
    border-radius: 18px !important;
    box-shadow: none;
}

.faq-page .faq-accordion .accordion-button {
    border-radius: 18px !important;
    color: var(--ink);
    font-weight: 900;
    min-height: 74px;
    padding: 1.1rem 1.25rem;
}

.faq-page .faq-accordion .accordion-button:not(.collapsed) {
    background: #f4fbf1;
    color: var(--primary-color);
}

.faq-page .faq-accordion .accordion-body {
    color: var(--ink-soft);
    padding: 1.1rem 1.25rem 1.25rem;
}

.about-page .about-story-section {
    background: transparent;
    padding: 0 0 clamp(2.25rem, 5vw, 4rem);
}

.about-page .about-services-section {
    background: transparent;
    padding: clamp(2.25rem, 5vw, 4rem) 0;
}

.about-story-grid,
.about-services-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.08);
    padding: clamp(1rem, 2.6vw, 1.5rem);
}

.about-story-image img {
    border-radius: 18px;
    box-shadow: none;
    height: 100%;
}

.about-story-text {
    padding: clamp(0.5rem, 2vw, 1rem);
}

.about-services-grid {
    margin-top: 1.2rem;
}

.about-page .about-service-card {
    border-color: rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: none;
}

.about-page .about-service-card:hover {
    box-shadow: 0 16px 36px rgba(var(--ink-rgb), 0.08);
    transform: translateY(-2px);
}

.payment-layout,
.pay-skl-layout {
    margin-top: 1.4rem;
}

.payment-page .payment-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .inner-page-hero,
    .payment-hero.inner-page-hero {
        align-items: flex-start;
        border-radius: 18px;
        flex-direction: column;
    }

    .inner-page-hero-badge,
    .payment-hero-badge.inner-page-hero-badge {
        border-radius: 14px;
        min-width: min(100%, 16rem);
    }

    .faq-page .faq-accordion,
    .payment-layout,
    .pay-skl-layout,
    .about-story-grid,
    .about-services-panel {
        border-radius: 18px;
        padding: 1rem;
    }
}

/* ── Branch listing page (app/views/branch/index.php) ─────────────────── */
.branch-list {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.09);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    overflow: hidden;
}

.branch-row {
    align-items: center;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.07);
    display: flex;
    gap: 1.5rem;
    padding: 1.4rem 1.25rem;
    transition: background 0.15s var(--ease);
}

.branch-row:last-child {
    border-bottom: 0;
}

.branch-row:hover {
    background: #fafbfa;
}

/* Was an <a> linking straight to Google Maps - now a <button> that opens
   the branch detail popup instead (openBranchDetail(), branch.controller.js),
   so the reset below undoes default button chrome (border, background,
   padding) to keep it looking identical to the old link. */
.branch-row-media {
    aspect-ratio: 4 / 3;
    background: none;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 260px;
}

.branch-row-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s var(--ease);
    width: 100%;
}

.branch-row:hover .branch-row-media img {
    transform: scale(1.045);
}

.branch-row-media-zoom {
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border-radius: 999px;
    bottom: 8px;
    color: #ffffff;
    display: flex;
    font-size: 0.85rem;
    height: 28px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 8px;
    transition: opacity 0.2s var(--ease);
    width: 28px;
}

.branch-row:hover .branch-row-media-zoom,
.branch-row-media:focus-visible .branch-row-media-zoom {
    opacity: 1;
}

.branch-row-body {
    flex: 1;
    min-width: 0;
}

.branch-row-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.branch-row-title {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 650;
    letter-spacing: 0;
    margin: 0;
}

/* Was .branch-row-badge, showing a static "branches" label on every row -
   redundant on a page that's already titled "Our Branch". Now shows the
   branch's own short_addr (already returned by the API, previously unused
   anywhere in this view) as a compact at-a-glance chip, distinct from the
   fuller street address spelled out in .branch-row-address below it. */
.branch-row-tag {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 6px;
    color: var(--primary-dark-color);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 600;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
}

.branch-row-address {
    align-items: flex-start;
    color: var(--ink-soft);
    display: flex;
    font-size: 0.86rem;
    gap: 0.5rem;
    line-height: 1.55;
    margin: 0.4rem 0 0;
}

.branch-row-address i {
    color: rgba(var(--ink-rgb), 0.35);
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.branch-row-phones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.branch-row-phone {
    align-items: center;
    background: #f6f7f8;
    border-radius: 6px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 500;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    text-decoration: none;
}

.branch-row-phone i {
    color: rgba(var(--ink-rgb), 0.4);
}

.branch-row-phone:hover {
    background: #eef0f1;
    color: var(--ink);
}

.branch-row-cta {
    align-items: center;
    background: var(--primary-color);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    flex: 0 0 auto;
    font-size: 0.88rem;
    font-weight: 650;
    gap: 0.45rem;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.15rem;
    text-decoration: none;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
    white-space: nowrap;
}

.branch-row-cta:hover,
.branch-row-cta:focus {
    background: var(--primary-dark-color);
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

.branch-directory-empty {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.09);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    text-align: center;
}

.branch-directory-empty-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 999px;
    color: var(--primary-color);
    display: flex;
    font-size: 1.6rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.branch-directory-empty-text {
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin: 0;
}

/* ── Branch detail popup (opened by clicking a branch photo) ───────────── */
.branch-detail-modal .modal-dialog {
    max-width: 480px;
}

.branch-detail-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.branch-detail-close {
    /* background-color, not background - the shorthand resets
       background-image too, which is how .btn-close draws its X glyph
       (no visible icon content otherwise, just a blank circle). */
    background-color: rgba(15, 23, 42, 0.55);
    border-radius: 999px;
    box-shadow: none;
    height: 36px;
    opacity: 1;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 36px;
    z-index: 1;
}

.branch-detail-close:hover {
    background-color: rgba(15, 23, 42, 0.75);
}

.branch-detail-media {
    aspect-ratio: 16 / 10;
    background: #eef0f1;
    overflow: hidden;
}

.branch-detail-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.branch-detail-body {
    padding: 1.25rem 1.35rem 1.5rem;
}

.branch-detail-title {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.branch-detail-body .branch-row-address {
    margin-top: 0.6rem;
}

.branch-detail-body .branch-row-phones {
    margin-bottom: 1.1rem;
}

.branch-detail-cta {
    width: 100%;
}

@media (max-width: 767.98px) {
    .branch-row {
        align-items: stretch;
        flex-direction: column;
    }

    .branch-row-media {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .branch-row-cta {
        margin-top: 0.3rem;
        padding: 0.75rem 1.1rem;
    }

    .branch-detail-media {
        aspect-ratio: 16 / 9;
    }
}

.faq-accordion {
    display: grid;
    gap: 0.75rem;
}

.faq-page .accordion-item {
    background: #ffffff;
}

.faq-page .accordion-button {
    border-radius: 18px !important;
    box-shadow: none !important;
    color: #1f2933;
    font-weight: 850;
    line-height: 1.35;
    padding: 1rem 1.1rem;
}

.faq-page .accordion-button:not(.collapsed) {
    background: #f0f8ed;
    color: var(--primary-color);
}

.faq-page .accordion-body {
    color: #536171;
    line-height: 1.75;
    padding: 1rem 1.1rem 1.2rem;
}

.destination-block .card {
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.destination-block .card:hover {
    box-shadow: 0 22px 55px rgba(var(--ink-rgb), 0.12);
    transform: translateY(-2px);
}

.destination-grid {
    --bs-gutter-x: 1.15rem;
    --bs-gutter-y: 1.15rem;
}

.destination-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.06) !important;
    border-radius: 20px !important;
    isolation: isolate;
    min-height: 0;
}

.destination-card-link {
    color: inherit;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    text-decoration: none;
}

.destination-media {
    aspect-ratio: 16 / 9;
    background: #e8eef3;
    display: block;
    overflow: hidden;
}

.destination-card .card-img {
    display: block;
    filter: saturate(1.04) contrast(1.02);
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: filter 0.24s ease, transform 0.45s ease;
    width: 100%;
}

.destination-card:hover .card-img {
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.045);
}

.destination-info {
    align-items: center;
    background: #ffffff;
    color: #111827;
    display: flex;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    font-weight: 850;
    gap: 0.55rem;
    justify-content: flex-start;
    line-height: 1.1;
    min-height: 58px;
    padding: 0.85rem 1rem;
    transition: color 0.18s ease;
}

.destination-info i {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.09);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.destination-card:hover .destination-info {
    color: var(--primary-color);
}

@media (max-width: 767.98px) {
    .destination-card {
        min-height: 0;
    }
}

#carousel-promo {
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(var(--ink-rgb), 0.08);
    overflow: hidden;
}

#carousel-promo .carousel-inner,
#carousel-promo .carousel-item,
#carousel-promo .carousel-item img {
    height: 100%;
}

#carousel-promo .carousel-item img {
    object-fit: cover;
}

@media (min-width: 768px) {
    .home-feature-title {
        margin-bottom: 1.25rem;
    }

    #carousel-promo {
        aspect-ratio: 16 / 8;
        flex: initial;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        min-height: 360px;
        width: 100%;
    }

    #carousel-promo + *,
    #carousel-promo .carousel-inner {
        min-height: 100%;
    }
}

@media (min-width: 1200px) {
    #carousel-promo {
        max-width: 680px;
        min-height: 340px;
    }
}

.faq-page .accordion-button {
    font-size: 1.14rem;
}

.faq-page .accordion-body,
.faq-page .accordion-body * {
    font-size: 1.2rem !important;
    line-height: 1.85 !important;
}

@media (max-width: 767.98px) {
    .faq-page .accordion-button {
        font-size: 1rem;
    }

    .faq-page .accordion-body,
    .faq-page .accordion-body * {
        font-size: 1.08rem !important;
        line-height: 1.75 !important;
    }
}

/* Home FAQ inner container */
.home-faq-section {
    margin-bottom: 0 !important;
}

.home-faq-accordion {
    display: grid;
    gap: 0.85rem;
}

.home-faq-accordion .accordion-item {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(var(--ink-rgb), 0.045);
    margin-bottom: 0;
    overflow: hidden;
}

.home-faq-accordion .faq-list-item,
.faq-page .faq-accordion .faq-list-item {
    animation: faq-list-in 0.28s ease both;
    opacity: 1 !important;
    transform: none !important;
}

@keyframes faq-list-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.home-faq-accordion .accordion-button {
    background: #ffffff;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: #111827;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    font-weight: 850;
    min-height: 68px;
    padding: 1rem 1.25rem;
}

.home-faq-accordion .accordion-button::before {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.09);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--primary-color);
    content: "?";
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 0.95rem;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    margin-right: 0.8rem;
    width: 34px;
}

.home-faq-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.1), #ffffff 70%);
    color: var(--primary-color);
}

.home-faq-accordion .accordion-button::after {
    background-size: 1rem;
    opacity: 0.8;
}

.home-faq-accordion .accordion-body {
    background: #ffffff;
    border-top: 1px solid rgba(var(--ink-rgb), 0.06);
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.75;
    padding: 1rem 1.25rem 1.2rem 4.35rem;
}

.faq-page .title-gradient {
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2 !important;
}

.faq-page .page-hero {
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.faq-page .faq-accordion {
    gap: 0.85rem;
    margin-top: 0 !important;
}

.faq-page .faq-accordion .accordion-item {
    border: 1px solid rgba(var(--ink-rgb), 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(var(--ink-rgb), 0.045);
    margin-bottom: 0;
    overflow: hidden;
}

.faq-page .faq-accordion .accordion-button,
.home-faq-accordion .accordion-button {
    font-size: clamp(1rem, 1.4vw, 1.14rem) !important;
    line-height: 1.35;
}

.faq-page .faq-accordion .accordion-button {
    min-height: 68px;
    padding: 1rem 1.25rem;
}

.faq-page .faq-accordion .accordion-body,
.faq-page .faq-accordion .accordion-body *,
.home-faq-accordion .accordion-body,
.home-faq-accordion .accordion-body * {
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

.faq-page .faq-accordion .accordion-body {
    padding: 1rem 1.25rem 1.2rem;
}

.faq-markdown {
    color: var(--ink-soft);
}

.faq-markdown :is(p, ul, ol) {
    margin-bottom: 0.85rem;
}

.faq-markdown :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

.faq-markdown p {
    color: var(--ink-soft);
    font-weight: 650;
}

.faq-markdown ul,
.faq-markdown ol {
    display: grid;
    gap: 0.55rem;
    padding-left: 1.25rem;
}

.faq-markdown li {
    color: var(--ink-soft);
    padding-left: 0.15rem;
}

.faq-markdown li::marker {
    color: var(--primary-color);
    font-size: 0.8em;
}

.faq-markdown strong {
    color: var(--ink);
    font-weight: 850;
}

.faq-markdown a {
    color: var(--primary-color) !important;
    font-weight: 800;
    text-decoration: none !important;
    text-underline-offset: 0;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.faq-markdown a:hover,
.faq-markdown a:focus {
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 6px;
    color: var(--primary-dark-color) !important;
    outline: none;
    text-decoration: none !important;
}

/* ── Login modal (.login-modal-* namespace) ──────────────────────────── */
.login-modal-dialog {
    max-width: min(92vw, 410px);
    justify-content: center !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100%;
}

.login-modal-content {
    /* Shared by every rounded element in this modal (card, both buttons,
       the email field) so they all use the exact same corner radius
       instead of each picking its own value. */
    --login-modal-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: var(--login-modal-radius) !important;
    max-height: calc(100vh - 2rem) !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* Brand top accent */
.login-modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: var(--login-modal-radius) var(--login-modal-radius) 0 0;
    z-index: 1;
}

.login-modal-close {
    align-items: center;
    background: rgba(var(--ink-rgb), 0.06);
    border: none;
    border-radius: 999px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    height: 30px;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: background 0.15s, color 0.15s;
    width: 30px;
    z-index: 10;
}

.login-modal-close:hover {
    background: rgba(var(--ink-rgb), 0.12);
    color: #111827;
}

.login-modal-body {
    /* .modal-content (Bootstrap) is already display:flex;
       flex-direction:column - .login-modal-terms is now a sibling of this
       element instead of its last child, pinned as a non-shrinking footer
       band below it (see .login-modal-terms). This is the flexible/
       scrollable region above that footer, so overflow-y:auto here instead
       of on .login-modal-content keeps the terms visible even if the form
       content above needs to scroll on a short viewport.
       display:flex + justify-content:center vertically centers the
       title/buttons within this region instead of leaving them pinned to
       the top with empty space below - #loginModal .modal-content forces
       a min-height (500px) taller than the form's own natural content
       height, which is what was creating that gap. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 2rem 1.85rem 1.75rem;
}

/* No logo and no subtitle anymore - the title alone opens the modal,
   so it carries a bit of extra top/bottom spacing to compensate. */
.login-modal-title {
    color: var(--ink);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.btn-login-google {
    align-items: center;
    /* Was solid #f8f9fa - looked fine against the modal's old solid-white
       background, but now that .login-modal-content is translucent glass,
       an opaque fill here reads as a flat patch floating on top of it
       instead of belonging to the same surface. Slightly translucent
       keeps the border doing the work of making this readable as a
       button (the fix this comment used to describe), while still
       looking like it's part of the glass card. */
    background: rgba(248, 249, 250, 0.85);
    border: 1.5px solid #c9ccd1;
    border-radius: var(--login-modal-radius, 18px);
    color: #1a1a2e;
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
    font-weight: 700;
    gap: 0.65rem;
    justify-content: center;
    min-height: 52px;
    padding: 0.6rem 1.1rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn-login-google img {
    height: 20px;
    width: 20px;
}

.btn-login-google:hover {
    background: #f1f3f4;
    border-color: #adb1b8;
    color: #111827;
    transform: translateY(-2px);
}

.btn-login-google:active {
    transform: translateY(0) scale(0.98);
}

.login-modal-divider {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.75rem;
    letter-spacing: 0.08em;
    margin: 1.1rem 0;
    text-transform: uppercase;
}

.login-modal-divider span {
    background: rgba(255, 255, 255, 0.7);
    padding: 0 0.15rem;
}

.login-modal-divider::before,
.login-modal-divider::after {
    background: #eef0f2;
    content: "";
    flex: 1;
    height: 1px;
}

.login-modal-input {
    border-bottom: 0 !important;
    border-radius: 0 !important;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.5rem 0 !important;
}

.login-modal-field {
    margin-bottom: 0.85rem !important;
}

.login-modal-field::after {
    display: none !important;
}

/* Label stays in the DOM (via Bootstrap's .visually-hidden in the markup)
   for accessibility, but isn't shown - the icon + placeholder carry the
   meaning visually, so this rule now only matters for screen readers. */
.login-modal-field .form-label {
    color: #374151;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.login-modal-input-group {
    /* Same fill/border/height as .btn-login-google and .btn-login-primary
       (below) - all three now share one look instead of the email field
       being a slightly different shade/height from its neighbors.
       Translucent for the same reason as .btn-login-google - .modal-content
       became glass after this was written. */
    align-items: center;
    background: rgba(248, 249, 250, 0.85);
    border: 1.5px solid #c9ccd1;
    border-radius: var(--login-modal-radius, 18px);
    min-height: 52px;
    overflow: hidden;
    padding: 0.1rem 1.1rem;
    transition: border-color 0.16s, background 0.16s;
}

.login-modal-input-group:focus-within {
    background: #f1f3f4;
    border-color: #adb1b8;
}

.login-modal-input-group::after {
    display: none !important;
}

.login-modal-input-group .input-group-text {
    background: transparent !important;
    border: 0;
    color: var(--primary-color);
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0;
}

.login-modal-input-group .form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #101828;
}

.login-modal-input-group .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.login-modal-terms {
    /* Now a sibling of .login-modal-body (see default-layout.php), pinned
       as its own footer band at the bottom of the card instead of being
       the last paragraph inside the scrollable form content. flex-shrink:0
       keeps it from being squeezed if .login-modal-body needs to scroll.
       Translucent (not solid #fafafa) so it reads as part of the glass
       card instead of an opaque strip stuck on the bottom of it. */
    background: rgba(250, 250, 250, 0.4);
    border-top: 1px solid rgba(var(--ink-rgb), 0.06);
    color: #9ca3af;
    flex-shrink: 0;
    font-size: 0.73rem;
    line-height: 1.6;
    margin: 0;
    padding: 0.9rem 1.85rem;
    text-align: center;
}

.login-modal-terms a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.login-modal-terms a:hover {
    text-decoration: underline;
}

.login-modal-success-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.09);
    border-radius: 999px;
    display: flex;
    font-size: 2.8rem;
    height: 90px;
    justify-content: center;
    margin: 0 auto 1rem;
    width: 90px;
}

/* ── Email-sent state (.lm-sent-* namespace) ───────────────────────────── */
.lm-sent-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0.25rem 0;
}

.lm-sent-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.1rem;
}

.lm-sent-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.10);
    animation: lm-ring-pulse 2s ease-in-out infinite;
}

.lm-sent-icon-inner {
    position: absolute;
    inset: 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
}

@keyframes lm-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 0.4; }
}

.lm-sent-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.35rem;
}

.lm-sent-sub {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}

.lm-sent-email {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    word-break: break-all;
}

.lm-sent-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--primary-rgb), 0.07);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    /* Was 0.45rem - .lm-sent-status-desc right after this used to carry
       the rest of the spacing down to .lm-sent-actions with its own
       margin-bottom, but that paragraph was removed (trimming redundant
       copy), so this needs to cover that gap on its own now. */
    margin-bottom: 1.1rem;
}

.lm-sent-status-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: lm-blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes lm-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.lm-sent-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.9rem;
}

.lm-sent-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.28);
    transition: box-shadow 0.2s, transform 0.15s;
}

.lm-sent-btn-primary:hover {
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.38);
    transform: translateY(-1px);
}

.lm-sent-btn-ghost {
    background: #f3f4f6;
    color: #374151;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.6rem 1rem;
    transition: background 0.15s;
}

.lm-sent-btn-ghost:hover:not(:disabled) {
    background: #e9f7e0;
    border-color: rgba(var(--primary-rgb), 0.3);
    color: #1a5c02;
}

.lm-sent-btn-ghost:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Decorative background wave on the homepage. Was fill-white at 7% opacity
   positioned over .home-steps-section, whose gradient starts at #ffffff -
   white-on-white made it essentially invisible. Uses the brand green
   instead (still very subtle) and drifts gently so it reads as a living
   background accent rather than static, easy-to-miss decoration. */
.home-bg-wave {
    animation: home-bg-wave-float 14s ease-in-out infinite alternate;
    fill: var(--primary-color);
    opacity: 0.09;
}

@keyframes home-bg-wave-float {
    from {
        transform: translateY(0) scale(1);
    }
    to {
        transform: translateY(-26px) scale(1.015);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-bg-wave {
        animation: none;
    }
}

/* ── Book in 3 Easy Steps (.home-steps-* / .step-* namespace) ─────────── */
.home-steps-section {
    background: linear-gradient(180deg, #ffffff 0%, #f3fbea 55%, #ffffff 100%);
    padding: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.home-steps-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.home-steps-title::before {
    color: var(--primary-color);
    content: '— HOW IT WORKS';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.steps-grid {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    margin-top: 2.75rem;
}

.step-card {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.06);
    padding: 1.2rem 1.3rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.step-card:hover {
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.13);
    transform: translateY(-4px);
}

.step-num {
    align-items: center;
    background: linear-gradient(135deg, #1c7808 0%, #75c91d 100%);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    margin-bottom: 0.7rem;
    width: 26px;
}

.step-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border: 0;
    border-radius: 16px;
    display: flex;
    height: 50px;
    justify-content: center;
    margin-bottom: 0.7rem;
    width: 50px;
}

.step-icon img {
    height: 29px;
    object-fit: contain;
    width: 29px;
}

.step-title {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.step-desc {
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.step-connector {
    align-items: center;
    color: rgba(var(--primary-rgb), 0.40);
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    padding: 50px 1.25rem;
    padding-bottom: 2.5rem; /* optical balance with card content below number+icon */
}

.step-pay-logos {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

/* Matches .ftr-pay img (footer "We accept" row) - same logos, same
   treatment, instead of bare dimmed icons with inconsistent heights. */
.step-pay-logos img {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 5px;
    height: 20px;
    object-fit: contain;
    width: auto;
}

@media (max-width: 767.98px) {
    /* Desktop stacks number -> icon -> title -> desc vertically inside a
       tall card, sized for a 3-across grid. Stacked full-width on mobile
       that leaves each card mostly empty space below two short lines of
       text. Switch to a compact icon-left/text-right row instead - same
       content, a fraction of the height, no dead space. The number badge
       moves from a standalone circle above the icon to a small badge
       overlaid on the icon's corner. */
    .steps-grid {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 1.1rem;
    }

    .step-connector {
        display: none;
    }

    .step-card {
        align-items: center;
        display: flex;
        gap: 0.9rem;
        padding: 0.85rem 1rem;
        position: relative;
    }

    .step-num {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        font-size: 0.62rem;
        height: 19px;
        left: 0.6rem;
        margin-bottom: 0;
        position: absolute;
        top: 0.6rem;
        width: 19px;
    }

    .step-icon {
        flex-shrink: 0;
        height: 46px;
        margin-bottom: 0;
        width: 46px;
    }

    .step-icon img {
        height: 26px;
        width: 26px;
    }

    .step-title {
        font-size: 0.95rem;
        margin-bottom: 0.15rem;
    }

    .step-desc {
        font-size: 0.82rem;
        line-height: 1.4;
    }
}

/* ── Why choose Larryta (.hf-* namespace) ────────────────────────────── */
.home-feature-section {
    background: linear-gradient(180deg, #f3fbea 0%, #ffffff 70%);
    padding: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.home-feature-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.home-feature-title::before {
    color: var(--primary-color);
    content: '— WHY CHOOSE US';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.home-feature-layout {
    align-items: center;
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    margin-top: 2.75rem;
}

.home-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.hf-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.10);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.05);
    display: flex;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hf-item:hover {
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.13);
    transform: translateX(5px);
}

.hf-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.08);
    border: 0;
    border-radius: 13px;
    display: flex;
    flex: 0 0 46px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.hf-icon img {
    height: 24px;
    object-fit: contain;
    width: 24px;
}

.hf-text {
    color: #1f2933;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Carousel */
.hf-carousel {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(var(--ink-rgb), 0.12);
    overflow: hidden;
}

.hf-carousel .carousel-item {
    transition: opacity 0.9s ease-in-out, transform 1.1s ease-in-out;
}

.hf-carousel .carousel-item.active img {
    transform: scale(1.02);
}

.hf-carousel img {
    transition: transform 4.2s ease;
}

.home-feature-carousel .carousel-control-prev,
.home-feature-carousel .carousel-control-next {
    opacity: 0;
    transition: opacity 0.18s;
    width: 11%;
}

.home-feature-carousel:hover .carousel-control-prev,
.home-feature-carousel:hover .carousel-control-next {
    opacity: 0.85;
}

@media (max-width: 767.98px) {
    .home-feature-layout {
        grid-template-columns: 1fr;
        margin-top: 1.25rem;
    }

    .home-feature-carousel {
        order: -1;
        border-radius: 16px;
    }

    .hf-item {
        padding: 0.75rem 0.9rem;
    }
}

/* ── Destinations section ──────────────────────────────────────────────── */
.home-destinations-section {
    background: linear-gradient(180deg, #f3fbea 0%, #ffffff 65%);
    padding: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.home-destinations-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.75rem;
}

.home-destinations-title::before {
    color: var(--primary-color);
    content: '— OUR LOCATIONS';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

/* ── FAQ section ───────────────────────────────────────────────────────── */
.home-faq-outer {
    background: linear-gradient(180deg, #ffffff 0%, #f3fbea 45%, #ffffff 100%);
    padding: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.home-faq-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.75rem;
}

.home-faq-title::before {
    color: var(--primary-color);
    content: '— GOT QUESTIONS';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

/* ── Promotions / News block ───────────────────────────────────────────── */
.home-promo-block {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.home-promo-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.home-promo-title::before {
    color: var(--primary-color);
    content: '— NEWS & PROMOTIONS';
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

/* ── Greeting / about block (.home-about-* namespace) ─────────────────── */
.home-about-section {
    padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}

.home-about-card {
    background: linear-gradient(135deg, #f0f9e8 0%, #ffffff 60%);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-left: none;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.06);
    display: flex;
    overflow: hidden;
    position: relative;
}

.home-about-accent {
    background: linear-gradient(180deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.4) 100%);
    flex: 0 0 5px;
    min-height: 100%;
}

.home-about-inner {
    padding: clamp(1.5rem, 3vw, 2rem);
}

.home-about-quote-icon {
    color: var(--primary-color);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    opacity: 0.35;
}

.home-about-text {
    color: #374151;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.8;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .home-feature-layout {
        grid-template-columns: 1fr;
    }

    .home-feature-carousel {
        order: -1;
    }
}

/* ── About page (.about-* namespace) ──────────────────────────────────── */
.about-story-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.about-story-grid {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: 1fr 1fr;
}

.about-story-image img {
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(var(--ink-rgb), 0.13);
    display: block;
    object-fit: cover;
    width: 100%;
}

.about-eyebrow {
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.about-section-title {
    color: #111827;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.about-story-text p {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.85;
    margin-bottom: 0.9rem;
}

.about-founded-badge {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.09) 0%, rgba(100,200,30,0.04) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.20);
    border-radius: 14px;
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.65rem 1.2rem;
}

.about-founded-badge .bi {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.about-founded-badge span {
    color: #6b7280;
    font-size: 0.88rem;
}

.about-founded-badge strong {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

/* Stats bar */
.about-stats-section {
    background:
        radial-gradient(ellipse 55% 120% at 8% 50%, rgba(132, 202, 72, 0.18) 0%, transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f7fbf4 100%);
    padding: clamp(2.25rem, 4vw, 3.5rem) 0;
}

.about-stats-grid {
    background:
        radial-gradient(circle at 9% 8%, rgba(132, 202, 72, 0.62) 0%, transparent 31%),
        linear-gradient(112deg, #34b719 0%, #238318 38%, #0a3a1e 100%);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 52px rgba(15, 70, 24, 0.20);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    padding: clamp(1.85rem, 3.8vw, 2.65rem) 0;
    position: relative;
    text-align: center;
}

.about-stats-grid::before,
.about-stats-grid::after {
    border-radius: 999px;
    content: '';
    height: 320px;
    pointer-events: none;
    position: absolute;
    width: 320px;
}

.about-stats-grid::before {
    background: repeating-radial-gradient(
        circle,
        transparent 0 17px,
        rgba(255, 255, 255, 0.14) 18px 19px,
        transparent 20px 32px
    );
    bottom: -185px;
    left: -170px;
}

.about-stats-grid::after {
    background: repeating-radial-gradient(
        circle,
        transparent 0 17px,
        rgba(255, 255, 255, 0.10) 18px 19px,
        transparent 20px 32px
    );
    right: -170px;
    top: -185px;
}

.about-stat {
    padding: 0.75rem 1rem 0.9rem;
    position: relative;
    z-index: 1;
}

.about-stat:not(:last-child)::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.58) 18%,
        rgba(255, 255, 255, 0.58) 82%,
        transparent 100%
    );
    bottom: 12%;
    content: '';
    position: absolute;
    right: 0;
    top: 18%;
    width: 1px;
}

.about-stat-icon {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 248, 222, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    box-shadow:
        0 14px 28px rgba(6, 42, 14, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: #2f861f;
    display: inline-flex;
    font-size: 1.22rem;
    height: 54px;
    justify-content: center;
    margin-bottom: 1.05rem;
    position: relative;
    width: 54px;
}

.about-stat-icon::after {
    border: 1px dashed rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    content: '';
    inset: -9px;
    position: absolute;
}

.about-stat-icon .bi {
    line-height: 1;
}

.about-stat-value {
    color: #ffffff;
    font-size: clamp(2.25rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.7rem;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
}

.about-stat-value::after {
    background: #84ca48;
    border-radius: 999px;
    content: '';
    display: block;
    height: 3px;
    margin: 0.7rem auto 0;
    width: 40px;
}

.about-stat-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Services grid */
.about-services-section {
    background: linear-gradient(180deg, #f3fbea 0%, #ffffff 65%);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.about-services-section .about-section-title {
    margin-bottom: 1.75rem;
    margin-top: 0.35rem;
}

.about-services-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

.about-service-card {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.11);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.06);
    padding: 1.5rem 1.3rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.about-service-card:hover {
    box-shadow: 0 10px 32px rgba(var(--primary-rgb), 0.13);
    transform: translateY(-4px);
}

.about-service-icon {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.12) 0%, rgba(100,200,30,0.07) 100%);
    border: 1.5px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 14px;
    color: var(--primary-color);
    display: flex;
    font-size: 1.4rem;
    height: 52px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 52px;
}

.about-service-title {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.about-service-desc {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0;
}

/* About page responsive */
@media (max-width: 991.98px) {
    .about-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .about-story-grid {
        gap: 1.75rem;
        grid-template-columns: 1fr;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stat:nth-child(1),
    .about-stat:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
        padding-bottom: 1.25rem;
    }

    .about-stat:nth-child(2)::after,
    .about-stat:nth-child(4)::after {
        display: none;
    }

    .about-stat:nth-child(3),
    .about-stat:nth-child(4) {
        padding-top: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .about-services-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pre-footer CTA strip ──────────────────────────────────────────────── */
.pre-footer {
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, rgba(var(--primary-rgb),0.25) 0%, transparent 55%),
        linear-gradient(135deg, #0f1a0e 0%, #1a2e18 100%);
    border-top: 1px solid rgba(var(--primary-rgb), 0.25);
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.pre-footer-inner {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pre-footer-title {
    color: #ffffff;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.pre-footer-sub {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
    margin: 0;
}

.pre-footer-btn {
    background: var(--primary-color);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35);
    color: #ffffff;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.7rem 1.6rem;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    white-space: nowrap;
}

.pre-footer-btn:hover {
    background: #1c9408;
    box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.45);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ── Modern footer (.ftr-* namespace) ─────────────────────────────────── */
footer#footer {
    background:
        radial-gradient(ellipse 55% 45% at 8% 0%, rgba(var(--primary-rgb), 0.14) 0%, transparent 68%),
        radial-gradient(ellipse 45% 40% at 92% 15%, rgba(252, 194, 36, 0.06) 0%, transparent 62%),
        linear-gradient(170deg, #171c21 0%, #0d1014 100%);
    border-top: 3px solid var(--primary-color);
    color: rgba(255, 255, 255, 0.65);
}

.ftr-body {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.ftr-top {
    /* Bootstrap row + col-3 handles the grid */
}

.ftr-links-col,
.ftr-tripadvisor-col,
.ftr-apps-col,
.ftr-contact-col {
    padding: 0;
}

/* Phone link in contact col */
.ftr-phone-link {
    align-items: center;
    color: rgba(255, 255, 255, 0.65);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    text-decoration: none;
    transition: color 0.18s;
}

.ftr-phone-link:hover {
    color: #ffffff;
}

.ftr-phone-link .bi {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.ftr-socials {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 2rem;
    overflow: visible;
    padding-top: 1.1rem;
}

.ftr-social-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: relative;
    transition: background 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    width: 38px;
}

.ftr-social-btn:hover {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    transform: translateY(-3px);
}

.ftr-social-btn img {
    height: 18px;
    object-fit: contain;
    width: 18px;
}

/* Headings */
.ftr-heading {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.ftr-heading::after {
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(252,194,36,0.7) 100%);
    border-radius: 999px;
    content: "";
    display: block;
    height: 2px;
    margin-top: 0.45rem;
    transition: width 0.3s ease;
    width: 28px;
}

/* Nav links */
.ftr-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ftr-links a {
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 0.4rem;
    padding: 0.32rem 0.4rem 0.32rem 0;
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
}

.ftr-links a::before {
    color: var(--primary-color);
    content: "›";
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    transition: opacity 0.15s, transform 0.15s;
    transform: translateX(0);
}

.ftr-links a:hover {
    color: #ffffff;
    padding-left: 0.3rem;
}

.ftr-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* TripAdvisor custom badge - Nuxt.com-style dark "glass" card: soft
   low-opacity fill + hairline border on the dark footer bg, generous
   rounded corners, brand-green glow/lift on hover instead of a flat color
   swap. Capped at max-width so the card stays proportionate to the other
   3 (unboxed) columns instead of stretching to fill the whole column like
   before - that's what read as "uneven" last time; the fix here is
   keeping the card compact, not removing it. */
.ftr-ta-badge {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 280px;
    padding: 1.1rem 1.25rem;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ftr-ta-badge:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--primary-rgb), 0.14);
    transform: translateY(-2px);
}

/* .cdsROW.narrow (TripAdvisor's own class, defined near line 1809) center-
   aligns its text by default - looked inconsistent against every other
   left-aligned element in this footer, so this column's title/reviews/logo
   were the only centered thing in an otherwise fully left-aligned row. */
.ftr-ta-badge .cdsROW.narrow {
    text-align: left;
}

/* The widget's backgroundColor=transparent URL param only affects part of
   its own markup - the actual card row (.cdsROW, TripAdvisor's own class
   name) still renders a hardcoded white background. !important is needed
   since the widget's own styles are injected after this stylesheet loads
   and may carry inline/higher-priority rules. Text color is overridden too
   - the widget's default text is tuned for a white card, and would be
   near-unreadable dark-on-dark once that background is removed. */
.ftr-ta-badge .cdsROW {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ftr-ta-badge .cdsROW,
.ftr-ta-badge .cdsROW a,
.ftr-ta-badge .cdsROW span,
.ftr-ta-badge .cdsROW div {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ftr-ta-logo {
    filter: brightness(0) invert(1);
    height: 22px !important;
    max-width: none !important;
    opacity: 0.85;
    width: auto !important;
}

.ftr-ta-name {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
}

.ftr-ta-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.ftr-ta-stars {
    color: #34e0a1;
    display: flex;
    font-size: 0.6rem;
    gap: 0.1rem;
}

.ftr-ta-reviews {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
}

/* App badges */
.ftr-apps {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0;
}

.ftr-app-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.18s, opacity 0.18s, box-shadow 0.18s;
    width: 174px;
}

.ftr-app-btn:hover {
    opacity: 0.88;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.ftr-app-btn img {
    display: block;
    height: auto;
    max-width: none;
    object-fit: contain;
    width: 174px;
}

.ftr-pay {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ftr-pay img {
    height: 22px;
    object-fit: contain;
    transition: transform 0.15s;
    width: auto;
}

.ftr-pay img:hover {
    transform: translateY(-2px);
}

/* Back-to-top button */
.ftr-top-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    height: 36px;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
    width: 36px;
}

.ftr-top-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.45);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Bottom bar */
.ftr-bottom {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: clamp(3rem, 5vw, 4rem);
    padding: 1.4rem 0;
}

.ftr-copy {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* Each row pairs a left/right element that make sense together - copyright
   text with the back-to-top action, timezone with the language switcher -
   and justifies them apart. display:contents isn't needed here since both
   rows are real siblings of .ftr-bottom, so on wide screens they just sit
   side by side (row1 left cluster, row2 right cluster) via .ftr-bottom's
   own space-between; on narrow screens (575.98px block below) they stack
   full-width, each staying internally justified. */
.ftr-bottom-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ftr-timezone {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem 0.3rem 0.6rem;
}

.ftr-timezone i {
    color: var(--primary-color);
    font-size: 0.78rem;
}

.ftr-timezone-time {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
}

.ftr-lang-btn {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ftr-lang-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Bootstrap col-12/col-sm-6/col-lg-3 handles responsive layout */

@media (max-width: 575.98px) {
    .login-modal-body {
        padding: 1.65rem 1.35rem 1.45rem;
    }

    .login-modal-logo {
        height: 46px;
    }

    .login-modal-title {
        font-size: 1.25rem;
    }

    /* ── Footer mobile layout ─────────────────────────────────── */
    .ftr-body {
        padding-top: 1.5rem;
    }

    .ftr-bottom {
        padding-left: 0;
        padding-right: 0;
    }

    .ftr-links-col,
    .ftr-apps-col,
    .ftr-tripadvisor-col,
    .ftr-contact-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .ftr-contact-col {
        border-bottom: none;
    }

    .ftr-heading {
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        margin-bottom: 0.75rem;
    }

    .ftr-heading::after {
        width: 22px;
        margin-top: 0.3rem;
    }

    .ftr-links {
        display: flex;
        flex-direction: column;
    }

    .ftr-links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .ftr-links li:last-child {
        border-bottom: none;
    }

    .ftr-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.93rem;
        font-weight: 500;
        padding: 0.65rem 0;
        color: rgba(255, 255, 255, 0.75);
    }

    .ftr-links a::before {
        display: none;
    }

    .ftr-links a::after {
        content: "›";
        color: rgba(255, 255, 255, 0.3);
        font-size: 1.1rem;
        font-weight: 300;
    }

    .ftr-socials {
        gap: 0.5rem;
    }

    .ftr-social-btn {
        height: 38px;
        width: 38px;
        border-radius: 10px;
    }

    footer#footer .ftr-social-btn img {
        height: 18px !important;
        width: 18px !important;
    }

    .ftr-apps {
        flex-direction: column;
        gap: 0.65rem;
    }

    .ftr-app-btn {
        width: 100%;
        max-width: 160px;
    }

    footer#footer .ftr-app-btn img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .ftr-pay {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .ftr-pay img {
        height: 22px !important;
        width: auto !important;
        object-fit: contain;
    }

    .ftr-bottom {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1.25rem;
    }

    .ftr-bottom-row {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .home-faq-accordion .accordion-button {
        min-height: 58px;
        padding: 0.85rem 0.95rem;
    }

    .home-faq-accordion .accordion-body {
        padding-left: 1rem;
    }

}

/* ── Seat map: center all rows inside card-body ─────────────────────── */
.sch-seatmap-card .card-body {
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* ── Seat tooltip (hover) ───────────────────────────────────────────── */
.sch-seatmap-card .seat[seattip] {
    position: relative;
}

/* Tooltip bubble */
.sch-seatmap-card .seat[seattip]::after {
    background: rgba(var(--ink-rgb), 0.88);
    border-radius: 8px;
    bottom: calc(100% + 10px);
    color: #fff;
    content: attr(seattip);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    left: 50%;
    letter-spacing: 0.02em;
    opacity: 0;
    padding: 5px 10px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
    z-index: 100;
}

/* Tooltip arrow */
.sch-seatmap-card .seat[seattip]::before {
    border: 5px solid transparent;
    border-top-color: rgba(var(--ink-rgb), 0.88);
    bottom: calc(100% + 1px);
    content: "";
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 0.16s ease;
    z-index: 100;
}

/* Show on hover */
.sch-seatmap-card .seat[seattip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sch-seatmap-card .seat[seattip]:hover::before {
    opacity: 1;
}

/* Green bubble for available seats */
.sch-seatmap-card .seat.available[seattip]:hover::after {
    background: rgba(var(--primary-rgb), 0.92);
}
.sch-seatmap-card .seat.available[seattip]:hover::before {
    border-top-color: rgba(var(--primary-rgb), 0.92);
}

/* Darker green for selected */
.sch-seatmap-card .seat.available[data-name="selected_true"][seattip]:hover::after {
    background: rgba(22, 100, 0, 0.95);
}
.sch-seatmap-card .seat.available[data-name="selected_true"][seattip]:hover::before {
    border-top-color: rgba(22, 100, 0, 0.95);
}

/* Red bubble for booked / busy */
.sch-seatmap-card .seat.booked[seattip]:hover::after,
.sch-seatmap-card .seat.busy[seattip]:hover::after {
    background: rgba(184, 40, 40, 0.92);
}
.sch-seatmap-card .seat.booked[seattip]:hover::before,
.sch-seatmap-card .seat.busy[seattip]:hover::before {
    border-top-color: rgba(184, 40, 40, 0.92);
}

/* ── Bus schedule card skeleton ─────────────────────────────────────────── */
@keyframes skl-shine-anim {
    0%   { background-position: -500px 0; }
    100% { background-position: 500px 0; }
}

.skl-shine {
    animation: skl-shine-anim 1.3s ease-in-out infinite;
    background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 500px 100%;
    border-radius: 6px;
}

.bus-skl-card {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    overflow: hidden;
}

.bus-skl-body {
    padding: 1.25rem 1.5rem;
}

.bus-skl-img {
    border-radius: 10px;
    flex-shrink: 0;
    height: 72px;
    width: 72px;
}

.bus-skl-bar {
    border-radius: 6px;
    display: block;
}

.bus-skl-badge {
    border-radius: 20px;
    height: 26px;
    width: 80px;
}

.bus-skl-timeline {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.bus-skl-stop {
    flex: 0 0 auto;
}

.bus-skl-route {
    flex: 1;
    height: 4px;
    border-radius: 99px;
}

.bus-skl-action {
    flex: 0 0 auto;
    text-align: right;
}

.bus-skl-btn {
    border-radius: 10px;
    height: 40px;
    width: 110px;
}

/* stagger shimmer delay per card */
[ng-repeat="i in [1,2,3]"]:nth-child(1) .skl-shine { animation-delay: 0s; }
[ng-repeat="i in [1,2,3]"]:nth-child(2) .skl-shine { animation-delay: 0.15s; }
[ng-repeat="i in [1,2,3]"]:nth-child(3) .skl-shine { animation-delay: 0.30s; }

/* ── Terms & Conditions modal ───────────────────────────────────────────── */
.tc-modal .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18);
    overflow: hidden;
}

.tc-modal-header {
    align-items: center;
    background: linear-gradient(135deg, rgba(240, 253, 240, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.14);
    display: flex;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
}

.tc-modal-title-wrap {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.tc-modal-icon {
    align-items: center;
    background: rgba(var(--primary-rgb), 0.12);
    border-radius: 10px;
    color: var(--primary-color);
    display: flex;
    font-size: 1.1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.tc-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.tc-modal-body {
    max-height: 55vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb),0.3) transparent;
}

.tc-notice {
    align-items: flex-start;
    background: rgba(var(--primary-rgb), 0.07);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    color: #1a5c1a;
    display: flex;
    font-size: 0.88rem;
    font-weight: 600;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    padding: 0.75rem 1rem;
}

.tc-notice-icon {
    color: var(--primary-color);
    flex-shrink: 0;
    font-size: 0.95rem;
    margin-top: 1px;
}

.tc-content {
    font-size: 0.9rem;
    line-height: 1.7;
}

.tc-content ul, .tc-content ol {
    padding-left: 1.2rem;
}

.tc-content li {
    margin-bottom: 0.5rem;
    color: #374151;
}

.tc-remark {
    align-items: flex-start;
    background: rgba(220, 50, 50, 0.06);
    border-left: 3px solid #dc3232;
    border-radius: 0 10px 10px 0;
    color: #991c1c;
    display: flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.55rem;
    margin-top: 1.1rem;
    padding: 0.7rem 1rem;
}

.tc-remark-icon {
    color: #dc3232;
    flex-shrink: 0;
    font-size: 0.95rem;
    margin-top: 1px;
}

.tc-modal-footer {
    background: rgba(250, 250, 250, 0.4);
    border-top: 1px solid rgba(0,0,0,0.07);
    padding: 1rem 1.5rem;
}

.tc-agree-btn {
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 2.5rem;
    width: 100%;
}

/* ── Empty / no-schedule state ─────────────────────────────────────────── */
.sch-empty-state {
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #f8fdf5 100%);
    border: 1.5px dashed rgba(var(--primary-rgb), 0.25);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    min-height: 380px;
    padding: 3rem 1.5rem;
    text-align: center;
}

.sch-empty-state-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 380px;
}

.sch-empty-img {
    height: auto;
    margin-bottom: 1.5rem;
    opacity: 0.92;
    width: 160px;
    animation: sch-empty-float 3s ease-in-out infinite;
}

@keyframes sch-empty-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.sch-empty-title {
    color: #1a2e1a;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sch-empty-desc {
    color: #6b7c6b;
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.sch-empty-btn {
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
}

/* ── Seat panel selection header ────────────────────────────────────────── */
.sch-selection-header {
    align-items: center;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    color: #1f2933;
    display: flex;
    font-size: 1rem;
    font-weight: 850;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
}

.sch-selection-row {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 82px minmax(0, 1fr);
    margin-bottom: 0.7rem;
}

.sch-seat-chip {
    align-items: center;
    background: #eef7eb;
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 14px;
    color: var(--primary-color);
    display: inline-flex;
    font-weight: 900;
    gap: 0.4rem;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.6rem;
}

.sch-seat-chip i {
    font-size: 0.82rem;
}

/* Was a <select> (.sch-gender-select) - a dropdown adds an extra tap to
   open for a binary choice, and doesn't show both options at once. Radio
   chips instead: two labels, each wrapping a visually-hidden native radio
   input (keeps real keyboard/screen-reader semantics and Angular's
   input[radio] + ng-model handling for free) styled as a pill. */
.sch-gender-radio-group {
    display: flex;
    gap: 0.5rem;
}

.sch-gender-radio-chip {
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    border-radius: 14px;
    color: #1f2933;
    cursor: pointer;
    display: flex;
    flex: 1;
    font-weight: 750;
    gap: 0.45rem;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.5rem;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.sch-gender-radio-chip input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.sch-gender-radio-chip:has(input:focus-visible) {
    outline: 2px solid rgba(var(--primary-rgb), 0.45);
    outline-offset: 1px;
}

.sch-gender-radio-dot {
    border: 1.5px solid rgba(var(--ink-rgb), 0.25);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 14px;
    position: relative;
    width: 14px;
}

.sch-gender-radio-chip.is-checked {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: var(--primary-color);
    color: var(--primary-dark-color);
}

.sch-gender-radio-chip.is-checked .sch-gender-radio-dot {
    border-color: var(--primary-color);
}

.sch-gender-radio-chip.is-checked .sch-gender-radio-dot::after {
    background: var(--primary-color);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
}

.sch-confirm-btn {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(var(--primary-rgb), 0.2);
    font-weight: 850;
    min-height: 48px;
    width: 100%;
}

.sch-selection-panel.ng-hide {
    display: none !important;
}

/* ── Mobile layout tweaks ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sch-timeline {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    /* departure + arrival side by side on their own row */
    .sch-stop {
        flex: 1 1 35%;
    }

    /* route connector spans full width between them */
    .sch-route {
        flex: 1 1 100%;
        order: 3;
        padding: 0 4px;
    }

    /* action row goes below, full width, horizontal */
    .sch-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-soft, rgba(var(--ink-rgb),.09));
        padding-left: 0;
        padding-top: 12px;
        margin-left: 0;
        order: 4;
    }

    .sch-stop-time { font-size: 1.3rem; }
    .sch-price { font-size: 1.2rem; }

    .sch-panel-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.85rem;
    }

    .sch-legend {
        justify-content: flex-start;
    }

    .sch-panel-body {
        display: flex;
        flex-direction: column;
    }

    .sch-panel-body.has-selection .sch-seatmap-wrap,
    .sch-panel-body.has-selection .sch-selection-col,
    .sch-seatmap-wrap,
    .sch-selection-col {
        flex: 0 1 auto;
        width: 100%;
    }

    /* Stacked in a column here (seat map above, this panel below), so the
       desktop fix (sticky top, see the base .sch-selection-panel rule)
       wouldn't help - there's nothing below this panel to scroll past, the
       actual problem is a long seat grid pushing it far below the fold,
       requiring a scroll down to assign genders/confirm and back up to
       pick more seats. Pinned as a bottom sheet instead - a fixed bar
       anchored to the screen's bottom edge, visible the whole time you're
       scrolling the seat grid above it, same idea as a checkout bar.
       .sch-panel-body gets matching bottom padding below so the fixed bar
       never covers the last row(s) of seats.

       Scoped to :not(.sch-selection-empty) - only the actual gender/confirm
       panel becomes a bottom sheet. The plain instructional hint (shown
       before any seat is picked) has nothing worth pinning and no reserved
       padding-bottom to make room for it (that only exists for
       .has-selection below) - on a bus with enough rows to make the modal
       scroll near its own height cap, a permanently fixed hint card would
       overlap and hide the last seat row(s) the whole time no seat is
       selected yet. Left as a normal in-flow block instead. */
    .sch-selection-panel:not(.sch-selection-empty) {
        position: fixed;
        /* The base (desktop) rule above sets position:sticky; top:0 for the
           sticky behavior. Switching position to fixed here doesn't clear
           that top:0 - cascades resolve per-property, not per-rule-block -
           so without this reset, the panel ends up with BOTH top:0 and
           bottom:0. With height:auto that's over-constrained, and browsers
           resolve it by discarding bottom and pinning to top:0 instead,
           anchoring the "bottom sheet" to the TOP of the screen over the
           seat map rather than the bottom. */
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;
        max-height: 45vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 30px rgba(var(--ink-rgb), 0.16);
    }

    /* Reset the desktop sticky behavior - not needed in this stacked
       column layout, and with nothing below it to scroll past it would
       just sit inert wherever it naturally falls after the seat grid. */
    .sch-selection-empty {
        position: static;
    }

    /* Only reserve the gap when the bottom sheet is actually showing
       (ng-class="{'has-selection': seatNums.length}" on this same
       element) - otherwise there'd be a large empty gap under the seat
       map before any seat is even picked. */
    .sch-panel-body.has-selection {
        padding-bottom: 45vh;
    }

    /* seat map card and skeleton fill the same width as the gender card below it */
    .sch-seatmap-card,
    .sch-seatmap-skeleton {
        width: 100%;
    }

    .sch-seatmap-skeleton {
        display: flex;
    }

    .sch-seatmap-inner {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .sch-seatmap-card .card-body {
        padding: 0.85rem;
    }

    .sch-selection-row {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    /* ── Mobile lead header ─────────────────────────────────────── */
    .main .lead h1 {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .lead .collapse-toggle {
        align-self: flex-start;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: 50px;
        color: #fff !important;
        flex-shrink: 0;
        font-size: 0.78rem;
        font-weight: 600;
        margin-top: 0.15rem;
        padding: 0.28rem 0.7rem;
        white-space: nowrap;
    }

    .lead .collapse-toggle .arrow-icon {
        font-size: 0.7rem;
    }
}

/* End-of-file overrides: keep inner pages aligned with print-ticket style. */
.branch-page .inner-page-hero,
.about-page .inner-page-hero,
.faq-page .inner-page-hero,
.payment-page .payment-hero.inner-page-hero {
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.1), transparent 13rem),
        linear-gradient(135deg, #102a16 0%, #18391b 58%, #296b18 100%);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(25, 91, 18, 0.18);
    margin-bottom: 1.4rem;
    padding: clamp(1.6rem, 3vw, 2.25rem);
}

.faq-page .faq-accordion,
.payment-page .payment-layout,
.payment-page .pay-skl-layout,
.about-page .about-story-grid,
.about-page .about-services-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.08);
    padding: clamp(1rem, 2.6vw, 1.5rem);
}

.about-page .about-story-image img {
    border-radius: 18px;
    box-shadow: none;
}

.payment-page .payment-card,
.faq-page .faq-accordion .accordion-item,
.about-page .about-service-card {
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 18px;
    box-shadow: none;
}

/* ── Scroll-in reveal effect (see js/scroll-reveal.js) ─────────────────── */
.reveal {
    opacity: 1;
    transform: none;
}

/* Previously: opacity:0 here, with a separate "opacity:1" rule under
   .reveal.is-visible that JS (scroll-reveal.js) was responsible for adding
   once the element scrolled into view. If that JS class-toggle never ran
   (IntersectionObserver never firing, a stale cached script, any JS timing
   issue), the element stayed at opacity:0 forever - invisible content with
   no error and no recovery (this is what caused the branch list to vanish).
   Now a self-completing CSS animation instead: the moment the browser
   applies data-reveal-bound="1" (still set by JS, but that's the only JS
   involvement left), the animation plays on its own and ends at full
   opacity - no second JS step required to finish revealing it. */
.reveal[data-reveal-bound="1"]:not(.is-visible) {
    /* both = also apply the "from" keyframe during animation-delay (the
       stagger rules below), not just hold the "to" state after finishing -
       otherwise a delayed item would flash at full opacity (falling back to
       the plain .reveal rule above) for the length of its delay, then snap
       to invisible right as its animation actually starts. cubic-bezier
       ease-out (same curve as the seat-modal enter animation) reads far
       smoother than the plain "ease" keyword. */
    animation: reveal-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes reveal-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Staggered entrance for repeated card grids - each sibling animates a beat
   after the previous one instead of all popping in at once. animation-delay
   (not transition-delay - the reveal itself is a CSS animation now, see
   above) so each stagger tier actually still does something. */
.step-card.reveal:nth-child(2),
.hf-item.reveal:nth-child(2),
.home-route-group.reveal:nth-child(2),
.destination-grid .col-md-4.reveal:nth-child(2),
.about-story-grid > .reveal:nth-child(2),
.about-stat.reveal:nth-child(2),
.about-service-card.reveal:nth-child(2),
.branch-list .branch-row.reveal:nth-child(2),
.faq-page .faq-accordion .reveal:nth-child(2) {
    animation-delay: 0.06s;
}

.step-card.reveal:nth-child(3),
.hf-item.reveal:nth-child(3),
.home-route-group.reveal:nth-child(3),
.destination-grid .col-md-4.reveal:nth-child(3),
.about-stat.reveal:nth-child(3),
.about-service-card.reveal:nth-child(3),
.branch-list .branch-row.reveal:nth-child(3),
.faq-page .faq-accordion .reveal:nth-child(3) {
    animation-delay: 0.12s;
}

.hf-item.reveal:nth-child(4),
.destination-grid .col-md-4.reveal:nth-child(4),
.about-stat.reveal:nth-child(4),
.about-service-card.reveal:nth-child(4),
.branch-list .branch-row.reveal:nth-child(4),
.faq-page .faq-accordion .reveal:nth-child(4) {
    animation-delay: 0.18s;
}

.hf-item.reveal:nth-child(5),
.destination-grid .col-md-4.reveal:nth-child(5),
.branch-list .branch-row.reveal:nth-child(5),
.faq-page .faq-accordion .reveal:nth-child(5) {
    animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    /* CSS animations override !important on the properties they animate
       (unlike transitions) - so this needs to also target the specific
       hiding rule and cancel the animation itself, not just set opacity. */
    .reveal,
    .reveal[data-reveal-bound="1"]:not(.is-visible) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Confirm Email page ────────────────────────────────────────────────── */
.main.confirm-email-page {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 60vh;
    padding: clamp(2rem, 6vw, 4rem) 0;
}

.confirm-email-page .verification-card {
    background: #ffffff;
    border: 1px solid rgba(var(--ink-rgb), 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(var(--ink-rgb), 0.1);
    /* Had max-width + width:100% but no margin, so it just sat flush left
       inside .container instead of centering on the page. */
    margin: 0 auto;
    max-width: 520px;
    overflow: hidden;
    padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.25rem);
    position: relative;
    text-align: center;
    width: 100%;
}

.confirm-email-page .verification-card::before {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    content: '';
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.confirm-email-page .icon-box {
    margin-bottom: 1.25rem;
}

/* Same soft glow-ring pattern as the login modal's "check your email" icon
   (.lm-sent-icon-wrap/-ring/-inner) - a pulsing tinted ring behind a
   gradient-filled circle, instead of a flat solid color with a hard drop
   shadow. */
.confirm-email-page .icon-circle {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 2rem;
    height: 80px;
    justify-content: center;
    position: relative;
    width: 80px;
    z-index: 1;
}

.confirm-email-page .icon-circle-ring {
    border-radius: 50%;
    inset: -10px;
    position: absolute;
    z-index: -1;
    animation: verificationRingPulse 2s ease-in-out infinite;
}

@keyframes verificationRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.35; }
}

.confirm-email-page .icon-circle-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #ffffff;
}

.confirm-email-page .icon-circle-warning .icon-circle-ring {
    background: rgba(245, 158, 11, 0.16);
}

.confirm-email-page .icon-circle-success {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #ffffff;
}

.confirm-email-page .icon-circle-success .icon-circle-ring {
    background: rgba(var(--primary-rgb), 0.14);
}

.confirm-email-page .status-loading {
    color: #6c757d;
}

.confirm-email-page .verification-title {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.confirm-email-page .verification-subtitle {
    color: #6b7280;
    font-size: 0.92rem;
    margin-bottom: 1.35rem;
}

/* Replaces both the plain bootstrap .alert-light box (error state) and
   .next-steps-box (success state) - one consistent style for both instead
   of two different-looking "info box" treatments. */
.confirm-email-page .verification-info-box {
    background: #f8fafc;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    text-align: left;
}

.confirm-email-page .verification-info-title {
    color: #111827;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.confirm-email-page .verification-info-item {
    align-items: flex-start;
    color: #4b5563;
    display: flex;
    font-size: 0.88rem;
    gap: 0.55rem;
    line-height: 1.45;
    padding: 0.3rem 0;
}

.confirm-email-page .verification-info-item i {
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Replaces the generic .btn-danger/.btn-success (harsh saturated fills) -
   softer, rounded to match .btn-login-google/.btn-login-primary elsewhere
   in this session's login modal work. */
.confirm-email-page .verification-btn {
    align-items: center;
    border: 1.5px solid transparent;
    border-radius: 14px;
    display: flex;
    font-weight: 700;
    justify-content: center;
    min-height: 50px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.confirm-email-page .verification-btn:hover {
    transform: translateY(-2px);
}

.confirm-email-page .verification-btn-warning {
    background: #fff7ed;
    border-color: #fdba74;
    color: #b45309;
}

.confirm-email-page .verification-btn-warning:hover {
    background: #ffedd5;
    border-color: #fb923c;
    color: #92400e;
}

.confirm-email-page .verification-btn-success {
    background: var(--primary-color);
    color: #ffffff;
}

.confirm-email-page .verification-btn-success:hover {
    background: var(--primary-dark-color);
    color: #ffffff;
}

.confirm-email-page .verification-card .btn {
    border: 0;
    border-radius: 14px;
    font-weight: 800;
    min-height: 48px;
}

/* ── No-glass modals and dropdowns ───────────────────────────────────── */
.dropdown-menu,
.direction-dropdown-menu,
.user-dropdown-menu,
.lang-dropdown-menu {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(var(--ink-rgb), 0.1) !important;
}

.modal-content,
.seat-select-modal .modal-content,
.login-modal-content {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(var(--ink-rgb), 0.08);
}

.modal-backdrop.show {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.48) !important;
}

/* ── Home hero search polish ─────────────────────────────────────────── */
.main .lead {
    padding-bottom: 2.7rem !important;
    padding-top: 3rem !important;
}

.main .lead .container {
    position: relative;
    z-index: 1;
}

.main .lead h1 {
    line-height: 1.2;
    max-width: 860px;
}

@media (min-width: 992px) {
    .main .lead form > .row {
        column-gap: 0.65rem;
        grid-template-columns: minmax(0, 1.45fr) minmax(175px, 1.04fr) minmax(175px, 1.04fr) minmax(180px, 1.28fr) 150px;
    }
}

.main .lead form .form-floating {
    border-color: rgba(var(--primary-rgb), 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.13);
    min-height: 70px;
}

.main .lead .form-floating > .form-control,
.main .lead .form-floating > .form-select {
    min-height: 70px;
}

.main .lead form .btn-warning {
    background: var(--action-warning);
    border: 0;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.18);
    color: var(--action-warning-text);
    min-height: 70px;
}

.main .lead form .btn-warning:hover,
.main .lead form .btn-warning:focus {
    background: var(--action-warning-hover);
    box-shadow: 0 16px 34px rgba(var(--primary-rgb), 0.24);
    color: var(--action-warning-text);
}

.main .lead .quick-date-picks {
    margin-top: 0.75rem;
}

.main .lead .quick-date-pick-btn {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
    min-height: 38px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

/* ── Public UI consistency polish ────────────────────────────────────── */
.top-bar-phone {
    color: rgba(255, 255, 255, 0.82);
}

.navbar.navbar-expand-md {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 24px rgba(var(--primary-rgb), 0.1);
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 750;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    color: #ffffff;
}

.navbar-nav .nav-link.active::after {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.top-menu .btn-outline-light,
.dash-lang-btn,
.dash-notif-btn {
    border-color: rgba(255, 255, 255, 0.38);
}

.main .lead .form-floating > label {
    color: var(--primary-color);
    font-weight: 800;
}

.main .lead form .form-floating:hover {
    border-color: rgba(var(--primary-rgb), 0.28);
}

.main .lead form .form-floating:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.13), 0 14px 30px rgba(var(--primary-rgb), 0.16);
}

.home-steps-section,
.home-feature-section,
.home-destinations-section,
.home-faq-outer {
    background:
        radial-gradient(circle at 86% 8%, rgba(var(--primary-rgb), 0.07), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, var(--section-green) 56%, #ffffff 100%);
}

.home-section-heading,
.home-steps-title,
.home-feature-title,
.home-destinations-title,
.home-faq-title,
.home-promo-title {
    color: var(--ink);
}

.home-section-heading .section-kicker,
.home-steps-title::before,
.home-feature-title::before,
.home-destinations-title::before,
.home-faq-title::before,
.home-promo-title::before {
    color: var(--primary-color);
    font-weight: 850;
}

.step-card,
.hf-item,
.home-route-group,
.home-about-card,
.destination-card,
.home-faq-accordion .accordion-item {
    border-color: rgba(var(--ink-rgb), 0.08);
    box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.045);
}

.step-card:hover,
.hf-item:hover,
.home-route-group:hover,
.destination-card:hover,
.home-faq-accordion .accordion-item:hover {
    border-color: rgba(var(--primary-rgb), 0.18);
    box-shadow: 0 14px 34px rgba(var(--ink-rgb), 0.075);
}

.home-faq-accordion .accordion-button {
    color: var(--ink);
    font-weight: 850;
}

.home-faq-accordion .accordion-button:not(.collapsed) {
    background: var(--section-green);
    color: var(--primary-dark-color);
}

.home-faq-accordion .accordion-body {
    color: var(--ink-soft);
}

.btn-success,
.pre-footer-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-success:hover,
.btn-success:focus,
.pre-footer-btn:hover,
.pre-footer-btn:focus {
    background: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}

.footer .nav-link,
footer#footer .nav-link,
.ftr-contact-link,
.ftr-muted {
    color: rgba(255, 255, 255, 0.72);
}

footer#footer .nav-link:hover,
.ftr-contact-link:hover {
    color: #ffffff;
}

/* ── Test: homepage section color rhythm ─────────────────────────────── */
.home-steps-section {
    background:
        radial-gradient(circle at 88% 0%, rgba(var(--primary-rgb), 0.075), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, var(--section-green) 100%);
}

.home-feature-section,
.home-routes-section {
    background: #ffffff;
}

.home-about-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-muted) 100%);
}

.home-destinations-section,
.home-faq-outer {
    background:
        radial-gradient(circle at 8% 12%, rgba(var(--primary-rgb), 0.055), transparent 22rem),
        linear-gradient(180deg, var(--surface-muted) 0%, #ffffff 100%);
}

.home-route-group,
.step-card,
.hf-item,
.home-about-card,
.home-faq-accordion .accordion-item {
    background: #ffffff;
}

.home-route-pill,
.destination-info,
.home-faq-accordion .accordion-button:not(.collapsed) {
    background: var(--section-green-chip);
}

.home-about-card {
    background: linear-gradient(135deg, #ffffff 0%, var(--section-green) 100%);
}

.home-destinations-title,
.home-faq-title,
.home-section-heading h2,
.home-steps-title,
.home-feature-title {
    letter-spacing: -0.015em;
}