/* ==========================================================================
   PayalCab overrides
   --------------------------------------------------------------------------
   The single place to customise the purchased theme. Never edit style.css:
   keeping it pristine means the theme can be updated without losing our work.
   Loaded last, so anything here wins.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       PayalCab palette - the single source of truth. Every rule below, and
       the theme's own components (which paint from --primary-color1 and
       friends, re-pointed further down), follow from these twelve values.
       ------------------------------------------------------------------ */
    --pc-primary:        #F4B83F;   /* PRIMARY         */
    --pc-primary-hover:  #DFA32E;   /* PRIMARY HOVER   */
    --pc-primary-light:  #FFF5DC;   /* PRIMARY LIGHT   */
    --pc-dark:           #172033;   /* DARK            */
    --pc-dark-2:         #273044;   /* DARK SECONDARY  */
    --pc-bg:             #FFFCF7;   /* BACKGROUND      */
    --pc-card:           #FFFFFF;   /* CARD            */
    --pc-text:           #252A33;   /* TEXT            */
    --pc-text-muted:     #667085;   /* SECONDARY TEXT  */
    --pc-border:         #E9E6DE;   /* BORDER          */
    --pc-success:        #16845B;   /* SUCCESS         */
    --pc-error:          #C7473D;   /* ERROR           */

    /* rgb triples for the rgba() tints used throughout. */
    --pc-primary-rgb: 244, 184, 63;
    --pc-dark-rgb: 23, 32, 51;

    /* Derived, not a thirteenth brand colour: PRIMARY darkened until it
       clears 4.5:1 on white (5.25:1). Amber at brand lightness is only
       1.8:1, so inline links and small accent text use this instead. */
    --pc-primary-ink:    #8F6410;

    /* Aliases kept so the rules written against the previous palette keep
       working. --pc-brand is the interactive colour, --pc-brand-dark its
       hover shade, --pc-ink the dark used for type on light and for grounds,
       --pc-surface the tinted section ground. */
    --pc-brand:      var(--pc-primary);
    --pc-brand-dark: var(--pc-primary-hover);
    --pc-cta:        var(--pc-primary);
    --pc-ink:        var(--pc-dark);
    --pc-surface:    var(--pc-primary-light);
    --pc-warning:    var(--pc-primary-hover);
}

/* The page ground and default body type. The theme leaves <body> white; the
   palette gives it a warm off-white with the cards sitting white on top. */
body {
    background-color: var(--pc-bg);
    color: var(--pc-text);
}

/* ---------- Header ---------- */

/* The logo is an admin upload of unknown aspect ratio, so constrain it
   rather than letting it dictate header height. */
/* The logo is an admin upload of unknown aspect ratio, so constrain it rather
   than letting it dictate header height. It is a detailed lockup - a road, a
   taxi, the India Gate skyline and a TRAVEL / RIDE / EXPLORE tagline - and at
   the theme's original ~40px none of that was readable, so these caps are set
   by what the artwork needs rather than by the row. */
.header-logo img,
.mobile-logo-wrap img,
.footer-logo img {
    max-height: 64px;
    width: auto;
}

/* Theme's topbar search is a tour-package finder we don't use; the space

/* ---------- Utilities used by migrated page bodies ---------- */

.pc-nowrap {
    white-space: nowrap;
}

/* Old theme markup leaks `.error` from jquery.validate on booking forms. */
.error {
    color: var(--pc-error) !important;
}

/* ==========================================================================
   Booking widget
   --------------------------------------------------------------------------
   The widget's MARKUP is frozen (see _booking_widget.php) because the booking
   JS binds to its ids and classes. Everything that makes it look like part of
   the new theme therefore has to happen here.

   Layout contract inherited from the markup:
     .banner-form.card
       > .card-header  ul.nav > li > a.nav-link      trip-type tabs
       > .card-body    .tab-content > .tab-pane
                         .form-info                  flex row of fields
                           .form-item                one field (label + control)
                             .way-icon               absolutely-placed swap button
                             .suggestion-box         city autocomplete dropdown
   ========================================================================== */

/* ---------- Hero layout ----------
   The theme's home9 banner absolutely-centres its content inside a fixed 583px
   video, which suits its 3-field filter bar. Our booking card is far taller, so
   centring pushed the headline up behind the header and the card off the bottom.
   Here the video becomes a background layer and the content returns to normal
   flow, letting the section grow to whatever the card needs. */

.pc-hero {
    position: relative;
    /* NOT overflow:hidden - the city suggestion list must be able to hang
       below the hero. The video layer clips itself instead, and the hero sits
       above the next section so the list paints over it. */
    z-index: 5;
}

.pc-hero .banner-video-area {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
}

.pc-hero .banner-video-area video {
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover;
}

.pc-hero .banner-content-wrap-and-filter {
    /* Must stay positioned: the video layer above is absolute, and absolutely
       positioned elements paint over static in-flow content regardless of DOM
       order. Left static, the video covered the headline - the booking card
       only survived because Bootstrap's .card is itself position:relative. */
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    transform: none;
    padding: 70px 0 80px;
}

.pc-hero .banner-content {
    margin-bottom: 32px;
    text-align: center;
}

/* The theme sets this headline in a 145px script face. That is a decorative
   display type - unreadable at this size and wrong for a cab service. */
.pc-hero .banner-content h1 {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 52px);
    line-height: 1.18;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.pc-hero .banner-content p {
    color: rgba(var(--white-color-opc), .9);
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
}

.pc-hero .travel-rating {
    margin-top: 26px;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .pc-hero .banner-content-wrap-and-filter {
        padding: 44px 0 54px;
    }

    .pc-hero .banner-content {
        margin-bottom: 24px;
    }
}

/* ---------- Card ---------- */

.banner-form.card {
    background: var(--white-color);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(var(--pc-dark-rgb), .18);
    overflow: visible;   /* the autocomplete list has to escape the card */
}

.banner-form .card-header {
    background: transparent;
    border-bottom: 1px solid var(--borders-color);
    padding: 14px 18px 0;
}

.banner-form .card-body {
    padding: 20px 18px 22px;
}

/* ---------- Trip-type tabs ---------- */

.banner-form .card-header .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.banner-form .nav li .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px !important;
    border-radius: 74px 74px 0 0;
    font-size: 15px !important;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.banner-form .nav li .nav-link:hover {
    color: var(--pc-ink);
    background: rgba(var(--primary-color1-opc), .06);
}

.banner-form .nav li .nav-link.active {
    color: var(--pc-ink);
    font-weight: 600;
    border-bottom-color: var(--pc-brand);
    background: rgba(var(--primary-color1-opc), .06);
}

/* ---------- Field row ---------- */

.banner-form .form-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background: var(--white-color);
}

.banner-form .form-info .form-item {
    flex: 1 1 0;
    min-width: 0;              /* lets long city names ellipsis instead of pushing the row */
    position: relative;
    padding: 12px 14px;
    border-left: 1px solid var(--borders-color);
    text-align: left;
}

.banner-form .form-info .form-item:first-child {
    border-left: 0;
}

.banner-form .form-info .pc-field-city,
.banner-form .form-info .pc-field-package {
    flex-grow: 1.35;
}

.banner-form .form-info .pc-field-time {
    flex-grow: .85;
}

.banner-form .form-info .form-item .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

/* Controls sit flush inside their cell - the cell border is the visual field. */
.banner-form .form-info .form-control,
.banner-form .form-info select.form-control {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--pc-ink);
    height: auto;
    line-height: 1.5;
}

.banner-form .form-info .form-item:focus-within {
    background: rgba(var(--primary-color1-opc), .05);
}

.banner-form .form-info .form-control:focus {
    outline: 0;
    box-shadow: none;
    background: transparent;
}

.banner-form .form-info .form-control::placeholder {
    color: var(--pc-text-muted);
    font-weight: 400;
}

/* ---------- Swap pickup/drop ---------- */

.banner-form .form-info .form-item .way-icon {
    /* sits ON the divider between Pickup and Drop, ringed in white so it reads
       as one control joining the two fields rather than covering either */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pc-brand);
    color: var(--pc-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 4px var(--white-color), 0 4px 12px rgba(var(--pc-dark-rgb), .18);
    transition: background .2s ease, transform .3s ease;
}

.banner-form .form-info .form-item .way-icon:hover,
.banner-form .form-info .form-item .way-icon:focus-visible {
    background: var(--pc-brand-dark);
    transform: translate(-50%, -50%) rotate(180deg);
    outline: 0;
}

.banner-form .form-info .form-item .way-icon i {
    display: block;
    transition: none;
}

/* an open pickup list covers the divider - the swap button steps aside */
.banner-form .form-info .pc-field-pickup:has(.suggestion-box.is-open) + .pc-field-drop .way-icon {
    opacity: 0;
    pointer-events: none;
}

/* keep both city values clear of the button */
.banner-form .form-info .pc-field-pickup {
    padding-right: 26px;
}

.banner-form .form-info .pc-field-drop {
    padding-left: 30px;
}

/* ---------- City typeahead ----------
   Rendered by payalcab-booking.js into the .suggestion-box under each city
   field: a <ul> of matches (the typed part wrapped in <mark>), or one
   .pc-ac-state line while searching / when nothing matches. */

.pc-field .suggestion-box {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 300px;
    z-index: 60;
    max-height: 320px;
    overscroll-behavior: contain;
    overflow-y: auto;
    background: var(--white-color);
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(var(--pc-dark-rgb), .16);
    text-align: left;
}

.pc-field .suggestion-box.is-open {
    display: block;
}

.pc-field .suggestion-box ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.pc-field .suggestion-box li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pc-ink);
    cursor: pointer;
}

.pc-field .suggestion-box li i {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-field .suggestion-box li mark {
    padding: 0;
    background: transparent;
    color: var(--pc-brand-dark);
    font-weight: 700;
}

.pc-field .suggestion-box li:hover,
.pc-field .suggestion-box li.is-active {
    background: rgba(var(--primary-color1-opc), .10);
}

.pc-field .suggestion-box li.is-active i {
    color: var(--pc-ink);
}

.pc-field .suggestion-box .pc-ac-state {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-field .suggestion-box .pc-ac-error {
    color: #c0392b;
}

/* ---------- Field errors ---------- */

.banner-form .form-info .form-item.is-invalid {
    background: rgba(192, 57, 43, .05);
    box-shadow: inset 0 0 0 1px #d9534f;
}

.banner-form .form-info .form-item.is-invalid .form-label {
    color: #c0392b;
}

/* the modify / retry forms on the search pages use plain Bootstrap fields */
.pc-field.is-invalid > .form-control {
    border-color: #d9534f;
}

.pc-field {
    position: relative;
}

.pc-field .pc-field-error {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    color: #c0392b;
}

.pc-form-error {
    margin: 12px 0 0;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(192, 57, 43, .08);
    color: #c0392b;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

/* Native selects (time, package, airport) get the same quiet look as the text
   fields plus a caret, so the five cells read as one bar. */
.banner-form .form-info select.form-control {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606060' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    cursor: pointer;
}

.banner-form .form-info select.form-control.is-loading {
    color: var(--pc-text-muted);
}

.banner-form .form-info .form-control.datepicker {
    cursor: pointer;
}

.banner-form .twm-tabs-search-btn {
    margin-top: 22px;
}

.banner-form .search-btn.is-busy {
    opacity: .7;
    cursor: progress;
}

/* ---------- Submit ---------- */

.banner-form .twm-tabs-search-btn .btn,
.banner-form .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: 13px 30px;
    border: 0;
    border-radius: 74px;
    background: var(--pc-brand);
    color: var(--pc-ink);
    font-weight: 600;
    font-style: normal;
    transition: background .25s ease, transform .25s ease;
}

.banner-form .twm-tabs-search-btn .btn em {
    font-style: normal;
}

.banner-form .twm-tabs-search-btn .btn:hover,
.banner-form .search-btn:hover {
    background: var(--pc-brand-dark);
    color: var(--pc-ink);
    transform: translateY(-2px);
}

/* ---------- Select2 "pc" theme ----------
   Local / Airport pickup city and the package / airport lists are Select2
   dropdowns (theme: 'pc', set in payalcab-booking.js). Inside the booking bar
   the closed control looks exactly like the text fields next to it; the open
   list is attached to <body>, so nothing can clip it. */

.select2-container--pc {
    width: 100% !important;
}

.select2-container--pc .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 44px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--borders-color);
    border-radius: 8px;
    background: var(--white-color);
    cursor: pointer;
    outline: 0;
    position: relative;
}

.select2-container--pc .select2-selection__rendered {
    display: block;
    padding: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pc-ink);
}

.select2-container--pc .select2-selection__placeholder {
    color: var(--pc-text-muted);
    font-weight: 400;
}

.select2-container--pc .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23606060' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .2s ease;
}

.select2-container--pc .select2-selection__arrow b {
    display: none;
}

.select2-container--pc.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg);
}

.select2-container--pc.select2-container--focus .select2-selection--single,
.select2-container--pc.select2-container--open .select2-selection--single {
    border-color: var(--pc-brand);
}

.select2-container--pc.select2-container--disabled .select2-selection--single {
    cursor: not-allowed;
}

.select2-container--pc.select2-container--disabled .select2-selection__rendered {
    color: var(--pc-text-muted);
    font-weight: 400;
}

/* inside the booking bar: borderless, flush with the cell */
.banner-form .form-info .select2-container--pc .select2-selection--single {
    min-height: 0;
    padding: 0 22px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.banner-form .form-info .select2-container--pc .select2-selection__arrow {
    right: 2px;
}

/* the open list */
.select2-container--pc .select2-dropdown {
    z-index: 1060;
    overflow: hidden;
    border: 1px solid var(--borders-color);
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 14px 36px rgba(var(--pc-dark-rgb), .16);
}

.select2-container--pc .select2-dropdown--below {
    margin-top: 10px;
}

.select2-container--pc .select2-dropdown--above {
    margin-top: -10px;
}

.select2-container--pc .select2-search--dropdown {
    padding: 10px 10px 4px;
}

.select2-container--pc .select2-search--dropdown .select2-search__field {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--borders-color);
    border-radius: 8px;
    outline: 0;
    font-size: 14px;
    color: var(--pc-ink);
    background: var(--white-color) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M11.7 10.3a6.5 6.5 0 1 0-1.4 1.4l3.6 3.6 1.4-1.4-3.6-3.6zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") no-repeat 12px center;
}

.select2-container--pc .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pc-brand);
}

.select2-container--pc .select2-results > .select2-results__options {
    max-height: 290px;
    overflow-y: auto;
    padding: 6px 0;
    overscroll-behavior: contain;
}

.select2-container--pc .select2-results__option {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pc-ink);
}

.select2-container--pc .select2-results__option[aria-selected="true"] {
    background: rgba(var(--primary-color1-opc), .14);
    font-weight: 600;
}

.select2-container--pc .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--primary-color1-opc), .10);
    color: var(--pc-ink);
}

.select2-container--pc .select2-results__option[aria-disabled="true"] {
    color: var(--pc-text-muted);
}

.select2-container--pc .select2-results__message {
    color: var(--pc-text-muted);
    font-weight: 400;
}

/* ---------- Responsive ----------
   Below lg the row becomes two columns, and on phones a single column, so no
   field ever drops under ~140px where city names stop being readable. */

@media (max-width: 1199.98px) {
    .banner-form .form-info .form-item {
        flex: 1 1 33.333%;
        border-top: 1px solid var(--borders-color);
    }

    .banner-form .form-info .form-item:nth-child(-n+3) {
        border-top: 0;
    }
}

@media (max-width: 767.98px) {
    .banner-form .card-header {
        padding: 10px 12px 0;
    }

    .banner-form .card-header .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .banner-form .card-header .nav::-webkit-scrollbar {
        display: none;
    }

    .banner-form .nav li .nav-link {
        padding: 9px 14px !important;
        font-size: 14px !important;
    }

    .banner-form .card-body {
        padding: 16px 12px 18px;
    }

    .banner-form .form-info .form-item {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px solid var(--borders-color);
    }

    .banner-form .form-info .form-item:first-child {
        border-top: 0;
    }

    /* Stacked fields put the swap control between the two city rows. */
    .banner-form .form-info .form-item .way-icon {
        top: 0;
        left: auto;
        right: 16px;
        transform: translateY(-50%) rotate(90deg);
    }

    .banner-form .form-info .form-item .way-icon:hover,
    .banner-form .form-info .form-item .way-icon:focus-visible {
        transform: translateY(-50%) rotate(270deg);
    }

    .banner-form .form-info .pc-field-pickup {
        padding-right: 14px;
    }

    .banner-form .form-info .pc-field-drop {
        padding-left: 14px;
    }

    .banner-form .twm-tabs-search-btn .btn,
    .banner-form .search-btn {
        width: 100%;
    }
}

/* Fallback avatar for testimonials with no uploaded photo. */
.testimonial-card .author-img .pc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--pc-brand);
    color: var(--pc-ink);
    font-weight: 600;
    font-size: 20px;
}

/* Service cards use Bootstrap Icons instead of the theme's inline SVGs. */
.service-list .single-service .icon i {
    font-size: 30px;
    line-height: 1;
    color: var(--pc-ink);
}

.service-list .single-service .content h4 a {
    color: inherit;
}

/* Replaces the theme's Trustpilot badge - we display our own rider rating. */
.rating-area .pc-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--pc-brand);
    font-size: 17px;
}

/* ==========================================================================
   Admin-authored content
   --------------------------------------------------------------------------
   .pc-prose wraps rich text pasted into the admin panel's editor. That HTML
   carries no classes of its own, so every element has to be styled by tag -
   and defensively, since the editor emits inline styles, stray <font> tags and
   tables of unpredictable width.
   ========================================================================== */

.cms-content-section .pc-prose {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.8;
    word-break: break-word;
}

.pc-prose h1,
.pc-prose h2,
.pc-prose h3,
.pc-prose h4,
.pc-prose h5,
.pc-prose h6 {
    color: var(--title-color);
    margin: 34px 0 14px;
    line-height: 1.35;
}

.pc-prose h1 { font-size: 32px; }
.pc-prose h2 { font-size: 27px; }
.pc-prose h3 { font-size: 23px; }
.pc-prose h4 { font-size: 20px; }
.pc-prose h5,
.pc-prose h6 { font-size: 18px; }

.pc-prose > :first-child {
    margin-top: 0;
}

.pc-prose p {
    margin-bottom: 16px;
}

.pc-prose ul,
.pc-prose ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.pc-prose li {
    margin-bottom: 8px;
}

.pc-prose a {
    color: var(--primary-color1);
    text-decoration: underline;
}

.pc-prose a:hover {
    color: var(--pc-ink);
}

.pc-prose strong,
.pc-prose b {
    color: var(--title-color);
}

.pc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.pc-prose blockquote {
    margin: 22px 0;
    padding: 14px 20px;
    border-left: 3px solid var(--pc-brand);
    background: rgba(var(--primary-color1-opc), .05);
    border-radius: 0 10px 10px 0;
}

/* Editor tables are routinely wider than the column - scroll rather than
   forcing horizontal scroll on the whole page. */
.pc-prose table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.pc-prose th,
.pc-prose td {
    padding: 10px 14px;
    border: 1px solid var(--borders-color);
    text-align: left;
}

.pc-prose th {
    background: rgba(var(--primary-color1-opc), .06);
    color: var(--title-color);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .cms-content-section .pc-prose { font-size: 15px; }
    .pc-prose h1 { font-size: 26px; }
    .pc-prose h2 { font-size: 23px; }
    .pc-prose h3 { font-size: 20px; }
}

/* Inner pages open with the breadcrumb banner. Theme sections only carry a
   bottom margin, so whatever lands directly beneath it needs its own top
   padding - applied here once instead of per page. */
.breadcrumb-section + div[class*="-section"]:not([class*="pt-"]) {
    padding-top: 100px;
}

@media (max-width: 767.98px) {
    .breadcrumb-section + div[class*="-section"]:not([class*="pt-"]) {
        padding-top: 60px;
    }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.pc-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-contact-list li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--borders-color);
}

.pc-contact-list li:last-child {
    border-bottom: 0;
}

.pc-contact-list .icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--primary-color1-opc), .08);
    color: var(--pc-ink);
    font-size: 18px;
}

.pc-contact-list .content > span {
    display: block;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 2px;
}

.pc-contact-list .content a {
    display: block;
    color: var(--title-color);
    font-weight: 600;
}

.pc-contact-list .content a:hover {
    color: var(--primary-color1);
}

.pc-contact-list .content p {
    margin: 0;
    color: var(--title-color);
    font-weight: 500;
}

/* Card that hosts a form on inner pages (contact, enquiry, account). */
.pc-form-card {
    padding: 32px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    box-shadow: 0 10px 34px rgba(var(--pc-dark-rgb), .06);
}

.pc-form-card textarea {
    resize: vertical;
    min-height: 120px;
}

/* The map embed is admin-pasted <iframe> markup with hardcoded width/height. */
.pc-map-embed {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
}

.pc-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

@media (max-width: 767.98px) {
    .pc-form-card { padding: 22px 18px; }
    .pc-map-embed { height: 300px; }
}

/* Narrative blocks on About - two equal cards of prose. */
.pc-story-card {
    height: 100%;
    padding: 32px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
}

.pc-story-card h3 {
    margin-bottom: 16px;
    color: var(--title-color);
    font-size: 24px;
}

.pc-story-card p {
    margin-bottom: 14px;
    color: var(--text-color);
    line-height: 1.8;
}

.pc-story-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .pc-story-card { padding: 22px 18px; }
}

/* ==========================================================================
   Corrections to theme defaults
   ========================================================================== */

/* The round-trip / multi-city form is a second form inside the Outstation tab,
   revealed by the radio above it. The OLD stylesheet is what hid it by default;
   migrated pages no longer load that file, so both forms rendered at once.
   script.js still toggles it via .show()/.hide() - it only needs a start state. */
.banner-form .multi-trip {
    display: none;
}

/* ---------- Topbar ----------




/* ---------- Header ----------
   header.style-1 .contact-area is a grey chip in the theme. Ours holds a single
   phone number, so square it off against the adjacent button instead of
   inheriting the theme's bottom-aligned two-column treatment. */
header.style-1 .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}




/* Header sits above the hero video; keep it opaque so the nav stays readable. */
header.style-1 {
    background-color: var(--white-color);
}

/* The theme's h1 rule carries three class levels of specificity, so the
   override has to match on .home9-banner-section too, not just .pc-hero. */
.home9-banner-section.pc-hero .banner-content-wrap-and-filter .banner-content h1 {
    font-family: var(--font-poppins);
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 52px);
    line-height: 1.18;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Trust strip: Bootstrap Icons in place of the theme's SVG images, and text
   forced white - the strip sits on a saturated blue. */
.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-single-list .icon i {
    font-size: 30px;
    line-height: 1;
    color: var(--primary-color1);
}

.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-content h5,
.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-content p {
    color: var(--white-color);
}

@media (max-width: 991.98px) {
    .banner-bottom-area .banner-bottom-area-wrapper {
        padding: 30px 24px;
    }

    .banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-list {
        flex-direction: column;
        gap: 26px;
    }

    .banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-list .banner-bottom-single-list {
        max-width: 100%;
    }
}

/* City cards: the source images have wildly different aspect ratios, which left
   the mosaic ragged. Fix the frame and let the image crop to fill it. */
.home5-destination-section .destination-card2 .destination-img {
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
}

.home5-destination-section .destination-card2 .destination-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .home5-destination-section .destination-card2 .destination-img {
        height: 240px;
    }
}

/* Fleet carousel cards need the same treatment. */
.home3-destination-section .destination-card2 .destination-img {
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pc-bg);
}

.home3-destination-section .destination-card2 .destination-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

/* The offer band lost its right-hand image (it carried another brand's logo),
   so the copy column should use the full width instead of half. */
.home2-offer-banner-section .offer-banner-wrap .offer-banner-content {
    max-width: 720px;
}

/* Route chips for the marquee band that replaced the theme's partner logos. */
.partner-section .marquee__group {
    gap: 14px;
}

.pc-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--borders-color);
    border-radius: 74px;
    background: var(--white-color);
    color: var(--title-color);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.pc-route-chip i {
    color: var(--primary-color1);
    font-size: 14px;
}

.pc-route-chip .arrow {
    color: var(--text-color);
}

.pc-route-chip:hover {
    background: var(--pc-brand);
    border-color: var(--pc-brand);
    color: var(--pc-ink);
}

.pc-route-chip:hover i,
.pc-route-chip:hover .arrow {
    color: var(--pc-ink);
}

/* Swiper sizes slides to their content, so reviews of different lengths left
   the row ragged. Stretch every card to the tallest in view. */
.home2-testimonial-section .swiper-wrapper {
    align-items: stretch;
}

.home2-testimonial-section .swiper-slide {
    height: auto;
}

.home2-testimonial-section .testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home2-testimonial-section .testimonial-card p {
    flex: 1 1 auto;
}

.home2-testimonial-section .testimonial-card .author-area {
    margin-top: auto;
}

/* (A rule here used to zero this band's margin-bottom, written when the
   testimonials followed it and both carried a 100px gap. The blog follows it
   now and has no top padding of its own, so zeroing it put "Travel guides &
   route tips" flush against the bottom of the photo. Removed 2026-09-11; the
   band keeps the mb-100 its markup asks for.) */

/* ==========================================================================
   Route / city index pages
   ========================================================================== */

.pc-city-search {
    position: relative;
    max-width: 520px;
    margin: 28px auto 0;
}

.pc-city-search i {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    color: var(--text-color);
    font-size: 16px;
}

.pc-city-search input {
    width: 100%;
    padding: 15px 24px 15px 52px;
    border: 1px solid var(--borders-color);
    border-radius: 74px;
    background: var(--white-color);
    font-size: 16px;
    color: var(--title-color);
}

.pc-city-search input:focus {
    outline: 0;
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .25);
}

/* A-Z jump bar */
.pc-az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 50px;
}

.pc-az-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--borders-color);
    border-radius: 50%;
    background: var(--white-color);
    color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
    transition: background .25s ease, border-color .25s ease;
}

.pc-az-nav a:hover {
    background: var(--pc-brand);
    border-color: var(--pc-brand);
    color: var(--pc-ink);
}

.pc-city-group {
    margin-bottom: 44px;
    scroll-margin-top: 100px;   /* the sticky header must not cover the heading */
}

.pc-city-group-title {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--borders-color);
    color: var(--title-color);
    font-size: 22px;
}

/* Multi-column so thousands of short links stay scannable. */
.pc-city-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 4;
    column-gap: 28px;
}

.pc-city-list li {
    break-inside: avoid;
    margin-bottom: 9px;
}

.pc-city-list a {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.5;
    transition: color .2s ease;
}

.pc-city-list a:hover {
    color: var(--primary-color1);
    text-decoration: underline;
}

.pc-empty {
    padding: 40px 20px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
}

.pc-empty i {
    font-size: 30px;
    color: var(--text-color);
    margin-bottom: 12px;
    display: inline-block;
}

@media (max-width: 991.98px) {
    .pc-city-list { columns: 3; }
}

@media (max-width: 767.98px) {
    .pc-city-list { columns: 2; column-gap: 18px; }
    .pc-city-group-title { font-size: 19px; }
}

@media (max-width: 479.98px) {
    .pc-city-list { columns: 1; }
}

/* Inner-page banner without a photo. Every breadcrumb background the theme
   ships is holiday stock, so the ground is a brand gradient with one of the
   theme's flat PATTERN assets over it - _page_banner.php picks which per page
   and passes it as --pc-banner-pattern. Those PNGs are all line art on white,
   which over a dark gradient would read as a white block, so the layer is
   blended rather than drawn, and each variant below tunes its own weight. */
.breadcrumb-section.pc-banner-plain {
    background-image:
        var(--pc-banner-pattern, none),
        radial-gradient(1200px 400px at 15% 0%, rgba(var(--pc-primary-rgb), .18), transparent 60%),
        linear-gradient(135deg, var(--pc-dark) 0%, var(--pc-dark-2) 55%, var(--pc-dark) 100%);
    background-blend-mode: soft-light, normal, normal;
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-color: var(--pc-ink);
}

/* Contour lines are hairline already and take the base blend as it stands. The
   map is a solid silhouette and the grid is dense, so both are pushed further
   back to land at the same weight. */
.breadcrumb-section.pc-banner-contour {
    background-size: cover, auto, auto;
}

.breadcrumb-section.pc-banner-map {
    background-blend-mode: overlay, normal, normal;
}

.breadcrumb-section.pc-banner-grid {
    background-size: 560px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}

.breadcrumb-section.pc-banner-plain .banner-content h1 {
    margin-bottom: 14px;
}

.breadcrumb-section.pc-banner-plain .breadcrumb-list li,
.breadcrumb-section.pc-banner-plain .breadcrumb-list li a {
    color: rgba(var(--white-color-opc), .85);
}

.breadcrumb-section.pc-banner-plain .breadcrumb-list li a:hover {
    color: var(--pc-brand);
}

/* ==========================================================================
   Route cards (city landing pages)
   ========================================================================== */

.pc-route-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 22px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pc-route-card:hover {
    border-color: var(--pc-brand);
    box-shadow: 0 12px 30px rgba(var(--pc-dark-rgb), .08);
    transform: translateY(-3px);
}

.pc-route-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pc-route-card-head .icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--primary-color1-opc), .08);
    color: var(--primary-color1);
    font-size: 20px;
}

.pc-route-path a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--title-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.pc-route-path a:hover {
    color: var(--primary-color1);
}

.pc-route-path a i {
    color: var(--text-color);
    font-size: 14px;
}

.pc-route-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pc-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 74px;
    background: rgba(var(--primary-color1-opc), .1);
    color: var(--primary-color1);
    font-size: 12px;
    font-weight: 600;
}

.pc-badge.save {
    background: rgba(var(--pc-primary-rgb), .22);
    color: var(--pc-primary-ink);
}

.pc-route-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--borders-color);
}

.pc-route-price del {
    margin-right: 8px;
    color: var(--text-color);
    font-size: 14px;
}

.pc-route-price strong {
    color: var(--title-color);
    font-size: 22px;
    font-weight: 700;
}

.pc-route-card-foot .primary-btn1 {
    padding: 9px 24px;
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .pc-route-card { padding: 18px; }
    .pc-route-path a { font-size: 16px; }
}

/* ==========================================================================
   Route content block (shared by every per-route landing page)
   ========================================================================== */

.route-content-section {
    padding: 70px 0;
    background: var(--pc-bg);
}

.route-content-section .breadcrumb {
    background: transparent;
    padding-left: 0;
}

.route-content-section .breadcrumb-item,
.route-content-section .breadcrumb-item a {
    color: var(--text-color);
    font-size: 14px;
}

.route-content-section .breadcrumb-item a:hover {
    color: var(--primary-color1);
}

/* Quick-fact tiles: distance / time / from-price */
.route-content-section .card {
    border-radius: 14px !important;
    border: 1px solid var(--borders-color) !important;
    box-shadow: none !important;
}

.pc-fact-icon {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    line-height: 1;
    color: var(--pc-brand-dark);
}

.route-content-section h4 {
    color: var(--title-color);
    font-size: 22px;
}

.route-content-section .table {
    margin-bottom: 0;
}

