/* ==========================================================================
   Transferler sayfası ve transfer rezervasyon sihirbazı
   (yalnızca Transfers controller'ının sayfalarında yüklenir: $data['extra_css'])

   Her seçici şunlardan birinin altındadır:
     .tp-page            – transfers.php / booking_complete.php sayfa gövdesi
     .tp-wizard          – wizardTransfer.php içindeki #wizardForm
     #modalBox.tp-modal  – ortak modal kabuğu; .tp-modal yalnızca /transfers sayfasında eklenir
     .tp-body            – /transfers sayfasında <body> (yüzen butonlar)
   Ana sayfa, turlar ve diğer sayfalardaki işaretlemeyle eşleşmez.
   ========================================================================== */

.tp-page,
.tp-wizard,
#modalBox.tp-modal {
    --tp-ink: #41250a;          /* headings, values            14.1:1 on white */
    --tp-text: #5b4636;         /* body copy                    8.9:1 on white */
    --tp-muted: #6e5e50;        /* secondary text               6.2:1 white / 5.1:1 beige */
    --tp-bg: #fcfaee;           /* page background (body)                      */
    --tp-soft: #fbf6ee;         /* warm tint surfaces                          */
    --tp-beige: #f1e8d9;
    --tp-line: #e8ddcb;         /* decorative card borders                     */
    --tp-line-2: #efe4d3;
    --tp-field-line: #a38d76;   /* form-control boundaries, 3.2:1 (WCAG 1.4.11) */
    --tp-field-line-hover: #7d6a56;
    --tp-sand: #ebcbad;
    --tp-accent: #ce7d4f;       /* icons, lines, large text only (3.15:1)      */
    --tp-accent-ink: #a4522c;   /* accent text on light backgrounds (5.5:1)    */
    --tp-cta: #b0592f;          /* button bg, white text 4.9:1                 */
    --tp-cta-hover: #96491f;    /* white text 6.4:1                            */
    --tp-error: #b42318;
    --tp-shadow: 0 1px 2px rgba(65, 37, 10, .05), 0 10px 28px -16px rgba(65, 37, 10, .28);
    --tp-shadow-lg: 0 2px 6px rgba(65, 37, 10, .05), 0 28px 60px -28px rgba(65, 37, 10, .45);
    --tp-ring: 0 0 0 4px rgba(206, 125, 79, .22);
}

/* --------------------------------------------------------------------------
   Shared bits (buttons, markers, chips)
   -------------------------------------------------------------------------- */
.tp-page .tp-btn,
.tp-wizard .tp-btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tp-page .tp-btn--primary,
.tp-wizard .tp-btn--primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tp-cta);
    --bs-btn-border-color: var(--tp-cta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tp-cta-hover);
    --bs-btn-hover-border-color: var(--tp-cta-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tp-cta-hover);
    --bs-btn-active-border-color: var(--tp-cta-hover);
    --bs-btn-focus-shadow-rgb: 206, 125, 79;
    box-shadow: 0 6px 16px -8px rgba(150, 73, 31, .7);
}
.tp-page .tp-btn--primary:hover { transform: translateY(-1px); }
.tp-page .tp-btn--primary i { font-size: .95em; }
.tp-page .tp-btn:focus-visible,
.tp-wizard .tp-btn:focus-visible {
    outline: 2px solid var(--tp-accent-ink);
    outline-offset: 3px;
    box-shadow: none;
}

/* route markers: origin ring + destination pin */
.tp-page .tp-marker {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
}
.tp-page .tp-marker--from::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid var(--tp-accent);
    background: #fff;
}
.tp-page .tp-marker--to { color: var(--tp-accent); font-size: 15px; }

/* --------------------------------------------------------------------------
   HERO – title + search card overlapping the banner
   -------------------------------------------------------------------------- */
.tp-page { --tp-pull: 0px; position: relative; color: var(--tp-text); }

.tp-page .tp-hero {
    position: relative;
    z-index: 3;                        /* above #overlay-carousel (z-index 2) */
    margin-top: calc(var(--tp-pull) * -1);
}
.tp-page.tp-has-banner .tp-hero::before {   /* banner fades into the page */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--tp-pull) + 40px);
    background: linear-gradient(180deg, rgba(252, 250, 238, 0) 0%, rgba(252, 250, 238, .78) 48%, #fcfaee 92%);
    pointer-events: none;
    z-index: -1;
}
.tp-page.tp-has-banner { --tp-pull: clamp(28px, 9vw, 72px); }
@media (min-width: 992px) {
    .tp-page.tp-has-banner { --tp-pull: clamp(168px, 15vw, 250px); }
}
.tp-page.tp-no-banner .tp-hero { padding-top: 28px; }
@media (min-width: 1200px) {
    .tp-page.tp-no-banner .tp-hero { padding-top: 124px; }   /* clears the fixed navbar */
}

.tp-page .tp-hero-head {
    max-width: 860px;
    margin: 0 auto 22px;
    text-align: center;
    text-wrap: balance;
}
.tp-page .tp-title {
    margin: 0 0 .4rem;
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--tp-ink);
}
.tp-page .tp-subtitle {
    margin: 0;
    font-size: clamp(.95rem, .88rem + .3vw, 1.125rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--tp-ink);
}