.route-content-section .table th {
    background: rgba(var(--primary-color1-opc), .06);
    color: var(--title-color);
    font-weight: 600;
    white-space: nowrap;
}

.route-content-section .table td,
.route-content-section .table th {
    padding: 12px 14px;
    vertical-align: middle;
}

.route-content-section .table-responsive {
    border: 1px solid var(--borders-color);
    border-radius: 14px;
    overflow: hidden;
}

.route-content-section .route-description-body {
    color: var(--text-color);
    line-height: 1.8;
}

.route-content-section .accordion-item {
    margin-bottom: 12px;
    border: 1px solid var(--borders-color);
    border-radius: 12px !important;
    overflow: hidden;
}

.route-content-section .accordion-button {
    font-weight: 600;
    color: var(--title-color);
}

.route-content-section .accordion-button:not(.collapsed) {
    background: rgba(var(--pc-primary-rgb), .12);
    color: var(--pc-ink);
    box-shadow: none;
}

.route-content-section .accordion-button:focus {
    box-shadow: none;
    border-color: var(--borders-color);
}

@media (max-width: 767.98px) {
    .route-content-section { padding: 46px 0; }
    .route-content-section h4 { font-size: 19px; }
}

/* ==========================================================================
   Route detail page
   ========================================================================== */

/* Shorter hero than the home page - the headline is a route name, not a pitch. */
.pc-hero-compact .banner-content-wrap-and-filter {
    padding: 50px 0 60px;
}

.pc-hero-compact .banner-content h1 {
    font-size: clamp(24px, 3.4vw, 40px) !important;
}

.pc-feature-card {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    text-align: center;
    transition: border-color .25s ease, transform .25s ease;
}

.pc-feature-card:hover {
    border-color: var(--pc-brand);
    transform: translateY(-3px);
}

.pc-feature-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--pc-primary-rgb), .18);
    color: var(--pc-ink);
    font-size: 24px;
}

.pc-feature-card h5 {
    margin-bottom: 8px;
    color: var(--title-color);
    font-size: 18px;
}

.pc-feature-card p {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.7;
}

.pc-tick-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.pc-tick-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: var(--text-color);
    line-height: 1.7;
}

.pc-tick-list li::before {
    content: "\F26E";               /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pc-brand-dark);
    font-size: 14px;
}

.pc-footnote {
    margin: 0;
    color: var(--text-color);
    font-size: 13px;
    opacity: .8;
}

/* Cab option cards */
.pc-cab-card {
    height: 100%;
    padding: 20px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    text-align: center;
}

.pc-cab-img {
    height: 120px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--pc-bg);
    overflow: hidden;
}

.pc-cab-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.pc-cab-card h5 {
    margin-bottom: 4px;
    color: var(--title-color);
    font-size: 17px;
}

.pc-cab-model {
    display: block;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 13px;
}

.pc-cab-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-cab-specs li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color);
    font-size: 13px;
}

.pc-cab-specs i {
    color: var(--pc-brand-dark);
}

/* Booking panel on route-detail pages that have no video hero. */
.route-hero-booking {
    padding-top: 70px;
}

.pc-booking-panel-head {
    max-width: 720px;
    margin: 0 auto 28px;
    text-align: center;
}

.pc-booking-panel-head h2 {
    margin-bottom: 10px;
    color: var(--title-color);
    font-size: clamp(24px, 3vw, 34px);
}

.pc-booking-panel-head p {
    margin: 0;
    color: var(--text-color);
}

/* Off the dark hero the card needs its own edge to sit on white. */
.pc-booking-panel .banner-form.card {
    border: 1px solid var(--borders-color);
    box-shadow: 0 10px 34px rgba(var(--pc-dark-rgb), .07);
}

@media (max-width: 767.98px) {
    .route-hero-booking { padding-top: 44px; }
}

/* ==========================================================================



/* Widest of the three: the topbar row has the most spare height, and this is

/* The mobile header and the drawer size the logo by a fixed WIDTH, which wins
   over any max-height, so those are the numbers to change - the ~2.96:1
   artwork was landing at 34px tall inside a 100px box. Widths here are chosen
   to give roughly the heights above. */
header.style-1 .header-logo img {
    width: 190px;
}

header.style-1 .mobile-logo-area .mobile-logo-wrap img {
    width: 175px;
}

@media (max-width: 991.98px) {
    header.style-1 .header-logo img {
        width: 175px;
    }
}

@media (max-width: 575.98px) {
    header.style-1 .header-logo img {
        width: 158px;
    }

    header.style-1 .mobile-logo-area .mobile-logo-wrap img {
        width: 158px;
    }
}

/* ---------- Header row ----------
   (The old `header.style-1 > .container { min-height: 74px }` lived here. It
   outranked .pc-header-row and pinned every breakpoint to the desktop height.)
*/

/* The grey contact chip stretched to the full row height next to the button. */

header.style-1 .nav-right .primary-btn1 {
    white-space: nowrap;
}

/* ---------- Trust strip icons ----------
   Bootstrap Icons are a font: they inherit `color`, and inside the white
   circle they were inheriting the strip's white text. Force the brand ink so
   they read against the circle. */
.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-list .banner-bottom-single-list .icon i {
    font-size: 28px;
}

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

/* Address sat at --white-text-color (#AAA) on near-black: too faint to read. */
.footer-section .footer-menu-wrap .footer-logo-and-addition-info .address-area p,
.footer-section .footer-menu-wrap .footer-logo-and-addition-info .address-area a {
    color: rgba(var(--white-color-opc), .78);
    line-height: 1.8;
    margin-bottom: 0;
}

.footer-section .footer-menu-wrap .footer-widget .widget-list li a {
    color: rgba(var(--white-color-opc), .72);
}

.footer-section .footer-menu-wrap .footer-widget .widget-list li a:hover {
    color: var(--pc-brand);
}

.footer-section .footer-menu-wrap .footer-logo-and-addition-info .social-list {
    margin-bottom: 0;
}

/* The theme reserves room for a language switcher we removed. */
.footer-section .footer-menu-wrap {
    padding: 64px 0 56px;
}

/* Bottom bar was light-on-light and nearly unreadable. */
.footer-section .footer-bottom {
    border-top: 1px solid rgba(var(--white-color-opc), .12);
    background: transparent;
    padding: 20px 0;
}

.footer-section .footer-bottom .copyright-and-payment-method-area p,
.footer-section .footer-bottom .copyright-and-payment-method-area a {
    color: rgba(var(--white-color-opc), .7);
}

.footer-section .footer-bottom .copyright-and-payment-method-area a:hover {
    color: var(--pc-brand);
}

/* ---------- Offer band ----------
   The band lost its right-hand artwork (it carried another brand's logo), so
   centre the copy instead of leaving half the panel empty. */
.home2-offer-banner-section .offer-banner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 56px 40px;
    text-align: center;
}

.home2-offer-banner-section .offer-banner-wrap .offer-banner-content {
    max-width: 760px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .home2-offer-banner-section .offer-banner-wrap { padding: 40px 22px; }
   /* contacts already in the header */
}

/* ==========================================================================
   Brand palette
   --------------------------------------------------------------------------
   The theme ships blue (#1781FE) as its accent. The PayalCab mark is black
   with a gold wordmark, so the accent is re-pointed at the brand gold and the
   ink is black. Done by overriding the theme's own custom properties, which
   carries the change through every component that references them, instead of
   restyling components one by one.
   ========================================================================== */

:root {
    /* The theme paints most components from its own custom properties, so
       re-pointing them at the palette carries the change through every
       component at once instead of restyling each one by hand. */
    --primary-color1: var(--pc-primary);
    --primary-color1-opc: var(--pc-primary-rgb);

    /* Headings, body copy, rules and the "black" grounds all come from the
       palette now. --title-color2 is the pale heading the theme uses on dark
       sections; PRIMARY LIGHT is its counterpart here. */
    --black-color: var(--pc-dark);
    --black-color-opc: var(--pc-dark-rgb);
    --title-color: var(--pc-dark);
    --title-color-opc: var(--pc-dark-rgb);
    --title-color2: var(--pc-primary-light);
    --title-color2-opc: 255, 245, 220;
    --text-color: var(--pc-text-muted);
    --borders-color: var(--pc-border);
}

/* Buttons: gold ground with black text - the logo's own pairing. White text on
   gold fails contrast, so the label flips to ink. */
.primary-btn1,
.primary-btn1:hover,
.primary-btn1:focus {
    background-color: var(--pc-brand);
    color: var(--pc-ink);
}

.primary-btn1::after {
    background-color: var(--pc-brand-dark);
}

.primary-btn1.black-bg,
.primary-btn1.black-bg:hover {
    background-color: var(--pc-ink);
    color: var(--white-color);
}

.primary-btn1.black-bg::after {
    background-color: var(--pc-brand);
}

/* Amber rather than raw gold for links on white, which gold fails against.
   Scoped deliberately - a blanket a:hover would also repaint nav and footer. */
.pc-prose a,
.route-content-section a {
    color: var(--pc-primary-ink);
}

/* Header CTA matches the rest of the buttons now. */
header.style-1 .nav-right .primary-btn1 {
    background-color: var(--pc-brand);
    color: var(--pc-ink);
}

/* Trust strip sits on the accent colour - keep it legible against gold. */
.banner-bottom-area .banner-bottom-area-wrapper {
    background-color: var(--pc-ink) !important;
}

.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-list .banner-bottom-single-list .icon {
    background-color: var(--pc-brand);
}

.banner-bottom-area .banner-bottom-area-wrapper .banner-bottom-list .banner-bottom-single-list .icon i {
    color: var(--pc-ink) !important;
}

/* Hero video needs a scrim so white type stays readable over any frame. */
.pc-hero .banner-video-area::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .55) 100%);
    z-index: 1;
}


/* The rating line under the hero sat at 85% white over a bright video frame. */
.pc-hero .travel-rating p,
.pc-hero .travel-rating strong {
    color: var(--white-color);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.pc-hero .travel-rating svg {
    fill: var(--pc-brand);
}

/* ==========================================================================
   Home: how it works / blog / CTA band
   ========================================================================== */

.pc-step-card {
    position: relative;
    height: 100%;
    padding: 32px 26px 28px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
}

.pc-step-card:hover {
    border-color: var(--pc-brand);
    transform: translateY(-3px);
}

/* Oversized step number as a watermark rather than a competing element. */
.pc-step-num {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: rgba(var(--pc-dark-rgb), .06);
}

.pc-step-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(var(--pc-primary-rgb), .16);
    color: var(--pc-ink);
    font-size: 22px;
}

.pc-step-card h5 {
    margin-bottom: 8px;
    color: var(--title-color);
    font-size: 18px;
}

.pc-step-card p {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- Blog cards ---------- */

.pc-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pc-blog-card:hover {
    border-color: var(--pc-brand);
    box-shadow: 0 12px 30px rgba(var(--pc-dark-rgb), .08);
    transform: translateY(-3px);
}

.pc-blog-img {
    display: block;
    height: 210px;
    background: var(--pc-bg);
    overflow: hidden;
}

.pc-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.pc-blog-card:hover .pc-blog-img img {
    transform: scale(1.05);
}

.pc-blog-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}

.pc-blog-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: 13px;
}

.pc-blog-date i {
    color: var(--pc-brand-dark);
}

.pc-blog-body h5 {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.45;
}

.pc-blog-body h5 a {
    color: var(--title-color);
}

.pc-blog-body h5 a:hover {
    color: var(--pc-primary-ink);
}

.pc-blog-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
}

.pc-blog-more:hover {
    color: var(--pc-primary-ink);
}


@media (max-width: 575.98px) {
    .pc-blog-img { height: 180px; }
    .pc-step-card { padding: 26px 20px 22px; }
}

/* ==========================================================================
   Gallery + blog excerpt
   ========================================================================== */

.pc-gallery-card {
    position: relative;
    display: block;
    height: 260px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--pc-bg);
    overflow: hidden;
}

.pc-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .5s ease;
}

.pc-gallery-card:hover img {
    transform: scale(1.05);
}

.pc-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, transparent, rgba(var(--pc-dark-rgb), .82));
    color: var(--white-color);
    font-weight: 600;
    font-size: 15px;
}

.pc-gallery-caption i {
    color: var(--pc-brand);
    font-size: 14px;
}

.pc-blog-excerpt {
    margin-bottom: 16px;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 575.98px) {
    .pc-gallery-card { height: 210px; }
}

/* ==========================================================================
   Article + sidebar
   ========================================================================== */

.pc-article-img {
    margin-bottom: 26px;
    border-radius: 16px;
    overflow: hidden;
    max-height: 440px;
    background: var(--pc-bg);
}

.pc-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-article-title {
    margin-bottom: 10px;
    color: var(--title-color);
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.25;
}

.pc-article .pc-blog-date {
    margin-bottom: 24px;
}

.pc-sidebar-card {
    padding: 26px 24px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
}

.pc-sidebar-title {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borders-color);
    color: var(--title-color);
    font-size: 18px;
}

.pc-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-recent-list li {
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--borders-color);
}

.pc-recent-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.pc-recent-list .thumb {
    flex: 0 0 78px;
    width: 78px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pc-bg);
}

.pc-recent-list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-recent-list .meta a {
    display: block;
    color: var(--title-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.45;
}

.pc-recent-list .meta a:hover {
    color: var(--pc-primary-ink);
}

.pc-recent-list .meta span {
    display: block;
    margin-top: 5px;
    color: var(--text-color);
    font-size: 12px;
}

.pc-sidebar-card .primary-btn1.w-100 {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .pc-sidebar-card { padding: 22px 18px; }
}

/* ==========================================================================
   Search results
   ========================================================================== */

.pt-60 { padding-top: 60px; }

.pc-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 30px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
}

.pc-search-trip h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 6px;
    color: var(--title-color);
    font-size: clamp(20px, 2.4vw, 27px);
}

.pc-search-trip h2 i {
    color: var(--pc-brand-dark);
    font-size: 18px;
}

.pc-search-trip p {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
}

.pc-search-trip p i {
    margin-right: 6px;
}

/* ---------- Offer card ----------
   One responsive card serves desktop and mobile; the old page shipped two
   duplicate blocks (and two forms with different ids) for the same cab. */
.pc-offer-card {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background: var(--white-color);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.pc-offer-card:hover {
    border-color: var(--pc-brand);
    box-shadow: 0 12px 30px rgba(var(--pc-dark-rgb), .07);
}

.pc-offer-media {
    flex: 0 0 190px;
    width: 190px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--pc-bg);
    overflow: hidden;
}

.pc-offer-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.pc-offer-media i {
    font-size: 40px;
    color: var(--pc-border);
}

.pc-offer-info {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-offer-info h3 {
    margin-bottom: 3px;
    color: var(--title-color);
    font-size: 20px;
}

.pc-offer-model {
    display: block;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 14px;
}

.pc-offer-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.pc-offer-specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    font-size: 14px;
}

.pc-offer-specs i {
    color: var(--pc-brand-dark);
}

.pc-fare-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pc-fare-link:hover { color: var(--pc-primary-ink); }

.pc-offer-action {
    flex: 0 0 210px;
    text-align: right;
}

.pc-offer-price del {
    display: block;
    color: var(--text-color);
    font-size: 14px;
}

.pc-offer-price strong {
    display: block;
    color: var(--title-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.pc-offer-price span {
    display: block;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 12px;
}

/* ---------- Fare modal ---------- */
.pc-fare-modal { border-radius: 16px; }

.pc-fare-table {
    width: 100%;
    margin-bottom: 14px;
}

.pc-fare-table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--borders-color);
    color: var(--text-color);
    font-size: 15px;
}

.pc-fare-table td:last-child {
    text-align: right;
    color: var(--title-color);
    font-weight: 600;
}

.pc-fare-table tr.total td {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 18px;
    color: var(--title-color);
    font-weight: 700;
}

/* ---------- Stats + included list ---------- */
.pc-stats-band {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 34px 30px;
    border-radius: 20px;
    background: var(--pc-ink);
}

.pc-stat {
    flex: 1 1 160px;
    text-align: center;
}

.pc-stat strong {
    display: block;
    color: var(--pc-brand);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.pc-stat span {
    color: rgba(var(--white-color-opc), .75);
    font-size: 14px;
}

.pc-include-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-include-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 12px;
    color: var(--text-color);
    line-height: 1.7;
}

.pc-include-list li i {
    margin-top: 4px;
    font-size: 14px;
}

.pc-include-list li.yes i { color: var(--pc-success); }
.pc-include-list li.no  i { color: var(--pc-error); }

@media (max-width: 991.98px) {
    .pc-offer-card { flex-wrap: wrap; gap: 18px; }
    .pc-offer-media { flex: 0 0 130px; width: 130px; height: 90px; }
    .pc-offer-info { flex: 1 1 200px; }
    .pc-offer-action { flex: 1 1 100%; text-align: left; display: flex; align-items: center;
                       justify-content: space-between; gap: 16px; padding-top: 16px;
                       border-top: 1px solid var(--borders-color); }
    .pc-offer-price span { margin-bottom: 0; }
    .pc-offer-action form { flex: 0 0 auto; }
    .pc-offer-action .primary-btn1 { min-width: 150px; }
}

@media (max-width: 575.98px) {
    .pc-offer-card { padding: 18px; }
    .pc-search-summary { padding: 18px; }
    .pc-offer-action { flex-wrap: wrap; }
    .pc-offer-action form, .pc-offer-action .primary-btn1 { width: 100%; }
}

/* ==========================================================================
   Booking form (cab_book_*)
   --------------------------------------------------------------------------
   The booking page computes fares, coupons and part-payments, and its JS
   reads values out of the DOM through both ids and classes (.base_fare,
   .gstAmt, .coupon_discount, .amount_after_discount, ...). Its markup is
   therefore FROZEN - only the page shell was replaced.

   These gc-* rules are ported from the old booking.css so the page stands
   on its own once the legacy stylesheet is dropped. Brand colours are
   re-pointed at the PayalCab palette.
   ========================================================================== */

:root {
    --gc-primary: var(--pc-dark);
    --gc-gold: var(--pc-primary);
    --gc-border: var(--pc-border);
    --gc-light: var(--pc-bg);
    --gc-success: var(--pc-success);
    --gc-text: var(--pc-text-muted);
    --gc-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}

/* Card Container */ .gc-card {
	background: var(--pc-card);
	border-radius: 16px;
	border: 1px solid var(--gc-border);
	box-shadow: var(--gc-shadow);
	padding: 24px;
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;}
.gc-card-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--gc-primary);
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--gc-border);
	display: flex;
	align-items: center;
	gap: 10px;}
.gc-card-title i {
	color: var(--gc-gold);
	background: rgba(var(--pc-primary-rgb), 0.1);
	padding: 8px;
	border-radius: 50%;
	font-size: 16px;}
/* Form Inputs */ .gc-input {
	border: 1px solid var(--gc-border);
	border-radius: 8px;
	padding: 12px 15px;
	font-size: 14px;
	background: var(--pc-card);
	transition: all 0.3s;}
.gc-input:focus {
	border-color: var(--gc-gold);
	box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), 0.1);
	background: var(--pc-card);}
/* Add-on Cards */ .gc-addon-label {
	display: block;
	cursor: pointer;
	position: relative;}
.gc-addon-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;}
.gc-addon-box {
	border: 2px solid var(--gc-border);
	border-radius: 12px;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease;
	background: var(--pc-card);}
.gc-addon-content h6 {
	margin: 0;
	font-weight: 600;
	color: var(--pc-text);}
.gc-addon-content p {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--gc-text);}
.gc-addon-price {
	font-weight: 700;
	color: var(--pc-text);
	font-size: 15px;
	background: var(--gc-light);
	padding: 5px 10px;
	border-radius: 6px;}
.gc-addon-label input[type="checkbox"]:checked + .gc-addon-box {
	border-color: var(--gc-gold);
	background: var(--pc-primary-light);
	box-shadow: 0 5px 15px rgba(var(--pc-primary-rgb), 0.25);}
.gc-addon-label input[type="checkbox"]:checked + .gc-addon-box .gc-addon-price {
	color: #fff;
	background: var(--gc-primary);}
/* Payment Options */ .gc-pay-label {
	display: block;
	cursor: pointer;
	height: 100%;}
.gc-pay-label input[type="radio"] {
	display: none;}
.gc-pay-box {
	border: 2px solid var(--gc-border);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	height: 100%;
	transition: all 0.2s;
	background: var(--pc-card);
	position: relative;}
.gc-pay-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--gc-primary);
	color: var(--gc-gold);
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;}
.gc-pay-amount {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--gc-primary);
	margin: 10px 0 5px;}
.gc-pay-label input[type="radio"]:checked + .gc-pay-box {
	border-color: var(--gc-primary);
	background: var(--pc-primary-light);}
.gc-btn-pay {
	width: 100%;
	background: var(--gc-primary);
	color: #fff;
	padding: 16px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 12px;
	transition: transform 0.2s;}
.gc-btn-pay:hover {
	background: var(--pc-dark-2);
	color: var(--gc-gold);
	transform: translateY(-2px);}
/* Summary Sidebar */ .gc-summary-sticky {
	position: sticky;
	top: 20px;}
.gc-route-graphic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--gc-light);
	padding: 15px;
	border-radius: 10px;
	margin-bottom: 20px;}
.gc-total-row {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px dashed var(--gc-border);
	display: flex;
	justify-content: space-between;
	font-size: 20px;
	font-weight: 800;
	color: var(--gc-primary);}
.gc-summary-sticky {
		position: relative;
		top: 0;}
.gc-card-title {
		font-size: 15px;
		margin-bottom: 14px;
		padding-bottom: 10px;
		gap: 8px;}
.gc-card-title i {
		font-size: 14px;
		padding: 6px;}
.gc-input {
		padding: 10px 12px;
		font-size: 14px;}
.gc-addon-box {
		padding: 12px;
		border-radius: 10px;
		flex-wrap: wrap;
		gap: 8px;}
.gc-addon-content h6 {
		font-size: 14px;}
.gc-addon-content p {
		font-size: 11px;}
.gc-addon-price {
		font-size: 14px;
		padding: 4px 8px;}
.gc-pay-box {
		padding: 14px 10px;
		border-radius: 10px;}
.gc-pay-badge {
		font-size: 9px;
		padding: 3px 8px;}
.gc-pay-amount {
		font-size: 18px;
		margin: 8px 0 4px;}
.gc-btn-pay {
		padding: 14px;
		font-size: 15px;
		border-radius: 10px;}
.gc-route-graphic {
		padding: 12px;
		flex-direction: column;
		gap: 8px;
		text-align: center;
		border-radius: 8px;}
.gc-total-row {
		font-size: 17px;
		margin-top: 14px;
		padding-top: 14px;}
.gc-card-title {
    font-size: 16px;
    margin-bottom: 14px;
    padding-bottom: 10px;}
.gc-summary-sticky {
    position: relative;
    top: 0;
    margin-top: 16px;}
.gc-card-title {
    font-size: 15px;
    gap: 8px;}
.gc-card-title i {
    font-size: 14px;
    padding: 6px;}
.gc-addon-box {
    padding: 12px;
    border-radius: 10px;
    flex-direction: column;
    gap: 8px;
    text-align: center;}
.gc-addon-price {
    font-size: 14px;}
.gc-pay-box {
    padding: 14px 10px;
    border-radius: 10px;}
.gc-pay-amount {
    font-size: 18px;}
.gc-route-graphic {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    text-align: center;}
.gc-total-row {
    font-size: 17px;}
.gc-btn-pay {
    padding: 14px;
    font-size: 15px;
    border-radius: 10px;}
/* ============================================ 22. SMOOTH TRANSITIONS ============================================ */ .banner-form .form-info .form-item, .banner-form .search-btn, .card, .gc-card, .btn, .footer-contact ul li a {
  transition: all 0.3s ease;}
/* ==========================================================================
   Booking tabs as the theme's pill filter
   --------------------------------------------------------------------------
   The theme's own search switcher is .filter-item-list > .single-item: a white
   rounded pill with an icon, filled with the primary colour when active. The
   booking widget's markup is frozen, so the same look is applied to its
   existing .card-header .nav li a.nav-link.
   ========================================================================== */

.banner-form .card-header {
    border-bottom: 0;
    padding: 18px 18px 0;
}

.banner-form .card-header .nav {
    gap: 12px;
}

.banner-form .nav li .nav-link {
    padding: 11px 20px !important;
    border: 1px solid var(--borders-color);
    border-radius: 100px;
    border-bottom: 1px solid var(--borders-color);
    background: var(--white-color);
    color: var(--pc-ink);
    font-size: 15px !important;
    font-weight: 500;
}

.banner-form .nav li .nav-link i {
    font-size: 16px;
    color: var(--pc-brand-dark);
    transition: color .3s ease;
}

.banner-form .nav li .nav-link:hover,
.banner-form .nav li .nav-link.active {
    background: var(--pc-primary);
    border-color: var(--pc-primary-hover);
    color: #FFFFFF;
}

.banner-form .nav li .nav-link:hover i,
.banner-form .nav li .nav-link.active i {
    color: var(--pc-ink);
}

/* The pills sit on the card edge like the theme's, so the field row needs air. */
.banner-form .card-body {
    padding: 22px 18px 24px;
}

/* ==========================================================================
   Booking widget: phones (payalcab-59)
   --------------------------------------------------------------------------
   Placed after the pill-tab block on purpose: those pill rules use !important
   and would otherwise win over the older phone rules near the top.
   ========================================================================== */

/* The suggestion list is as wide as its field below 768px - the 300px floor
   pushed it past the card's right edge on a phone. Height is set by
   payalcab-booking.js so the list stops above the dock and the keyboard. */
@media (max-width: 767.98px) {
    .pc-field .suggestion-box {
        min-width: 0;
        left: 0;
        right: 0;
    }

    .select2-container--pc .select2-results > .select2-results__options {
        max-height: min(290px, 42vh);
    }
}

@media (max-width: 575.98px) {
    /* Trip type: one row of equal tiles, icon over label, every option in
       view - no sideways scrolling to discover Airport Transfer. */
    .banner-form .card-header {
        padding: 12px 12px 0;
    }

    .banner-form .card-header .nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
        overflow: visible;
    }

    .banner-form .card-header .nav li {
        min-width: 0;
        display: flex;
    }

    .banner-form .nav li .nav-link {
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 60px;
        padding: 8px 4px !important;
        border-radius: 14px;
        font-size: 12px !important;
        font-weight: 600;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
    }

    .banner-form .nav li .nav-link i {
        margin: 0 !important;
        font-size: 18px;
        line-height: 1;
    }

    .banner-form .card-body {
        padding: 14px 12px 16px;
    }

    .banner-form .form-info {
        border-radius: 12px;
    }

    .banner-form .form-info .form-item {
        padding: 9px 12px;
    }

    /* pc-stacked-dividers: the 1199px rule strips the top border from the
       first three cells (right for a 3-across row). Stacked one per row they
       need it back, or Pickup/Drop/Date run together and the swap button
       floats in empty space instead of sitting on the Pickup/Drop line. */
    .banner-form .form-info .form-item:nth-child(n+2) {
        border-top: 1px solid var(--borders-color);
    }

    .banner-form .form-info .form-item .form-label {
        font-size: 12px;
        margin-bottom: 1px;
    }

    .banner-form .form-info .form-control,
    .banner-form .form-info select.form-control,
    .banner-form .form-info .select2-container--pc .select2-selection__rendered {
        font-size: 15px;
    }

    /* 16px on the typed field stops iOS zooming the page on focus */
    .banner-form .form-info input.form-control {
        font-size: 16px;
    }

    .banner-form .form-info .form-item .way-icon {
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .pc-field .suggestion-box li {
        padding: 10px 12px;
    }

    .banner-form .twm-tabs-search-btn {
        margin-top: 14px;
    }

    .banner-form .pc-form-error {
        margin-top: 10px;
        font-size: 12.5px;
    }

    /* ---------- Mobile header (payalcab-59) ----------
       Sizing only. Position, insets, width and the floating glass belong to
       the header session's rules near the end of this file; these selectors
       are just specific enough to win without editing those. Logo stays 40px
       tall. */
    header.style-1.pc-header .pc-header-row {
        min-height: 54px;
        gap: 8px;
    }

    header.style-1.pc-header .nav-right {
        gap: 6px;
    }

    header.style-1.pc-header .nav-right .pc-hd-ico,
    header.style-1.pc-header .nav-right .sidebar-button {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* floating bar - approved by the header session: row height and top
       inset only; the glass layers follow the row on their own */
    html.pc-stuck header.style-1.pc-header {
        top: 6px;
    }

    html.pc-stuck header.style-1.pc-header .pc-header-row {
        min-height: 50px;
    }
}

/* Carousel controls under the testimonial rail. */
.pc-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pc-slider-controls button {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borders-color);
    border-radius: 50%;
    background: var(--pc-card);
    color: var(--pc-ink);
    font-size: 17px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.pc-slider-controls button:hover {
    background: var(--pc-primary);
    border-color: var(--pc-primary-hover);
    color: #FFFFFF;
}

/* Compact call button, shown only where the topbar is hidden. */


/* ==========================================================================
   Trust strip - tighter, with separators
   ========================================================================== */

.banner-bottom-area .banner-bottom-area-wrapper {
    padding: 38px 56px;
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list {
    position: relative;
    flex: 1 1 0;
    max-width: none;
    padding: 0 34px;
    align-items: flex-start;
    gap: 18px;
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list:first-child {
    padding-left: 0;
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list:last-child {
    padding-right: 0;
}

/* Hairline between the three claims, as in the theme's own strip. */
.banner-bottom-area .banner-bottom-list .banner-bottom-single-list + .banner-bottom-single-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(var(--white-color-opc), .14);
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list .icon {
    min-width: 58px;
    max-width: 58px;
    height: 58px;
    margin-top: 2px;
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list .icon i {
    font-size: 25px;
}

.banner-bottom-area .banner-bottom-content h5 {
    font-size: 19px;
    margin-bottom: 8px;
}

.banner-bottom-area .banner-bottom-content p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(var(--white-color-opc), .8);
}

@media (max-width: 991.98px) {
    .banner-bottom-area .banner-bottom-list .banner-bottom-single-list { padding: 0; }
    .banner-bottom-area .banner-bottom-list .banner-bottom-single-list + .banner-bottom-single-list::before {
        display: none;
    }
}

/* The theme's .icon is sized for an <img>; a Bootstrap Icon glyph needs its own
   centring or it sits against the circle edge and gets clipped. */
.banner-bottom-area .banner-bottom-list .banner-bottom-single-list .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
    line-height: 1;
}

.banner-bottom-area .banner-bottom-list .banner-bottom-single-list .icon i {
    display: block;
    line-height: 1;
    margin: 0;
}


/* ==========================================================================
   Footer refinements
   ========================================================================== */

.footer-section .footer-contact-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 34px 0;
}

.footer-section .footer-contact-wrap .inquiry-area {
    gap: 16px;
}

.pc-inquiry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(var(--white-color-opc), .08);
    color: var(--pc-brand);
    font-size: 22px;
}

.footer-section .footer-contact-wrap .inquiry-area .content span {
    display: block;
    color: rgba(var(--white-color-opc), .65);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 3px;
}

.footer-section .footer-contact-wrap .inquiry-area .content strong {
    color: var(--white-color);
    font-size: 19px;
    font-weight: 600;
}

/* Five columns of links plus the logo column need a tighter gutter than the
   theme's four, and the right-alignment it applies stops making sense. */
.footer-section .footer-menu-wrap .row > [class*="col-"] {
    justify-content: flex-start !important;
}

.footer-section .footer-menu-wrap .footer-widget .widget-title {
    margin-bottom: 24px;
}

.footer-section .footer-menu-wrap .footer-widget .widget-list li {
    margin-bottom: 14px;
}

.footer-section .divider {
    height: 1px;
    background: rgba(var(--white-color-opc), .12);
}

@media (max-width: 767.98px) {
    .footer-section .footer-contact-wrap { gap: 22px; padding: 26px 0; }
}

/* The theme spaces the footer contact row with a fixed 80px gap, which pushed
   the last item past the container once we used three of them. */
.footer-section .footer-contact-wrap .contact-area {
    gap: 38px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-section .footer-contact-wrap .contact-area .single-contact .content a {
    font-size: 17px;
    white-space: nowrap;
}

/* The uploaded logo is dark artwork on transparency, so it vanishes against the
   near-black footer. A light plate keeps it legible without needing a second
   asset from the client. */
.footer-section .footer-logo {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
}

.footer-section .footer-logo img {
    max-height: 60px;
    width: auto;
}

@media (max-width: 991.98px) {
    .footer-section .footer-contact-wrap .contact-area {
        gap: 24px !important;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Auth pages (login / registration)
   ========================================================================== */

.pc-auth-head {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borders-color);
}

.pc-auth-head h2 {
    margin-bottom: 8px;
    color: var(--title-color);
    font-size: 26px;
}

.pc-auth-head p {
    margin: 0;
    color: var(--text-color);
}

/* The lifted auth forms carry the old theme's Bootstrap classes; give their
   controls the same treatment as the rest of the site without touching markup. */
.pc-form-card .registration-form .form-control,
.pc-form-card .form-border .form-control {
    height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--borders-color);
    border-radius: 10px;
    background: var(--pc-card);
    color: var(--title-color);
    font-size: 15px;
}

.pc-form-card .registration-form .form-control:focus,
.pc-form-card .form-border .form-control:focus {
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .18);
}

.pc-form-card .registration-form label,
.pc-form-card .form-border label {
    margin-bottom: 7px;
    color: var(--title-color);
    font-weight: 500;
    font-size: 14px;
}

.pc-form-card .btn,
.pc-form-card button[type="submit"],
.pc-form-card #nextBtn,
.pc-form-card #submitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 30px;
    border: 0;
    border-radius: 74px;
    background: var(--pc-brand);
    color: var(--pc-ink);
    font-weight: 600;
}