.tp-page .tp-search {
    background: #fff;
    border: 1px solid rgba(232, 221, 203, .8);
    border-radius: 22px;
    box-shadow: var(--tp-shadow-lg);
    padding: 20px 22px 22px;
    scroll-margin-top: 120px;
}
.tp-page .tp-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) auto;
    align-items: end;
}
.tp-page .tp-loc { min-width: 0; position: relative; }
.tp-page .tp-loc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    margin: 0 0 7px 2px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tp-text);
}
.tp-page .tp-loc-box {
    display: flex;
    align-items: center;
    height: 56px;
    background: #fff;
    border: 1.5px solid var(--tp-field-line);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tp-page .tp-loc-box:hover { border-color: var(--tp-field-line-hover); }
.tp-page .tp-loc-box:focus-within { border-color: var(--tp-accent-ink); box-shadow: var(--tp-ring); }
.tp-page .tp-place { flex: 1; min-width: 0; }

/* the real Google PlaceAutocompleteElement (host styles are overridable) */
.tp-page .tp-place gmp-place-autocomplete {
    display: block;
    width: 100%;
    height: 53px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color-scheme: light;               /* never render the dark variant inside our white box */
    font-family: "Poppins", sans-serif;
    font-size: 15px;
}

.tp-page .tp-loc-link {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
}
.tp-page .tp-loc-link span {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tp-beige);
    border: 3px solid #fff;
    color: var(--tp-accent-ink);
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(65, 37, 10, .12);
}
.tp-page .tp-search-btn {
    height: 56px;
    min-width: 188px;
    margin-left: 16px;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    .tp-page .tp-search-form { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); row-gap: 14px; }
    .tp-page .tp-search-btn { grid-column: 1 / -1; margin-left: 0; width: 100%; }
}

@media (max-width: 767.98px) {
    .tp-page .tp-search { padding: 16px 16px 18px; border-radius: 20px; }
    .tp-page .tp-search-form { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
    .tp-page .tp-loc-link { display: none; }
    /* vertical route rail: markers sit beside the fields, joined by a dashed line */
    .tp-page .tp-loc { padding-left: 30px; }
    .tp-page .tp-loc-label .tp-marker { position: absolute; left: 0; top: 48px; }      /* alanın ortası (etiket 29px + kutu 54px / 2) */
    .tp-page .tp-loc--from::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 64px;
        bottom: -60px;                     /* hata satırı açılsa da "Nereye" işaretine ulaşır */
        border-left: 2px dashed #e2c3a5;
    }
    .tp-page .tp-loc-box { height: 54px; }
    .tp-page .tp-search-btn { height: 54px; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   RESULTS – route summary + vehicle offers
   -------------------------------------------------------------------------- */
.tp-page .tp-results { padding: 44px 0 0; scroll-margin-top: -24px; }   /* search submits to #tp-results */
@media (min-width: 1200px) {
    .tp-page .tp-results { scroll-margin-top: 56px; }                  /* clears the fixed navbar */
}
.tp-page .tp-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: 14px;
}
.tp-page .tp-h2 {
    margin: 0;
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tp-ink);
}
.tp-page .tp-results-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .9rem;
    color: var(--tp-muted);
}
.tp-page .tp-results-note i { color: var(--tp-accent); }

.tp-page .tp-route-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: var(--tp-beige);
    border-radius: 18px;
}
.tp-page .tp-route {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 520px;
    min-width: 0;
}
.tp-page .tp-route-pt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}
.tp-page .tp-route-pt .tp-marker { margin-top: 20px; }
.tp-page .tp-route-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tp-page .tp-route-k {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tp-muted);
}
.tp-page .tp-route-txt strong { font-size: 1rem; font-weight: 600; color: var(--tp-ink); }
.tp-page .tp-route-txt small { font-size: .8125rem; color: var(--tp-muted); }
.tp-page .tp-route-line {
    position: relative;
    flex: 1 1 48px;
    max-width: 140px;
    min-width: 36px;
    height: 2px;
    margin-top: 6px;
    background: repeating-linear-gradient(90deg, var(--tp-accent) 0 6px, transparent 6px 11px);
}
.tp-page .tp-route-line::after {          /* arrow head */
    content: "";
    position: absolute;
    right: -2px;
    top: -4px;
    border: 5px solid transparent;
    border-left: 7px solid var(--tp-accent);
    border-right: 0;
}
.tp-page .tp-route-side { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.tp-page .tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tp-ink);
}
.tp-page .tp-chip i { color: var(--tp-accent); }
.tp-page .tp-route-change {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tp-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 6px;
}
.tp-page .tp-route-change:hover { color: var(--tp-ink); }
.tp-page .tp-route-change:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: 2px; }
.tp-page .tp-route-change i { font-size: .8em; }

.tp-page .tp-offers { display: grid; gap: 16px; }
.tp-page .tp-offer {
    position: relative;
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr) 284px;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 22px;
    box-shadow: var(--tp-shadow);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.tp-page .tp-offer:hover { box-shadow: var(--tp-shadow-lg); border-color: #e0cdb2; }
.tp-page .tp-offer-media { padding: 12px; }
.tp-page .tp-offer-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 176px;
    max-height: 200px;
    object-fit: cover;
    border-radius: 15px;
    background: var(--tp-beige);
}
.tp-page .tp-offer-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 20px 26px 20px 14px;
}
.tp-page .tp-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tp-muted);
}
.tp-page .tp-offer-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tp-ink);
}
.tp-page .tp-offer-route {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 6px;
    font-size: .875rem;
    color: var(--tp-muted);
}
.tp-page .tp-offer-route span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tp-page .tp-offer-route i { color: var(--tp-accent); flex: none; }
.tp-page .tp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tp-page .tp-meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--tp-text);
    background: var(--tp-soft);
    border: 1px solid var(--tp-line-2);
    border-radius: 999px;
}
.tp-page .tp-meta i { color: var(--tp-accent); font-size: .9em; }