.pc-form-card .btn:hover,
.pc-form-card button[type="submit"]:hover,
.pc-form-card #nextBtn:hover,
.pc-form-card #submitBtn:hover {
    background: var(--pc-brand-dark);
    color: var(--pc-ink);
}

.pc-auth-alt {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--borders-color);
    color: var(--text-color);
    font-size: 15px;
}

.pc-auth-alt a {
    color: var(--title-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pc-auth-aside {
    padding: 34px 32px;
    border-radius: 16px;
    background: var(--pc-surface);
    border: 1px solid var(--borders-color);
}

.pc-auth-aside h3 {
    margin: 12px 0 12px;
    color: var(--title-color);
    font-size: 25px;
}

.pc-auth-aside > p {
    color: var(--text-color);
    line-height: 1.75;
}

.pc-auth-benefits {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.pc-auth-benefits li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--borders-color);
}

.pc-auth-benefits li:last-child { border-bottom: 0; padding-bottom: 0; }

.pc-auth-benefits .icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--pc-card);
    color: var(--pc-ink);
    font-size: 18px;
}

.pc-auth-benefits h5 {
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--title-color);
}

.pc-auth-benefits p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-color);
}

.mt-20 { margin-top: 20px; }

@media (max-width: 575.98px) {
    .pc-auth-aside { padding: 24px 20px; }
}

/* ---------- Small shared utilities ---------- */

/* Pill label above a heading. It used to live on a dark CTA band with bright
   gold text; on the light cards that still use it that combination was gold on
   near-white, so the text is ink and the gold is the pill. */
.pc-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 74px;
    background: rgba(var(--pc-primary-rgb), .22);
    color: var(--pc-primary-ink);
    font-size: 13px;
    font-weight: 600;
}

/* Secondary action set beside a primary button. */
.pc-textlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--title-color);
    font-weight: 500;
}

.pc-textlink i {
    color: var(--pc-brand-dark);
}

.pc-textlink:hover {
    color: var(--pc-brand-dark);
}

/* ---------- Closing CTA (theme: home8-contact-section) ---------- */

/* The theme's ground is a pale lilac keyed to its visa-agency palette; the
   grid pattern on top of it is neutral, so only the tint changes. */
.pc-contact-cta .contact-wrapper {
    background-image: url(../img/home8/home8-contact-bg.png),
        linear-gradient(160deg, var(--pc-surface) 0%, #FFF6D6 100%);
    /* The grid is drawn in pale blue for the theme's lilac ground; over gold it
       has to tone in rather than sit on top of it. */
    background-blend-mode: soft-light, normal;
}

/* Theme colours this eyebrow with --primary-color4, its purple, through a
   four-class chain - match it or the override loses on specificity. */
.pc-contact-cta.home8-contact-section .contact-wrapper .contact-content .section-title > span {
    color: var(--pc-brand-dark);
}

.pc-contact-cta .contact-content .section-title p {
    margin: 18px 0 0;
    max-width: 470px;
}

/* The content column is capped at 510px by the theme, which is not room for a
   button and two links side by side - the links get their own line. */
.pc-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 40px;
}

.pc-contact-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.pc-contact-actions .primary-btn1 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* Fleet photos are cut-outs on white; the wrapper stands them on its baseline,
   which is what the theme's own illustration does. The theme pins its own
   illustration to a 570px min-width - min beats max in CSS, so it has to be
   unset or a narrow desktop overflows the wrapper. */
.pc-contact-cta .contact-img img {
    min-width: 0;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

@media (max-width: 991.98px) {
    .pc-contact-cta .contact-wrapper { padding: 40px 26px; }
    .pc-contact-actions { margin-top: 30px; }
}

/* ==========================================================================
   About Us
   --------------------------------------------------------------------------
   The theme's about page is built for a tour operator: a holiday collage in
   the intro, a founder's signature, dated milestones behind round stock
   photos, and partner logos. None of that is ours, so those slots are filled
   from our own data - a car from the fleet, the CMS selling points, the
   chapters of the one-way story. These rules cover the substitutions; every
   other selector on the page is the theme's own.
   ========================================================================== */

/* ---------- Intro ---------- */

/* The theme writes the intro copy as exactly two paragraphs and spaces them
   with a 45px padding-top on every <p> but the last. Ours is admin copy of
   unknown length, so .pc-prose carries the gap once and paragraphs inside it
   keep an even rhythm. */
.about-section .about-content .section-title .pc-prose {
    padding-top: 40px;
}

.about-section .about-content .section-title .pc-prose p {
    padding-top: 0;
    margin-bottom: 18px;
}

.about-section .about-content .section-title .pc-prose p:last-child {
    margin-bottom: 0;
}

/* .section-title already leaves 55px below itself - enough on its own. */
.about-section .about-content .pc-about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.about-section .about-content .pc-about-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    color: var(--title-color);
}

.about-section .about-content .pc-about-link i {
    color: var(--pc-brand-dark);
}

.about-section .about-content .pc-about-link:hover {
    color: var(--pc-brand-dark);
}

/* Fleet photos are cut-outs on white, not the theme's full-bleed collage, so
   the panel supplies the ground the car sits on. */
.pc-about-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 40px 32px 56px;
    border-radius: 20px;
    background:
        radial-gradient(680px 260px at 50% 12%, rgba(var(--pc-primary-rgb), .28), transparent 62%),
        linear-gradient(160deg, var(--pc-bg) 0%, var(--pc-primary-light) 100%);
}

.pc-about-panel img {
    width: 100%;
    max-width: 460px;
    height: auto;
    /* Cut-outs vary in aspect ratio; contain keeps every car whole. */
    object-fit: contain;
    mix-blend-mode: multiply;
}

.pc-about-badge {
    position: absolute;
    left: 32px;
    bottom: 26px;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 74px;
    background: var(--white-color);
    box-shadow: 0 10px 26px rgba(var(--pc-dark-rgb), .12);
    font-size: 14px;
    color: var(--text-color);
}

.pc-about-badge strong {
    font-size: 20px;
    font-weight: 600;
    color: var(--title-color);
}

@media (max-width: 991.98px) {
    .pc-about-panel { min-height: 260px; padding: 30px 24px 48px; }
    .pc-about-badge { left: 24px; bottom: 20px; }
}

/* ---------- Counters ---------- */

/* The theme's figures are inline SVG; ours are Bootstrap Icons, which need the
   colour and size its `.icon svg` rule gave them. */
.counter-section .single-counter .icon i {
    font-size: 40px;
    line-height: 1;
    color: var(--primary-color1);
}

/* counter-section is edge-to-edge grey in the theme. On this page it sits
   between two white sections, so it reads better as a band with air round it. */
.counter-section.pc-counters {
    background-color: var(--pc-surface);
}

@media (max-width: 991.98px) {
    .counter-section.pc-counters .single-counter { gap: 14px; }
    .counter-section .single-counter .icon i { font-size: 32px; }
}

/* ---------- What you get ---------- */

.about-why-choose-section .why-choose-card {
    height: 100%;
}

.about-why-choose-section .why-choose-card i {
    display: block;
    margin-bottom: 26px;
    font-size: 42px;
    line-height: 1;
    color: var(--title-color);
}

.about-why-choose-section .why-choose-card:hover i {
    animation: bounceIn 1.2s linear;
}

/* ---------- Behind the journey ---------- */

/* The theme lays these tabs out with a Swiper configured for six slides. Four
   chapters cannot fill it, so the swiper is dropped and .nav-pills - which the
   theme sets to display:block - lays the row out here instead. */
.pc-journey .jouney-content-wrapper .nav-area .nav-pills {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.pc-journey .jouney-content-wrapper .nav-area .nav-item {
    flex: 1 1 0;
    min-width: 0;
}

/* Tab handles are buttons so the strip is keyboard-reachable; this strips the
   button chrome back to what the theme's .nav-link expects. */
.pc-journey .jouney-content-wrapper .nav-area .nav-item .nav-link {
    width: 100%;
    border: 0;
    background: none;
}

/* Stands in for the theme's 196px round photo. */
.pc-journey .pc-journey-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    margin: 0 auto 20px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 12px 30px rgba(var(--pc-dark-rgb), .08);
    transition: all .4s ease-out;
}

.pc-journey .pc-journey-icon i {
    font-size: 42px;
    line-height: 1;
    color: var(--title-color);
}

.pc-journey .nav-link.active .pc-journey-icon {
    border-color: var(--primary-color1);
    background: var(--pc-surface);
}

.pc-journey .nav-link.active .pc-journey-icon i,
.pc-journey .nav-link.active h4 {
    color: var(--pc-brand-dark);
}

.pc-journey .nav-link h4 {
    font-size: 20px;
}

.pc-journey .jouney-content-wrapper .tab-content .tab-pane {
    text-align: center;
}

@media (max-width: 767.98px) {
    /* Below the line's breakpoint the row wraps to two per line and the
       chapters read as a list rather than a timeline. */
    .pc-journey .jouney-content-wrapper .nav-area .nav-pills {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .pc-journey .jouney-content-wrapper .nav-area .nav-item {
        flex: 0 0 calc(50% - 8px);
    }

    .pc-journey .pc-journey-icon { width: 88px; height: 88px; }
    .pc-journey .pc-journey-icon i { font-size: 32px; }
    .pc-journey .nav-link h4 { font-size: 17px; }
}

/* ==========================================================================
   My account — trip tables
   ========================================================================== */

.custom-table {
    margin-bottom: 0;
}

.custom-table thead th {
    padding: 14px 16px;
    background: var(--pc-surface);
    border-bottom: 1px solid var(--borders-color);
    color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.custom-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--borders-color);
    color: var(--text-color);
    font-size: 15px;
    vertical-align: middle;
}

.custom-table tbody tr:last-child td {
    border-bottom: 0;
}

.custom-table .btn {
    border-radius: 74px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
}

.custom-table .btn-primary {
    background: var(--pc-brand);
    border-color: var(--pc-brand);
    color: var(--pc-ink);
}

.custom-table .btn-primary:hover {
    background: var(--pc-brand-dark);
    border-color: var(--pc-brand-dark);
    color: var(--pc-ink);
}

/* Wide trip tables scroll inside their own card rather than the page. */
.page-content .table-responsive,
.page-content .card {
    border-radius: 16px;
}

.page-content .table-responsive {
    border: 1px solid var(--borders-color);
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    .custom-table thead th,
    .custom-table tbody td { padding: 12px; font-size: 14px; }
}


/* ==========================================================================
   Theme components with hard-coded palettes
   --------------------------------------------------------------------------
   A handful of the theme's own sections paint from literal hexes rather than
   its custom properties - lavender, lime and sky-blue tile backgrounds that
   belong to the holiday template, not to us. Re-pointing --primary-color1
   cannot reach them, so they are corrected here by selector. Grouped in one
   place so the next one found has an obvious home.
   ========================================================================== */

/* Home: the four service tiles. Ground was #F2F2FF, icon 2 of 4 was #0AB5FF. */
.service-wrapper {
    background-color: var(--pc-primary-light);
}

.service-wrapper .service-list .single-service .icon,
.service-wrapper .service-list .single-service:nth-child(2) .icon {
    background-color: var(--pc-primary);
}

.service-wrapper .service-list .single-service .icon i,
.service-wrapper .service-list .single-service .icon svg {
    color: var(--pc-dark);
    fill: var(--pc-dark);
}

/* About: "what you get on every trip" cards cycled lime / grey / lavender /
   mint. Two alternating brand tints keep the rhythm without the colour. */
.about-why-choose-section .why-choose-card,
.about-why-choose-section .why-choose-card.three {
    background-color: var(--pc-primary-light);
    border: 1px solid var(--pc-border);
}

.about-why-choose-section .why-choose-card.two,
.about-why-choose-section .why-choose-card.four {
    background-color: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.about-why-choose-section .why-choose-card i {
    color: var(--pc-primary-ink);
}

.about-why-choose-section .why-choose-card h5 {
    color: var(--pc-dark);
}

/* About: the journey band sat on a flat #F0F0F0 behind its map artwork. */
.about-page-journey-section {
    background-image: url(../img/innerpages/about-page-journey-bg.png),
        linear-gradient(180deg, var(--pc-bg) 0%, var(--pc-bg) 100%);
}

/* Card headings that wrap a link: an <a> keeps the browser's blue unless it is
   told otherwise, so these rendered blue against the palette. */
.pc-feature-card h5 a,
.pc-feature-card h5 a:hover {
    color: inherit;
}

/* Footer: the theme lays its map artwork over a flat #110F0F. DARK instead.
   The artwork itself had to be recoloured, not just the ground beneath it -
   footer-bg.png is a WARM near-black (#282323) painted at 20% alpha, which
   lifted the old black ground but on navy pushes red and green up while
   pulling blue down, so the map came out the same luminance as the ground and
   vanished. footer-bg-payalcab.png is the same artwork with its pixels set to
   DARK SECONDARY and its alpha rescaled so the densest strokes land exactly on
   #273044 over #172033. Same shape and density, palette hue. The theme's own
   file is left untouched. */
.footer-section {
    background-image: url(../img/home1/footer-bg-payalcab.png),
        linear-gradient(180deg, var(--pc-dark) 0%, var(--pc-dark) 100%);
}


/* ==========================================================================
   Bootstrap utilities and buttons
   --------------------------------------------------------------------------
   Both themes are Bootstrap 5.3, and the views lean on its colour utilities
   (61 .btn-primary, 118 .text-success, 86 .text-danger and so on). Bootstrap
   paints those from its own custom properties, so re-pointing them here
   carries the palette into every page that uses a utility class - including
   the pages still rendering their legacy bodies.
   ========================================================================== */

:root {
    --bs-primary: var(--pc-primary);
    --bs-primary-rgb: var(--pc-primary-rgb);
    --bs-success: var(--pc-success);
    --bs-success-rgb: 22, 132, 91;
    --bs-danger: var(--pc-error);
    --bs-danger-rgb: 199, 71, 61;
    --bs-warning: var(--pc-primary-hover);
    --bs-warning-rgb: 223, 163, 46;
    --bs-body-color: var(--pc-text);
    --bs-body-color-rgb: 37, 42, 51;
    /* CARD, not BACKGROUND: Bootstrap derives --bs-card-bg and --bs-modal-bg
       from this, and cards and modals stay white. The page ground is painted
       by the body rule at the top of this file. */
    --bs-body-bg: var(--pc-card);
    --bs-secondary-color: var(--pc-text-muted);
    --bs-border-color: var(--pc-border);
    --bs-link-color: var(--pc-primary-ink);
    --bs-link-color-rgb: 143, 100, 16;
    --bs-link-hover-color: var(--pc-dark);
}

/* Amber is 1.8:1 on white, so the text utilities take the darkened shade
   while the grounds below keep the brand colour itself. */
.text-primary {
    color: var(--pc-primary-ink) !important;
}

.text-warning {
    color: var(--pc-primary-ink) !important;
}

/* White on amber is unreadable, so anything sitting on the brand ground gets
   dark type - this deliberately outranks a .text-white alongside it. */
.bg-primary {
    background-color: var(--pc-primary) !important;
    color: var(--pc-dark) !important;
}

.bg-warning {
    background-color: var(--pc-primary) !important;
    color: var(--pc-dark) !important;
}

/* .btn-* set their own --bs-btn-* locals rather than reading --bs-primary. */
.btn-primary,
.btn-warning {
    --bs-btn-color: var(--pc-dark);
    --bs-btn-bg: var(--pc-primary);
    --bs-btn-border-color: var(--pc-primary);
    --bs-btn-hover-color: var(--pc-dark);
    --bs-btn-hover-bg: var(--pc-primary-hover);
    --bs-btn-hover-border-color: var(--pc-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--pc-primary-rgb);
    --bs-btn-active-color: var(--pc-dark);
    --bs-btn-active-bg: var(--pc-primary-hover);
    --bs-btn-active-border-color: var(--pc-primary-hover);
    --bs-btn-disabled-color: var(--pc-dark);
    --bs-btn-disabled-bg: var(--pc-primary);
    --bs-btn-disabled-border-color: var(--pc-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--pc-primary-ink);
    --bs-btn-border-color: var(--pc-primary);
    --bs-btn-hover-color: var(--pc-dark);
    --bs-btn-hover-bg: var(--pc-primary);
    --bs-btn-hover-border-color: var(--pc-primary);
    --bs-btn-focus-shadow-rgb: var(--pc-primary-rgb);
    --bs-btn-active-color: var(--pc-dark);
    --bs-btn-active-bg: var(--pc-primary);
    --bs-btn-active-border-color: var(--pc-primary);
    --bs-btn-disabled-color: var(--pc-primary-ink);
    --bs-btn-disabled-border-color: var(--pc-primary);
}

.btn-success {
    --bs-btn-bg: var(--pc-success);
    --bs-btn-border-color: var(--pc-success);
    --bs-btn-hover-bg: #126E4B;
    --bs-btn-hover-border-color: #126E4B;
    --bs-btn-active-bg: #126E4B;
    --bs-btn-active-border-color: #126E4B;
}

.btn-danger {
    --bs-btn-bg: var(--pc-error);
    --bs-btn-border-color: var(--pc-error);
    --bs-btn-hover-bg: #A93B32;
    --bs-btn-hover-border-color: #A93B32;
    --bs-btn-active-bg: #A93B32;
    --bs-btn-active-border-color: #A93B32;
}

/* Links inside the copy blocks the migrated pages use. Scoped on purpose -
   a blanket rule would repaint the nav and the footer too. */
.pc-footnote a,
.pc-auth-aside a {
    color: var(--pc-primary-ink);
}

/* ==========================================================================
   Error page
   --------------------------------------------------------------------------
   Shared by the 404, the framework's error templates and the "not available
   right now" fallbacks - all of them render comman/theme/_error_page.php.

   The theme ships this section mint green (#BDEBCE ground, #AEE1C1 circle)
   with a 636px circle sized for its beach still life. Both are corrected
   here: brand cream ground, and a circle sized for our own cab illustration.
   ========================================================================== */

.error-page.pc-error-page {
    background-color: var(--pc-primary-light);
    padding: 90px 0 100px;
}

/* The corner vectors are inlined in the partial (the .svg files carry the
   mint fill), so they take their colour from here. */
.pc-error-page > .vector1 path,
.pc-error-page > .vector2 path {
    fill: rgba(var(--pc-primary-rgb), .35);
}

.pc-error-page .error-content > svg {
    fill: var(--pc-dark);
}

/* Status codes other than 404, which has the theme's numerals. */
.pc-error-page .pc-error-code {
    display: block;
    margin-bottom: 20px;
    color: var(--pc-dark);
    font-family: "Josefin Sans", sans-serif;
    font-size: clamp(64px, 9vw, 116px);
    font-weight: 700;
    line-height: 1;
}

.pc-error-page .error-content h2 {
    color: var(--pc-dark);
    font-size: clamp(26px, 3vw, 40px);
}

.pc-error-page .error-content p {
    color: var(--pc-text);
    font-weight: 400;
    margin-bottom: 32px;
}


/* ---------- The illustration ---------- */

.pc-error-page .error-img-wrap .error-img {
    width: min(100%, 540px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    background-color: rgba(var(--pc-primary-rgb), .28);
}

.pc-error-page .error-img-wrap .error-img .pc-error-illustration {
    width: 84%;
    max-width: 460px;
    height: auto;
}

.pc-error-illustration .shade  { fill: rgba(var(--pc-dark-rgb), .09); }
.pc-error-illustration .ink    { fill: var(--pc-dark); }
.pc-error-illustration .body   { fill: var(--pc-primary); }
.pc-error-illustration .glass  { fill: #D3E4F0; }
.pc-error-illustration .stripe { fill: #FFFFFF; }
.pc-error-illustration .hub    { fill: #FFFFFF; }
.pc-error-illustration .lamp   { fill: #FFFFFF; }
.pc-error-illustration .lamp.two { fill: var(--pc-error); }

.pc-error-illustration .road {
    stroke: rgba(var(--pc-dark-rgb), .25);
    stroke-width: 6;
    stroke-linecap: round;
}

.pc-error-illustration .board {
    fill: #FFFFFF;
    stroke: var(--pc-dark);
    stroke-width: 5;
    stroke-linejoin: round;
}

/* Illegible "writing" on the signboards - the point of the picture is that
   neither of them helps. */
.pc-error-illustration .board-line {
    stroke: rgba(var(--pc-dark-rgb), .35);
    stroke-width: 7;
    stroke-linecap: round;
}

.pc-error-illustration .sign {
    fill: #FFFFFF;
    font-family: "Josefin Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ---------- Where to go instead ---------- */

.pc-error-page .pc-error-links {
    margin-top: 70px;
    padding-top: 55px;
    border-top: 1px solid rgba(var(--pc-dark-rgb), .10);
}

@media (max-width: 991.98px) {
    .error-page.pc-error-page { padding: 70px 0 80px; }
    .pc-error-page .pc-error-links { margin-top: 50px; padding-top: 40px; }
}

@media (max-width: 767.98px) {
    .error-page.pc-error-page { padding: 55px 0 65px; }
    .pc-error-page .error-content { text-align: center; }
}


/* ==========================================================================
   HOME PAGE DEPTH LAYER                                 (2026-09-01, rev 2)
   --------------------------------------------------------------------------
   The middle of the home page used to be four near-identical box grids in a
   row. It is now five sections that share a vocabulary of depth but no two of
   which have the same shape: a fleet rail, a package-card grid, a copy-and-
   collage band, a city mosaic and a full-bleed review rail.

   The vocabulary:
     * scene   `transform-style: preserve-3d` plus a pointer tilt writing
               --pc-rx / --pc-ry ([data-pc-tilt] in payalcab-motion.js).
               Children on different translateZ parallax for free.
     * pane    a frosted surface. `backdrop-filter` is a grouping property: it
               forces the element carrying it to FLATTEN, so a pane is always
               its own layer inside a scene, never the scene itself.
     * aura    a large radial-gradient running to fully transparent. Not a
               blurred solid circle - at this size that still shows a rim and
               reads as a discoloured patch.
     * floor   a grid plane laid back with perspective() rotateX(). A real
               vanishing point rather than a gradient imitating one.
     * drift   [data-pc-depth] moves a background layer against the scroll.

   Everything reads correctly with the effects off: the tilt vars fall back to
   0deg, [data-pc-reveal] is scoped to the .pc-motion class the script stamps
   on <html>, and @supports covers browsers without backdrop-filter.
   ========================================================================== */

/* ---------- Scroll reveal (shared) ---------- */

/* Scoped to .pc-motion, which payalcab-motion.js puts on <html> as it parses.
   If the script never runs the elements are simply visible - a section that
   cannot be seen is a far worse failure than one that does not animate. */
.pc-motion [data-pc-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--pc-reveal-delay, 0ms);
}

.pc-motion [data-pc-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    /* The script also bails out, but this covers the window before it runs. */
    .pc-motion [data-pc-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Gentle float for the decorative vectors, on top of their scroll drift. */
@keyframes pc-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-18px); }
}


/* ==========================================================================
   Fleet  (home rail + Services grid)                          (2026-09-11)
   --------------------------------------------------------------------------
   One card, comman/theme/_fleet_card.php, on both pages. Its structure is
   fixed so a row of cars lines up region for region:

     stage   fixed height, car fitted inside it on a contact shadow
     name    one line                 line   one line, reserved when empty
     specs   three equal cells        foot   rate left, action right

   Nothing on the card is allowed to change another region's height. The
   earlier card let a missing model line or a fourth spec chip push the rate
   and the link down, which is what made the rail look uneven.
   ========================================================================== */

.pc-fleet-section {
    position: relative;
    /* No padding: the trust strip above carries the page's mb-100 gap. */
}

.pc-fleet-heading {
    margin-bottom: 44px;
}

/* ---------- The card ---------- */

.pc-car-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 10px 18px;
    border: 1px solid var(--pc-border);
    border-radius: 20px;
    background: var(--pc-card);
    box-shadow: 0 1px 2px rgba(var(--pc-dark-rgb), .04), 0 8px 24px rgba(var(--pc-dark-rgb), .05);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.pc-car-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--pc-primary-rgb), .55);
    box-shadow: 0 2px 4px rgba(var(--pc-dark-rgb), .04), 0 18px 40px rgba(var(--pc-dark-rgb), .10);
}

.pc-car-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 168px;
    border-radius: 14px;
    background: linear-gradient(165deg, var(--pc-primary-light) 0%, var(--pc-bg) 100%);
    overflow: hidden;
}

/* The cut-outs float without this. A soft elliptical contact shadow is what
   makes a car look parked on the plate rather than pasted onto it. */
.pc-car-ground {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(var(--pc-dark-rgb), .28) 0%, rgba(var(--pc-dark-rgb), .10) 45%, transparent 72%);
    filter: blur(4px);
    transition: transform .45s ease, opacity .45s ease;
}

.pc-car-img {
    position: relative;
    width: auto;
    height: auto;
    max-width: 84%;
    max-height: 128px;
    margin-bottom: 22px;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.pc-car-card:hover .pc-car-img {
    transform: translateY(-6px);
}

.pc-car-card:hover .pc-car-ground {
    transform: scaleX(.88);
    opacity: .65;
}

.pc-car-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 8px 0;
    text-align: left;
}

.pc-car-name,
.pc-car-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pc-car-name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pc-dark);
}

.pc-car-line {
    min-height: 1.5em;
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text-muted);
}

/* ---------- Spec cells: always three, always one line ---------- */

.pc-car-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0 18px;
    border: 1px solid var(--pc-border);
    border-radius: 12px;
    background: var(--pc-bg);
}

.pc-car-specs > div {
    display: flex;
    flex-direction: column-reverse;     /* value above its label; dt stays first for screen readers */
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 10px 4px 9px;
    text-align: center;
}

.pc-car-specs > div + div {
    border-left: 1px solid var(--pc-border);
}

.pc-car-specs dt {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pc-car-specs dd {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--pc-dark);
}

.pc-car-specs dd i {
    font-size: 14px;
    color: var(--pc-primary-ink);
}

/* ---------- Foot: rate and action on one line ---------- */

.pc-car-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--pc-border);
}

.pc-car-rate {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
    color: var(--pc-text-muted);
}

.pc-car-rate span {
    font-size: 12px;
}

.pc-car-rate strong {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-dark);
}

.pc-car-rate .pc-car-rate-ask {
    font-size: 15px;
    font-weight: 700;
}

.pc-car-rate small {
    font-size: 13px;
}

.pc-car-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(var(--pc-primary-rgb), .16);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--pc-dark);
    transition: background .25s ease;
}

.pc-car-link i {
    transition: transform .25s ease;
}

.pc-car-link:hover,
.pc-car-card:hover .pc-car-link {
    background: var(--pc-primary);
    color: var(--pc-dark);
}

.pc-car-card:hover .pc-car-link i {
    transform: translateX(3px);
}

/* The whole card is the target on a touch screen; the link stretches over it.
   On desktop the pill stays the only hot area, so the card can be scrolled
   past with a trackpad without firing a navigation. */
@media (hover: none) {
    .pc-car-link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
    }
}

/* ---------- Home rail ---------- */

.pc-fleet-slider {
    /* Room above and below for the hover lift and the shadow; one pixel each
       side so a card whose width Swiper rounds up never loses its border to
       the rail's clip. Horizontal padding beyond that shifts Swiper's slide
       grid off the container's edges. */
    margin: 0 -1px;
    padding: 8px 1px 26px;
}

/* Swiper sizes a slide to its content; `height: auto` lets the card's own
   height: 100% make every card in view the height of the tallest. */
.pc-fleet-slider .swiper-slide {
    height: auto;
}

.pc-fleet-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
}

.pc-fleet-controls button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pc-border);
    border-radius: 50%;
    background: var(--pc-card);
    color: var(--pc-dark);
    font-size: 16px;
    transition: background .25s ease, border-color .25s ease;
}

.pc-fleet-controls button:hover {
    background: var(--pc-primary);
    border-color: var(--pc-primary-hover);
}

.pc-fleet-pagination {
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
}

.pc-fleet-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 40px;
    text-align: center;
}

.pc-fleet-foot p {
    margin: 0;
    color: var(--pc-text-muted);
}

@media (max-width: 991.98px) {
    .pc-fleet-heading { margin-bottom: 34px; }
    .pc-fleet-foot { margin-top: 32px; }
}

@media (max-width: 575.98px) {
    .pc-car-stage { height: 156px; }
    .pc-car-img { max-height: 116px; }
}