/* price stub – separated like a ticket */
.tp-page .tp-offer-buy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 22px 24px;
    border-left: 2px dashed var(--tp-line);
}
.tp-page .tp-offer-buy::before,
.tp-page .tp-offer-buy::after {
    content: "";
    position: absolute;
    left: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tp-bg);
    border: 1px solid var(--tp-line);
}
.tp-page .tp-offer-buy::before { top: -12px; clip-path: inset(50% -2px -2px -2px); }
.tp-page .tp-offer-buy::after { bottom: -12px; clip-path: inset(-2px -2px 50% -2px); }
.tp-page .tp-price { display: flex; flex-direction: column; margin: 0; line-height: 1.1; }
.tp-page .tp-price-val {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--tp-ink);
    font-variant-numeric: tabular-nums;
}
.tp-page .tp-price-note { margin-top: 4px; font-size: .8125rem; color: var(--tp-muted); }
.tp-page .tp-offer-cta { width: 100%; height: 50px; font-size: .95rem; }

@media (max-width: 1199.98px) {
    .tp-page .tp-offer { grid-template-columns: 248px minmax(0, 1fr) 244px; }
}
@media (max-width: 991.98px) {     /* offers become stacked cards (2 per row on tablets) */
    .tp-page .tp-results { padding-top: 36px; }
    .tp-page .tp-route { flex-basis: 100%; }
    .tp-page .tp-offer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; border-radius: 20px; }
    .tp-page .tp-offer-media { padding: 10px 10px 0; }
    .tp-page .tp-offer-media img { height: auto; max-height: none; min-height: 0; aspect-ratio: 16 / 9; border-radius: 14px; }
    .tp-page .tp-offer-body { justify-content: flex-start; padding: 14px 18px 16px; }
    .tp-page .tp-offer-title { font-size: 1.375rem; }
    .tp-page .tp-offer-buy {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px 18px;
        border-left: 0;
        border-top: 2px dashed var(--tp-line);
    }
    .tp-page .tp-offer-buy::before { top: -12px; left: -12px; clip-path: inset(-2px -2px -2px 50%); }
    .tp-page .tp-offer-buy::after { top: -12px; bottom: auto; left: auto; right: -12px; clip-path: inset(-2px 50% -2px -2px); }
    .tp-page .tp-price-val { font-size: 1.625rem; }
    .tp-page .tp-offer-cta { flex: 1 0 auto; width: auto; height: 50px; padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .tp-page .tp-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .tp-page .tp-results { padding-top: 32px; }
    .tp-page .tp-results-head { margin-bottom: 12px; }
    .tp-page .tp-route-bar { padding: 14px 16px; gap: 12px; border-radius: 16px; }
    /* vertical route: origin above destination with a dashed connector */
    .tp-page .tp-route { flex-direction: column; align-items: stretch; gap: 10px; }
    .tp-page .tp-route-pt { position: relative; }
    .tp-page .tp-route-pt ~ .tp-route-pt::before {     /* dashed link from origin marker to destination pin */
        content: "";
        position: absolute;
        left: 7px;
        top: -24px;
        height: 40px;
        border-left: 2px dashed #d9b493;
    }
    .tp-page .tp-route-line { display: none; }
    .tp-page .tp-route-side { width: 100%; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(65, 37, 10, .08); }
}

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */
.tp-page .tp-how { padding: 48px 0 0; }
.tp-page .tp-how-card {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 20px 32px;
    padding: 28px 32px;
    background: var(--tp-beige);
    border-radius: 24px;
}
.tp-page .tp-how-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tp-ink);
}
.tp-page .tp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tpstep;
}
.tp-page .tp-step { display: flex; align-items: flex-start; gap: 14px; counter-increment: tpstep; }
.tp-page .tp-step-ico {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    color: var(--tp-accent);
    font-size: 1.25rem;
    box-shadow: 0 6px 14px -10px rgba(65, 37, 10, .5);
}
.tp-page .tp-step-ico::after {           /* step number badge */
    content: counter(tpstep);
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tp-cta);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border: 2px solid var(--tp-beige);
}
.tp-page .tp-step-txt { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.tp-page .tp-step-txt strong { font-size: 1rem; font-weight: 600; color: var(--tp-ink); }
.tp-page .tp-step-txt span { font-size: .875rem; line-height: 1.5; color: var(--tp-muted); }

@media (max-width: 1199.98px) {
    .tp-page .tp-how-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .tp-page .tp-how { padding-top: 36px; }
    .tp-page .tp-how-card { padding: 22px 20px; border-radius: 20px; gap: 18px; }
    .tp-page .tp-how-title { font-size: 1.2rem; }
    .tp-page .tp-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* --------------------------------------------------------------------------
   CMS CONTENT – comfortable reading column
   -------------------------------------------------------------------------- */
.tp-page .tp-content { padding: 52px 0 40px; }
.tp-page .tp-prose {
    max-width: 46rem;
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--tp-line);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--tp-text);
}
.tp-page .tp-prose p { margin: 0 0 1.05em; }
.tp-page .tp-prose > p:first-child {        /* the CMS text starts with its title line */
    margin-bottom: .8em;
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tp-ink);
}
.tp-page .tp-prose [style*="justify"] { text-align: left !important; }   /* no rivers in a narrow column */
.tp-page .tp-prose a { color: var(--tp-accent-ink); }
.tp-page .tp-prose img { max-width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 767.98px) {
    .tp-page .tp-content { padding: 40px 0 28px; }
    .tp-page .tp-prose { font-size: .975rem; line-height: 1.75; padding-bottom: 28px; }
}

/* ==========================================================================
   BOOKING MODAL (shell) – only when #modalBox has .tp-modal (transfers page)
   ========================================================================== */
#modalBox.tp-modal .modal-content {
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 40px 90px -30px rgba(41, 23, 6, .55);
}
#modalBox.tp-modal .modal-header {
    gap: 12px;
    padding: 16px 18px 16px 24px;
    border-bottom: 1px solid var(--tp-beige);
}
#modalBox.tp-modal .modal-title {
    margin: 0 auto 0 0 !important;
    text-align: left !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    color: var(--tp-ink);
}
#modalBox.tp-modal .modal-header .btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 0;
    border-radius: 50% !important;
    background: var(--tp-beige);
}
#modalBox.tp-modal .modal-header .btn:hover { background: var(--tp-sand); }
#modalBox.tp-modal .modal-header .btn:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: 2px; box-shadow: none; }
#modalBox.tp-modal .modal-header .btn i { color: var(--tp-ink) !important; font-size: 16px; }
#modalBox.tp-modal .modal-body { padding: 20px 24px 0; }

@media (max-width: 575.98px) {     /* full-screen sheet on phones */
    #modalBox.tp-modal .modal-dialog { margin: 0; max-width: none; min-height: 100%; align-items: stretch; }
    #modalBox.tp-modal .modal-content { min-height: 100vh; min-height: 100dvh; border-radius: 0; }
    #modalBox.tp-modal .modal-header { position: sticky; top: 0; z-index: 6; background: #fff; padding: 12px 12px 12px 16px; }
    #modalBox.tp-modal .modal-body { display: flex; flex-direction: column; padding: 14px 16px 0; }
}

/* ==========================================================================
   BOOKING WIZARD (form) – #wizardForm.tp-wizard
   ========================================================================== */
.tp-wizard { color: var(--tp-text); }
@media (max-width: 575.98px) {
    .tp-wizard,
    .tp-wizard #smartwizard { display: flex; flex-direction: column; flex: 1 1 auto; }
    .tp-wizard #smartwizard > .sw-container { flex: 1 1 auto; }
}