/* ==========================================================================
   Discounts & offers - fare tickets                             (2026-09-11)
   --------------------------------------------------------------------------
   Each offer is a ride ticket: a boarding-pass body (from, to, distance) and
   a tear-off stub with the price, split by a perforation. Two rows of three
   on desktop, two across on tablets, one on phones.

   The notches are cut with a mask, not painted in the background colour, so
   they stay true holes whatever sits behind the section. A mask also clips
   the element's own box-shadow, which is why the shadow is a drop-shadow
   filter on .pc-ticket-wrap: a filter on the parent follows the masked
   outline, notches and all.
   ========================================================================== */

.pc-offers-section {
    position: relative;
}

.pc-offers-heading {
    margin-bottom: 44px;
}

.pc-ticket-wrap {
    height: 100%;
    filter: drop-shadow(0 1px 1px rgba(var(--pc-dark-rgb), .05)) drop-shadow(0 10px 22px rgba(var(--pc-dark-rgb), .08));
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), filter .35s ease;
}

.pc-ticket-wrap:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 2px 2px rgba(var(--pc-dark-rgb), .05)) drop-shadow(0 18px 32px rgba(var(--pc-dark-rgb), .13));
}

.pc-ticket {
    --pc-stub: 38%;
    --pc-notch: 11px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pc-stub);
    height: 100%;
    border-radius: 18px;
    background: var(--pc-card);
    -webkit-mask:
        radial-gradient(circle var(--pc-notch) at calc(100% - var(--pc-stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--pc-notch) at calc(100% - var(--pc-stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--pc-notch) at calc(100% - var(--pc-stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--pc-notch) at calc(100% - var(--pc-stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}

/* ---------- Body: the boarding pass ---------- */

.pc-ticket-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 20px 20px 22px;
}

.pc-ticket-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pc-ticket-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(var(--pc-primary-rgb), .16);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pc-dark);
}

.pc-ticket-tag i {
    font-size: 13px;
    color: var(--pc-primary-ink);
}

.pc-ticket-km {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pc-text-muted);
}

/* From / To as a two-stop timeline: an open ring for the pickup, a filled
   dot for the drop, a dotted leg between them. */
.pc-ticket-route {
    margin: 18px 0 0;
    padding: 0 0 0 24px;
    list-style: none;
}

.pc-ticket-route li {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-ticket-route li + li {
    margin-top: 12px;
}

.pc-ticket-route li::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--pc-primary-ink);
    background: var(--pc-card);
}

.pc-ticket-route li + li::before {
    border-color: var(--pc-primary);
    background: var(--pc-primary);
}

.pc-ticket-route li:first-child::after {
    content: "";
    position: absolute;
    left: -19px;
    top: 19px;
    bottom: -9px;
    border-left: 2px dotted rgba(var(--pc-dark-rgb), .22);
}

.pc-ticket-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pc-ticket-route strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 1px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pc-dark);
}

.pc-ticket-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: auto 0 0;
    padding: 16px 0 0;
    list-style: none;
}

.pc-ticket-perks li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pc-text-muted);
}

.pc-ticket-perks i {
    font-size: 13px;
    color: var(--pc-success);
}

/* ---------- Stub: the price ---------- */

.pc-ticket-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 20px 14px;
    background: var(--pc-primary-light);
    text-align: center;
}

/* The perforation, stopping short of the notches. */
.pc-ticket-stub::before {
    content: "";
    position: absolute;
    left: -1px;
    top: calc(var(--pc-notch, 11px) + 7px);
    bottom: calc(var(--pc-notch, 11px) + 7px);
    border-left: 2px dashed rgba(var(--pc-dark-rgb), .16);
}

.pc-ticket-save {
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(22, 132, 91, .12);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--pc-success);
}

.pc-ticket-from {
    margin-top: 12px;
    font-size: 12px;
    color: var(--pc-text-muted);
}

.pc-ticket-fare {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--pc-dark);
}

.pc-ticket-was {
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-ticket-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 150px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 100px;
    background: var(--pc-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pc-dark);
    transition: background .25s ease;
}

.pc-ticket-cta i {
    transition: transform .25s ease;
}

.pc-ticket-cta:hover,
.pc-ticket-wrap:hover .pc-ticket-cta {
    background: var(--pc-primary-hover);
    color: var(--pc-dark);
}

.pc-ticket-wrap:hover .pc-ticket-cta i {
    transform: translateX(3px);
}

/* On a touch screen the whole ticket is the target. */
@media (hover: none) {
    .pc-ticket-cta::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}

@media (max-width: 991.98px) {
    .pc-offers-heading { margin-bottom: 34px; }
}

@media (max-width: 575.98px) {
    .pc-ticket { --pc-stub: 40%; }
    .pc-ticket-main { padding: 18px 14px 16px 16px; }
    .pc-ticket-route { padding-left: 22px; }
    .pc-ticket-route li::before { left: -22px; }
    .pc-ticket-route li:first-child::after { left: -17px; }
    .pc-ticket-route strong { font-size: 16px; }
    .pc-ticket-stub { padding: 18px 10px; }
    .pc-ticket-fare { font-size: 24px; }
}


/* ==========================================================================
   Why PayalCab  (theme .home4-about-section)
   ========================================================================== */

.pc-about-section {
    position: relative;
    padding: 20px 0;
}

.pc-about-section .about-content > ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The theme's pill is a DARK capsule with white type - so the tick disc and the
   link inside it have to be light, not the ink colours a light card would use. */
.pc-about-section .about-content > ul li i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--pc-primary-rgb), .22);
    color: var(--pc-primary);
    font-size: 13px;
}

.pc-about-section .about-content > ul li a {
    color: #FFFFFF;
    transition: color .25s ease;
}

.pc-about-section .about-content > ul li a:hover {
    color: var(--pc-primary);
}

/* The theme right-aligns this because its own version is a bare text link.
   Ours is a filled button, which reads as detached floating off to the right -
   and on a narrow column it ran past the edge. */
.pc-about-section .about-wrapper .about-content .btn-area {
    justify-content: flex-start;
}

.pc-about-divider {
    display: block;
    height: 1px;
    margin: 30px 0;
    background: linear-gradient(90deg, var(--pc-border), rgba(var(--pc-dark-rgb), .16), transparent);
}

/* The floating badge over the collage: the theme fills it with a hand-drawn
   globe vector, which is holiday iconography. */
.pc-about-section .about-img-grp .counter-wrapper .counter-area h2 {
    color: var(--pc-dark);
}

.pc-about-section .about-img-grp .counter-wrapper > i {
    font-size: 34px;
    color: var(--pc-primary);
    line-height: 1;
}

.pc-about-section .about-img-grp .single-img img {
    border-radius: 16px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .pc-about-section { padding: 0; }
}


/* ==========================================================================
   Success stories  (theme .visa-dt-success-story-section)
   --------------------------------------------------------------------------
   Full-bleed review rail. The theme's cards are stock student portraits with an
   agency logo plate; ours are real reviews over the cities we serve, so the
   photo needs a scrim heavy enough at the foot to carry the quote.
   ========================================================================== */

.pc-stories-section {
    position: relative;
    /* No top padding: the section above supplies the page's 100px gap, and
       40px more here made this the one join on the page that was 140. The
       theme's divider border goes too - it was drawn to sit 100px above the
       heading, and every other join on the page is whitespace alone. */
    padding: 0;
    border-top: 0;
}

.pc-stories-rail {
    padding-bottom: 6px;
}

.pc-stories-rail .swiper-slide {
    height: auto;
}

.pc-story-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    background: var(--pc-dark);
}

.pc-story-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}

.pc-story-card:hover > img {
    transform: scale(1.06);
}

/* Absolutely positioned over the photo, the way the theme does it - in normal
   flow the scrim sat inside the card's box and left a visible inset frame. */
.pc-story-card .success-story-content-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    border-radius: inherit;
    padding: 26px 24px 24px;
    /* Clear across the top so the city is visible, graded only where the quote
       sits - the same reasoning as the offer tile it replaced. */
    background: linear-gradient(to top,
            rgba(var(--pc-dark-rgb), .92) 0%,
            rgba(var(--pc-dark-rgb), .62) 34%,
            rgba(var(--pc-dark-rgb), .10) 66%,
            rgba(var(--pc-dark-rgb), .28) 100%);
    color: #FFFFFF;
}

.pc-story-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--pc-primary);
    font-size: 14px;
}

.pc-story-card .success-story-content h5 {
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
}

.pc-story-card .author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-story-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-weight: 700;
    font-size: 16px;
}

.pc-story-author h6 {
    margin: 0;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

.pc-story-author > span {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.pc-stories-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 45px;
}

.pc-stories-foot p {
    margin: 0;
    color: var(--pc-text-muted);
}

@media (max-width: 991.98px) {
    .pc-story-card { min-height: 360px; }
    .pc-stories-foot { margin-top: 34px; }
}

/* ==========================================================================
   Services page                                                 (2026-09-11)
   --------------------------------------------------------------------------
   The fleet grid uses the shared .pc-car-card (see "Fleet" above); the rules
   here are the page's own: the city tiles, the four-services icon panels,
   the promise cards, the fare board, and the FAQ once its video plate went.
   The theme paints two of these sections lavender (#F2F2FF) and turns the
   promise cards amber-with-white-text on hover (1.8:1) - both corrected.
   ========================================================================== */

.pc-service-fleet-head {
    margin-bottom: 44px;
}

/* ---------- Cities we cover ---------- */

.pc-cities-title {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
    color: var(--pc-dark);
}

.pc-cities-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-city-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: var(--pc-dark);
    isolation: isolate;
}

.pc-city-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.pc-city-tile:not(.pc-city-tile--more)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--pc-dark-rgb), 0) 42%, rgba(var(--pc-dark-rgb), .82) 100%);
}

.pc-city-tile:hover img {
    transform: scale(1.05);
}

.pc-city-tile-text {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-city-tile-text small {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, .82);
}

.pc-city-tile-text strong {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white-color);
}

.pc-city-tile--more {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 16px;
    background: linear-gradient(160deg, var(--pc-dark-2) 0%, var(--pc-dark) 100%);
}

.pc-city-more-count {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pc-primary);
}

.pc-city-more-label {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

.pc-city-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
}

.pc-city-more-link i {
    transition: transform .25s ease;
}

.pc-city-tile--more:hover .pc-city-more-link i {
    transform: translateX(4px);
}

@media (max-width: 1199.98px) {
    .pc-cities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pc-city-tile { aspect-ratio: 4 / 3; }
}

@media (max-width: 575.98px) {
    .pc-cities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pc-city-tile { aspect-ratio: 4 / 5; border-radius: 16px; }
    .pc-city-tile-text { left: 12px; right: 12px; bottom: 12px; }
    .pc-city-tile-text strong { font-size: 17px; }
    .pc-city-more-count { font-size: 26px; }
}

/* ---------- The four ways: icon panel in the photo slot ---------- */

.pc-service-lines .travel-season-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pc-card);
}

.pc-service-lines .travel-season-card .travel-season-top-area {
    margin-bottom: 28px;
}

.pc-service-lines .travel-season-card .travel-season-top-area .pc-line-icon {
    display: flex;
    flex: 0 0 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 180px;
    height: 200px;
    border: 1px solid var(--pc-border);
    border-radius: 16px;
    background: linear-gradient(165deg, var(--pc-primary-light) 0%, var(--pc-bg) 100%);
}

.pc-line-icon i {
    font-size: 46px;
    line-height: 1;
    color: var(--pc-primary-ink);
}

.pc-line-icon span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pc-service-lines .travel-season-card .travel-season-content h5 a {
    color: var(--pc-dark);
}

.pc-service-lines .travel-season-card .travel-season-content h5 a:hover {
    color: var(--pc-primary-ink);
}

.pc-service-lines .travel-season-card .travel-season-content .highlights-area ul li i {
    color: var(--pc-success);
}

/* "Best for" was the theme's lavender pill with amber type on it. */
.pc-service-lines .travel-season-card .note.pc-line-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: auto;
    padding: 13px 18px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-bg);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    color: var(--pc-text-muted);
}

.pc-line-note strong {
    margin-right: 4px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-line-note a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pc-primary-ink);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* The theme stacks the card at this width; the panel becomes a banner. */
    .pc-service-lines .travel-season-card .travel-season-top-area .pc-line-icon {
        flex-basis: auto;
        flex-direction: row;
        width: 100%;
        height: 88px;
    }
    .pc-line-icon i { font-size: 34px; }
}

@media (max-width: 576px) {
    .pc-service-lines .travel-season-card .travel-season-top-area .pc-line-icon {
        flex-basis: auto;
        flex-direction: row;
        width: 100%;
        height: 80px;
    }
    .pc-line-icon i { font-size: 32px; }
}

/* ---------- The three promises ---------- */

.pc-service-why.destination-dt-why-choose-section {
    background-image: url(../img/innerpages/destination-dt-why-choose-bg.png),
        linear-gradient(180deg, var(--pc-primary-light) 0%, var(--pc-primary-light) 100%);
}

.pc-service-why .why-choose-card {
    height: 100%;
    border: 1px solid transparent;
}

.pc-service-why .why-choose-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: var(--pc-primary-light);
    font-size: 26px;
    color: var(--pc-primary-ink);
    transition: background .35s ease, color .35s ease;
}

.pc-service-why.destination-dt-why-choose-section .why-choose-card:hover {
    background-color: var(--pc-card);
    border-color: rgba(var(--pc-primary-rgb), .6);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(var(--pc-dark-rgb), .08);
}

.pc-service-why.destination-dt-why-choose-section .why-choose-card:hover h4,
.pc-service-why.destination-dt-why-choose-section .why-choose-card:hover p {
    color: inherit;
}

.pc-service-why.destination-dt-why-choose-section .why-choose-card:hover h4 {
    color: var(--pc-dark);
}

.pc-service-why .why-choose-card:hover > i {
    background: var(--pc-primary);
    color: var(--pc-dark);
}

.pc-service-why.destination-dt-why-choose-section ul li {
    border: 1px solid var(--pc-border);
    font-size: 16px;
}

.pc-service-why.destination-dt-why-choose-section ul li:hover {
    background-color: var(--pc-primary);
    color: var(--pc-dark);
}

/* ---------- Fare board ---------- */

.pc-fareboard-head {
    margin-bottom: 44px;
}

.pc-fareboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-fare-row {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 18px 18px 18px 20px;
    border: 1px solid var(--pc-border);
    border-radius: 16px;
    background: var(--pc-card);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), border-color .3s ease, box-shadow .3s ease;
}

.pc-fare-row:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--pc-primary-rgb), .6);
    box-shadow: 0 14px 32px rgba(var(--pc-dark-rgb), .08);
}

.pc-fare-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pc-primary-light);
    font-size: 19px;
    color: var(--pc-primary-ink);
}

.pc-fare-route {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.pc-fare-cities {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pc-fare-cities strong {
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pc-dark);
}

.pc-fare-cities i {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-fare-meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-fare-meta > span + span::before {
    content: "\00b7";
    margin: 0 6px;
}

.pc-fare-price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.pc-fare-price small {
    font-size: 12px;
    color: var(--pc-text-muted);
}

.pc-fare-price strong {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--pc-dark);
}

.pc-fare-go {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--pc-primary-rgb), .16);
    font-size: 14px;
    color: var(--pc-dark);
    transition: background .25s ease;
}

.pc-fare-row:hover .pc-fare-go {
    background: var(--pc-primary);
}

.pc-fareboard-foot {
    margin-top: 40px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .pc-fareboard { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pc-fareboard-head { margin-bottom: 34px; }
}

@media (max-width: 575.98px) {
    .pc-fare-row { gap: 12px; padding: 14px; }
    .pc-fare-icon { display: none; }
    /* On a phone a long destination ("Rajkot Hirasar Airport") squeezed the
       origin down to two letters. The pair wraps instead of truncating. */
    .pc-fare-cities { flex-wrap: wrap; row-gap: 0; }
    .pc-fare-cities strong { font-size: 16px; white-space: normal; }
    .pc-fare-meta-extra { display: none; }
    .pc-fare-price strong { font-size: 19px; }
    .pc-fare-go { width: 32px; height: 32px; }
}

/* ---------- FAQ, without the video plate ---------- */

/* The theme pads this section 375px at the top (335 / 295 / 255 further
   down) so the video plate can overlap into it, and paints it lavender under
   contour art. With the plate gone the section is just the page's last block:
   no band, no padding, the same 100px mb-100 rhythm as every other join. A
   band here also ended in a visible edge where the contour artwork stopped. */
.pc-service-faq.destination-dt-faq-section {
    padding: 0;
    background: none;
}


/* ==========================================================================
   About - who books us                                          (2026-09-11)
   --------------------------------------------------------------------------
   Six rider segments in one line on a desktop, three by two on a tablet, two
   by three on a phone. Replaces the "LOGO 01..06" placeholder plates.
   ========================================================================== */

.pc-segments-title {
    margin: 0 0 26px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: var(--pc-dark);
}

.pc-segments {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-segments li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-card);
}

.pc-segment-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 17px;
}

.pc-segment-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pc-dark);
}

@media (max-width: 1199.98px) {
    .pc-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .pc-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pc-segments li { gap: 10px; padding: 12px; }
    .pc-segment-icon { width: 34px; height: 34px; font-size: 15px; }
    .pc-segment-label { font-size: 13px; }
}


/* ==========================================================================
   About - the fleet showroom                                    (2026-09-11)
   --------------------------------------------------------------------------
   Header with its action on the right, then equal bays: three across, two on
   tablets, a swipeable row on phones. A bay is a small showroom - warm wall,
   a floor band, the car on a contact shadow - over a caption plate.
   .is-cutout bays fit a transparent PNG onto that stage; .is-photo bays let
   a real photograph fill the frame.
   ========================================================================== */

.pc-showroom-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px 40px;
    margin-bottom: 40px;
}

.pc-showroom-head .section-title {
    max-width: 640px;
    margin: 0;
}

.pc-showroom-head .section-title h2 {
    margin-bottom: 12px;
}

.pc-showroom-head .section-title p {
    margin: 0;
}

.pc-showroom-head .primary-btn1 {
    flex: 0 0 auto;
}

.pc-showroom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-bay-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--pc-border);
    border-radius: 20px;
    background: var(--pc-card);
    box-shadow: 0 1px 2px rgba(var(--pc-dark-rgb), .04);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.pc-bay-link:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--pc-primary-rgb), .55);
    box-shadow: 0 18px 40px rgba(var(--pc-dark-rgb), .10);
}

.pc-bay-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    overflow: hidden;
    /* Wall, then a floor band from 70% down. */
    background:
        linear-gradient(180deg, transparent 70%, rgba(var(--pc-dark-rgb), .045) 70%, rgba(var(--pc-dark-rgb), 0) 100%),
        linear-gradient(180deg, var(--pc-primary-light) 0%, var(--pc-bg) 100%);
}

.pc-bay.is-cutout .pc-bay-stage img {
    position: relative;
    width: auto;
    height: auto;
    max-width: 76%;
    max-height: 68%;
    /* Pixels, not a percentage: a percentage margin resolves against the
       bay's WIDTH, which parked the car well above its own shadow. */
    margin-bottom: 28px;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.pc-bay-ground {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 20px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(var(--pc-dark-rgb), .26) 0%, rgba(var(--pc-dark-rgb), .10) 45%, transparent 72%);
    filter: blur(4px);
    transition: transform .45s ease, opacity .45s ease;
}

.pc-bay.is-photo .pc-bay-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.pc-bay.is-cutout .pc-bay-link:hover img {
    transform: translateY(-6px);
}

.pc-bay.is-cutout .pc-bay-link:hover .pc-bay-ground {
    transform: scaleX(.88);
    opacity: .65;
}

.pc-bay.is-photo .pc-bay-link:hover img {
    transform: scale(1.04);
}

.pc-bay-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px 16px;
    border-top: 1px solid var(--pc-border);
}

.pc-bay-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-bay-text strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pc-dark);
}

.pc-bay-text small {
    margin-top: 2px;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-bay-zoom {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--pc-border);
    border-radius: 50%;
    font-size: 13px;
    color: var(--pc-dark);
    transition: background .25s ease, border-color .25s ease;
}

.pc-bay-link:hover .pc-bay-zoom {
    background: var(--pc-primary);
    border-color: var(--pc-primary);
}

@media (max-width: 991.98px) {
    .pc-showroom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-showroom-head { margin-bottom: 32px; }
}

/* Phones: one swipeable row that bleeds to the screen edge, each bay 80% of
   the width so the next one peeks in and says "there is more". */
@media (max-width: 575.98px) {
    .pc-showroom {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        gap: 14px;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding: 4px calc(var(--bs-gutter-x, 1.5rem) * .5) 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pc-showroom::-webkit-scrollbar { display: none; }

    .pc-bay { scroll-snap-align: start; }

    /* A bay scrolled out sideways never crosses the reveal observer's line
       until it is swiped in, so on phones the bays are simply shown. */
    .pc-motion .pc-bay[data-pc-reveal] {
        opacity: 1;
        transform: none;
    }

    .pc-showroom-head .primary-btn1 { order: 2; }
}


/* ==========================================================================
   Section rhythm                                                (2026-09-11)
   --------------------------------------------------------------------------
   Every section is separated from the next by the theme's mb-100 (100px,
   80px under 992px, 70px under 768px). Two theme components reset their own
   margin with a shorthand that also wipes that utility, which is why the
   heading after each of them sat flush against a coloured panel.
   ========================================================================== */

/* .home4-about-section sets `margin: 0 80px` (0 40px, 0 20px, 0 further
   down) so the panel is inset from the viewport edge - and zeroes its
   margin-bottom in the process. Two classes outrank the theme's one at every
   breakpoint; the values below mirror mb-100's own. */
.home4-about-section.mb-100 {
    margin-bottom: 100px;
    /* The theme's peach (#FFF2E2) under its line art; PRIMARY LIGHT instead. */
    background-image: url(../img/home4/home4-about-bg.png),
        linear-gradient(180deg, var(--pc-primary-light) 0%, var(--pc-primary-light) 100%);
}

@media (max-width: 991px) {
    .home4-about-section.mb-100 { margin-bottom: 80px; }
}

@media (max-width: 767px) {
    .home4-about-section.mb-100 { margin-bottom: 70px; }
}


/* ==========================================================================
   Breadcrumb divider                                            (2026-09-11)
   --------------------------------------------------------------------------
   The theme's bootstrap.min.css was saved from the vendor's demo by a site
   downloader, which rewrote Bootstrap's "/" divider into
   content: var(--bs-breadcrumb-divider, "https://demo.egenslab.com/"), so
   every .breadcrumb on the site printed the vendor's URL between crumbs.
   Setting the variable restores the intended divider everywhere.
   ========================================================================== */
.breadcrumb {
    --bs-breadcrumb-divider: "/";
}


/* ==========================================================================
   Route page  (/taxi/<from>/<to>)  -  theme: travel-package-details.html
   --------------------------------------------------------------------------
   views/taxi_route_view.php + views/taxi/theme/_*.php. The theme paints this
   template lavender (#F2F2FF) and uses SVG icons through `li svg` chains; we
   use Bootstrap Icons, so the icon rules are restated for `i`.
   ========================================================================== */

/* Section headings: the theme styles h4 here; ours are h2 for the outline. */
.pc-route-page .pc-route-h {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.3;
    color: var(--pc-dark);
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .pc-route-page .pc-route-h { font-size: 22px; margin-bottom: 18px; }
}

.pc-route-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 16px;
    border-radius: 50px;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14px;
}

.pc-route-kicker .bi-arrow-right { font-size: 12px; }

/* ---------- Fact grid ---------- */
.package-details-page .package-details-warpper .package-info-wrap .package-info-list {
    background: var(--pc-card);
    border-color: var(--pc-border);
    gap: 32px 40px;
    padding: 32px;
}

@media (max-width: 767px) {
    .package-details-page .package-details-warpper .package-info-wrap .package-info-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 22px 18px;
    }
}

.pc-fact-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 20px;
}

.package-details-page .package-details-warpper .package-info-wrap .package-info-list li .content strong {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 17px;
    color: var(--pc-dark);
}

.package-details-page .package-details-warpper .package-info-wrap .package-info-list li .content span {
    color: var(--pc-text-muted);
    margin-bottom: 8px;
}

/* ---------- Car choice ---------- */
.pc-rides-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.pc-rides-head p {
    margin: 0 0 24px;
    color: var(--pc-text-muted);
    font-size: 15px;
}

.pc-ride-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.pc-ride {
    position: relative;
    display: grid;
    grid-template-columns: 190px 1fr 210px;
    align-items: center;
    gap: 24px;
    padding: 20px 24px 20px 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    border-radius: 20px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pc-ride:hover {
    border-color: rgba(var(--pc-primary-rgb), .7);
    box-shadow: 0 18px 40px -24px rgba(var(--pc-dark-rgb), .35);
    transform: translateY(-2px);
}

.pc-ride.is-best {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .18);
}

.pc-ride-flag {
    position: absolute;
    top: -12px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    background: var(--pc-dark);
    color: #fff;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.pc-ride-flag i { color: var(--pc-primary); }

/* The car sits on a warm stage with a soft contact shadow under the wheels. */
.pc-ride-media {
    position: relative;
    height: 120px;
    border-radius: 14px;
    background: radial-gradient(120% 90% at 50% 100%, var(--pc-primary-light) 0%, #FFFDF8 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pc-ride-media::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 16px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--pc-dark-rgb), .22), transparent);
}

.pc-ride-media img {
    position: relative;
    z-index: 1;
    max-width: 88%;
    max-height: 92px;
    object-fit: contain;
}

.pc-ride-media > i { font-size: 44px; color: var(--pc-text-muted); }

.pc-ride-info h3 {
    font-family: var(--font-poppins);
    font-size: 21px;
    font-weight: 600;
    color: var(--pc-dark);
    margin: 0 0 2px;
}

.pc-ride-model {
    display: block;
    font-size: 14px;
    color: var(--pc-text-muted);
    margin-bottom: 12px;
}

.pc-ride-specs {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-ride-specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #F6F5F1;
    font-size: 13px;
    line-height: 1.2;
    color: var(--pc-text);
}

.pc-ride-specs i { color: var(--pc-primary-ink); font-size: 14px; }

.pc-ride-fare-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-primary-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pc-ride-fare-link:hover { color: var(--pc-dark); }

.pc-ride-buy { text-align: right; }

.pc-ride-price { margin-bottom: 12px; line-height: 1.15; }

.pc-ride-price del {
    display: block;
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-ride-price strong {
    display: block;
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 700;
    color: var(--pc-dark);
    letter-spacing: -.01em;
}

.pc-ride-price span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-ride-buy .primary-btn1 {
    justify-content: center;
    padding: 13px 18px;
    font-size: 15px;
}

@media (max-width: 1199px) {
    .pc-ride { grid-template-columns: 150px 1fr 180px; gap: 18px; }
}

/* Phone: car + name side by side, specs under, price and button as a footer. */
@media (max-width: 767px) {
    .pc-ride {
        grid-template-columns: 110px 1fr;
        gap: 14px 16px;
        padding: 22px 16px 16px;
    }
    .pc-ride-media { height: 84px; }
    .pc-ride-media img { max-height: 64px; }
    .pc-ride-info h3 { font-size: 18px; }
    .pc-ride-buy {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-top: 14px;
        border-top: 1px dashed var(--pc-border);
        text-align: left;
    }
    .pc-ride-price { margin: 0; }
    .pc-ride-price strong { font-size: 24px; }
    .pc-ride-buy form { flex: 0 0 52%; }
}

/* No published fare for the pair. */
.pc-rides-empty {
    display: flex;
    gap: 18px;
    padding: 28px;
    border: 1px dashed var(--pc-border);
    border-radius: 20px;
    background: var(--pc-card);
}

.pc-rides-empty h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.pc-rides-empty p { color: var(--pc-text-muted); margin-bottom: 16px; }

.pc-rides-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

/* ---------- What the fare covers ---------- */
.pc-covers .single-feature-list {
    height: 100%;
    padding: 26px 26px 8px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.package-details-page .package-details-warpper .feature-list-area .single-feature-list h5 {
    font-size: 17px;
    margin-bottom: 18px;
}

.package-details-page .package-details-warpper .items-list li {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: var(--pc-text);
}

.package-details-page .package-details-warpper .items-list li > i {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 24px;
}

.pc-yes { color: var(--pc-success); }
.pc-extra { color: var(--pc-text-muted); }

/* ---------- How the trip goes ----------
   The theme puts each stop's plan in a bordered accordion; ours is one line,
   so the stops hang off a single dotted spine instead. */
.pc-journey .itinerary-list { position: relative; }

.pc-journey .itinerary-list::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 40px;
    border-left: 2px dotted rgba(var(--pc-primary-rgb), .9);
}

.package-details-page .package-details-warpper .tour-itinerary-area .itinerary-list .single-itinerary {
    position: relative;
    margin-bottom: 28px;
}

.package-details-page .package-details-warpper .tour-itinerary-area .itinerary-list .single-itinerary .location-title {
    margin-bottom: 6px;
    gap: 16px;
}

.package-details-page .package-details-warpper .tour-itinerary-area .itinerary-list .single-itinerary .location-title .icon {
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-size: 17px;
    box-shadow: 0 0 0 6px var(--pc-bg);
}

.package-details-page .package-details-warpper .tour-itinerary-area .itinerary-list .single-itinerary .location-title h5 {
    font-size: 18px;
}

.package-details-page .package-details-warpper .tour-itinerary-area .itinerary-list .single-itinerary .location-title h5 span {
    font-size: 14px;
}

.pc-journey-text {
    margin: 0 0 0 56px;
    color: var(--pc-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.pc-journey .single-itinerary:last-child .icon { background: var(--pc-dark); color: var(--pc-primary); }

/* ---------- Route map ---------- */
.pc-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.pc-map-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--pc-border);
    background: #EEF0F3;
}

.pc-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- FAQ ---------- */
.pc-route-page .faq-wrap .accordion-item {
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pc-route-page .faq-wrap .accordion-button {
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    color: var(--pc-dark);
    background: transparent;
    padding: 18px 20px;
    box-shadow: none;
}

.pc-route-page .faq-wrap .accordion-button:not(.collapsed) { color: var(--pc-primary-ink); }

.pc-route-page .faq-wrap .accordion-body {
    padding: 0 20px 18px;
    color: var(--pc-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.pc-route-page .faq-wrap .accordion-header { margin: 0; font-size: inherit; }

/* ---------- Sidebar: trip panel ----------
   The header is not sticky (the theme's script looks for header.header-area,
   which ours is not), so the panel can ride close to the top of the window;
   the route page's script centres it with --pc-pick-top. */
.pc-route-sidebar {
    position: sticky;
    top: var(--pc-pick-top, 24px);
}

.pc-trip {
    padding: 22px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    box-shadow: 0 30px 60px -42px rgba(var(--pc-dark-rgb), .5);
}

.pc-trip-head h3 {
    margin: 0 0 2px;
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-trip-head h3 i { font-size: 15px; color: var(--pc-primary-ink); }
.pc-trip-head p { margin: 0 0 16px; font-size: 14px; color: var(--pc-text-muted); }

.pc-trip-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--pc-primary-light);
}

.pc-trip-price small { display: block; font-size: 12.5px; color: var(--pc-text-muted); }
.pc-trip-price strong { display: block; font-family: var(--font-poppins); font-size: 30px; font-weight: 700; color: var(--pc-dark); line-height: 1.1; }
.pc-trip-price > div > span { font-size: 12.5px; color: var(--pc-text-muted); }

.pc-trip-cars {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font-family: var(--font-poppins);
    font-weight: 600;
    color: var(--pc-dark);
    line-height: 1.2;
}

.pc-trip-cars small { display: block; font-family: var(--font-roboto); font-size: 11px; font-weight: 400; color: var(--pc-text-muted); }

.pc-trip-incl { list-style: none; margin: 18px 0; padding: 0; }

.pc-trip-incl li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 14.5px;
    color: var(--pc-text);
}

.pc-trip-incl i { color: var(--pc-success); font-size: 15px; line-height: 1.5; }

.pc-trip .primary-btn1.pc-trip-cta { width: 100%; justify-content: center; padding: 15px 18px; font-size: 16px; border-radius: 14px; }
.pc-trip-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--pc-text-muted); }
.pc-trip-note i { color: var(--pc-success); }

.pc-trip-empty strong { display: block; font-family: var(--font-poppins); font-size: 20px; color: var(--pc-dark); }
.pc-trip-empty p { margin: 4px 0 0; color: var(--pc-text-muted); font-size: 14px; }

.pc-trip-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--pc-dark);
    color: #fff;
    font-size: 13px;
}

.pc-trip-back:hover { color: #fff; background: var(--pc-dark-2); }
.pc-trip-back i { color: var(--pc-primary); }
.pc-trip-back strong { color: var(--pc-primary); white-space: nowrap; }

/* Shared with the city page's side panel. */
.pc-pick-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.pc-pick-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    border-radius: 12px;
    background: #F4F3EE;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-pick-contact a:hover { background: var(--pc-primary-light); color: var(--pc-dark); }
.pc-pick-contact a.is-wa i { color: #1FA855; }

/* Brief flag on the car the fare chart pointed at. */
.pc-ride.is-picked { border-color: var(--pc-primary); box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .22); }

@media (max-width: 991px) {
    .pc-route-sidebar { position: static; }
    /* The phone bar carries the fare and the jump to the cars. */
    .pc-trip-cta, .pc-trip-note { display: none; }
}

/* ---------- More routes from the city ---------- */
.pc-hop {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 22px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    color: var(--pc-text);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pc-hop:hover {
    color: var(--pc-text);
    border-color: var(--pc-primary);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -28px rgba(var(--pc-dark-rgb), .45);
}

.pc-hop-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-hop-path strong {
    flex-basis: 100%;
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-hop-path i { color: var(--pc-primary-ink); font-size: 13px; }

.pc-hop-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.pc-hop-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 7px;
    background: #F6F5F1;
    font-size: 12.5px;
}

.pc-hop-meta i { color: var(--pc-primary-ink); }

.pc-hop-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px dashed var(--pc-border);
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-hop-foot strong { font-family: var(--font-poppins); font-size: 19px; color: var(--pc-dark); }
.pc-hop-foot i { font-size: 26px; color: var(--pc-primary); transition: transform .2s ease; }
.pc-hop:hover .pc-hop-foot i { transform: rotate(45deg); }

/* Buttons here carry a trailing Bootstrap Icon directly, not the theme's
   doubled <span> label, so give the icon its own breathing room. */
.pc-route-page .primary-btn1 > i,
.pc-more-routes .primary-btn1 > i {
    margin-left: 8px;
}

.pc-route-page .package-details-warpper > :last-child { margin-bottom: 0 !important; }

/* The theme rules the section off with a border-top and relies on pt-100. */
.relevant-package-section.pc-more-routes {
    border-top-color: var(--pc-border);
    padding-top: 90px;
}

@media (max-width: 767px) {
    .relevant-package-section.pc-more-routes { padding-top: 60px; }
}

@media (max-width: 767px) {
    .pc-fact-ico { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
    .package-details-page .package-details-warpper .package-info-wrap .package-info-list li { gap: 10px; }
    .pc-map-frame { aspect-ratio: 4 / 3; }
}

/* ---------- Sign-in sheets ---------- */
.pc-auth-modal .modal-dialog { max-width: 420px; }

.pc-auth-modal .modal-content {
    position: relative;
    padding: 36px 32px 28px;
    border: 0;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 40px 80px -30px rgba(var(--pc-dark-rgb), .5);
}

.pc-auth-modal .btn-close { position: absolute; top: 18px; right: 18px; }

.pc-auth-ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 28px;
}

.pc-auth-modal .modal-title {
    font-family: var(--font-poppins);
    font-size: 22px;
    font-weight: 600;
    color: var(--pc-dark);
    margin-bottom: 6px;
}

.pc-auth-sub { color: var(--pc-text-muted); font-size: 15px; margin-bottom: 22px; }
.pc-auth-sub strong { color: var(--pc-dark); }

.pc-auth-field {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    border: 1.5px solid var(--pc-border);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-auth-field:focus-within {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .2);
}

.pc-auth-prefix {
    padding: 0 14px;
    align-self: stretch;
    display: flex;
    align-items: center;
    background: #F6F5F1;
    border-right: 1px solid var(--pc-border);
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-auth-field input {
    flex: 1;
    min-width: 0;
    height: 54px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    font-size: 18px;
    letter-spacing: .04em;
    background: transparent;
}

.pc-otp-input {
    width: 100%;
    height: 62px;
    margin-bottom: 6px;
    border: 1.5px solid var(--pc-border);
    border-radius: 14px;
    text-align: center;
    font-family: var(--font-poppins);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .5em;
    padding-left: .5em;
    outline: 0;
}

.pc-otp-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .2);
}

.pc-auth-error { min-height: 22px; margin-bottom: 8px; font-size: 14px; color: var(--pc-error); }

.pc-auth-fine,
.pc-auth-resend {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-auth-resend { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pc-auth-resend a { color: var(--pc-primary-ink); font-weight: 600; }

/* The search JS spins a Bootstrap Icon with FontAwesome's class name, and
   FontAwesome is not loaded on migrated pages. */
.bi.fa-spin { display: inline-block; animation: pc-spin 1s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Footer - Quick Links in two columns                           (2026-09-11)
   --------------------------------------------------------------------------
   Twelve links were one column twice as long as its neighbours, which left
   the footer ragged at the bottom. A grid that fills top-to-bottom, then
   left-to-right keeps the reading order of the list (the first six, then the
   next six) instead of zig-zagging across the two columns.
   ========================================================================== */

.footer-section .footer-menu-wrap .footer-widget .widget-list.pc-links-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    /* Half the links per column, rounded up; footer.php sets --pc-rows. */
    grid-template-rows: repeat(var(--pc-rows, 6), auto);
    grid-auto-flow: column;
    column-gap: 48px;
}

.footer-section .footer-menu-wrap .footer-widget {
    width: 100%;
}

@media (max-width: 1199.98px) {
    .footer-section .footer-menu-wrap .footer-widget .widget-list.pc-links-2col { column-gap: 32px; }
}

@media (max-width: 575.98px) {
    .footer-section .footer-menu-wrap .footer-widget .widget-list.pc-links-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }
}


/* ==========================================================================
   Booking form  (/cab_book_oneway)  -  theme: checkout.html
   --------------------------------------------------------------------------
   views/cab_book_oneway_view.php. Layout only - the ids and classes the fare
   script reads are listed at the top of that view. The older gc-* rules
   still style the other five cab_book_*_view pages.
   ========================================================================== */

/* ---------- Progress ---------- */
.pc-steps {
    list-style: none;
    margin: 0 auto 48px;
    padding: 0;
    max-width: 640px;
    display: flex;
    justify-content: space-between;
    position: relative;
    counter-reset: none;
}

.pc-steps::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 17px;
    border-top: 2px dashed var(--pc-border);
}

.pc-steps li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-text-muted);
}

.pc-steps li > span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-card);
    border: 2px solid var(--pc-border);
    font-weight: 600;
    color: var(--pc-text-muted);
}

.pc-steps li.is-done > span { background: var(--pc-success); border-color: var(--pc-success); color: #fff; }
.pc-steps li.is-current { color: var(--pc-dark); }
.pc-steps li.is-current > span {
    background: var(--pc-primary);
    border-color: var(--pc-primary);
    color: var(--pc-dark);
    box-shadow: 0 0 0 6px rgba(var(--pc-primary-rgb), .2);
}

/* ---------- Form cards ---------- */
.checkout-page.pc-checkout .checkout-form-wrapper + .checkout-form-wrapper { margin-top: 28px; }

.checkout-page.pc-checkout .checkout-form-wrapper .checkout-form-title { margin-bottom: 14px; }

.checkout-page.pc-checkout .checkout-form-wrapper .checkout-form-title h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 22px;
    color: var(--pc-dark);
}

.checkout-page.pc-checkout .checkout-form-title h4 small {
    font-family: var(--font-roboto);
    font-size: 13px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 50px;
    background: #F2F1EC;
    color: var(--pc-text-muted);
}

.checkout-page.pc-checkout .checkout-form-title p { margin: 4px 0 0 44px; color: var(--pc-text-muted); font-size: 15px; }

.pc-num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-size: 16px;
}

.checkout-page.pc-checkout .checkout-form-wrapper .checkout-form {
    background: var(--pc-card);
    border-color: var(--pc-border);
    border-radius: 18px;
    padding: 28px 26px;
}

.pc-checkout .form-inner { margin: 0; position: relative; }

.pc-checkout .form-inner label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-dark);
}

.pc-checkout .form-inner label em { font-style: normal; color: var(--pc-error); }

.pc-checkout .form-inner input,
.pc-checkout .form-inner textarea,
.pc-checkout .pc-select {
    width: 100%;
    height: 52px;
    padding: 10px 16px;
    border: 1.5px solid var(--pc-border);
    border-radius: 12px;
    background: #FDFCF9;
    color: var(--pc-dark);
    font-size: 16px;
    font-weight: 400;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.pc-checkout .form-inner textarea { height: auto; min-height: 84px; resize: vertical; line-height: 1.5; }

.pc-checkout .pc-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background: #FDFCF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center no-repeat;
}

.pc-checkout .form-inner input:focus,
.pc-checkout .form-inner textarea:focus,
.pc-checkout .pc-select:focus {
    outline: 0;
    border-color: var(--pc-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18);
}

/* Leading icon inside date / time fields. */
.pc-checkout .pc-has-ico > i {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    color: var(--pc-primary-ink);
    pointer-events: none;
}

.pc-checkout .pc-has-ico input,
.pc-checkout .pc-has-ico .pc-select { padding-left: 42px; }

/* Country code + number as one field. */
.pc-phone {
    display: flex;
    border: 1.5px solid var(--pc-border);
    border-radius: 12px;
    background: #FDFCF9;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-phone:focus-within { border-color: var(--pc-primary); box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18); }

.pc-phone select {
    flex: 0 0 auto;
    width: 76px;
    border: 0;
    border-right: 1px solid var(--pc-border);
    background: #F4F3EE;
    text-align: center;
    font-weight: 600;
    color: var(--pc-dark);
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.pc-checkout .pc-phone input,
.pc-checkout .pc-phone input:focus { border: 0; border-radius: 0; box-shadow: none; }

/* Pickup / drop addresses carry a coloured spine, like the summary route. */
.pc-address textarea { padding-left: 20px; }
.pc-address::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 4px;
    height: 58px;
    border-radius: 0 4px 4px 0;
    background: var(--pc-primary);
}
.pc-address.to::after { background: var(--pc-dark); }

/* ---------- Order summary ---------- */
.pc-order { position: sticky; top: 110px; }

.checkout-page.pc-checkout .order-sum-area {
    padding: 24px;
    border-radius: 20px;
    background: var(--pc-card);
    border-color: var(--pc-border);
    box-shadow: 0 30px 60px -40px rgba(var(--pc-dark-rgb), .45);
}





/* Pickup -> drop as a two-stop timeline. */
.pc-order-route {
    list-style: none;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--pc-border);
}

.pc-order-route li { position: relative; display: flex; gap: 14px; }
.pc-order-route li + li { margin-top: 16px; }

.pc-order-route li > i {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 50%;
    border: 3px solid var(--pc-primary);
    background: #fff;
}

.pc-order-route li + li > i { border-color: var(--pc-dark); background: var(--pc-dark); }

.pc-order-route li:first-child::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 20px;
    height: calc(100% + 2px);
    border-left: 2px dotted var(--pc-border);
}

.pc-order-route small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-text-muted); }
.pc-order-route strong { display: block; font-family: var(--font-poppins); font-size: 17px; font-weight: 600; color: var(--pc-dark); }
.pc-order-route span { font-size: 13px; color: var(--pc-text-muted); }

.checkout-page.pc-checkout .order-sum-area .cart-footer .pricing-area { margin: 0; padding: 16px 0 6px; }

.checkout-page.pc-checkout .order-sum-area .cart-footer .pricing-area ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    margin: 0;
    border: 0;
    font-size: 15px;
    color: var(--pc-text-muted);
}

.checkout-page.pc-checkout .order-sum-area .cart-footer .pricing-area ul li strong {
    font-family: var(--font-roboto);
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-incl { color: var(--pc-success); font-weight: 600; }
.pc-incl-no { color: var(--pc-text-muted); font-weight: 500; }
.coupon_discount { color: var(--pc-success) !important; }

.checkout-page.pc-checkout .order-sum-area .cart-footer .pricing-area ul li.pc-order-total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--pc-border);
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 17px;
}

.checkout-page.pc-checkout .order-sum-area .cart-footer .pricing-area ul li.pc-order-total strong {
    font-family: var(--font-poppins);
    font-size: 26px;
    font-weight: 700;
}

.checkout-page.pc-checkout .choose-payment-method { margin: 14px 0 18px; }

.pc-pay-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--pc-primary);
    border-radius: 14px;
    background: var(--pc-primary-light);
}

/* Two selectable payment modes (UPI prepay / cash to driver). The selected
   one keeps the original highlighted treatment; the other is muted. */
.pc-pay-choice { cursor: pointer; margin-bottom: 10px; }
.pc-pay-choice:last-of-type { margin-bottom: 0; }
.pc-pay-option:not(.is-selected) {
    border-color: var(--pc-border, #e2e2e2);
    background: transparent;
}
.pc-pay-option:not(.is-selected) .pc-pay-ico { background: #f1f1f1; color: var(--pc-text-muted); }
.pc-pay-option:not(.is-selected) .pc-pay-tick { color: #d5d5d5; }
.pc-pay-choice:focus-within { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

.pc-pay-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-size: 20px;
}

.pc-pay-option strong { display: block; font-family: var(--font-poppins); font-size: 15px; color: var(--pc-dark); line-height: 1.3; }
.pc-pay-option div span { display: block; font-size: 13px; color: var(--pc-text-muted); line-height: 1.4; margin-top: 2px; }
.pc-pay-tick { margin-left: auto; color: var(--pc-success); font-size: 20px; }

.checkout-page.pc-checkout .order-sum-area .cart-footer .primary-btn1.pc-pay-btn {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 17px 20px;
    font-size: 17px;
    border-radius: 14px;
}

.pc-pay-btn:disabled { opacity: .6; cursor: not-allowed; }

.pc-pay-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--pc-text-muted); }



@media (max-width: 991px) {
    .pc-order { position: static; }
}

@media (max-width: 767px) {
    .pc-steps { margin-bottom: 32px; }
    .pc-steps li { font-size: 12px; }
    .checkout-page.pc-checkout .checkout-form-wrapper .checkout-form { padding: 20px 16px; }
    .checkout-page.pc-checkout .checkout-form-title p { margin-left: 0; }
    .checkout-page.pc-checkout .order-sum-area { padding: 18px; }
}


/* ==========================================================================
   About intro - the sign-off                                    (2026-09-11)
   --------------------------------------------------------------------------
   The theme's .founder-area expects a signature image about 150px wide. Ours
   is the uploaded logo at its own size, which with the theme's 40px gap put
   the name past the right edge of a phone and made the whole About page
   scroll sideways (500px of document on a 390px screen).
   ========================================================================== */

.about-section .about-content .founder-area {
    flex-wrap: wrap;
    gap: 14px 24px;
}

.about-section .about-content .founder-area img {
    flex: 0 0 auto;
    width: auto;
    max-width: min(200px, 60%);
    max-height: 52px;
    object-fit: contain;
}

.about-section .about-content .founder-area .founder-info {
    min-width: 0;
}



/* ==========================================================================
   Mobile bottom bars                                            (2026-09-11)
   --------------------------------------------------------------------------
   .pc-dock  - every page under 992px (comman/footer.php): call, WhatsApp,
               book, SMS, social. Replaces the old .footer-contact strip.
   .pc-bar   - a page's own bar (route: chosen car + Book; booking: total +
               Pay). A page that has one sets pc_page_bar and the dock hides.
   Both sit above the iPhone home indicator via safe-area-inset-bottom.
   ========================================================================== */
.pc-dock,
.pc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    /* Same material as the scrolled header, so the two bars belong together. */
    background: rgba(255, 252, 246, .72);
    -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.35);
            backdrop-filter: blur(26px) saturate(185%) brightness(1.35);
    border-top: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 -1px 0 rgba(var(--pc-dark-rgb), .06),
                0 -18px 40px -24px rgba(var(--pc-dark-rgb), .45);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .pc-dock, .pc-bar { background: rgba(255, 252, 246, .98); }
}

.pc-dock {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: calc(66px + env(safe-area-inset-bottom, 0));
}

.pc-dock > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 66px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--pc-text-muted);
    -webkit-tap-highlight-color: transparent;
}

.pc-dock > a > i { font-size: 20px; color: var(--pc-dark); }
.pc-dock > a.is-wa > i { color: #1FA855; }
.pc-dock > a:active { background: var(--pc-primary-light); }

/* Raised centre action. Its label is bottom-aligned with the other four:
   they centre 36px of content in a 66px row, so their labels end 15px from
   the bottom - this one is pushed to the same line rather than floating
   higher than its neighbours. */
.pc-dock .pc-dock-book {
    justify-content: flex-end;
    padding-bottom: 15px;
    color: var(--pc-dark);
    font-weight: 600;
}

.pc-dock-fab {
    flex: 0 0 auto;      /* the column would otherwise squash it to an oval */
    width: 54px;
    height: 54px;
    margin-top: -26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-size: 24px;
    border: 4px solid #fff;
    box-shadow: 0 10px 20px -8px rgba(var(--pc-primary-rgb), .9);
}

.pc-dock-spacer { height: calc(66px + env(safe-area-inset-bottom, 0)); }

/* Page bars share the frame; their content is laid out per page. */
.pc-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
}

.pc-bar-spacer { height: calc(76px + env(safe-area-inset-bottom, 0)); }

.pc-bar-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F3EE;
    color: var(--pc-dark);
    font-size: 19px;
}

.pc-bar-ico.is-wa { color: #1FA855; }

.pc-bar-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 52px;
    padding: 0 8px 0 16px;
    border: 0;
    border-radius: 16px;
    background: var(--pc-primary);
    color: var(--pc-dark);
    text-align: left;
}

.pc-bar-main small { display: block; font-size: 11.5px; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bar-main strong { display: block; font-family: var(--font-poppins); font-size: 18px; line-height: 1.2; }

.pc-bar-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--pc-dark);
    color: #fff;
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 992px) {
    .pc-bar, .pc-bar-spacer { display: none !important; }
}

/* Keep the theme's scroll-to-top circle clear of whichever bar is showing. */
@media (max-width: 991px) {
    .progress-wrap { bottom: calc(88px + env(safe-area-inset-bottom, 0)) !important; }
}


/* ---------- Route page foot: fare chart + guide (full width) ---------- */
.pc-sec-head { margin-bottom: 28px; }

.pc-sec-head h2 {
    margin: 0 0 6px;
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-sec-head p { margin: 0; color: var(--pc-text-muted); }

@media (max-width: 767px) {
    .pc-sec-head h2 { font-size: 23px; }
}

.pc-chart-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
}

.pc-chart {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
}

.pc-chart th,
.pc-chart td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--pc-border);
    vertical-align: middle;
}

.pc-chart thead th {
    background: #F7F6F1;
    font-family: var(--font-poppins);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pc-chart tbody tr:last-child th,
.pc-chart tbody tr:last-child td { border-bottom: 0; }

.pc-chart tbody th { font-weight: 600; color: var(--pc-dark); }
.pc-chart tbody td strong { font-family: var(--font-poppins); color: var(--pc-dark); }
.pc-chart tbody tr { transition: background .15s ease; }
.pc-chart tbody tr.is-picked { background: var(--pc-primary-light); }

.pc-chart-car { display: flex; align-items: center; gap: 12px; }
.pc-chart-car img { width: 58px; height: 38px; object-fit: contain; }
.pc-chart-car small { display: block; font-weight: 400; font-size: 12.5px; color: var(--pc-text-muted); }

.pc-chart-pick {
    padding: 8px 16px;
    border: 1.5px solid var(--pc-primary);
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    font-size: 14px;
    color: var(--pc-dark);
    transition: background .15s ease;
}

.pc-chart-pick:hover,
.pc-chart tr.is-picked .pc-chart-pick { background: var(--pc-primary); }

.pc-guide-card {
    display: flex;
    gap: 16px;
    height: 100%;
    padding: 24px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-guide-card h3 {
    margin: 4px 0 8px;
    font-family: var(--font-poppins);
    font-size: 19px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-guide-text { color: var(--pc-text-muted); font-size: 15.5px; line-height: 1.7; }
.pc-guide-text strong { color: var(--pc-dark); font-weight: 600; }
.pc-guide-text a { color: var(--pc-primary-ink); font-weight: 600; }

.pc-guide-list { margin: 0; padding: 0; list-style: none; }
.pc-guide-list li { padding: 6px 0; border-bottom: 1px dashed var(--pc-border); }
.pc-guide-list li:last-child { border-bottom: 0; }

.pc-guide-links { margin-top: 36px; }

.pc-guide-links h3 {
    margin: 0 0 14px;
    font-family: var(--font-poppins);
    font-size: 18px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-guide-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pc-guide-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    font-size: 14.5px;
    color: var(--pc-text);
    transition: border-color .15s ease, background .15s ease;
}

.pc-guide-links a:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); color: var(--pc-text); }
.pc-guide-links a i { color: var(--pc-primary-ink); font-size: 13px; }
.pc-guide-links a b { color: var(--pc-dark); }


/* ==========================================================================
   City landing page  (/city/<slug>)                             (2026-09-11)
   --------------------------------------------------------------------------
   views/city_view.php + city/theme/_listing, _seo. Compact rows in the
   manner of the big cab apps (a tile, what and how long, the price, one
   button), a sticky side panel, a collapsed SEO guide.
   ========================================================================== */

/* Promise ribbon above the list. */
.pc-ribbon {
    list-style: none;
    margin: 0 0 18px;
    padding: 16px 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
    border-radius: 18px;
    background: linear-gradient(100deg, var(--pc-dark) 0%, #2B3A5C 100%);
    color: #fff;
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 500;
}

.pc-ribbon li { display: flex; align-items: center; gap: 8px; }
.pc-ribbon i { color: var(--pc-primary); font-size: 18px; }

/* Count + search + sort. */
.pc-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 14px;
}

.pc-list-count { margin: 0; font-size: 16px; color: var(--pc-text-muted); }
.pc-list-count strong { color: var(--pc-dark); }

.pc-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pc-list-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 210px;
    margin: 0;
    padding: 0 14px;
    border: 1.5px solid var(--pc-border);
    border-radius: 50px;
    background: var(--pc-card);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-list-search:focus-within { border-color: var(--pc-primary); box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18); }
.pc-list-search i { color: var(--pc-text-muted); }
.pc-list-search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; font-size: 15px; }

.pc-sort {
    display: flex;
    padding: 3px;
    border-radius: 50px;
    background: #EFEDE6;
}

.pc-sort button {
    padding: 8px 14px;
    border: 0;
    border-radius: 50px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-text-muted);
    transition: background .15s ease, color .15s ease;
}

.pc-sort button.is-on { background: #fff; color: var(--pc-dark); box-shadow: 0 2px 8px -3px rgba(var(--pc-dark-rgb), .3); }

/* ---------- Route rows ---------- */
.pc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.pc-row {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px 14px 14px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pc-row:hover {
    border-color: rgba(var(--pc-primary-rgb), .8);
    box-shadow: 0 16px 36px -26px rgba(var(--pc-dark-rgb), .45);
    transform: translateY(-1px);
}

.pc-row[hidden] { display: none; }

/* Tile: icon on a tint with the distance as a band underneath - like the
   fuel band on a cab app's car tile. */
.pc-row-tile {
    display: flex;
    flex-direction: column;
    height: 84px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pc-primary-light);
}

.pc-row-tile i {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--pc-dark);
}

.pc-row-tile span {
    padding: 4px 0;
    background: var(--pc-dark);
    color: #fff;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
}

.pc-row-body { min-width: 0; }

.pc-row-body h3 { margin: 0 0 4px; font-family: var(--font-poppins); font-size: 19px; font-weight: 600; }
.pc-row-body h3 a { color: var(--pc-dark); }
.pc-row-body h3 i { font-size: 14px; color: var(--pc-primary-ink); }
.pc-row-body p { margin: 0 0 4px; font-size: 14.5px; color: var(--pc-text-muted); }

/* Sits above the stretched link so it stays its own target. */
.pc-row-guide { position: relative; z-index: 2; font-size: 13px; font-weight: 600; color: var(--pc-primary-ink); }
.pc-row-guide:hover { color: var(--pc-dark); text-decoration: underline; }

.pc-row-buy { text-align: right; line-height: 1.2; }
.pc-row-buy strong { display: block; font-family: var(--font-poppins); font-size: 24px; font-weight: 700; color: var(--pc-dark); }
.pc-row-buy small { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--pc-text-muted); }

.pc-row-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease;
}

.pc-row:hover .pc-row-btn { background: var(--pc-primary-hover); }

/* Tip card between rows, where a cab app puts its offer banner. */
.pc-row-tip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 18px 22px;
    border-radius: 18px;
    background: linear-gradient(100deg, var(--pc-primary-light) 0%, #FFF9EC 100%);
    border: 1px solid rgba(var(--pc-primary-rgb), .45);
}

.pc-row-tip[hidden] { display: none; }
.pc-row-tip strong { display: block; font-family: var(--font-poppins); font-size: 17px; color: var(--pc-dark); }
.pc-row-tip span { font-size: 14px; color: var(--pc-text-muted); }
.pc-row-tip a { font-weight: 600; color: var(--pc-primary-ink); white-space: nowrap; }

@media (max-width: 767px) {
    .pc-ribbon { padding: 12px 14px; font-size: 13px; justify-content: flex-start; }
    .pc-list-tools { width: 100%; }
    .pc-list-search { flex: 1; width: auto; }
    .pc-row { grid-template-columns: 68px 1fr auto; gap: 12px; padding: 12px; }
    .pc-row-tile { height: 68px; }
    .pc-row-tile i { font-size: 24px; }
    .pc-row-tile span { font-size: 11px; }
    .pc-row-body h3 { font-size: 16px; }
    .pc-row-body p { font-size: 13px; }
    .pc-row-buy strong { font-size: 18px; }
    .pc-row-buy small { margin: 0; font-size: 11px; }
    .pc-row-btn { display: none; }   /* the whole row is the link on a phone */
}

/* ---------- A-Z index (big cities) ---------- */
.pc-dest-index {
    margin-top: 28px;
    padding: 26px 28px 22px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-dest-index-head h3 {
    margin: 0 0 16px;
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-dest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 180px;
    column-gap: 26px;
    max-height: 260px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
            mask-image: linear-gradient(180deg, #000 65%, transparent);
}

.pc-dest-index.is-open .pc-dest-list,
.pc-dest-index.is-searching .pc-dest-list { max-height: none; -webkit-mask-image: none; mask-image: none; }

.pc-dest-list li { break-inside: avoid; }
.pc-dest-list li[hidden] { display: none; }

.pc-dest-list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--pc-border);
    font-size: 14.5px;
    color: var(--pc-text);
}

.pc-dest-list a:hover span { color: var(--pc-primary-ink); }
.pc-dest-list b { font-weight: 600; color: var(--pc-dark); white-space: nowrap; }

.pc-dest-more-wrap { margin-top: 16px; text-align: center; }
.pc-dest-more-wrap .primary-btn1 > i { margin-left: 8px; }
.pc-dest-index.is-open .pc-dest-more-wrap,
.pc-dest-index.is-searching .pc-dest-more-wrap { display: none; }

.pc-dest-none { margin: 14px 0 0; color: var(--pc-text-muted); }
.pc-dest-none a { color: var(--pc-primary-ink); font-weight: 600; }

@media (max-width: 767px) {
    .pc-dest-index { padding: 20px 16px; }
}

/* ---------- Side panel ---------- */
.pc-city-panel { position: sticky; top: 24px; }

.pc-panel-card {
    padding: 22px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    box-shadow: 0 30px 60px -42px rgba(var(--pc-dark-rgb), .5);
}

.pc-panel-card h3 { margin: 0 0 14px; font-family: var(--font-poppins); font-size: 20px; font-weight: 600; color: var(--pc-dark); }

.pc-panel-stats {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pc-panel-stats li { padding: 12px 14px; border-radius: 14px; background: var(--pc-primary-light); }
.pc-panel-stats strong { display: block; font-family: var(--font-poppins); font-size: 20px; color: var(--pc-dark); line-height: 1.2; }
.pc-panel-stats span { font-size: 12.5px; color: var(--pc-text-muted); }

.pc-panel-steps { list-style: none; margin: 0 0 4px; padding: 0; }

.pc-panel-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    color: var(--pc-text);
}

.pc-panel-steps span {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-size: 13px;
    font-weight: 700;
}

.pc-panel-links { display: grid; gap: 8px; margin-top: 14px; }

.pc-panel-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    font-weight: 500;
    color: var(--pc-dark);
    transition: border-color .15s ease;
}

.pc-panel-links a:hover { border-color: var(--pc-primary); color: var(--pc-dark); }
.pc-panel-links i { color: var(--pc-primary-ink); }

@media (max-width: 991px) {
    .pc-city-panel { position: static; }
}

/* ---------- SEO guide, collapsed ---------- */
.pc-seo-box {
    position: relative;
    max-height: 520px;
    overflow: hidden;
    padding: 34px 36px 10px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    transition: max-height .4s ease;
}

.pc-seo-box.is-open { max-height: none; }

.pc-seo-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}

.pc-seo-box.is-open .pc-seo-fade { display: none; }

.pc-seo-box h2 { margin: 0 0 12px; font-family: var(--font-poppins); font-size: 28px; font-weight: 600; color: var(--pc-dark); }
.pc-seo-box h3 { margin: 26px 0 10px; font-family: var(--font-poppins); font-size: 19px; font-weight: 600; color: var(--pc-dark); }
.pc-seo-box p { color: var(--pc-text-muted); line-height: 1.75; }
.pc-seo-lead { font-size: 17px; }
.pc-seo-lead strong { color: var(--pc-dark); }

.pc-chart-city { min-width: 560px; }
.pc-chart-city th a { color: var(--pc-dark); }
.pc-chart-city th a:hover { color: var(--pc-primary-ink); }