/* booking context – what is being booked */
.tp-wizard .tp-wz-context {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 10px 14px 10px 10px;
    background: var(--tp-soft);
    border: 1px solid var(--tp-line-2);
    border-radius: 16px;
}
.tp-wizard .tp-wz-thumb {
    flex: none;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--tp-beige);
}
.tp-wizard .tp-wz-ctx-main { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.tp-wizard .tp-wz-vehicle { display: block; font-size: .975rem; font-weight: 700; color: var(--tp-ink); }
.tp-wizard .tp-wz-route {
    display: block;
    font-size: .8125rem;
    color: var(--tp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-wizard .tp-wz-route i { color: var(--tp-accent); margin: 0 2px; }
.tp-wizard .tp-wz-ctx-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.tp-wizard .tp-wz-ctx-price strong { font-size: 1.15rem; font-weight: 700; color: var(--tp-ink); }
.tp-wizard .tp-wz-ctx-price small { font-size: .75rem; color: var(--tp-muted); }
.tp-wizard.tp-is-final .tp-wz-context { display: none; }   /* the summary card repeats it */

/* ---- stepper (SmartWizard 4 anchors) ---------------------------------- */
#wizardForm.tp-wizard #smartwizard.sw-main { box-shadow: none; border-radius: 0 !important; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    counter-reset: tpwz;
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    text-align: center;
    counter-increment: tpwz;
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li + li::before {   /* progress line */
    content: "";
    position: absolute;
    top: 17px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);
    height: 3px;
    border-radius: 3px;
    background: var(--tp-line) !important;
    transition: background-color .25s ease;
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.active::before,
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.done::before { background: var(--tp-accent) !important; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li::after { display: none !important; }

#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li > a {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 10px;
    background: none !important;
    color: var(--tp-muted) !important;
    font-size: .8125rem;
    font-weight: 600 !important;
    line-height: 1.3;
    cursor: default;
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li > a::before {    /* number bubble */
    content: counter(tpwz);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--tp-line);
    color: var(--tp-muted);
    font-size: .9rem;
    font-weight: 700;
    transition: all .2s ease;
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li > a::after { display: none !important; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.active > a { color: var(--tp-ink) !important; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.active > a::before {
    background: var(--tp-cta);
    border-color: var(--tp-cta);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(206, 125, 79, .2);
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.done > a { color: var(--tp-text) !important; cursor: pointer; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.done > a:hover { color: var(--tp-ink) !important; }
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li.done > a::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .8rem;
    background: #fdf3ea;
    border-color: var(--tp-accent);
    color: var(--tp-accent-ink);
}
#wizardForm.tp-wizard #smartwizard > ul.step-anchor > li > a:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: 3px; box-shadow: none; }

#wizardForm.tp-wizard .sw-container { min-height: 0 !important; }
#wizardForm.tp-wizard .step-content { padding: 0 !important; background: transparent !important; border: 0; }

/* ---- fields ------------------------------------------------------------- */
.tp-wizard .tp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}
.tp-wizard .tp-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.tp-wizard .tp-field--wide { grid-column: 1 / -1; }
.tp-wizard .tp-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tp-ink);
}
.tp-wizard .tp-optional { font-weight: 400; color: var(--tp-muted); }
.tp-wizard .tp-control { position: relative; }
.tp-wizard .tp-ico {
    position: absolute;
    z-index: 4;
    left: 15px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 48px;
    font-size: .9rem;
    color: var(--tp-accent);
    pointer-events: none;
}
#wizardForm.tp-wizard #smartwizard .form-control,
#wizardForm.tp-wizard #smartwizard .form-select {
    height: 48px;
    padding-left: 42px;
    font-size: .95rem;
    color: var(--tp-ink);
    background-color: #fff;
    border: 1.5px solid var(--tp-field-line);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#wizardForm.tp-wizard #smartwizard textarea.form-control { height: auto; min-height: 84px; padding-top: 12px; resize: vertical; }
#wizardForm.tp-wizard #smartwizard .form-control::placeholder { color: transparent; }   /* placeholder = preview label only */
#wizardForm.tp-wizard #smartwizard .form-control:hover,
#wizardForm.tp-wizard #smartwizard .form-select:hover { border-color: var(--tp-field-line-hover); }
#wizardForm.tp-wizard #smartwizard .form-control:focus,
#wizardForm.tp-wizard #smartwizard .form-select:focus { border-color: var(--tp-accent-ink); box-shadow: var(--tp-ring); outline: 0; }

/* bootstrap-validator states */
#wizardForm.tp-wizard .has-error .form-control,
#wizardForm.tp-wizard .has-error .form-select { border-color: var(--tp-error) !important; }
#wizardForm.tp-wizard .has-error .form-control:focus,
#wizardForm.tp-wizard .has-error .form-select:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
#wizardForm.tp-wizard .has-error .tp-ico { color: var(--tp-error); }
#wizardForm.tp-wizard .help-block.with-errors ul { margin: 6px 0 0; padding: 0; }
#wizardForm.tp-wizard .help-block.with-errors ul.list-unstyled > li { color: var(--tp-error); font-size: .78rem; font-weight: 500; }
#wizardForm.tp-wizard .help-block.with-errors ul.list-unstyled > li::before {
    content: "\f06a";
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* date & time picker (eonasdan v4) – appended inside .tp-control, so it can be themed here.
   Also neutralises the global "#wizardForm ul.list-unstyled > li { color: #dc3545 }" (meant for
   validator messages) which otherwise paints the whole calendar red. */
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border: 1px solid var(--tp-line);
    border-radius: 16px;
    box-shadow: var(--tp-shadow-lg);
}
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget ul.list-unstyled > li { color: var(--tp-ink); font-size: .875rem; }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table th { color: var(--tp-muted); font-weight: 600; }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table th.picker-switch { color: var(--tp-ink); font-weight: 700; }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table th.prev,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table th.next { color: var(--tp-accent-ink); }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table th,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td { border-radius: 9px; }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.day:hover,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td span:hover { background: var(--tp-soft); }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.old,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.new { color: #b9a894; }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: var(--tp-accent); }
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.active,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td.active:hover,
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget table td span.active {
    color: #fff;
    background-color: var(--tp-cta);
    text-shadow: none;
}
#wizardForm.tp-wizard .bootstrap-datetimepicker-widget .btn { color: var(--tp-accent-ink); }

/* gender – segmented control */
.tp-wizard .tp-segment {
    display: flex;
    gap: 4px;
    height: 48px;
    padding: 4px;
    background: var(--tp-soft);
    border: 1.5px solid var(--tp-field-line);
    border-radius: 12px;
}
.tp-wizard .tp-seg-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tp-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tp-wizard .tp-seg-btn:hover { color: var(--tp-ink); }
.tp-wizard .tp-seg-btn i { font-size: .9em; }
.tp-wizard .btn-check:checked + .tp-seg-btn { background: #fff; color: var(--tp-ink); box-shadow: 0 1px 4px rgba(65, 37, 10, .16); }
.tp-wizard .btn-check:checked + .tp-seg-btn i { color: var(--tp-accent-ink); }
.tp-wizard .btn-check:focus-visible + .tp-seg-btn { outline: 2px solid var(--tp-accent-ink); outline-offset: 1px; }

/* extras – selectable tiles */
.tp-wizard .tp-extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.tp-wizard .tp-extra { position: relative; }
.tp-wizard .tp-extra .form-check-input {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    border: 1.5px solid var(--tp-field-line);
    border-radius: 5px;
    cursor: pointer;
}
.tp-wizard .tp-extra-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 10px 16px 10px 46px;
    font-size: .9rem;
    color: var(--tp-ink);
    background: #fff;
    border: 1.5px solid var(--tp-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.tp-wizard .tp-extra-label:hover { border-color: #dcc7aa; }
.tp-wizard .tp-extra-price { flex: none; font-size: .8125rem; font-weight: 600; color: var(--tp-muted); white-space: nowrap; }
.tp-wizard .tp-extra .form-check-input:checked + .tp-extra-label { background: #fdf6ee; border-color: var(--tp-accent); }
.tp-wizard .tp-extra .form-check-input:checked + .tp-extra-label .tp-extra-price { color: var(--tp-accent-ink); }
.tp-wizard .tp-extra .form-check-input:focus-visible + .tp-extra-label { outline: 2px solid var(--tp-accent-ink); outline-offset: 2px; }
.tp-wizard .form-check-input:checked { background-color: var(--tp-cta); border-color: var(--tp-cta); }
.tp-wizard .form-check-input:focus { border-color: var(--tp-accent); box-shadow: var(--tp-ring); }

/* ---- toolbar: Back / Continue / Confirm (buttons created by wizard_script.php) ---- */
#wizardForm.tp-wizard .sw-toolbar-bottom {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin: 22px -24px 0;
    padding: 14px 24px;
    background: #fff;
    border-top: 1px solid var(--tp-beige);
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 -12px 24px -20px rgba(65, 37, 10, .45);
}
#wizardForm.tp-wizard .sw-toolbar .sw-btn-group {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
}
#wizardForm.tp-wizard .sw-toolbar .sw-btn-group-extra { flex: none; margin: 0 !important; padding: 0; border: 0; background: none; }
#wizardForm.tp-wizard .sw-toolbar .btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    margin: 0 !important;
    padding: 0 22px !important;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 12px !important;
    opacity: 1;
}
#wizardForm.tp-wizard .sw-toolbar .btn i { font-size: .9em; }
#wizardForm.tp-wizard .sw-toolbar .sw-btn-prev {
    color: var(--tp-ink) !important;
    background: #fff !important;
    border: 1.5px solid var(--tp-line) !important;
}
#wizardForm.tp-wizard .sw-toolbar .sw-btn-prev:hover { background: var(--tp-soft) !important; border-color: #dcc7aa !important; }
#wizardForm.tp-wizard .sw-toolbar .sw-btn-prev.disabled { visibility: hidden; }
#wizardForm.tp-wizard .sw-toolbar .sw-btn-next,
#wizardForm.tp-wizard .sw-toolbar #finish-btn {
    min-width: 168px;
    color: #fff !important;
    background: var(--tp-cta) !important;
    border: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(150, 73, 31, .75);
}
#wizardForm.tp-wizard .sw-toolbar .sw-btn-next:hover,
#wizardForm.tp-wizard .sw-toolbar #finish-btn:hover { background: var(--tp-cta-hover) !important; }
#wizardForm.tp-wizard .sw-toolbar .sw-btn-next.disabled,
#wizardForm.tp-wizard .sw-toolbar #finish-btn.disabled { display: none !important; }
#wizardForm.tp-wizard .sw-toolbar #finish-btn { margin-left: 16px !important; }
#wizardForm.tp-wizard .sw-toolbar #finish-btn[disabled]:not(.disabled) { opacity: .75; cursor: progress; }
#wizardForm.tp-wizard .sw-toolbar .btn:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: 3px; box-shadow: none; }
.tp-wizard .tp-toolbar-total { display: none; }
.tp-wizard .tp-toolbar-total.is-ready {          /* canlı toplam: Devam / Onayla butonunun solunda */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    margin-left: auto;
    margin-right: 16px;
    line-height: 1.15;
}
.tp-wizard .tp-toolbar-total { transition: opacity .2s ease, visibility .2s ease; }
.tp-wizard .tp-toolbar-total.is-covered { opacity: 0; visibility: hidden; }
.tp-wizard .tp-toolbar-total span { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-muted); }
.tp-wizard .tp-toolbar-total strong { font-size: 1.3rem; font-weight: 700; color: var(--tp-ink); font-variant-numeric: tabular-nums; }

/* ---- preview: summary card ------------------------------------------------ */
.tp-wizard .tp-summary {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 18px;
}
.tp-wizard .tp-summary-head {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--tp-soft);
    border-bottom: 1px solid var(--tp-line-2);
}
.tp-wizard .tp-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tp-ink);
}
.tp-wizard .tp-summary-title i { color: var(--tp-accent); }
.tp-wizard .tp-summary-badge {
    padding: 4px 12px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tp-accent-ink);
    background: #fff;
    border: 1px solid #efd9c4;
    border-radius: 999px;
}
.tp-wizard #preview-currency { display: contents; }    /* children join the card's flex flow */
.tp-wizard .tp-sum-route {
    order: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 6px;
}
.tp-wizard .tp-sum-route .route-wrap { min-width: 0; gap: 2px; }
.tp-wizard .tp-sum-route .route-text { font-size: .875rem; font-weight: 400; color: var(--tp-muted); line-height: 1.4; }
.tp-wizard .tp-sum-route .route-text strong { font-weight: 600; color: var(--tp-ink); }
.tp-wizard .tp-sum-dist {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tp-ink);
    background: var(--tp-soft);
    border: 1px solid var(--tp-line-2);
    border-radius: 999px;
}
.tp-wizard .tp-sum-dist i { color: var(--tp-accent); }
.tp-wizard #preview {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    padding: 4px 18px 18px;
}
.tp-wizard #preview > label.col-form-label {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px 0 2px;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tp-accent-ink);
}
.tp-wizard #preview > hr { display: none; }
.tp-wizard #preview > .form-group.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 8px 0;
    border-bottom: 1px dashed var(--tp-line-2);
}
.tp-wizard #preview > .form-group.row.tp-row-empty { display: none; }
.tp-wizard #preview > .form-group.row > [class*="col-"] { flex: 0 1 auto; width: auto; max-width: none; padding: 0; }
.tp-wizard #preview > .form-group.row > [class*="col-"]:first-child { flex: none; }
.tp-wizard #preview > .form-group.row > [class*="col-"]:last-child { min-width: 0; text-align: right; }
.tp-wizard #preview .control-label { margin: 0; font-size: .8125rem; color: var(--tp-muted); white-space: nowrap; }
.tp-wizard #preview .mx-sm-3 {
    margin: 0 !important;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tp-ink);
    overflow-wrap: anywhere;
}
.tp-wizard #preview > .alert {          /* payment option (built by wizard_script.php) */
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 16px 0 0;
    padding: 12px 14px 12px 16px !important;
    color: var(--tp-ink);
    background: var(--tp-soft);
    border: 1px solid var(--tp-line-2);
    border-radius: 14px;
}
.tp-wizard #preview > .alert > .col-form-label { margin: 0 !important; padding: 0; font-size: .875rem; font-weight: 600; }
.tp-wizard #preview > .alert .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 8px 16px 8px 12px;
    background: #fff;
    border: 1.5px solid var(--tp-accent);
    border-radius: 999px;
}
.tp-wizard #preview > .alert .form-check-input { float: none; margin: 0; }
.tp-wizard #preview > .alert .form-check-label { font-size: .875rem; font-weight: 600; color: var(--tp-ink); }
.tp-wizard #preview > .alert-danger { color: var(--tp-error); background: #fdf0ee; border-color: #f3c9c3; }
.tp-wizard .tp-sum-lines {            /* fiyat dökümü: araç + ek hizmetler */
    order: 3;
    margin: 0 18px;
    padding: 6px 0 14px;
    border-top: 1px solid var(--tp-line-2);
}
.tp-wizard .tp-sum-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    font-size: .875rem;
    color: var(--tp-text);
}
.tp-wizard .tp-sum-line small { color: var(--tp-muted); }
.tp-wizard .tp-sum-line strong { flex: none; font-weight: 600; color: var(--tp-ink); font-variant-numeric: tabular-nums; }
.tp-wizard .tp-total-bar {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: #fff;
    background: linear-gradient(120deg, var(--tp-cta) 0%, #8f4520 100%);
}
.tp-wizard .tp-total-bar span { font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.tp-wizard .tp-total-bar strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---- wizard: phones --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .tp-wizard .tp-wz-context { margin-bottom: 18px; padding: 8px 12px 8px 8px; gap: 10px; }
    .tp-wizard .tp-wz-thumb { width: 52px; height: 42px; }
    .tp-wizard .tp-wz-route {           /* show the destination too: wrap to two lines */
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .tp-wizard .tp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tp-wizard .tp-extras-grid { grid-template-columns: minmax(0, 1fr); }
    #wizardForm.tp-wizard #smartwizard > ul.step-anchor { margin-bottom: 18px; }
    #wizardForm.tp-wizard #smartwizard > ul.step-anchor > li > a { font-size: .75rem; }
    #wizardForm.tp-wizard .sw-toolbar-bottom {
        margin: 20px -16px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 0 !important;
        box-shadow: 0 -8px 20px -14px rgba(65, 37, 10, .35);
    }
    #wizardForm.tp-wizard .sw-toolbar .btn { height: 50px; padding: 0 18px !important; }
    #wizardForm.tp-wizard .sw-toolbar .sw-btn-prev { width: 50px; padding: 0 !important; }      /* icon-only, text stays for AT */
    #wizardForm.tp-wizard .sw-toolbar .sw-btn-prev .tp-btn-txt {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #wizardForm.tp-wizard .sw-toolbar .sw-btn-next { min-width: 0; flex: 1 1 auto; }
    #wizardForm.tp-wizard .sw-toolbar .sw-btn-group { gap: 10px; }
    #wizardForm.tp-wizard .sw-toolbar .sw-btn-prev.disabled { display: none; }
    #wizardForm.tp-wizard.tp-is-final .sw-toolbar .sw-btn-group { flex: none; }
    #wizardForm.tp-wizard.tp-is-final .sw-toolbar .sw-btn-group-extra { flex: 1 1 auto; display: flex; }
    #wizardForm.tp-wizard .sw-toolbar #finish-btn { flex: 1 1 auto; min-width: 0; margin-left: 12px !important; padding: 0 14px !important; }
    .tp-wizard .tp-toolbar-total.is-ready { margin-left: 2px; margin-right: 6px; }
    .tp-wizard .tp-toolbar-total strong { font-size: 1.15rem; }
    .tp-wizard .tp-sum-route { flex-direction: column; gap: 10px; padding: 14px 16px 4px; }
    .tp-wizard #preview { grid-template-columns: minmax(0, 1fr); padding: 2px 16px 16px; }
    .tp-wizard .tp-total-bar { padding: 14px 16px; }
}

/* ==========================================================================
   UX eklemeleri: arama durumu, güncel olmayan fiyatlar, yolcu sayacı, taslak,
   ödeme notu, süresi dolmuş oturum, onay sayfası, yüzen butonlar
   ========================================================================== */

/* ---- arama: hatalar, durum satırı, bekleme ------------------------------- */
.tp-page .tp-loc.is-invalid .tp-loc-box { border-color: var(--tp-error); }
.tp-page .tp-loc.is-invalid .tp-loc-box:focus-within { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
.tp-page .tp-loc-error {
    position: absolute;
    left: 2px;
    top: calc(100% + 6px);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tp-error);
}
.tp-page .tp-loc-error i { margin-top: 2px; }
.tp-page .tp-search-form:has(.tp-loc.is-invalid) { padding-bottom: 22px; }

.tp-page .tp-search-status:empty { display: none; }
.tp-page .tp-search-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 2px 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--tp-muted);
}
.tp-page .tp-search-status::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    flex: none;
}
.tp-page .tp-search-status.is-pending::before { content: "\f110"; color: var(--tp-accent); animation: fa-spin 1s linear infinite; }
.tp-page .tp-search-status.is-ready { color: var(--tp-ink); }
.tp-page .tp-search-status.is-ready::before { content: "\f00c"; color: #2f7d4f; }
.tp-page .tp-search-status.is-error { color: var(--tp-error); }
.tp-page .tp-search-status.is-error::before { content: "\f06a"; }

.tp-page .tp-search-btn.is-busy { cursor: progress; opacity: .85; }
.tp-page .tp-search-btn.is-busy i { animation: fa-spin 1s linear infinite; }
.tp-page .tp-search-btn.is-busy i::before { content: "\f110"; }

@media (max-width: 767.98px) {
    .tp-page .tp-loc-error { position: static; margin-top: 6px; }
    .tp-page .tp-search-form:has(.tp-loc.is-invalid) { padding-bottom: 0; }
}

/* ---- rota değişti: fiyatlar güncel değil ------------------------------- */
.tp-page .tp-stale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
    padding: 12px 14px 12px 18px;
    background: #fff4e5;
    border: 1px solid #f1c48a;
    border-radius: 16px;
}
.tp-page .tp-stale[hidden] { display: none; }
.tp-page .tp-stale-text { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 600; color: #7a4310; }
.tp-page .tp-stale-text i { margin-top: 3px; color: #c46a12; }
.tp-page .tp-stale-btn { height: 44px; }
.tp-page .tp-results.is-stale .tp-route-bar,
.tp-page .tp-results.is-stale .tp-offers { opacity: .55; filter: grayscale(.35); }
.tp-page .tp-offer-cta[disabled] { cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- yolcu sayısı +/- ------------------------------------------------------ */
.tp-wizard .tp-stepper {
    display: flex;
    align-items: stretch;
    height: 48px;
    background: #fff;
    border: 1.5px solid var(--tp-field-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tp-wizard .tp-stepper:focus-within { border-color: var(--tp-accent-ink); box-shadow: var(--tp-ring); }
.tp-wizard .has-error .tp-stepper { border-color: var(--tp-error); }
.tp-wizard .tp-stepper-btn {
    flex: none;
    width: 48px;
    border: 0;
    background: var(--tp-soft);
    color: var(--tp-accent-ink);
    font-size: .85rem;
    transition: background-color .15s ease;
}
.tp-wizard .tp-stepper-btn:hover { background: var(--tp-beige); }
.tp-wizard .tp-stepper-btn:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: -3px; }
#wizardForm.tp-wizard #smartwizard .tp-stepper .form-control {
    height: 100%;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    box-shadow: none;
    -moz-appearance: textfield;
}
#wizardForm.tp-wizard #smartwizard .tp-stepper .form-control::-webkit-outer-spin-button,
#wizardForm.tp-wizard #smartwizard .tp-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- taslak geri yüklendi bildirimi --------------------------------------- */
.tp-wizard .tp-draft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -8px 0 18px;
    padding: 8px 10px 8px 14px;
    font-size: .8125rem;
    color: var(--tp-text);
    background: #f3f7f1;
    border: 1px solid #d5e4cf;
    border-radius: 12px;
}
.tp-wizard .tp-draft[hidden] { display: none; }
.tp-wizard .tp-draft span { display: flex; align-items: center; gap: 8px; }
.tp-wizard .tp-draft i { color: #2f7d4f; }
.tp-wizard .tp-draft-clear {
    flex: none;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-weight: 600;
    color: var(--tp-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tp-wizard .tp-draft-clear:hover { background: rgba(65, 37, 10, .06); }
.tp-wizard.tp-is-final .tp-draft { display: none; }

/* ---- önizleme: ödeme notu --------------------------------------------------- */
.tp-wizard .tp-pay-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 4px 0;
    font-size: .8125rem;
    color: var(--tp-muted);
}
.tp-wizard .tp-pay-note i { margin-top: 3px; color: var(--tp-accent); }
@media (max-width: 575.98px) {
    .tp-wizard .tp-sum-lines { margin: 0 16px; }
}

/* ---- oturum süresi doldu (modal) ------------------------------------------- */
.tp-wizard.tp-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 12px 32px;
    text-align: center;
}
.tp-wizard .tp-expired-ico {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tp-beige);
    color: var(--tp-accent-ink);
    font-size: 1.5rem;
}
.tp-wizard .tp-expired-text { max-width: 26rem; margin: 0; font-size: 1rem; font-weight: 500; color: var(--tp-ink); }

/* ---- ödeme sonrası onay sayfası --------------------------------------------- */
.tp-page .tp-btn--ghost {
    --bs-btn-color: var(--tp-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--tp-line);
    --bs-btn-hover-color: var(--tp-ink);
    --bs-btn-hover-bg: var(--tp-soft);
    --bs-btn-hover-border-color: #dcc7aa;
    --bs-btn-active-bg: var(--tp-beige);
    --bs-btn-active-border-color: #dcc7aa;
    border-width: 1.5px;
}
.tp-page .tp-done { padding: 48px 0 56px; }
.tp-page .tp-done-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 32px 36px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 24px;
    box-shadow: var(--tp-shadow-lg);
}
.tp-page .tp-done-ico {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #e8f3ec;
    color: #2f7d4f;
    font-size: 1.75rem;
    box-shadow: 0 0 0 8px #f3f9f5;
}
.tp-page .tp-done-lead { margin: 10px 0 0; font-size: 1.05rem; font-weight: 600; color: var(--tp-ink); }
.tp-page .tp-done-text { margin: 8px 0 0; color: var(--tp-muted); }
.tp-page .tp-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.tp-page .tp-done-actions .tp-btn { min-width: 180px; height: 50px; }
@media (max-width: 575.98px) {
    .tp-page .tp-done-card { padding: 32px 20px 28px; border-radius: 20px; }
    .tp-page .tp-done-actions .tp-btn { width: 100%; }
}

/* ---- telefonda yüzen WhatsApp / yukarı butonları içerik ve butonları kapatmasın ---- */
@media (max-width: 575.98px) {
    .tp-body .whatsapp-single { width: 52px; height: 52px; padding: 7px; left: 16px; bottom: 16px; animation: none; }
    .tp-body .whatsapp-single .fa-3x { font-size: 2.25em; }
    .tp-body #return-to-top { right: 16px; bottom: 16px; }
    .tp-page .tp-content { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-body .whatsapp-single { animation: none; }
}