.pc-seo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }

.pc-seo-why { list-style: none; margin: 0; padding: 0; }

.pc-seo-why li {
    position: relative;
    padding: 0 0 12px 26px;
    color: var(--pc-text-muted);
    line-height: 1.6;
}

.pc-seo-why li::before {
    content: "\F26A";   /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pc-success);
}

.pc-seo-why strong { color: var(--pc-dark); }
.pc-seo-why a { color: var(--pc-primary-ink); font-weight: 600; }

.pc-seo-chips { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.pc-seo-chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 50px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    font-size: 14px;
    color: var(--pc-text);
}

.pc-seo-chips a:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); color: var(--pc-text); }
.pc-seo-chips i { color: var(--pc-primary-ink); font-size: 12px; }

.pc-seo-more {
    margin-top: 16px;
    padding: 11px 24px;
    border: 1.5px solid var(--pc-dark);
    border-radius: 50px;
    background: #fff;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-seo-more:hover { background: var(--pc-dark); color: #fff; }

@media (max-width: 767px) {
    .pc-seo-box { padding: 24px 18px 6px; max-height: 460px; }
    .pc-seo-box h2 { font-size: 22px; }
    .pc-seo-cols { grid-template-columns: 1fr; }
}

/* Shorter banner for listing-style pages (city, route): the rows are what
   riders came for. Opt-in via _page_banner's banner_compact. */
.breadcrumb-section.pc-banner-compact { padding: 84px 0 76px; }

@media (max-width: 767px) {
    .breadcrumb-section.pc-banner-compact { padding: 38px 0 34px; }
    .breadcrumb-section.pc-banner-compact .banner-content h1 { font-size: 26px; margin-bottom: 8px; }
    .breadcrumb-section.pc-banner-compact .breadcrumb-list,
    .breadcrumb-section.pc-banner-compact .banner-content ul { font-size: 13px; }

    /* Promise ribbon as three icon-over-label columns, cab-app style. */
    .pc-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px 8px; text-align: center; }
    .pc-ribbon li { flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.25; }
    .pc-ribbon i { font-size: 22px; }

    .pc-row-body p { line-height: 1.45; margin-bottom: 2px; }
    .pc-row-guide { font-size: 12px; }
}


/* ---------- Booking page: review-page structure (2026-09-11) ----------
   Trip bar, "your cab" card with inclusion tabs, what-happens-next steps
   and the phone pay bar. Classes live only in cab_book_oneway_view.php. */
.pc-tripbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-bottom: 28px;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--pc-dark);
    color: #fff;
}

.pc-tripbar-route { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }

.pc-tripbar-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-size: 20px;
}

.pc-tripbar-route strong { display: block; font-family: var(--font-poppins); font-size: 19px; font-weight: 600; }
.pc-tripbar-route strong i { color: var(--pc-primary); font-size: 15px; }
.pc-tripbar-route span { font-size: 13.5px; color: rgba(255, 255, 255, .72); }

.pc-tripbar-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.pc-tripbar-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    font-size: 13.5px;
}

.pc-tripbar-chips i { color: var(--pc-primary); }

.pc-tripbar-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.pc-tripbar-edit:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Your cab */
.pc-cabcard {
    margin-bottom: 28px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    overflow: hidden;
}

.pc-cabcard-top { display: flex; align-items: center; gap: 20px; padding: 20px 22px; }

.pc-cabcard-img {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 104px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 100%, var(--pc-primary-light), #FFFDF8 70%);
    overflow: hidden;
}

.pc-cabcard-img img { max-width: 86%; max-height: 70px; object-fit: contain; margin-bottom: 14px; }
.pc-cabcard-img > i { font-size: 36px; color: var(--pc-text-muted); }

/* Fuel as a band under the car, the way cab apps label it. */
.pc-cabcard-img span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0;
    background: var(--pc-success);
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.pc-cabcard-info h3 { margin: 0 0 2px; font-family: var(--font-poppins); font-size: 22px; font-weight: 600; color: var(--pc-dark); }
.pc-cabcard-info p { margin: 0 0 10px; font-size: 14px; color: var(--pc-text-muted); }
.pc-cabcard-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.pc-cabcard-info li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #F6F5F1;
    font-size: 13px;
}

.pc-cabcard-info li i { color: var(--pc-primary-ink); }

.pc-cabtabs {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0 22px;
    list-style: none;
    border-top: 1px solid var(--pc-border);
    border-bottom: 1px solid var(--pc-border);
    background: #FBFAF6;
}

.pc-cabtabs button {
    position: relative;
    padding: 13px 12px;
    border: 0;
    background: none;
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-text-muted);
}

.pc-cabtabs button.active { color: var(--pc-dark); font-weight: 600; }

.pc-cabtabs button.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pc-primary);
}

.pc-cabtab-body { padding: 16px 22px 8px; }
.pc-cabtab-body ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.pc-cabtab-body li { display: flex; gap: 9px; padding: 5px 0 9px; font-size: 14.5px; line-height: 1.5; color: var(--pc-text); }
.pc-cabtab-body li > i { flex: 0 0 auto; margin-top: 2px; color: var(--pc-primary-ink); }
.pc-cabtab-body li > i.pc-yes { color: var(--pc-success); }
.pc-cabtab-body li > i.pc-extra { color: var(--pc-text-muted); }
.pc-cabtab-body a { color: var(--pc-primary-ink); font-weight: 600; }

/* What happens after you pay */
.pc-next { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--pc-border); }
.pc-next li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; font-size: 13.5px; color: var(--pc-text-muted); line-height: 1.45; }
.pc-next li:last-child { padding-bottom: 0; }

.pc-next li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 28px;
    bottom: 2px;
    border-left: 2px dotted var(--pc-border);
}

.pc-next span {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 13px;
    font-weight: 700;
}

.pc-next strong { display: block; font-family: var(--font-poppins); font-size: 14.5px; color: var(--pc-dark); }

/* Phone pay bar */
.pc-paybar-total { flex: 0 0 auto; line-height: 1.15; }
.pc-paybar-total small { display: block; font-size: 11.5px; color: var(--pc-text-muted); }
.pc-paybar-total strong { font-family: var(--font-poppins); font-size: 21px; color: var(--pc-dark); }
.pc-paybar-btn strong { font-size: 16px; }

@media (max-width: 767px) {
    .pc-tripbar { padding: 14px 16px; gap: 12px; }
    .pc-tripbar-route strong { font-size: 17px; }
    .pc-tripbar-edit { margin-left: auto; }
    .pc-cabcard-top { padding: 16px; gap: 14px; }
    .pc-cabcard-img { width: 104px; height: 80px; }
    .pc-cabcard-img img { max-height: 52px; }
    .pc-cabcard-info h3 { font-size: 18px; }
    .pc-cabtabs { padding: 0 8px; overflow-x: auto; }
    .pc-cabtabs button { white-space: nowrap; font-size: 13px; }
    .pc-cabtab-body { padding: 14px 16px 6px; }
    .pc-cabtab-body ul { grid-template-columns: 1fr; }
    /* On a phone the bar carries the pay action; the card keeps its
       summary but drops the duplicate button. */
    .pc-checkout .pc-pay-btn, .pc-checkout .pc-pay-note { display: none; }
}


/* ==========================================================================
   Booking confirmed + My account                                (2026-09-12)
   --------------------------------------------------------------------------
   booking_confirm_view.php and my_account_view.php. Both had their own
   inline stylesheets in the old palette; these rules replace them.
   .pc-order-route (the two-stop timeline) is shared with the booking page.
   ========================================================================== */

/* ---------- Confirmation ---------- */
.pc-confirm-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 18px;
    padding: 26px 28px;
    border-radius: 20px;
    background: var(--pc-dark);
    color: #fff;
}

.pc-confirm-tick {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-success);
    color: #fff;
    font-size: 28px;
}

.pc-confirm-hero-text { flex: 1 1 260px; min-width: 0; }
.pc-confirm-hero-text h2 { margin: 0 0 4px; font-family: var(--font-poppins); font-size: 25px; font-weight: 600; color: #fff; }
.pc-confirm-hero-text p { margin: 0; color: rgba(255, 255, 255, .78); }
.pc-confirm-hero-text i { color: var(--pc-primary); font-size: 14px; }

.pc-confirm-id {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    text-align: right;
}

.pc-confirm-id small { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pc-confirm-id strong { font-family: var(--font-poppins); font-size: 19px; color: var(--pc-primary); }

/* Status strip: one component, four states. */
.pc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
}

.pc-status > i { font-size: 24px; color: var(--pc-text-muted); }
.pc-status div { flex: 1 1 240px; min-width: 0; }
.pc-status strong { display: block; font-family: var(--font-poppins); font-size: 16px; color: var(--pc-dark); }
.pc-status span { font-size: 14.5px; color: var(--pc-text-muted); }
.pc-status .primary-btn1 { padding: 12px 20px; font-size: 15px; }

.pc-status.is-warn { background: #FFF8E8; border-color: rgba(var(--pc-primary-rgb), .5); }
.pc-status.is-warn > i { color: var(--pc-primary-hover); }
.pc-status.is-info { background: #EEF5FF; border-color: #C9DDFB; }
.pc-status.is-info > i { color: #2C6FD1; }
.pc-status.is-ok { background: #EDF9F2; border-color: #BFE7D0; }
.pc-status.is-ok > i { color: var(--pc-success); }
.pc-status.is-bad { background: #FDEFEE; border-color: #F3C9C5; }
.pc-status.is-bad > i { color: var(--pc-error); }

.pc-conf-card {
    margin-bottom: 24px;
    padding: 24px 26px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-conf-card h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-family: var(--font-poppins);
    font-size: 19px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-conf-card h3 i { color: var(--pc-primary-ink); font-size: 17px; }
.pc-conf-addr { display: block; margin-top: 4px; font-size: 13.5px; color: var(--pc-text-muted); }

.pc-conf-facts {
    list-style: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--pc-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.pc-conf-facts li { display: flex; align-items: center; gap: 10px; }
.pc-conf-facts i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--pc-primary-light); color: var(--pc-primary-ink); }
.pc-conf-facts span { display: block; font-size: 12.5px; color: var(--pc-text-muted); }
.pc-conf-facts strong { font-family: var(--font-poppins); font-size: 15px; color: var(--pc-dark); }

.pc-conf-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--pc-bg); font-size: 14px; color: var(--pc-text-muted); }
.pc-conf-note i { color: var(--pc-primary-ink); }

.pc-conf-terms { list-style: none; margin: 0; padding: 0; }
.pc-conf-terms li { position: relative; padding: 0 0 12px 22px; font-size: 14.5px; line-height: 1.6; color: var(--pc-text-muted); }
.pc-conf-terms li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-primary); }
.pc-conf-terms a { color: var(--pc-primary-ink); font-weight: 600; }

.pc-conf-fare { list-style: none; margin: 0; padding: 0; }
.pc-conf-fare li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--pc-text-muted); }
.pc-conf-fare strong { font-weight: 600; color: var(--pc-dark); }

.pc-conf-fare .pc-conf-total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--pc-border);
    font-family: var(--font-poppins);
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-conf-fare .pc-conf-total strong { font-family: var(--font-poppins); font-size: 24px; }
.pc-conf-fare .pc-conf-split { font-size: 14px; }
.pc-conf-pay { width: 100%; justify-content: center; margin-top: 16px; }

.pc-conf-help {
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--pc-primary-light);
    border: 1px solid rgba(var(--pc-primary-rgb), .4);
}

.pc-conf-help strong { display: block; font-family: var(--font-poppins); font-size: 16px; color: var(--pc-dark); }
.pc-conf-help span { display: block; margin-bottom: 4px; font-size: 14px; color: var(--pc-text-muted); }
.pc-conf-help .pc-pick-contact a { background: #fff; }

@media (max-width: 767px) {
    .pc-confirm-hero { padding: 20px; gap: 14px; }
    .pc-confirm-hero-text h2 { font-size: 20px; }
    .pc-confirm-id { width: 100%; text-align: left; }
    .pc-conf-card { padding: 20px 18px; }
}

/* ---------- My account ---------- */
.pc-acc-side { position: sticky; top: 24px; }

.pc-acc-card {
    margin-bottom: 20px;
    padding: 24px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-acc-profile { text-align: center; }

.pc-acc-avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-family: var(--font-poppins);
    font-size: 32px;
    font-weight: 600;
}

.pc-acc-profile h2 { margin: 0 0 10px; font-family: var(--font-poppins); font-size: 22px; font-weight: 600; color: var(--pc-dark); }
.pc-acc-profile ul { list-style: none; margin: 0 0 18px; padding: 0; }
.pc-acc-profile ul li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 3px 0; font-size: 14.5px; color: var(--pc-text-muted); word-break: break-word; }
.pc-acc-profile ul i { color: var(--pc-primary-ink); }

.pc-acc-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pc-acc-counts div { padding: 12px; border-radius: 14px; background: var(--pc-primary-light); }
.pc-acc-counts strong { display: block; font-family: var(--font-poppins); font-size: 22px; color: var(--pc-dark); line-height: 1.2; }
.pc-acc-counts span { font-size: 12.5px; color: var(--pc-text-muted); }

.pc-acc-signout { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--pc-error); }
.pc-acc-signout:hover { color: var(--pc-error); text-decoration: underline; }

.pc-acc-help strong { display: block; font-family: var(--font-poppins); font-size: 16px; color: var(--pc-dark); }
.pc-acc-help span { display: block; margin-bottom: 4px; font-size: 14px; color: var(--pc-text-muted); }

.pc-acc-block { margin-bottom: 34px; }

.pc-acc-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--font-poppins);
    font-size: 21px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-acc-block h3 > i { color: var(--pc-primary-ink); }
.pc-acc-block h3 > span { padding: 2px 10px; border-radius: 50px; background: var(--pc-primary); color: var(--pc-dark); font-size: 13px; }

.pc-acc-empty {
    padding: 44px 24px;
    border-radius: 18px;
    border: 1px dashed var(--pc-border);
    background: var(--pc-card);
    text-align: center;
}

.pc-acc-empty > i { font-size: 34px; color: var(--pc-primary); }
.pc-acc-empty h4 { margin: 12px 0 6px; font-family: var(--font-poppins); font-size: 19px; color: var(--pc-dark); }
.pc-acc-empty p { margin: 0 0 18px; color: var(--pc-text-muted); }

/* One booking */
.pc-trip-card {
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    overflow: hidden;
}

.pc-trip-card > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 20px;
    background: #FBFAF6;
    border-bottom: 1px solid var(--pc-border);
}

.pc-trip-card > header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pc-trip-id { font-family: var(--font-poppins); font-size: 15px; font-weight: 600; color: var(--pc-dark); }
.pc-trip-amt { font-family: var(--font-poppins); font-size: 20px; color: var(--pc-dark); }

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 50px;
    background: #EFEDE6;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pc-text-muted);
}

.pc-chip.is-warn { background: #FFF1CF; color: #8A6100; }
.pc-chip.is-info { background: #E6F0FF; color: #21599F; }
.pc-chip.is-ok { background: #E3F6EA; color: #10714E; }
.pc-chip.is-bad { background: #FCE6E4; color: #A8322A; }

.pc-trip-body { padding: 18px 20px 4px; }

.pc-trip-todo {
    margin: 0 20px 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #FFF8E8;
    font-size: 14px;
    color: #7A5600;
}

.pc-trip-todo.is-info { background: #EEF5FF; color: #21599F; }

.pc-trip-card > footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--pc-border);
}

.pc-trip-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--pc-border);
    border-radius: 11px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-dark);
    transition: border-color .15s ease, background .15s ease;
}

.pc-trip-act:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }
.pc-trip-act.is-danger { color: var(--pc-error); }
.pc-trip-act.is-danger:hover { border-color: var(--pc-error); background: #FDEFEE; }
.pc-trip-card .primary-btn1.pc-trip-pay { padding: 10px 18px; font-size: 14px; border-radius: 11px; }

/* Past trips */
.pc-past { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--pc-card); border: 1px solid var(--pc-border); }

.pc-past li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pc-border);
}

.pc-past li:last-child { border-bottom: 0; }
.pc-past strong { display: block; font-family: var(--font-poppins); font-size: 16px; color: var(--pc-dark); }
.pc-past strong i { font-size: 13px; color: var(--pc-primary-ink); }
.pc-past span { font-size: 13px; color: var(--pc-text-muted); }
.pc-past-end { display: flex; align-items: center; gap: 14px; }

@media (max-width: 991px) {
    .pc-acc-side { position: static; }
}

@media (max-width: 767px) {
    .pc-acc-card { padding: 20px 18px; }
    .pc-trip-card > header,
    .pc-trip-card > footer { padding: 12px 16px; }
    .pc-trip-body { padding: 16px 16px 2px; }
    .pc-trip-todo { margin: 0 16px 12px; }
    .pc-trip-card > footer .pc-trip-act,
    .pc-trip-card > footer .primary-btn1 { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   Header                                                        (2026-09-12)
   --------------------------------------------------------------------------
   One row: logo, menu, contact, call-back. The theme's separate topbar is
   gone - it repeated the phone number and ate ~90px above every page.
   On scroll the row lifts into a floating frosted bar; comman/header.php
   toggles .pc-stuck on <html> and pads <body> by the row's height so the
   page does not jump.
   ========================================================================== */
header.style-1.pc-header {
    position: relative;
    z-index: 900;
    /* The theme pads this element 18px top and bottom; with our own row height
       that made a 111px header on a phone. The row owns the height now. */
    padding: 0;
    background: var(--pc-card);
    border-bottom: 1px solid var(--pc-border);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.pc-header-row {
    display: flex;
    align-items: center;
    /* Below 992px .main-menu becomes a fixed drawer, which takes it out of the
       flow - it stops being a flex item, its flex:1 spacer goes with it, and
       the logo and the actions bunched up on the left with the right half of
       the bar empty. space-between keeps the actions on the right edge at
       every width. */
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    transition: min-height .3s ease;
}

/* The menu takes the middle; logo and actions keep their size. */
.pc-header .main-menu { flex: 1 1 auto; }
.pc-header .header-logo { flex: 0 0 auto; display: block; }
.pc-header .nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.pc-header .header-logo img {
    width: auto;
    max-width: 230px;
    max-height: 58px;
    transition: max-height .3s ease;
}

/* Phone as label + number where there is room. */
.pc-hd-call {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border-radius: 12px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    color: var(--pc-dark);
    line-height: 1.2;
}

.pc-hd-call:hover { border-color: var(--pc-primary); color: var(--pc-dark); }
.pc-hd-call > i { color: var(--pc-primary-ink); font-size: 17px; }
.pc-hd-call span { display: flex; flex-direction: column; font-family: var(--font-poppins); font-weight: 600; font-size: 15px; white-space: nowrap; }
.pc-hd-call small { font-family: var(--font-roboto); font-weight: 400; font-size: 11.5px; color: var(--pc-text-muted); }

/* Round icon buttons (call on narrow screens, WhatsApp). */
.pc-hd-ico {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-size: 17px;
}

.pc-hd-ico:hover { background: var(--pc-primary-hover); color: var(--pc-dark); }
.pc-hd-ico.is-wa { background: #E8F7EE; color: #1FA855; }
.pc-hd-ico.is-wa:hover { background: #D7F0E1; color: #147A3D; }

.pc-header .nav-right .primary-btn1.pc-hd-cta { white-space: nowrap; padding: 13px 22px; }

/* ---------- Floating frosted bar, once the page scrolls ---------- */
/* The glass lives on ::before, NOT on the header itself. backdrop-filter (and
   a lingering transform) turn an element into the containing block for its
   position:fixed descendants - and the mobile drawer is exactly that, with
   height:100%. With the filter on the header, the drawer sized itself to the
   64px bar. Same trap as filter/opacity/mask elsewhere in this file. */
html.pc-stuck .pc-header {
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    background: transparent;
    border: 0;
    animation: pc-header-drop .35s cubic-bezier(.22, 1, .36, 1);
}

html.pc-stuck .pc-header::before,
html.pc-stuck .pc-header::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

/* The material, built the way macOS builds a panel: let most of the page
   through, blur it hard, push the saturation back up (blur washes colour
   out), then define the pane with a bright hairline rim, a dark hairline
   underneath and one wide soft shadow. Tint alpha stays high enough for the
   navy nav text to hold up over a photo or a dark band. */
html.pc-stuck .pc-header::before {
    inset: 0;
    border-radius: 22px;
    background: rgba(255, 252, 246, .55);
    /* brightness() lifts whatever is behind the pane before the tint goes on,
       which is how a light material stays readable over a dark band without
       turning opaque: the shapes still show through, the navy nav text still
       has contrast. */
    -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.55);
            backdrop-filter: blur(28px) saturate(185%) brightness(1.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,          /* lit top edge      */
        0 -1px 0 rgba(var(--pc-dark-rgb), .06) inset,   /* shaded bottom     */
        0 0 0 1px rgba(255, 255, 255, .5),              /* bright rim        */
        0 0 0 2px rgba(var(--pc-dark-rgb), .05),        /* holds the edge on
                                                           a white page      */
        0 30px 60px -34px rgba(var(--pc-dark-rgb), .65),
        0 4px 14px -8px rgba(var(--pc-dark-rgb), .25);
}

/* Light gathers along the top of a curved pane and falls away down the face. */
html.pc-stuck .pc-header::after {
    inset: 0;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(120% 180% at 8% -40%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
}

/* Opacity only: a transform that survives the animation would re-create the
   containing block the ::before move just avoided. */
@keyframes pc-header-drop {
    from { opacity: .35; }
    to   { opacity: 1; }
}

/* The logo keeps its size when the bar lifts - shrinking it made the brand
   the one thing that got worse on scroll. The row only loses its padding. */
html.pc-stuck .pc-header .pc-header-row { min-height: 70px; position: relative; z-index: 1; }
html.pc-stuck .pc-header .header-logo img { max-height: 80px; }

/* Controls inside a glass pane are glass too, not solid cards on top of it. */
html.pc-stuck .pc-hd-call,
html.pc-stuck .pc-hd-user {
    background: rgba(255, 255, 255, .5);
    border-color: rgba(255, 255, 255, .7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

html.pc-stuck .pc-hd-ico.is-ghost { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .7); }
html.pc-stuck .pc-hd-ico.is-wa { background: rgba(232, 247, 238, .75); }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    html.pc-stuck .pc-header::before { background: rgba(255, 253, 248, .97); }
}

@media (prefers-reduced-motion: reduce) {
    html.pc-stuck .pc-header { animation: none; }
}

/* ---------- Sizes down the breakpoints ---------- */
@media (max-width: 1199.98px) {
    .pc-header-row { gap: 12px; min-height: 72px; }
    .pc-header .header-logo img { max-width: 190px; max-height: 52px; }
}

@media (max-width: 991.98px) {
    .pc-header-row { min-height: 64px; }
}

@media (max-width: 575.98px) {
    .pc-header-row { min-height: 60px; gap: 8px; }
    .pc-header .header-logo img { max-width: 138px; max-height: 40px; }
    .pc-hd-ico { width: 38px; height: 38px; font-size: 15px; }
    html.pc-stuck .pc-header { left: 8px; right: 8px; top: 8px; }
    html.pc-stuck .pc-header::before,
    html.pc-stuck .pc-header::after { border-radius: 18px; }
    html.pc-stuck .pc-header .pc-header-row { min-height: 58px; }
    html.pc-stuck .pc-header .header-logo img { max-height: 40px; }
}

/* Contact actions inside the mobile drawer, under the call-back button. */
.pc-drawer-actions { display: grid; gap: 10px; }

.pc-drawer-actions a:not(.primary-btn1) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pc-dark);
    word-break: break-word;
}

.pc-drawer-actions i { color: var(--pc-primary-ink); }
.pc-drawer-actions a .bi-whatsapp { color: #1FA855; }

/* Account link in the actions row (the nav itself stays six items wide). */
.pc-hd-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--pc-border);
    background: var(--pc-bg);
    font-family: var(--font-poppins);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pc-dark);
    white-space: nowrap;
}

.pc-hd-user:hover { border-color: var(--pc-primary); color: var(--pc-dark); }
.pc-hd-user i { color: var(--pc-primary-ink); font-size: 17px; }
.pc-hd-ico.is-ghost { background: var(--pc-bg); border: 1px solid var(--pc-border); color: var(--pc-text-muted); }
.pc-hd-ico.is-ghost:hover { background: #FDEFEE; border-color: var(--pc-error); color: var(--pc-error); }
html.pc-stuck .pc-hd-user { background: rgba(255, 255, 255, .55); }

/* Menu: tighten the gaps so six items, the number, the account link and the
   call-back button share one line down to a 1200px screen. */
.pc-header .main-menu .menu-list { gap: 0; }
.pc-header .main-menu .menu-list > li > a { padding: 10px 14px; }

@media (min-width: 1200px) and (max-width: 1499.98px) {
    .pc-header .main-menu .menu-list > li > a { padding: 10px 10px; font-size: 15px; }
    .pc-header .nav-right { gap: 8px; }
    .pc-header .nav-right .primary-btn1.pc-hd-cta { padding: 12px 16px; font-size: 14.5px; }
}

/* Between 1200 and 1400 the six items plus the actions were one wrap away
   from a second line: the list must not wrap, and the account button drops
   to its icon. */
.pc-header .main-menu .menu-list { flex-wrap: nowrap; }

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .pc-header .main-menu .menu-list > li > a { padding: 10px 8px; font-size: 14.5px; }
    .pc-hd-user { padding: 10px 12px; }
    .pc-hd-user span { display: none; }
    .pc-hd-user i { font-size: 19px; }
}

/* The number spelled out needs a genuinely wide row; below that it is the
   round call button. (Bootstrap's xxl is 1400px, which was still too tight
   once the menu, WhatsApp, account and call-back button were in the row.) */
.pc-hd-call { display: none; }
.pc-hd-call-ico { display: inline-flex; }

@media (min-width: 1600px) {
    .pc-hd-call { display: flex; }
    .pc-hd-call-ico { display: none; }
}

/* The grid container stops at 1320px, so a 1680px screen gave the row no more
   space than a 1440px one - which is why the spelled-out number pushed the
   menu onto a second line. Widen the header's own container instead. */
@media (min-width: 1600px) {
    .pc-header > .container { max-width: 1560px; }
}


/* ==========================================================================
   Footer on a phone                                             (2026-09-12)
   --------------------------------------------------------------------------
   The contact strip is a flex row built for a desktop: on a phone it wrapped
   into a ragged 2 + 1 block with a 38px gap, so "Mail support" sat alone
   under two half-width items. Below 768px it becomes a single list with one
   icon size and one rhythm.
   ========================================================================== */
@media (max-width: 767.98px) {
    .footer-section .footer-contact-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 24px 0;
    }

    .footer-section .footer-contact-wrap .inquiry-area {
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .footer-section .footer-contact-wrap > .contact-area {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 14px !important;
        width: 100%;
        justify-content: stretch;
    }

    .footer-section .footer-contact-wrap .contact-area .single-contact {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* One icon size across the strip - they were 55px, 48px and 55px. */
    .footer-section .footer-contact-wrap .contact-area .single-contact .icon,
    .footer-section .footer-contact-wrap .inquiry-area .pc-inquiry-icon {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .footer-section .footer-contact-wrap .contact-area .single-contact .content a { font-size: 16px; }

    /* Logo plate and the address under it, set to the same left edge. */
    .footer-section .footer-logo { padding: 10px 14px; }
    .footer-section .footer-logo img { max-height: 48px; }

    .footer-section .footer-menu-wrap .footer-widget { margin-bottom: 26px; }
    .footer-section .footer-bottom .copyright-and-payment-method-area { gap: 6px; text-align: center; justify-content: center; }
}

/* Paid add-ons (multi-city) and the coupon row, inside the shared checkout. */
.pc-addons { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }

.pc-addons label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 16px;
    border: 1.5px solid var(--pc-border);
    border-radius: 14px;
    background: #FDFCF9;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.pc-addons label:hover { border-color: rgba(var(--pc-primary-rgb), .8); }
.pc-addons input { width: 20px; height: 20px; accent-color: var(--pc-dark); flex: 0 0 auto; }
.pc-addons label:has(input:checked) { border-color: var(--pc-primary); background: var(--pc-primary-light); }
.pc-addon-body { flex: 1; min-width: 0; }
.pc-addon-body strong { display: block; font-family: var(--font-poppins); font-size: 15px; color: var(--pc-dark); }
.pc-addon-body small { color: var(--pc-text-muted); font-size: 13px; }
.pc-addon-price { flex: 0 0 auto; font-family: var(--font-poppins); font-weight: 600; color: var(--pc-dark); }

.pc-promo { display: flex; gap: 8px; margin: 4px 0 6px; }

.pc-promo input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1.5px dashed var(--pc-border);
    border-radius: 12px;
    background: #FDFCF9;
    font-size: 15px;
}

.pc-promo input:focus { outline: 0; border-color: var(--pc-primary); border-style: solid; }

.pc-promo button {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--pc-dark);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.pc-promo button:hover { background: var(--pc-dark-2); }
.pc-promo-msg { margin: 0 0 10px; font-size: 13.5px; color: var(--pc-success); }


/* ---------- UPI payment (/payment_upi/<id>) ---------- */
.pc-upi-card {
    height: 100%;
    padding: 26px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-upi-card h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    font-family: var(--font-poppins);
    font-size: 19px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-upi-card h3 i { color: var(--pc-primary-ink); }

.pc-upi-qr {
    width: 240px;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--pc-border);
    box-shadow: 0 18px 40px -30px rgba(var(--pc-dark-rgb), .6);
}

.pc-upi-qr img { display: block; width: 100%; height: auto; }

.pc-upi-amount {
    margin: 0 0 14px;
    text-align: center;
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 700;
    color: var(--pc-dark);
    line-height: 1.1;
}

.pc-upi-amount small { display: block; font-family: var(--font-roboto); font-size: 13.5px; font-weight: 400; color: var(--pc-text-muted); }

.pc-upi-id {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1.5px dashed var(--pc-border);
    border-radius: 12px;
    background: var(--pc-bg);
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-dark);
    word-break: break-all;
}

.pc-upi-id:hover { border-color: var(--pc-primary); border-style: solid; }
.pc-upi-id i { color: var(--pc-primary-ink); }
.pc-upi-hint { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--pc-text-muted); }

.pc-upi-timer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--pc-primary-light);
    border: 1px solid rgba(var(--pc-primary-rgb), .45);
}

.pc-upi-timer > i { font-size: 20px; color: var(--pc-primary-ink); }
.pc-upi-timer small { display: block; font-size: 12.5px; color: var(--pc-text-muted); }
.pc-upi-timer strong { font-family: var(--font-poppins); font-size: 20px; color: var(--pc-dark); }
.pc-upi-timer > span { margin-left: auto; font-size: 12.5px; color: var(--pc-text-muted); }
.pc-upi-timer.is-expired { background: #FDEFEE; border-color: #F3C9C5; }
.pc-upi-timer.is-expired > i, .pc-upi-timer.is-expired strong { color: var(--pc-error); }

.pc-upi-steps { list-style: none; margin: 0 0 20px; padding: 0; }

.pc-upi-steps li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 7px 0;
    font-size: 15px;
    color: var(--pc-text);
}

.pc-upi-steps span {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-size: 12.5px;
    font-weight: 700;
}

.pc-upi .form-inner { margin-bottom: 16px; }
.pc-upi .form-inner label { display: block; margin-bottom: 8px; font-family: var(--font-poppins); font-size: 14px; font-weight: 500; color: var(--pc-dark); }
.pc-upi .form-inner label em { font-style: normal; color: var(--pc-error); }
.pc-upi .form-inner label small { font-family: var(--font-roboto); font-weight: 400; color: var(--pc-text-muted); }

.pc-upi .upi-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--pc-border);
    border-radius: 12px;
    background: #FDFCF9;
    font-size: 16px;
    color: var(--pc-dark);
}

.pc-upi .upi-input:focus {
    outline: 0;
    border-color: var(--pc-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18);
}

.pc-upi-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pc-border);
}

.pc-upi-help strong { display: block; font-family: var(--font-poppins); font-size: 15px; color: var(--pc-dark); }
.pc-upi-help span { font-size: 13.5px; color: var(--pc-text-muted); }
.pc-upi-help .pc-pick-contact { margin: 0; min-width: 220px; }

@media (max-width: 767px) {
    .pc-upi-card { padding: 20px 18px; }
}


/* ---------- Account pop-ups (details / edit) ---------- */
.pc-popup .modal-content,
.modal-content.pc-popup {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(var(--pc-dark-rgb), .55);
}

.pc-popup-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--pc-dark);
    color: #fff;
}

.pc-popup-head h4 { margin: 0; font-family: var(--font-poppins); font-size: 20px; font-weight: 600; color: #fff; }
.pc-popup-head > div:first-child span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.pc-popup-head .pc-chip { margin-left: auto; }
.pc-popup-head .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }

.pc-popup-body { padding: 22px 24px; max-height: 70vh; overflow-y: auto; background: var(--pc-bg); }
.pc-popup-body .pc-conf-facts { margin-top: 16px; padding-top: 16px; }

.pc-popup-card {
    height: 100%;
    padding: 18px;
    border-radius: 16px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-popup-card h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--font-poppins);
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-popup-card h5 i { color: var(--pc-primary-ink); }
.pc-popup-lead { margin: 0 0 6px; font-family: var(--font-poppins); font-size: 17px; color: var(--pc-dark); }
.pc-popup-muted { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--pc-text-muted); }

.pc-popup-plate {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-family: var(--font-poppins);
    font-size: 13px;
    letter-spacing: .06em;
}

.pc-popup-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--pc-card);
    border-top: 1px solid var(--pc-border);
}

/* The edit sheet reuses the checkout's field styling. */
.pc-popup .form-inner { margin: 0; position: relative; }
.pc-popup .form-inner label { display: block; margin-bottom: 8px; font-family: var(--font-poppins); font-size: 14px; font-weight: 500; color: var(--pc-dark); }
.pc-popup .form-inner label em { font-style: normal; color: var(--pc-error); }

.pc-popup .form-inner input,
.pc-popup .form-inner textarea {
    width: 100%;
    height: 50px;
    padding: 10px 16px;
    border: 1.5px solid var(--pc-border);
    border-radius: 12px;
    background: #FDFCF9;
    font-size: 15.5px;
    color: var(--pc-dark);
}

.pc-popup .form-inner textarea { height: auto; min-height: 76px; resize: vertical; }
.pc-popup .form-inner input[readonly] { background: #F2F1EC; color: var(--pc-text-muted); }

.pc-popup .form-inner input:focus,
.pc-popup .form-inner textarea:focus {
    outline: 0;
    border-color: var(--pc-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18);
}

.pc-popup .pc-has-ico > i { position: absolute; left: 16px; bottom: 15px; z-index: 1; color: var(--pc-primary-ink); pointer-events: none; }
.pc-popup .pc-has-ico input { padding-left: 42px; }

@media (max-width: 767px) {
    .pc-popup-head, .pc-popup-body, .pc-popup-foot { padding-left: 16px; padding-right: 16px; }
    .pc-popup-foot .pc-trip-act, .pc-popup-foot .primary-btn1 { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   Special packages  (/special_package, /special_packages/<city>,
   /special_package_details/<slug>)
   The cards carry an admin-uploaded photo, so the media box is a fixed ratio
   and the image crops into it; packages without one fall back to .pc-pkg-noimg
   so a row of cards never goes ragged.
   ========================================================================== */
.pc-pkg {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.pc-pkg:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--pc-primary-rgb), .55);
    box-shadow: 0 16px 34px rgba(var(--pc-dark-rgb), .10);
}

.pc-pkg-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--pc-primary-light);
    overflow: hidden;
}

.pc-pkg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.pc-pkg:hover .pc-pkg-media img { transform: scale(1.05); }

.pc-pkg-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--pc-primary-ink);
    background: var(--pc-primary-light);
}

.pc-pkg-price {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pc-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.pc-pkg-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
}

.pc-pkg-body h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

.pc-pkg-body h3 a { color: var(--pc-dark); }
.pc-pkg-body h3 a:hover { color: var(--pc-primary-ink); }

.pc-pkg-body > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pc-text-muted);
}

.pc-pkg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-pkg-meta li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pc-text);
}

.pc-pkg-meta li i { color: var(--pc-primary-ink); font-size: 13px; }

.pc-pkg-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-primary-ink);
}

.pc-pkg-go i { transition: transform .2s ease; }
.pc-pkg-go:hover { color: var(--pc-dark); }
.pc-pkg-go:hover i { transform: translateX(4px); }

/* City index: one line per package. */
.pc-pkg-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-pkg-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-card);
    color: var(--pc-text);
    font-size: 15px;
    transition: border-color .2s ease, background .2s ease;
}

.pc-pkg-list a > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
}

.pc-pkg-list a > span i { color: var(--pc-primary-ink); }

.pc-pkg-list strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-primary-ink);
}

.pc-pkg-list a:hover {
    border-color: rgba(var(--pc-primary-rgb), .6);
    background: var(--pc-primary-light);
}

/* ---------- Details page ---------- */
.pc-pkg-hero {
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--pc-border);
    background: var(--pc-primary-light);
}

.pc-pkg-hero img {
    display: block;
    width: 100%;
    max-height: 430px;
    object-fit: cover;
}

.pc-pkg-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-card);
    transition: border-color .2s ease, background .2s ease;
}

.pc-pkg-mini img,
.pc-pkg-mini .pc-pkg-noimg {
    position: static;
    flex: 0 0 auto;
    width: 70px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    font-size: 20px;
}

.pc-pkg-mini > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pc-pkg-mini strong {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pc-dark);
}

.pc-pkg-mini small { font-size: 12.5px; color: var(--pc-primary-ink); font-weight: 600; }

.pc-pkg-mini:hover {
    border-color: rgba(var(--pc-primary-rgb), .6);
    background: var(--pc-bg);
}

.pc-pkg-form { padding: 18px; }
.pc-pkg-form .form-inner { margin-bottom: 14px; }

.pc-pkg-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-pkg-form label em { color: var(--pc-error); font-style: normal; }

.pc-pkg-form input,
.pc-pkg-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--pc-border);
    border-radius: 11px;
    background: var(--pc-card);
    font-size: 14.5px;
    color: var(--pc-text);
}

.pc-pkg-form input:focus,
.pc-pkg-form textarea:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .25);
}

.pc-pkg-form textarea { resize: vertical; min-height: 84px; }

.pc-pkg-page .pc-pick-contact { padding: 0 18px 18px; }

@media (max-width: 767.98px) {
    .pc-pkg-list { grid-template-columns: 1fr; }
    .pc-pkg-body { padding: 16px; }
    .pc-pkg-body h3 { font-size: 17.5px; }
    .pc-pkg-hero img { max-height: 240px; }
}


/* ==========================================================================
   Corporate travel  (/corporate)
   ========================================================================== */
.pc-corp-lead { max-width: 820px; }

.pc-corp-lead h2 {
    margin: 10px 0 14px;
    font-family: var(--font-poppins);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pc-dark);
}

.pc-corp-lead > p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--pc-text-muted); }

.pc-corp-lead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.pc-corp-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid var(--pc-border);
    border-radius: 999px;
    background: var(--pc-card);
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-dark);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.pc-corp-ghost:hover {
    border-color: var(--pc-dark);
    background: var(--pc-dark);
    color: #fff;
}

.pc-corp-ghost.is-wa i { color: #25D366; }
.pc-corp-ghost.is-wa:hover i { color: #fff; }

.pc-corp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 40px 0 0;
    padding: 24px 10px;
    list-style: none;
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    background: var(--pc-card);
}

.pc-corp-stats li {
    padding: 4px 22px;
    border-left: 1px solid var(--pc-border);
}

.pc-corp-stats li:first-child { border-left: 0; }

.pc-corp-stats strong {
    display: block;
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pc-primary-ink);
}

.pc-corp-stats span {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pc-text-muted);
}

/* ---------- Pillars ---------- */
.pc-corp-card {
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    background: var(--pc-card);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.pc-corp-card:hover {
    border-color: rgba(var(--pc-primary-rgb), .55);
    box-shadow: 0 14px 30px rgba(var(--pc-dark-rgb), .08);
}

.pc-corp-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 23px;
}

.pc-corp-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-corp-card > p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pc-text-muted);
}

/* ---------- Employee perk ---------- */
.pc-corp-perk h2 {
    margin: 0 0 14px;
    font-family: var(--font-poppins);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pc-dark);
}

.pc-corp-perk p { font-size: 15.5px; line-height: 1.75; color: var(--pc-text-muted); }

.pc-corp-perk-note {
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 13px 15px;
    border-radius: 13px;
    background: var(--pc-primary-light);
    font-size: 14px !important;
    color: var(--pc-primary-ink) !important;
}

.pc-corp-perk-note i { flex: 0 0 auto; margin-top: 2px; }

.pc-corp-tiers { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.pc-corp-tiers li {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid var(--pc-border);
    border-radius: 16px;
    background: var(--pc-card);
}

.pc-corp-tier-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-corp-tier-name i { color: var(--pc-primary); }

.pc-corp-tier-body { font-size: 14.5px; line-height: 1.6; color: var(--pc-text-muted); }
.pc-corp-tier-body strong { color: var(--pc-dark); }

/* ---------- Fleet ---------- */
.pc-corp-car {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--pc-border);
    border-radius: 16px;
    background: var(--pc-card);
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-corp-car:hover {
    border-color: rgba(var(--pc-primary-rgb), .55);
    box-shadow: 0 12px 26px rgba(var(--pc-dark-rgb), .07);
}

.pc-corp-car-img {
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--pc-bg);
    overflow: hidden;
}

.pc-corp-car-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.pc-corp-car-img span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--pc-primary-ink);
}

.pc-corp-car h3 {
    margin: 0 0 10px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-corp-car-specs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-corp-car-specs li { display: inline-flex; align-items: center; gap: 5px; }
.pc-corp-car-specs i { color: var(--pc-primary-ink); }

.pc-corp-car-ask {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--pc-primary);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-dark);
    transition: background .2s ease;
}

.pc-corp-car-ask:hover { background: var(--pc-primary-hover); color: var(--pc-dark); }

/* ---------- Service matrix: a table on desktop, cards on a phone ---------- */
.pc-corp-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.pc-corp-rows li {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.4fr;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border: 1px solid var(--pc-border);
    border-radius: 16px;
    background: var(--pc-card);
}

.pc-corp-row-head { display: flex; align-items: center; gap: 14px; }

.pc-corp-row-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 20px;
}

.pc-corp-row-head strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-corp-row-head small { display: block; margin-top: 3px; font-size: 13px; color: var(--pc-text-muted); }

.pc-corp-row-cell small {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pc-corp-row-cell span { font-size: 14.5px; line-height: 1.55; color: var(--pc-text); }

/* ---------- Quotes ---------- */
.pc-corp-quote {
    height: 100%;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    background: var(--pc-card);
}

.pc-corp-quote > i {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: var(--pc-primary);
}

.pc-corp-quote blockquote {
    margin: 10px 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pc-text);
}

.pc-corp-quote figcaption { border-top: 1px solid var(--pc-border); padding-top: 14px; }
.pc-corp-quote figcaption strong { display: block; font-size: 15px; font-weight: 600; color: var(--pc-dark); }
.pc-corp-quote figcaption span { display: block; margin-top: 2px; font-size: 13px; color: var(--pc-text-muted); }

/* ---------- Closing call to action ---------- */
.pc-corp-cta-box {
    padding: 44px 32px;
    border-radius: 24px;
    background: var(--pc-dark);
    text-align: center;
}

.pc-corp-cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(var(--pc-primary-rgb), .18);
    color: var(--pc-primary);
    font-size: 25px;
}

.pc-corp-cta-box h2 {
    margin: 0 0 12px;
    font-family: var(--font-poppins);
    font-size: 32px;
    font-weight: 600;
    color: #fff;
}

.pc-corp-cta-box > p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
}

.pc-corp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 0;
}

.pc-corp-cta-actions .pc-corp-ghost {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.pc-corp-cta-actions .pc-corp-ghost:hover {
    border-color: var(--pc-primary);
    background: var(--pc-primary);
    color: var(--pc-dark);
}

.pc-corp-cta-fine {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
}

.pc-corp-cta-fine a { color: var(--pc-primary); text-decoration: underline; }

@media (max-width: 991.98px) {
    .pc-corp-lead h2 { font-size: 29px; }
    .pc-corp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .pc-corp-stats li:nth-child(3) { border-left: 0; }
    .pc-corp-rows li { grid-template-columns: 1fr; gap: 14px; }
    .pc-corp-row-cell { padding-left: 58px; }
}

@media (max-width: 767.98px) {
    .pc-corp-lead h2 { font-size: 25px; }
    .pc-corp-lead-actions .primary-btn1,
    .pc-corp-lead-actions .pc-corp-ghost { width: 100%; justify-content: center; }
    .pc-corp-stats { padding: 18px 6px; }
    .pc-corp-stats strong { font-size: 25px; }
    .pc-corp-tiers li { grid-template-columns: 1fr; gap: 10px; }
    .pc-corp-perk h2 { font-size: 25px; }
    .pc-corp-row-cell { padding-left: 0; }
    .pc-corp-cta-box { padding: 32px 20px; border-radius: 20px; }
    .pc-corp-cta-box h2 { font-size: 25px; }
    .pc-corp-cta-actions .primary-btn1,
    .pc-corp-cta-actions .pc-corp-ghost { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Request Call Back modal  (shared, opened from the header)
   ========================================================================== */
.pc-callback .modal-dialog { max-width: 440px; }

.pc-callback .modal-content {
    position: relative;
    padding: 34px 30px 28px;
    border: 1px solid var(--pc-border);
    border-radius: 22px;
    background: var(--pc-card);
    box-shadow: 0 26px 60px rgba(var(--pc-dark-rgb), .22);
    text-align: center;
}

.pc-callback .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: .45;
}

.pc-callback .btn-close:hover { opacity: 1; }

.pc-callback-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 24px;
}

.pc-callback .modal-title {
    margin: 0 0 8px;
    font-family: var(--font-poppins);
    font-size: 23px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-callback-sub {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--pc-text-muted);
}

.pc-callback-field {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    border: 1px solid var(--pc-border);
    border-radius: 13px;
    background: var(--pc-bg);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-callback-field:focus-within {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(var(--pc-primary-rgb), .25);
}

.pc-callback-field > span {
    flex: 0 0 auto;
    padding: 0 13px;
    border-right: 1px solid var(--pc-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-text-muted);
    line-height: 48px;
}

.pc-callback-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font-size: 16px;
    letter-spacing: .02em;
    color: var(--pc-text);
}

.pc-callback-field input:focus { outline: none; }

.pc-callback-why {
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--pc-border);
    list-style: none;
    text-align: left;
}

.pc-callback-why li {
    display: flex;
    gap: 9px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pc-text-muted);
}

.pc-callback-why li:last-child { margin-bottom: 0; }
.pc-callback-why i { flex: 0 0 auto; margin-top: 2px; color: var(--pc-success); }

.pc-callback-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--pc-text-muted);
}

.pc-callback-alt a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--pc-primary-ink);
}

.pc-callback-alt a:hover { color: var(--pc-dark); text-decoration: underline; }

@media (max-width: 575.98px) {
    .pc-callback .modal-content { padding: 30px 20px 24px; border-radius: 18px; }
    .pc-callback .modal-title { font-size: 20px; }
}


/* ==========================================================================
   SEO landing page  (any CMS slug, served by A::index)
   The hero holds the shared booking widget, so it only provides the ground and
   the headline above it - .banner-form styles itself.
   ========================================================================== */
.pc-seo-hero {
    padding: 46px 0 0;
    background:
        radial-gradient(900px 400px at 12% -10%, rgba(var(--pc-primary-rgb), .22), transparent 60%),
        linear-gradient(180deg, var(--pc-primary-light) 0%, var(--pc-bg) 100%);
}

.pc-seo-hero-text { max-width: 780px; margin-bottom: 26px; }

.pc-seo-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-seo-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.pc-seo-crumbs a { color: var(--pc-primary-ink); font-weight: 500; }
.pc-seo-crumbs a:hover { text-decoration: underline; }

.pc-seo-hero-text h1 {
    margin: 0 0 12px;
    font-family: var(--font-poppins);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.22;
    color: var(--pc-dark);
}

.pc-seo-hero-text > p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pc-text-muted);
}

.pc-seo-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.pc-seo-hero-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(var(--pc-dark-rgb), .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pc-dark);
}

.pc-seo-hero-chips i { color: var(--pc-primary-ink); }

/* ---------- Article + aside ---------- */
.pc-seo-figure {
    margin: 0 0 26px;
    border: 1px solid var(--pc-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--pc-primary-light);
}

.pc-seo-figure img { display: block; width: 100%; max-height: 420px; object-fit: cover; }

.pc-seo-aside { position: sticky; top: 110px; display: grid; gap: 18px; }

.pc-seo-aside-card {
    padding: 22px;
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    background: var(--pc-card);
}

.pc-seo-aside-card h2 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-seo-aside-card > p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pc-text-muted);
}

.pc-seo-aside-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid var(--pc-border);
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pc-dark);
    transition: border-color .2s ease, background .2s ease;
}

.pc-seo-aside-ghost:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }

.pc-seo-aside-facts {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--pc-border);
    list-style: none;
}

.pc-seo-aside-facts li {
    display: flex;
    gap: 9px;
    margin-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pc-text-muted);
}

.pc-seo-aside-facts li:last-child { margin-bottom: 0; }
.pc-seo-aside-facts i { flex: 0 0 auto; margin-top: 2px; color: var(--pc-success); }

.pc-seo-aside-cities { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.pc-seo-aside-cities a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--pc-border);
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-text);
    transition: border-color .2s ease, background .2s ease;
}

.pc-seo-aside-cities i { color: var(--pc-primary-ink); }
.pc-seo-aside-cities a:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }

/* ---------- Three steps ---------- */
.pc-seo-how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pc-seo-how-steps li {
    padding: 26px 24px;
    border: 1px solid var(--pc-border);
    border-radius: 18px;
    background: var(--pc-card);
}

.pc-seo-how-steps strong {
    display: block;
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pc-dark);
}

.pc-seo-how-steps p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pc-text-muted); }

/* ---------- Popular routes ---------- */
.pc-seo-route-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-seo-route-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-card);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pc-seo-route-grid a:hover {
    border-color: rgba(var(--pc-primary-rgb), .6);
    background: var(--pc-primary-light);
    transform: translateY(-2px);
}

.pc-seo-route-path {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14.5px;
    color: var(--pc-dark);
}

.pc-seo-route-path strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-seo-route-path i { flex: 0 0 auto; color: var(--pc-primary-ink); }

.pc-seo-route-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pc-primary-ink);
}

/* ---------- Closing call to action ---------- */
.pc-seo-cta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 32px 34px;
    border-radius: 22px;
    background: var(--pc-dark);
}

.pc-seo-cta-box h2 {
    margin: 0 0 6px;
    font-family: var(--font-poppins);
    font-size: 27px;
    font-weight: 600;
    color: #fff;
}

.pc-seo-cta-box p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .72); }

.pc-seo-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pc-seo-cta-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.pc-seo-cta-call:hover { border-color: var(--pc-primary); background: var(--pc-primary); color: var(--pc-dark); }

@media (max-width: 991.98px) {
    .pc-seo-hero-text h1 { font-size: 30px; }
    .pc-seo-how-steps,
    .pc-seo-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-seo-aside { position: static; }
}

@media (max-width: 767.98px) {
    .pc-seo-hero { padding-top: 32px; }
    .pc-seo-hero-text h1 { font-size: 25px; }
    .pc-seo-how-steps,
    .pc-seo-route-grid { grid-template-columns: 1fr; }
    .pc-seo-how-steps li { padding: 20px; }
    .pc-seo-figure img { max-height: 230px; }
    .pc-seo-cta-box { padding: 26px 20px; border-radius: 18px; }
    .pc-seo-cta-box h2 { font-size: 22px; }
    .pc-seo-cta-actions { width: 100%; }
    .pc-seo-cta-actions .primary-btn1,
    .pc-seo-cta-call { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   A-Z city index: the per-letter pages (?l=S)
   The index lists 40 cities per letter and links the rest - see
   comman/theme/_city_index.php for why.
   ========================================================================== */
.pc-az-nav a.is-on {
    border-color: var(--pc-dark);
    background: var(--pc-dark);
    color: #fff;
}

/* "All" is a word, not a letter - it needs room. */
.pc-az-nav a:first-child { border-radius: 999px; padding: 0 16px; }

.pc-city-search-note {
    margin: 10px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--pc-text-muted);
}

.pc-az-note {
    margin: -26px 0 34px;
    font-size: 14.5px;
    text-align: center;
    color: var(--pc-text-muted);
}

.pc-az-note a { font-weight: 600; color: var(--pc-primary-ink); }
.pc-az-note a:hover { text-decoration: underline; }

.pc-city-group-title small {
    margin-left: 9px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pc-primary-light);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pc-primary-ink);
    vertical-align: middle;
}

.pc-az-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-primary-ink);
}

.pc-az-more i { transition: transform .2s ease; }
.pc-az-more:hover { color: var(--pc-dark); }
.pc-az-more:hover i { transform: translateX(4px); }


/* ==========================================================================
   Scroll containers must CONTAIN what scrolls (2026-09-13)
   An overflow:auto box only clips an absolutely positioned descendant when it
   is that descendant's containing block - i.e. when it is itself positioned.
   The route page's fare chart has a screen-reader label (.visually-hidden,
   position:absolute) in its last <th>; with a static wrapper that label's
   containing block was the PAGE, so it sat 250px past the right edge and made
   the whole document 642px wide on a 390px phone. Everything shifted left and
   the fixed bottom bar, which spans the layout viewport, ran off the screen.
   position:relative on every scroll container here closes that for good.
   ========================================================================== */
.pc-chart-wrap,
.pc-prose table,
.page-content .table-responsive,
.table-responsive,
.pc-cabtabs,
.pc-showroom,
.banner-form .card-header .nav {
    position: relative;
}

/* The error page's corner vectors are 612px SVGs positioned against it; on a
   phone they reached 222px past the screen edge and the 404 / 500 pages
   scrolled sideways (found by the 2026-09-13 overflow audit). */
.pc-error-page { overflow: hidden; }


/* ==========================================================================
   Search results  (search/_results.php - every search flow)
   Frame only: the car rows are .pc-ride, the panel .pc-trip and the phone bar
   .pc-bar, shared with the route page so the two read as one product.
   ========================================================================== */
.pc-srch-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-bottom: 30px;
    padding: 18px 22px;
    border: 1px solid var(--pc-border);
    border-radius: 20px;
    background: var(--pc-card);
    box-shadow: 0 18px 40px -34px rgba(var(--pc-dark-rgb), .55);
}

.pc-srch-route { display: flex; align-items: center; gap: 14px; min-width: 0; }

.pc-srch-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
    font-size: 21px;
}

.pc-srch-badge {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pc-primary-ink);
}

.pc-srch-route h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pc-dark);
}

.pc-srch-route h2 i { font-size: 18px; color: var(--pc-primary); }

.pc-srch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}

.pc-srch-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pc-text);
    white-space: nowrap;
}

.pc-srch-chips i { color: var(--pc-primary-ink); }

.pc-srch-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--pc-dark);
    border-radius: 999px;
    background: var(--pc-dark);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.pc-srch-edit:hover,
.pc-srch-edit:focus-visible { background: var(--pc-primary); border-color: var(--pc-primary); color: var(--pc-dark); }

/* ---------- Tools above the list ---------- */
.pc-srch-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 14px;
}

.pc-srch-count { margin: 0; font-size: 15px; color: var(--pc-text); }
.pc-srch-count strong { font-size: 18px; color: var(--pc-dark); }
.pc-srch-count em { font-style: normal; }
.pc-srch-count span { color: var(--pc-text-muted); font-size: 14px; }

.pc-srch-sort,
.pc-srch-seats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-srch-sort {
    padding: 4px;
    border: 1px solid var(--pc-border);
    border-radius: 999px;
    background: var(--pc-card);
}

.pc-srch-sort button,
.pc-srch-seats button {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pc-text-muted);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.pc-srch-sort button:hover,
.pc-srch-seats button:hover { color: var(--pc-dark); }

.pc-srch-sort button.is-on { background: var(--pc-dark); color: #fff; }

.pc-srch-seats { margin-bottom: 18px; }

.pc-srch-seats button {
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
}

.pc-srch-seats button.is-on {
    border-color: var(--pc-primary);
    background: var(--pc-primary-light);
    color: var(--pc-primary-ink);
}

.pc-srch-sort button:focus-visible,
.pc-srch-seats button:focus-visible,
.pc-srch-edit:focus-visible {
    outline: 3px solid rgba(var(--pc-primary-rgb), .55);
    outline-offset: 2px;
}

.pc-srch-none {
    padding: 22px;
    border: 1px dashed var(--pc-border);
    border-radius: 16px;
    text-align: center;
    color: var(--pc-text-muted);
}

.pc-srch-none button {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--pc-primary-ink);
    text-decoration: underline;
}

.pc-fare-table td small { color: var(--pc-text-muted); font-size: 12px; }

/* ---------- Trip panel: sits under the scrolled glass header ---------- */
.pc-srch-side { top: 100px; }

.pc-srch-steps {
    display: flex;
    gap: 6px;
    margin: 18px 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--pc-border);
    list-style: none;
}

.pc-srch-steps li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--pc-text-muted);
}

.pc-srch-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    font-size: 12px;
    font-weight: 700;
    color: var(--pc-text-muted);
}

.pc-srch-steps li.is-on { color: var(--pc-dark); font-weight: 600; }
.pc-srch-steps li.is-on span { border-color: var(--pc-primary); background: var(--pc-primary); color: var(--pc-dark); }

@media (max-width: 991.98px) {
    .pc-srch-side { position: static; }
}

@media (max-width: 767.98px) {
    .pc-srch { padding-top: 24px; }
    .pc-srch-bar { padding: 16px; gap: 12px; border-radius: 18px; margin-bottom: 22px; }
    .pc-srch-ico { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; }
    .pc-srch-route h2 { font-size: 19px; }
    .pc-srch-chips { width: 100%; margin: 0; }
    .pc-srch-chips li { padding: 6px 11px; font-size: 13px; }
    .pc-srch-edit { width: 100%; justify-content: center; }
    .pc-srch-tools { align-items: flex-start; }
    .pc-srch-count span { display: block; margin-top: 2px; }
    /* Sort becomes a full-width, evenly split control that still fits 320px. */
    .pc-srch-sort { display: flex; width: 100%; flex-wrap: nowrap; }
    .pc-srch-sort button { flex: 1 1 0; padding: 7px 6px; font-size: 12.5px; }
    .pc-srch-seats {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        position: relative;
        scrollbar-width: none;
        margin-inline: -2px;
        padding: 2px;
    }
    .pc-srch-seats::-webkit-scrollbar { display: none; }
}


/* ==========================================================================
   Floating header: centred at every width, and legible over dark bands
   (2026-09-13)
   ========================================================================== */
/* The theme gives header.style-1 `width: 100%`. Combined with left/right
   insets that pushed the floating bar 8px (12px on a tablet) past the right
   edge of the screen - the gap showed on the left only. With width:auto the
   insets define the box, so both sides match. */
html.pc-stuck .pc-header {
    width: auto;
    margin: 0 auto;
}

/* Wide screens: the bar keeps to the header container's width and centres,
   rather than stretching edge to edge. */
@media (min-width: 1600px) {
    html.pc-stuck .pc-header { max-width: 1600px; }
}

/* Over the footer or a navy banner the light pane blurred navy into grey.
   A denser tint keeps it reading as frosted white glass - shapes behind still
   show - and keeps the navy nav and logo at full contrast. */
html.pc-stuck .pc-header::before {
    transition: background-color .3s ease;
}

html.pc-stuck .pc-header.is-over-dark::before {
    background: rgba(255, 252, 246, .86);
    -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(1.08);
            backdrop-filter: blur(30px) saturate(150%) brightness(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 0 0 1px rgba(255, 255, 255, .35),
        0 24px 50px -30px rgba(0, 0, 0, .7),
        0 4px 14px -8px rgba(0, 0, 0, .35);
}


/* ==========================================================================
   Phone bars that FIT, 320px up                                 (2026-09-13)
   Measured at 320: 300px inside the padding, 88px of icons and 16px of gaps
   leave 196px for the main button; its padding and a 40px arrow leave ~128px
   for the price. The spelled-out "Choose car" pill (124px) cannot fit there,
   which is why it was cut off and "from ₹2,999" wrapped. So below 430px the
   pill is a round arrow (the label stays for screen readers) and the text
   block shrinks instead of pushing the button out.
   ========================================================================== */
.pc-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.pc-bar-main strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-bar-go { position: relative; }   /* contains its visually-hidden label */

@media (max-width: 429.98px) {
    .pc-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
    .pc-bar-ico { width: 44px; height: 48px; font-size: 18px; }
    .pc-bar-main { gap: 8px; padding: 0 6px 0 14px; }
    .pc-bar-main strong { font-size: 17px; }

    .pc-bar-go-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .pc-bar-go {
        width: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
        font-size: 16px;
    }

    /* Checkout / confirmation bars: the total on the left, one button. */
    .pc-paybar-total strong { font-size: 18px; white-space: nowrap; }
    .pc-paybar-btn strong { font-size: 15px; }
    .pc-bar .pc-paybar-btn .pc-bar-go,
    .pc-bar > a.pc-bar-main:not([href^="#"]) .pc-bar-go { width: auto; padding: 0 10px; }
}


/* ==========================================================================
   Car rows on a phone                                           (2026-09-13)
   At 320px the specs were squeezed into a 150px column beside the photo, one
   chip per line, so a row stood 368px tall. The info box now dissolves into
   the row's grid: photo and name side by side, then the specs across the full
   width, then price and button.
   ========================================================================== */
@media (max-width: 575.98px) {
    .pc-ride {
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        align-items: start;
        gap: 0 14px;
        padding: 20px 14px 14px;
    }
    .pc-ride-info { display: contents; }
    .pc-ride-media {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: 70px;
        align-self: center;
    }
    .pc-ride-media img { max-height: 52px; }
    .pc-ride-media::after { bottom: 10px; }
    .pc-ride-info h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
        font-size: 17px;
        line-height: 1.25;
    }
    .pc-ride-model {
        grid-column: 2;
        grid-row: 2;
        margin: 2px 0 0;
        font-size: 13px;
        line-height: 1.35;
    }
    .pc-ride-specs {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 14px 0 10px;
        gap: 6px;
    }
    .pc-ride-specs li { padding: 4px 9px; font-size: 12.5px; }
    .pc-ride-specs i { font-size: 13px; }
    .pc-ride-fare-link {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: start;
        font-size: 13.5px;
    }
    .pc-ride-buy {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 12px;
        gap: 12px;
    }
    .pc-ride-price strong { font-size: 22px; }
    .pc-ride-price del { font-size: 13px; }
    .pc-ride-price span { font-size: 12.5px; }
    .pc-ride-buy form { flex: 0 0 auto; }
    .pc-ride-buy .primary-btn1 { padding: 12px 16px; font-size: 14.5px; white-space: nowrap; }
}


/* The phone bars get the same treatment over the footer. */
.pc-dock, .pc-bar { transition: background-color .3s ease; }

.pc-dock.is-over-dark,
.pc-bar.is-over-dark {
    background: rgba(255, 252, 246, .9);
    -webkit-backdrop-filter: blur(26px) saturate(140%) brightness(1.05);
            backdrop-filter: blur(26px) saturate(140%) brightness(1.05);
    border-top-color: rgba(255, 255, 255, .9);
}

/* The theme's round scroll-to-top button. On a phone every page already has
   a bottom bar, and the button sat on top of the cards' "Book this car"
   buttons (bottom-right, exactly where they are). Desktop keeps it. */
@media (max-width: 991.98px) {
    .progress-wrap { display: none !important; }
}


/* ---------- Search results: polish found on a 390px phone (2026-09-13) ---------- */
.pc-srch .primary-btn1 > i { margin-left: 8px; }

.pc-srch-count-note::before { content: "\00B7\00A0"; }

@media (max-width: 575.98px) {
    /* The route and a small Edit on one line, the chips under them: the first
       car now starts ~120px higher, inside the first screen. */
    .pc-srch-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px 10px;
        padding: 14px;
    }
    .pc-srch-route { gap: 10px; }
    .pc-srch-ico { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    .pc-srch-badge { font-size: 11px; margin-bottom: 1px; }
    .pc-srch-route h2 { font-size: 17px; gap: 0 6px; }
    .pc-srch-route h2 i { font-size: 14px; }
    .pc-srch-chips { grid-column: 1 / -1; gap: 6px; }
    .pc-srch-chips li { padding: 5px 10px; font-size: 12.5px; }
    .pc-srch-edit {
        width: auto;
        align-self: start;
        padding: 8px 13px;
        font-size: 13px;
        gap: 6px;
    }
    .pc-srch-edit-more { display: none; }

    .pc-srch-tools { margin-bottom: 10px; gap: 10px; }
    .pc-srch-count { font-size: 14.5px; }
    .pc-srch-count strong { font-size: 16px; }
    .pc-srch-count-note { display: none !important; }
    .pc-srch-seats { margin-bottom: 20px; }

    /* The "Lowest fare" tag hangs 12px above the card; give it room so it no
       longer sits on the photo. */
    .pc-ride.is-best { padding-top: 30px; }
}

@media (max-width: 575.98px) {
    /* Explicit places: auto-placement put Edit after the chips, on a row of
       its own and stretched full width. */
    .pc-srch-route { grid-column: 1; grid-row: 1; }
    .pc-srch-edit  { grid-column: 2; grid-row: 1; justify-self: end; }
    .pc-srch-chips { grid-row: 2; }

    /* Four or five seat filters wrap onto a second line rather than running
       off the edge half-cut. */
    .pc-srch-seats { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }

    .pc-ride.is-best { padding-top: 34px; }
}

/* 320-374px: the route icon is the one thing that can give way, so the
   "Surat → Mumbai" line stays on one line beside the Edit button. */
@media (max-width: 374.98px) {
    .pc-srch-ico { display: none; }
}


/* ==========================================================================
   Search guide  (/cab_search_oneway, /cab_search_local, /cab_search_airport)
   theme: travel-inspiration-details.html
   --------------------------------------------------------------------------
   views/search/seo/* - the written guide under the search results, laid out
   as the theme's article page (inspiration-details + blog-sidebar-area), used
   on no other page. Data: Search_guide_library. Everything bespoke is
   .pc-sguide-*; the results above it (.pc-srch*, .pc-ride*, .pc-trip*,
   .pc-bar*) are not touched here.
   ========================================================================== */

.pc-sguide { padding-top: 20px; border-top: 1px solid var(--pc-border); }

.pc-sguide .inspiration-details > h2 {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    color: var(--pc-dark);
    margin: 6px 0 18px;
}

.pc-sguide .inspiration-details p,
.pc-sguide .inspiration-details li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--pc-text);
}

.pc-sguide .inspiration-details p { margin-bottom: 16px; }
.pc-sguide .inspiration-details strong { color: var(--pc-dark); font-weight: 600; }
.pc-sguide .inspiration-details p a,
.pc-sguide .inspiration-details li a { color: var(--pc-primary-ink); text-decoration: underline; }

.pc-sguide-lead p { font-size: 17px !important; }

/* "In short" - the theme's blockquote, as a brand callout. */
.pc-sguide .inspiration-details blockquote {
    margin: 26px 0 40px;
    padding: 20px 24px 20px 58px;
    position: relative;
    border-radius: 16px;
    background: var(--pc-primary-light);
    border: 0;
}

.pc-sguide .inspiration-details blockquote::before {
    content: "\f46c";   /* bi-lightning-charge-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 22px;
    top: 20px;
    color: var(--pc-primary-ink);
    font-size: 20px;
}

.pc-sguide .inspiration-details blockquote p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    font-style: normal;
    color: var(--pc-dark);
}

/* One block per section, with a quiet rule between them. */
.pc-sguide .single-location-details {
    padding-top: 34px;
    margin-bottom: 34px;
    border-top: 1px solid var(--pc-border);
    scroll-margin-top: 110px;
}

.pc-sguide .single-location-details > h3 {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.35;
    color: var(--pc-dark);
    margin-bottom: 14px;
}

.pc-sguide .single-location-details > :last-child { margin-bottom: 0; }

.pc-sguide-note {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--pc-text-muted) !important;
}

/* ---------- Tables ---------- */
.pc-sguide-table-wrap {
    position: relative;
    overflow-x: auto;
    margin: 6px 0 18px;
    border: 1px solid var(--pc-border);
    border-radius: 14px;
    background: var(--pc-card);
}

.pc-sguide-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.pc-sguide-table th {
    padding: 12px 16px;
    background: rgba(var(--pc-dark-rgb), .04);
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 13.5px;
    text-align: left;
    white-space: nowrap;
}

.pc-sguide-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--pc-border);
    color: var(--pc-text);
    vertical-align: middle;
}

.pc-sguide-table td small { color: var(--pc-text-muted); font-size: 12.5px; margin-left: 4px; }
.pc-sguide-table td a { color: var(--pc-primary-ink); font-weight: 600; }
.pc-sguide-table tr.is-current td { background: var(--pc-primary-light); }
.pc-sguide-hl { color: var(--pc-primary-ink) !important; }

@media (max-width: 575px) {
    .pc-sguide-table-wrap { border: 0; background: transparent; overflow: visible; }
    .pc-sguide-table thead { display: none; }
    .pc-sguide-table, .pc-sguide-table tbody, .pc-sguide-table tr { display: block; width: 100%; }
    .pc-sguide-table tr {
        margin-bottom: 10px;
        padding: 6px 14px;
        border: 1px solid var(--pc-border);
        border-radius: 12px;
        background: var(--pc-card);
    }
    /* Label pinned left, value and any small note kept together on the right
       (a flex row split "11:00 pm" and "day before" to opposite ends). */
    .pc-sguide-table td {
        display: block;
        position: relative;
        padding: 8px 0 8px 42%;
        text-align: right;
    }
    .pc-sguide-table tr td:first-child { border-top: 0; }
    .pc-sguide-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        max-width: 40%;
        color: var(--pc-text-muted);
        font-size: 13px;
        text-align: left;
    }
}

/* ---------- Lists ---------- */
.pc-sguide .pc-sguide-ticks { list-style: none; margin: 4px 0 16px; padding: 0; }

.pc-sguide .pc-sguide-ticks li {
    position: relative;
    padding: 6px 0 6px 30px;
}

.pc-sguide .pc-sguide-ticks li::before {
    content: "\F26A";   /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--pc-success);
    font-size: 16px;
}

.pc-sguide .pc-sguide-times { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }

.pc-sguide .pc-sguide-times li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(var(--pc-dark-rgb), .04);
}

.pc-sguide-times li > i { color: var(--pc-primary-ink); }

/* ---------- Worked example ---------- */
.pc-sguide-example {
    margin: 10px 0 20px;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px dashed rgba(var(--pc-primary-rgb), .9);
    background: var(--pc-card);
}

.pc-sguide-example h4 { font-family: var(--font-poppins); font-weight: 600; font-size: 18px; color: var(--pc-dark); margin-bottom: 8px; }
.pc-sguide-example ul { list-style: none; margin: 0; padding: 0; }

.pc-sguide .pc-sguide-example li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--pc-border);
}

.pc-sguide .pc-sguide-example li.is-total { border-top: 2px solid var(--pc-dark); font-size: 17px; }

/* ---------- Booking steps ---------- */
.pc-sguide .pc-sguide-steps { list-style: none; counter-reset: sg; margin: 6px 0 0; padding: 0; }

.pc-sguide .pc-sguide-steps li {
    counter-increment: sg;
    position: relative;
    padding: 0 0 20px 56px;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.pc-sguide .pc-sguide-steps li::before {
    content: counter(sg);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 600;
}

.pc-sguide .pc-sguide-steps li::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 42px;
    bottom: 4px;
    width: 2px;
    background: var(--pc-border);
}

.pc-sguide .pc-sguide-steps li:last-child { padding-bottom: 0; }
.pc-sguide .pc-sguide-steps li:last-child::after { display: none; }
.pc-sguide-steps li strong { font-family: var(--font-poppins); font-size: 16.5px; }
.pc-sguide-steps li span { color: var(--pc-text-muted); font-size: 15px; }

/* ---------- Related routes (theme .single-visit tiles, .activite-tag chips) ---------- */
.pc-sguide .location-list-wrap { margin: 8px 0 18px; }

.pc-sguide .inspiration-details .single-visit {
    height: 100%;
    padding: 16px 16px 14px;
    border-color: var(--pc-border);
    background: var(--pc-card);
}

.pc-sguide .inspiration-details .single-visit h5 { margin-bottom: 4px; font-size: 15.5px; line-height: 1.4; }
.pc-sguide .inspiration-details .single-visit h5 a { color: var(--pc-dark); }
.pc-sguide .inspiration-details .single-visit h5 a:hover { color: var(--pc-primary-ink); }
.pc-sguide .single-visit > span { font-size: 13.5px; color: var(--pc-text-muted); }
.pc-sguide .inspiration-details .single-visit:hover { border-color: var(--pc-primary); }
.pc-sguide .inspiration-details .activite-tag ul li a:hover { background: var(--pc-primary); border-color: var(--pc-primary); color: var(--pc-dark); }

/* ---------- FAQ ---------- */
.pc-sguide-faq details {
    border: 1px solid var(--pc-border);
    border-radius: 12px;
    background: var(--pc-card);
    margin-bottom: 10px;
}

.pc-sguide-faq summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 14px 48px 14px 18px;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--pc-dark);
}

.pc-sguide-faq summary::-webkit-details-marker { display: none; }

.pc-sguide-faq summary::after {
    content: "\F4FE";   /* bi-plus */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 18px;
    top: 13px;
    font-size: 18px;
    color: var(--pc-primary-ink);
}

.pc-sguide-faq details[open] summary::after { content: "\F2EA"; }   /* bi-dash */
.pc-sguide .pc-sguide-faq details p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.75; }

/* ---------- Sidebar ---------- */
@media (min-width: 992px) {
    .pc-sguide-side { position: sticky; top: 110px; }
}

.pc-sguide-side .single-widget { background: var(--pc-card); border-color: var(--pc-border); }
.pc-sguide-side .category-list a { color: var(--pc-dark); }
.pc-sguide-side .category-list a:hover { color: var(--pc-primary-ink); }

.pc-sguide-facts { list-style: none; margin: 0; padding: 0; }

.pc-sguide-facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px dashed var(--pc-border);
    font-size: 15px;
}

.pc-sguide-facts li:first-child { border-top: 0; }
.pc-sguide-facts li span { color: var(--pc-text-muted); }
.pc-sguide-facts li strong { color: var(--pc-dark); text-align: right; }

.pc-sguide-help p { font-size: 15px; color: var(--pc-text-muted); margin-bottom: 14px; }

.pc-sguide-call,
.pc-sguide-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 50px;
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 15px;
}

.pc-sguide-call { background: var(--pc-primary); color: var(--pc-dark); margin-bottom: 10px; }
.pc-sguide-call:hover { background: var(--pc-primary-hover); color: var(--pc-dark); }
.pc-sguide-wa { border: 1px solid var(--pc-border); color: var(--pc-dark); }
.pc-sguide-wa i { color: #1FA855; }
.pc-sguide-wa:hover { border-color: #1FA855; color: var(--pc-dark); }

@media (max-width: 767px) {
    .pc-sguide .inspiration-details > h2 { font-size: 25px; }
    .pc-sguide .single-location-details > h3 { font-size: 20px; }
    .pc-sguide .inspiration-details p,
    .pc-sguide .inspiration-details li { font-size: 15.5px; }
}


/* The "Lowest fare" tag hangs 12px above its card and stands ~38px tall at
   desktop sizes; on a row whose photo sits at the top it covered the photo's
   upper edge (round trip / multi-city, 2026-09-13). Room for it on every row
   that carries it. Phones already get 34px above. */
@media (min-width: 576px) {
    .pc-ride.is-best { padding-top: 34px; }
}


/* ==========================================================================
   Route pages  (/citys/<from>-to-<to>-cabs)  and the  /popular_route  hub
   --------------------------------------------------------------------------
   /citys/ is laid out like the search results: page banner, the booking
   widget, search/_results (styled by its own block), then the route guide in
   the search guide's article frame (.pc-sguide, styled above). Only the few
   pieces unique to these pages live here: .pc-cguide-* and the hub .pc-hub-*.
   ========================================================================== */

/* ---------- /citys/: booking widget under the banner ---------- */
/* No overflow on this container: the city suggestion list hangs below it. */
.pc-cguide-book { position: relative; z-index: 4; }
.pc-cguide-book + .pc-srch { padding-top: 30px; }

/* ---------- /citys/: admin travel notes, clipped with "Read more" ---------- */
.pc-cguide-article { position: relative; max-height: 460px; overflow: hidden; }
.pc-cguide-article.is-open { max-height: none; }
.pc-cguide-article .pc-prose h4 { font-size: 19px; margin: 22px 0 10px; }
.pc-cguide-article .pc-prose h5 { font-size: 17px; margin: 18px 0 8px; }

.pc-cguide-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0) 0%, var(--pc-bg) 90%);
    pointer-events: none;
}

.pc-cguide-article.is-open .pc-cguide-fade { display: none; }

.pc-cguide-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 20px;
    border-radius: 50px;
    border: 1px solid var(--pc-dark);
    background: transparent;
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14.5px;
}

.pc-cguide-more:hover { background: var(--pc-dark); color: #fff; }

/* ---------- Footer: link to the hub under Popular Routes ---------- */
.pc-footer-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--pc-primary);
    font-weight: 600;
    font-size: 14.5px;
}

.pc-footer-more:hover { color: #fff; }

/* ---------- /popular_route hub ---------- */
.pc-hub-h {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.3;
    color: var(--pc-dark);
    margin: 6px 0 14px;
}

.pc-hub p { font-size: 16px; line-height: 1.75; color: var(--pc-text); }
.pc-hub p a { color: var(--pc-primary-ink); text-decoration: underline; }

.pc-hub-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.pc-hub-stats li {
    padding: 20px;
    border-radius: 16px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
}

.pc-hub-stats strong { display: block; font-family: var(--font-poppins); font-size: 26px; color: var(--pc-dark); line-height: 1.2; }
.pc-hub-stats span { color: var(--pc-text-muted); font-size: 14px; }
.pc-hub-stats li:first-child { background: var(--pc-primary-light); border-color: transparent; }

.pc-hub-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px;
    margin-bottom: 16px;
    border-radius: 50px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    box-shadow: 0 10px 28px rgba(var(--pc-dark-rgb), .06);
}

.pc-hub-filter > i { color: var(--pc-primary-ink); font-size: 18px; }

.pc-hub-filter input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--pc-dark);
}

.pc-hub-count { color: var(--pc-text-muted); font-size: 14px; white-space: nowrap; }


.pc-hub-jump {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-hub-jump a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    color: var(--pc-dark);
    font-size: 14px;
}

.pc-hub-jump small { color: var(--pc-text-muted); }
.pc-hub-jump a:hover { background: var(--pc-primary); border-color: var(--pc-primary); color: var(--pc-dark); }

.pc-hub-lists { margin-bottom: 60px; }

.pc-hub-list, .pc-hub-city {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 20px;
    border-radius: 18px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    scroll-margin-top: 110px;
}

.pc-hub-list h3, .pc-hub-city h3 {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 19px;
    color: var(--pc-dark);
    margin-bottom: 4px;
}

.pc-hub-list h3 i { color: var(--pc-primary-ink); margin-right: 4px; }
.pc-hub-list > p { font-size: 14px; color: var(--pc-text-muted); margin-bottom: 10px; }
.pc-hub-city header { margin-bottom: 8px; }
.pc-hub-city header span { color: var(--pc-text-muted); font-size: 14px; }

.pc-hub-routes { list-style: none; margin: 0; padding: 0; }

.pc-hub-routes li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed var(--pc-border);
    font-size: 15px;
}

.pc-hub-routes li:first-child { border-top: 0; }
.pc-hub-routes a { color: var(--pc-dark); line-height: 1.4; }
.pc-hub-routes a i { color: var(--pc-primary-ink); font-size: 12px; }
.pc-hub-routes a:hover { color: var(--pc-primary-ink); text-decoration: underline; }
.pc-hub-routes span { flex: 0 0 auto; color: var(--pc-text-muted); font-size: 13px; white-space: nowrap; }
.pc-hub-routes span b { color: var(--pc-primary-ink); font-weight: 600; font-size: 14px; }

.pc-hub-more summary {
    cursor: pointer;
    padding: 8px 0 4px;
    color: var(--pc-primary-ink);
    font-weight: 600;
    font-size: 14px;
}

.pc-hub-more[open] summary { margin-bottom: 4px; }

.pc-hub-all {
    margin-top: auto;
    padding-top: 14px;
    color: var(--pc-dark);
    font-weight: 600;
    font-size: 14.5px;
}

.pc-hub-all:hover { color: var(--pc-primary-ink); }

.pc-hub-head { margin: 70px 0 24px; scroll-margin-top: 100px; }


.pc-hub-none { margin-top: 30px; text-align: center; }

.pc-hub-explain { margin-top: 80px; padding-top: 50px; border-top: 1px solid var(--pc-border); }

.pc-hub-steps { margin: 0 0 14px; padding-left: 20px; }
.pc-hub-steps li { padding: 4px 0; font-size: 16px; line-height: 1.7; color: var(--pc-text); }
.pc-hub-note { font-size: 15px !important; }

.pc-hub-faq-wrap { margin-top: 60px; }
.pc-hub-faq-wrap .pc-hub-h { margin-bottom: 24px; }
.pc-hub-faq-wrap .pc-sguide-faq details p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.75; }


@media (max-width: 767px) {
    .pc-hub-h { font-size: 24px; }
    .pc-hub-stats strong { font-size: 21px; }
    .pc-hub-head { margin-top: 50px; }
    /* 24 city chips would fill a phone screen: one swipeable row instead. */
    /* Bleeds by exactly the container gutter (12px on phones), and is its own
       scroll box, so it can never widen the page. */
    .pc-hub-jump {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding: 2px calc(var(--bs-gutter-x, 1.5rem) * .5) 6px;
        scrollbar-width: none;
    }
    .pc-hub-jump::-webkit-scrollbar { display: none; }
    .pc-hub-jump li { flex: 0 0 auto; }
}

/* ---------- /popular_route: A-Z index ---------- */
.pc-az { margin-top: 80px; scroll-margin-top: 90px; }

.pc-az-head { max-width: 760px; margin-bottom: 24px; }

.pc-az-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px;
    border-radius: 20px;
    background: var(--pc-card);
    border: 1px solid var(--pc-border);
    box-shadow: 0 14px 34px rgba(var(--pc-dark-rgb), .06);
}

.pc-az-search {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    transition: border-color .2s, box-shadow .2s;
}

.pc-az-search:focus-within { border-color: var(--pc-primary); box-shadow: 0 0 0 4px rgba(var(--pc-primary-rgb), .18); }
.pc-az-search > i { color: var(--pc-primary-ink); font-size: 17px; }

.pc-az-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15.5px;
    color: var(--pc-dark);
}

.pc-az-search input::-webkit-search-cancel-button { display: none; }

.pc-az-clear {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--pc-dark-rgb), .08);
    color: var(--pc-dark);
    font-size: 12px;
}

.pc-az-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.pc-az-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    color: var(--pc-dark);
    font-size: 14px;
    font-weight: 500;
    transition: background .2s, border-color .2s;
}

.pc-az-tab i { color: var(--pc-primary-ink); }
.pc-az-tab small { padding: 1px 7px; border-radius: 20px; background: rgba(var(--pc-dark-rgb), .07); font-size: 12px; color: var(--pc-text-muted); }
.pc-az-tab:hover { border-color: var(--pc-primary); }
.pc-az-tab.is-on { background: var(--pc-dark); border-color: var(--pc-dark); color: #fff; }
.pc-az-tab.is-on i { color: var(--pc-primary); }
.pc-az-tab.is-on small { background: rgba(255, 255, 255, .16); color: #fff; }

/* Letter bar: sticks under the floating header while the index scrolls. */
.pc-az-letters {
    position: sticky;
    top: 86px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 18px 0 10px;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(255, 252, 247, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pc-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-az-letters::-webkit-scrollbar { display: none; }

.pc-az-letters a {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 14px;
    transition: background .2s, color .2s;
}

.pc-az-letters a:hover { background: var(--pc-primary-light); }
.pc-az-letters a.is-active { background: var(--pc-primary); color: var(--pc-dark); }
.pc-az-letters a.is-empty { color: rgba(var(--pc-dark-rgb), .22); pointer-events: none; }

.pc-az-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 6px 0 14px;
    color: var(--pc-text-muted);
    font-size: 13.5px;
    white-space: nowrap;
}

.pc-az-group { padding-top: 26px; scroll-margin-top: 150px; }

.pc-az-letter {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.pc-az-letter span {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-dark);
    color: var(--pc-primary);
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 22px;
}

.pc-az-letter small { color: var(--pc-text-muted); font-size: 14px; }

.pc-az-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }

/* Six places a letter until "Show all"; every match while a filter is on. */
.pc-az:not(.is-filtering) .pc-az-group:not(.is-expanded) .pc-az-card.is-extra { display: none; }
.pc-az.is-filtering .pc-az-expand { display: none; }

.pc-az-expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid var(--pc-dark);
    background: transparent;
    color: var(--pc-dark);
    font-family: var(--font-poppins);
    font-weight: 500;
    font-size: 14px;
    transition: background .2s, color .2s;
}

.pc-az-expand:hover { background: var(--pc-dark); color: #fff; }

/* Card: a fixed header row and ONE row of fare chips, so every collapsed card
   in a row is the same height; "+N" wraps the full list open in place. */
.pc-az-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    transition: border-color .2s, box-shadow .2s;
}

.pc-az-card:hover { border-color: rgba(var(--pc-primary-rgb), .75); box-shadow: 0 12px 26px rgba(var(--pc-dark-rgb), .07); }

.pc-az-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--pc-dark);
}

.pc-az-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-size: 19px;
}

.pc-az-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }

.pc-az-name {
    font-family: var(--font-poppins);
    font-weight: 600;
    font-size: 16px;
    color: var(--pc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-az-top:hover .pc-az-name { color: var(--pc-primary-ink); }
.pc-az-name mark { padding: 0 1px; border-radius: 3px; background: rgba(var(--pc-primary-rgb), .45); color: inherit; }

.pc-az-title small { display: flex; align-items: center; gap: 6px; color: var(--pc-text-muted); font-size: 12.5px; }

.pc-az-title em {
    font-style: normal;
    padding: 0 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    background: rgba(var(--pc-dark-rgb), .08);
    color: var(--pc-dark);
}

.pc-az-title em.is-station { background: rgba(22, 132, 91, .12); color: var(--pc-success); }

.pc-az-from { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pc-az-from small { font-size: 11px; color: var(--pc-text-muted); }
.pc-az-from b { font-family: var(--font-poppins); font-size: 15px; font-weight: 600; color: var(--pc-primary-ink); }

.pc-az-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px dashed var(--pc-border);
}

.pc-az-chip {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(var(--pc-dark-rgb), .045);
    color: var(--pc-dark);
    font-size: 13px;
    transition: background .15s;
}

.pc-az-chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-az-chip b { flex: 0 0 auto; font-weight: 600; font-size: 12.5px; color: var(--pc-primary-ink); }
.pc-az-chip:hover { background: var(--pc-primary-light); color: var(--pc-dark); }
.pc-az-chip.is-x { display: none; }

.pc-az-plus {
    flex: 0 0 auto;
    height: 32px;
    min-width: 40px;
    margin-left: auto;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--pc-border);
    background: var(--pc-card);
    color: var(--pc-dark);
    font-size: 12.5px;
    font-weight: 600;
}

.pc-az-plus:hover { border-color: var(--pc-primary); background: var(--pc-primary-light); }

.pc-az-card.is-open .pc-az-chips { flex-wrap: wrap; }
.pc-az-card.is-open .pc-az-chip.is-x { display: inline-flex; }

.pc-az-empty {
    margin-top: 26px;
    padding: 40px 20px;
    border-radius: 20px;
    border: 1px dashed var(--pc-border);
    background: var(--pc-card);
    text-align: center;
}

.pc-az-empty > i { font-size: 34px; color: var(--pc-primary-ink); }
.pc-az-empty h3 { margin: 10px 0 6px; font-family: var(--font-poppins); font-weight: 600; font-size: 20px; color: var(--pc-dark); }

.pc-az-reset {
    margin-top: 6px;
    padding: 9px 20px;
    border: 0;
    border-radius: 50px;
    background: var(--pc-primary);
    color: var(--pc-dark);
    font-weight: 600;
}

@media (max-width: 1199px) {
    .pc-az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sticky offset = floating header bottom + a small gap. The header is 70px at
   top:10px (bottom 80) from 576px up; only the phone header (<=575px) is 56. */
@media (max-width: 991px) {
    .pc-az-letters { top: 86px; }
}

@media (max-width: 575px) {
    .pc-az-letters { top: 66px; }
}

@media (max-width: 767px) {
    .pc-az { margin-top: 56px; }
    .pc-az-grid { grid-template-columns: 1fr; gap: 12px; }
    .pc-az-tools { padding: 10px; border-radius: 16px; }
    .pc-az-search { flex-basis: 100%; }
    /* Tabs scroll sideways inside the card rather than wrapping to three rows. */
    .pc-az-tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
    .pc-az-tabs::-webkit-scrollbar { display: none; }
    .pc-az-tab { flex: 0 0 auto; }
    .pc-az-letters { margin-top: 12px; }
    .pc-az-count { display: none; }
}


/* ==========================================================================
   A-Z city index: search + letters as one sticky bar            (2026-09-13)
   comman/theme/_city_index.php (/routes, /local-routes, /airport-routes).
   The bar clears the floating header by 6px: its bottom is at 80px from 576px
   up and at 56px on a phone.
   ========================================================================== */
.pc-azbar {
    position: sticky;
    top: 86px;
    z-index: 30;
    margin: 0 0 18px;
}

.pc-azbar-inner {
    position: relative;               /* contains the visually-hidden label */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(var(--pc-dark-rgb), .08);
    border-radius: 20px;
    background: rgba(255, 252, 246, .84);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
            backdrop-filter: blur(24px) saturate(170%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
                0 18px 40px -30px rgba(var(--pc-dark-rgb), .55);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .pc-azbar-inner { background: rgba(255, 253, 248, .98); }
}

/* Search, compact inside the bar. */
.pc-azbar .pc-city-search {
    flex: 0 0 290px;
    max-width: none;
    margin: 0;
}

.pc-azbar .pc-city-search i { left: 15px; font-size: 15px; color: var(--pc-text-muted); }

.pc-azbar .pc-city-search input {
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--pc-border);
    border-radius: 13px;
    background: #fff;
    font-size: 15px;
}

/* Letters: one row that scrolls sideways when it has to, never wraps. */
.pc-azbar .pc-az-nav {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 3px;
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-azbar .pc-az-nav::-webkit-scrollbar { display: none; }

.pc-azbar .pc-az-nav a,
.pc-azbar .pc-az-nav a:first-child {
    flex: 0 0 auto;
    min-width: 32px;
    width: auto;
    height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-dark);
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.pc-azbar .pc-az-nav a:hover { background: var(--pc-primary-light); color: var(--pc-dark); }

.pc-azbar .pc-az-nav a.is-on,
.pc-azbar .pc-az-nav a[aria-current] { background: var(--pc-dark); color: #fff; }

.pc-azbar .pc-az-nav a.pc-az-all {
    padding: 0 12px;
    border: 1px solid var(--pc-border);
    background: #fff;
}

.pc-azbar .pc-az-nav a.is-empty { opacity: .3; pointer-events: none; }

.pc-azbar .pc-az-nav a:focus-visible {
    outline: 3px solid rgba(var(--pc-primary-rgb), .6);
    outline-offset: 1px;
}

/* The note now sits under the bar, not above it. */
.pc-azbar + .pc-az-note { margin: 0 0 28px; }

/* A jump lands the letter heading just below the bar, not under it. */
.pc-city-group { scroll-margin-top: var(--pc-azbar-offset, 170px); }

/* Between 992 and 1199 the row can run out of room: fade its right edge so
   the scroll reads as intentional. */
@media (max-width: 1199.98px) {
    .pc-azbar .pc-az-nav {
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
}

@media (max-width: 767.98px) {
    .pc-azbar-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 18px; }
    .pc-azbar .pc-city-search { flex: 0 0 auto; }
    .pc-azbar .pc-city-search input { height: 42px; font-size: 16px; }   /* 16px: iOS does not zoom */
    .pc-azbar .pc-az-nav a,
    .pc-azbar .pc-az-nav a:first-child { height: 34px; min-width: 30px; }
}

@media (max-width: 575.98px) {
    .pc-azbar { top: 62px; }
}