/* =====================================================================
   TOUR PAYMENT REDESIGN  (cp2)  — car-payment (cp2) konseptinin tur portu
   ---------------------------------------------------------------------
   Araç ödeme sayfasının (car/static/css/car/payment/redesign.css) BİREBİR
   portudur: yalnızca kök scope sınıfı `.car-payment-wrap` → `.tour-payment-wrap`
   olarak uyarlanmıştır; tüm iç sınıf adları (cp2-*, car-check, car-pay-card,
   car-confirm-card, cp2-paybar, cp2-agree ...) araçtakiyle AYNI tutulmuştur.
   Container genişliği, sütun genişlikleri (1fr / 388px), gap (24px), font
   (Manrope), tokenlar, kart/input/buton stilleri araç ile aynıdır.

   Mevcut legacy checkout markup'ı (.payment-card / .card-title-payment /
   .form-control / .btn-payment) DEĞİŞMEDEN yeniden stillenir; hiçbir Alpine
   binding, element id, name, jquery.card / MsDropdown selektörü ya da DOM
   yapısına dokunulmaz. Bu katman `tour/payment/base.css` [tp2] taban
   katmanının ÜSTÜNE yüklenir (payment.html cdn_style) ve çakışan kuralları
   ezer; base.css'in tur'a özgü kısımları (date-picker, ms-dropdown, gender
   invalid, .tur-sk skeleton, priceTable, rating-box) korunur.

   Marka kırmızısı var(--secondary-color)'a bağlıdır (web skin #db2e1c) →
   platform temasını izler.

   SCOPE GUARANTEE: her kural `.tour-payment-wrap` altında iç içedir — yalnızca
   tour/templates/tour/payment.html bu container'ı render eder. Başka hiçbir
   sayfa `.tour-payment-wrap` render etmez → sızıntı imkânsız. Bu scope'u
   hiçbir selektörden KALDIRMA.
   ===================================================================== */

.tour-payment-wrap {
    --cp2-red: var(--secondary-color, #db2e1c);
    --cp2-red-deep: var(--secondary-color-dark, #b11f14);
    --cp2-tint: #fce9e7;
    --cp2-tint-2: #fcefec;
    --cp2-ink: #1c1c24;
    --cp2-muted: #8a8f98;
    --cp2-muted-2: #6b6f76;
    --cp2-line: #ececef;
    --cp2-card: #fff;
    --cp2-field: #fff;
    --cp2-ok: #1e9e5a;
    --cp2-ok-tint: #e7f6ee;
    --cp2-slate: #2b2b33;
    --cp2-shadow: 0 6px 24px rgba(20, 20, 30, 0.05);
    --cp2-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    font-family: var(--cp2-font);
    color: var(--cp2-ink);
}

/* =====================================================================
   TWO-COLUMN CHECKOUT LAYOUT  (uçak fp2 / otobüs bup2 deseninin araca portu)
   ---------------------------------------------------------------------
   SOL (.cp2-main) → sürücü/iletişim + ekstra ürünler + sözleşme + fatura +
                     ödeme/kart + onay (mevcut .payment-card dili)
   SAĞ (.cp2-side) → araç/rezervasyon özeti + fiyat dökümü + kupon (sticky)
   Sütun-içi kart aralıkları mevcut .payment-card'ın 16px alt marjıyla
   verilir; grid'e flex-gap eklemeye gerek yok (otobüs emsali).
   ===================================================================== */
.tour-payment-wrap .cp2-page {
    display: grid;
    grid-template-columns: 1fr 388px;
    gap: 24px;
    align-items: start;
    padding-bottom: 120px;
}

.tour-payment-wrap .cp2-main {
    min-width: 0;
}

.tour-payment-wrap .cp2-side {
    position: sticky;
    top: 22px;
    min-width: 0;
}

/* sütun içeriğini taşıyan nötr sarmalayıcılar (eski col-4 yerine) */
.tour-payment-wrap .cp2-block {
    min-width: 0;
}

/* =====================================================================
   CARD SHELL
   ===================================================================== */
.tour-payment-wrap .payment-card {
    background: var(--cp2-card);
    /* several cards carry .border-0 (!important) — assert the token hairline
       on all of them so the whole checkout reads as one card system */
    border: 1px solid var(--cp2-line) !important;
    border-radius: 16px;
    box-shadow: var(--cp2-shadow);
    color: var(--cp2-ink);
    font-family: var(--cp2-font);
    margin-bottom: 16px;
    overflow: visible;
}

.tour-payment-wrap .payment-card .card-body {
    padding: 20px 22px;
}

/* the summary/coupon cards in the sticky right rail hold no dropdowns, so
   clip them for crisp rounded corners on the dark total footer */
.tour-payment-wrap .right-bar .payment-card {
    overflow: hidden;
}

/* =====================================================================
   SECTION HEAD (.card-title-payment) — red inline icon + 800 title
   Card headers are always a direct child of .payment-card; the payment
   column also emits ONE standalone "Payment Options" title (not inside a
   card) — styled separately below.
   ===================================================================== */
.tour-payment-wrap .payment-card > .card-title-payment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    margin: 0;
    border-bottom: 1px solid var(--cp2-line);
    font-family: var(--cp2-font);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--cp2-ink);
    text-align: left;
}

.tour-payment-wrap .card-title-payment > i,
.tour-payment-wrap .card-title-payment > div > i {
    color: var(--cp2-red);
    font-size: 17px;
}

/* header may carry a right-aligned action (Change / Select Driver) */
.tour-payment-wrap .card-title-payment .ms-auto,
.tour-payment-wrap .card-title-payment [user-ui-logged-in] {
    font-size: 12.5px;
    font-weight: 700;
}

/* the "Change" link in the summary head */
.tour-payment-wrap .card-title-payment a {
    color: var(--cp2-red);
    font-weight: 700;
    text-decoration: none;
}

.tour-payment-wrap .card-title-payment a:hover {
    color: var(--cp2-red-deep);
}

/* standalone "Payment Options" title above the card visual */
.tour-payment-wrap .cp2-block > .card-title-payment {
    padding: 0 2px;
    margin: 0 0 10px;
    border-bottom: 0;
    font-family: var(--cp2-font);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--cp2-ink);
}

.tour-payment-wrap .car-pay-card {
    margin-top: 0 !important;
}

/* =====================================================================
   ÖDEME + ONAY = TEK SÜREKLİ KART (tasarım: başlık → form/kart → onaylar →
   uyarı → paybar hepsi tek kart). İki ayrı .payment-card kabuğu (car-pay-card
   + car-confirm-card) görsel olarak birleştirilir: aradaki kenarlık/boşluk
   kaldırılır, üst kart yalnız üstten, alt kart yalnız alttan yuvarlatılır.
   Onaylar bölümünü ayıran ince çizgi, onay kartının card-body üst kenarlığıdır
   (tasarımdaki .consents border-top).
   ===================================================================== */
/* ui.css [tp2] .payment-card kuralı sonradan yüklenip border-radius:16px
   shorthand'iyle köşe-sıfırlamayı ezdiğinden, birleştirme kuralları
   .tp2-page ile scope'lanır ve köşeler !important ile sabitlenir. */
.tour-payment-wrap.tp2-page .car-pay-card {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none;
}

.tour-payment-wrap.tp2-page .car-confirm-card {
    margin-top: 0 !important;
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.tour-payment-wrap.tp2-page .car-confirm-card > .card-body {
    border-top: 1px solid var(--cp2-line);
}

/* Pasaport üçlüsünde (uyruk / no / geçerlilik) geçerlilik başlığı label +
   "Belirsiz" toggle'ı taşıdığı için daha yüksek; input'ları alta hizala. */
.tour-payment-wrap.tp2-page .passport-row {
    align-items: flex-end;
}

/* =====================================================================
   FORM FIELDS
   ===================================================================== */
.tour-payment-wrap .form-group,
.tour-payment-wrap .payment-card .form-group {
    margin-bottom: 16px;
}

.tour-payment-wrap .form-label,
.tour-payment-wrap .payment-card .form-group .form-label {
    display: block;
    font-family: var(--cp2-font);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    color: var(--cp2-ink);
    margin-bottom: 7px;
}

.tour-payment-wrap .form-control,
.tour-payment-wrap .payment-card .form-control,
.tour-payment-wrap .form-select {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--cp2-line);
    border-radius: 11px;
    padding: 0 15px;
    font-family: var(--cp2-font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cp2-ink);
    background: var(--cp2-field);
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tour-payment-wrap .form-control::placeholder,
.tour-payment-wrap .payment-card .form-control::placeholder {
    color: #b7bac0;
    font-weight: 600;
    font-size: 14px;
}

.tour-payment-wrap .form-control:focus,
.tour-payment-wrap .form-select:focus {
    border-color: var(--cp2-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp2-red) 10%, transparent);
}

/* native <select> here uses .form-select .form-control; skin the chevron */
.tour-payment-wrap .form-select,
.tour-payment-wrap select.form-control {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 40px;
}

.tour-payment-wrap .form-control:disabled,
.tour-payment-wrap .form-control[readonly] {
    background-color: #f3f3f5;
    opacity: 1;
}

.tour-payment-wrap .form-control.is-invalid,
.tour-payment-wrap .form-select.is-invalid {
    border-color: #e74c3c;
}

.tour-payment-wrap small.text-muted {
    display: block;
    font-size: 11px;
    color: var(--cp2-muted);
    font-weight: 400;
    margin-top: 7px;
    line-height: 1.4;
}

/* phone code + phone number split — keep rounded corners on both parts */
.tour-payment-wrap .input-group {
    flex-wrap: nowrap;
    gap: 10px;
}

.tour-payment-wrap .input-group > .form-control,
.tour-payment-wrap .input-group > .form-select {
    border-radius: 11px !important;
}

.tour-payment-wrap .input-group .invalid-feedback {
    flex-basis: 100%;
}

/* the phone-code <select> overrides its own radius inline (0 on the right);
   the token look still applies. MsDropdown-rendered box height */
.tour-payment-wrap .payment-card .form-control.ms-dd.ms-pr,
.tour-payment-wrap .form-control.ms-dd.ms-pr {
    height: 48px;
    border-radius: 11px !important;
    padding: 0;
}

/* =====================================================================
   CHECKBOXES / RADIOS — brand-red rounded square + white check
   base/ui/checkbox.css + web/ui/payment.css paint these with the dark
   --primary-color !important, so re-assert the brand look with !important
   (toggle switches, if any, keep their pill shape).
   ===================================================================== */
.tour-payment-wrap .form-check-input[type="checkbox"]:not([role="switch"]),
.tour-payment-wrap .form-check-input[type="radio"] {
    border: 2px solid #cfd2d8;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
}

.tour-payment-wrap .form-check-input[type="checkbox"]:not([role="switch"]):checked,
.tour-payment-wrap .form-check-input[type="radio"]:checked {
    background-color: var(--cp2-red) !important;
    border-color: var(--cp2-red) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-size: 0.72em !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.tour-payment-wrap .form-check-input[type="radio"]:checked::before {
    display: none !important;
}

.tour-payment-wrap .form-check-input:focus {
    border-color: var(--cp2-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp2-red) 12%, transparent);
}

.tour-payment-wrap .form-switch .form-check-input {
    width: 34px;
    border-radius: 999px;
}

.tour-payment-wrap .form-check-label {
    font-family: var(--cp2-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cp2-ink);
}

/* =====================================================================
   CONTACT INFO NOTE BANNER (.payment-info-banner)
   ===================================================================== */
/* .tp2-page ile birlikte scope'lanır: ui.css'in eşit-özgüllüklü [tp2]
   banner kuralları style bloğunda (cdn_style'dan sonra) yüklendiği için
   yalnız yükleme sırasıyla kazanılamaz — özgüllük yükseltilir. */
.tour-payment-wrap.tp2-page .payment-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--pay-note-border, #bfe3cd);
    background: var(--pay-note-bg, #eef8f2);
    border-radius: 13px;
    padding: 14px 18px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.tour-payment-wrap.tp2-page .payment-info-banner img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 0;
}

.tour-payment-wrap.tp2-page .payment-info-banner span {
    font-family: var(--cp2-font);
    font-size: 13px;
    color: var(--pay-note-ink, #127a4b);
    font-weight: 600;
    line-height: 1.45;
}

/* =====================================================================
   QUICK SIGN-UP BAND (.cp2-quick) — uçak fp2-quick / otobüs bup2-quick emsali
   Ortak quick_signup_banner include'u yerine araca özel satır-içi bant:
   gradyan tint zemin, kırmızı user-plus ikon kutusu, başlık+açıklama, koyu
   "Üye Ol" butonu. (kabuk yok → radius/shadow/margin kuralın kendisinde)
   ===================================================================== */
.tour-payment-wrap .cp2-quick {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(100deg, #fff6f5, #ffffff 60%);
    border: 1px solid var(--cp2-tint);
    border-radius: 16px;
    box-shadow: var(--cp2-shadow);
    margin-bottom: 16px;
    font-family: var(--cp2-font);
}

.tour-payment-wrap .cp2-quick-ic {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--cp2-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap .cp2-quick-ic .cp2-svg {
    width: 24px;
    height: 24px;
}

.tour-payment-wrap .cp2-quick-main {
    flex: 1;
    min-width: 220px;
}

.tour-payment-wrap .cp2-quick-main h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: var(--cp2-ink);
}

.tour-payment-wrap .cp2-quick-main p {
    margin: 0;
    font-size: 13px;
    color: var(--cp2-muted-2);
    font-weight: 600;
    line-height: 1.45;
}

.tour-payment-wrap .cp2-quick-btn {
    border: 0;
    background: var(--cp2-slate);
    color: #fff;
    font-family: var(--cp2-font);
    font-weight: 800;
    font-size: 14.5px;
    padding: 12px 28px;
    border-radius: 11px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s;
}

.tour-payment-wrap .cp2-quick-btn:hover {
    background: #15151a;
    color: #fff;
}

/* =====================================================================
   RIGHT RAIL — reservation summary card (.cp2-sum)
   ---------------------------------------------------------------------
   rezervasyon-ozeti-kart-design.html'in birebir portu. Kart kabuğu
   (.payment-card) hairline/radius/shadow'u ortak kart sisteminden alır;
   burada yalnızca kartın İÇ düzeni tanımlanır. Bölümler token hairline ile
   ayrılır, koyu Toplam bloğu kart içinde inset yüzer.
   ===================================================================== */
.tour-payment-wrap .cp2-sum {
    padding: 0;
    overflow: hidden;
    font-family: var(--cp2-font);
    color: var(--cp2-ink);
}

/* — başlık: ikon kutusu + başlık + Değiştir pill — */
.tour-payment-wrap .cp2-sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-sum-head-l {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tour-payment-wrap .cp2-sum-head-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--cp2-tint);
    color: var(--cp2-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap .cp2-sum-head-ic .cp2-svg {
    width: 19px;
    height: 19px;
}

.tour-payment-wrap .cp2-sum-head-t {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.tour-payment-wrap .cp2-sum-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--cp2-red);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.tour-payment-wrap .cp2-sum-change:hover {
    background: var(--cp2-tint-2);
    color: var(--cp2-red-deep);
}

.tour-payment-wrap .cp2-sum-change .cp2-svg {
    width: 14px;
    height: 14px;
}

/* — araç: görsel + ad + paket rozeti — */
.tour-payment-wrap .cp2-sum-veh {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-sum-veh-img {
    width: 108px;
    height: 66px;
    border-radius: 10px;
    background: #fafafb;
    border: 1px solid var(--cp2-line);
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-payment-wrap .cp2-sum-veh-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.tour-payment-wrap .cp2-sum-veh-info {
    min-width: 0;
}

.tour-payment-wrap .cp2-sum-veh-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.tour-payment-wrap .cp2-sum-veh-pkg {
    display: inline-flex;
    /* inline-flex metin boşluklarını yutar; "EKONOMİ PAKET" arası gap ile açılır */
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp2-red);
    background: var(--cp2-tint);
    border-radius: 999px;
    padding: 4px 10px;
    margin-top: 7px;
}

/* — alış / teslim dikey rayı — */
.tour-payment-wrap .cp2-sum-legs {
    padding: 14px 22px;
    border-bottom: 1px solid var(--cp2-line);
    display: flex;
    flex-direction: column;
}

.tour-payment-wrap .cp2-sum-leg {
    display: flex;
    gap: 12px;
}

.tour-payment-wrap .cp2-sum-leg-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 12px;
    padding-top: 4px;
}

.tour-payment-wrap .cp2-sum-leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2.5px solid var(--cp2-red);
    background: #fff;
    flex: 0 0 auto;
}

.tour-payment-wrap .cp2-sum-leg:last-child .cp2-sum-leg-dot {
    background: var(--cp2-red);
}

.tour-payment-wrap .cp2-sum-leg-line {
    flex: 1;
    width: 2px;
    background: repeating-linear-gradient(180deg, #e8c9c5 0 4px, transparent 4px 8px);
    margin: 3px 0;
    min-height: 18px;
}

.tour-payment-wrap .cp2-sum-leg-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 14px;
}

.tour-payment-wrap .cp2-sum-leg:last-child .cp2-sum-leg-body {
    padding-bottom: 0;
}

.tour-payment-wrap .cp2-sum-lab {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--cp2-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tour-payment-wrap .cp2-sum-labrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tour-payment-wrap .cp2-sum-place {
    font-size: 14px;
    font-weight: 800;
    margin-top: 3px;
}

.tour-payment-wrap .cp2-sum-when {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cp2-muted-2);
    margin-top: 1px;
}

.tour-payment-wrap .cp2-sum-side {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--cp2-muted-2);
    background: #f6f6f8;
    border-radius: 999px;
    padding: 4px 11px;
    flex: 0 0 auto;
}

/* — koşul kutuları (3 sütun) — */
.tour-payment-wrap .cp2-sum-conds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-sum-cond {
    padding: 13px 10px 12px;
    text-align: center;
    border-right: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-sum-cond:last-child {
    border-right: 0;
}

.tour-payment-wrap .cp2-sum-cond-ic {
    display: flex;
    justify-content: center;
    color: var(--cp2-red);
    margin-bottom: 6px;
}

.tour-payment-wrap .cp2-sum-cond-ic .cp2-svg {
    width: 17px;
    height: 17px;
}

.tour-payment-wrap .cp2-sum-cond-v {
    font-size: 14px;
    font-weight: 800;
}

.tour-payment-wrap .cp2-sum-cond-k {
    font-size: 10px;
    font-weight: 800;
    color: var(--cp2-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* — fiyat dökümü satırları — */
.tour-payment-wrap .cp2-sum-prices {
    padding: 14px 22px 16px;
}

.tour-payment-wrap .cp2-sum-prow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp2-muted-2);
}

.tour-payment-wrap .cp2-sum-prow b {
    color: var(--cp2-ink);
    font-weight: 800;
    font-size: 13.5px;
}

.tour-payment-wrap .cp2-sum-prow.is-sub {
    font-size: 12.5px;
}

.tour-payment-wrap .cp2-sum-prow-ic {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-payment-wrap .cp2-sum-prow-ic .cp2-svg {
    width: 14px;
    height: 14px;
    color: var(--cp2-muted);
}

/* — koyu Toplam bloğu (inset) — */
.tour-payment-wrap .cp2-sum-total {
    background: var(--cp2-ink);
    border-radius: 14px;
    margin: 0 14px 14px;
    padding: 16px 18px;
    color: #fff;
}

.tour-payment-wrap .cp2-sum-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tour-payment-wrap .cp2-sum-total-lab {
    font-size: 14px;
    font-weight: 800;
}

.tour-payment-wrap .cp2-sum-total-val {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: right;
}

.tour-payment-wrap .cp2-sum-split {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 13px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tour-payment-wrap .cp2-sum-srow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

.tour-payment-wrap .cp2-sum-srow-k {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-payment-wrap .cp2-sum-srow-k .cp2-svg {
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, 0.55);
}

.tour-payment-wrap .cp2-sum-srow b {
    color: #fff;
    font-weight: 800;
}

.tour-payment-wrap .cp2-sum-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-top: 12px;
}

.tour-payment-wrap .cp2-sum-note .cp2-svg {
    width: 13px;
    height: 13px;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.45);
}

/* =====================================================================
   COUPON CARD (shared include)
   ===================================================================== */
.tour-payment-wrap .coupon-input-area .input-group .form-control {
    border-radius: 11px 0 0 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.tour-payment-wrap .coupon-input-area .input-group .btn {
    border-radius: 0 11px 11px 0 !important;
    background-color: var(--cp2-red) !important;
    color: #fff !important;
    font-family: var(--cp2-font);
    font-weight: 800 !important;
    white-space: nowrap;
}

/* =====================================================================
   EXTRA PRODUCTS list cards
   ===================================================================== */
.tour-payment-wrap .payment-card .card.rounded-3.border {
    border: 1.5px solid var(--cp2-line) !important;
    border-radius: 13px !important;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.tour-payment-wrap .payment-card .card.rounded-3.border:hover {
    border-color: var(--cp2-red) !important;
}

/* =====================================================================
   PAYMENT OPTIONS — kart-içi başlık + 2 sütun paygrid + kart önizleme +
   SSL rozeti + taksit notu (uçak fp2 / otobüs bup2 paritesi)
   ===================================================================== */
.tour-payment-wrap .cp2-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-card-head .cp2-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--cp2-tint);
    color: var(--cp2-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap .cp2-card-head .cp2-ic .cp2-svg {
    width: 19px;
    height: 19px;
}

.tour-payment-wrap .cp2-card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--cp2-ink);
}

/* 2 sütun: form alanları (sol) | kart önizleme + SSL (sağ) */
.tour-payment-wrap .cp2-paygrid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 26px;
    align-items: start;
}

.tour-payment-wrap .cp2-cc-side {
    min-width: 0;
}

.tour-payment-wrap .cp2-cc-wrap {
    width: 100%;
}

.tour-payment-wrap .cp2-cc-wrap .card-wrapper,
.tour-payment-wrap .card-wrapper {
    min-height: 172px;
    display: flex;
    justify-content: center;
}

.tour-payment-wrap .cp2-cc-wrap .card-wrapper .jp-card-container,
.tour-payment-wrap .card-wrapper .jp-card-container {
    transform: scale(0.82);
    transform-origin: top center;
}

/* ---------------------------------------------------------------------
   KOYU / ALTIN-ÇİPLİ KART GÖRÜNÜMÜ  (jquery.card canlı önizlemesi korunur)
   ---------------------------------------------------------------------
   Tasarımın koyu gradyan + altın çipli kartına, jquery.card'ın KENDİ DOM
   sınıfları (.jp-card-front/.jp-card-back/.jp-card-shiny) üzerinden salt CSS
   ile yaklaşılır. .card-wrapper + init selektörleri, marka tespiti, CVC'de
   kart çevirme gibi canlı davranışların HİÇBİRİNE dokunulmaz.

   jquery.card kendi <style>'ını runtime enjekte ettiğinden (default front/back
   bg #ddd; identified'da rgba(0,0,0,.5) + marka rengi :before'da), koyu görünüm
   !important ile hem boş hem marka-tespitli durumda sabitlenir; :before dokusu
   korunur ama marka rengi bastırılır ki gradyan görünsün.
   NOT: tasarımdaki sol-üst çip konumu ve Zenrota yıldızı jquery.card DOM'unda
   birebir karşılığı olmadığından uygulanmaz (çip eklentinin kendi konumunda
   altın renklenir; sağ-üstte marka logosu — tespit edilince — kalır).
   --------------------------------------------------------------------- */
.tour-payment-wrap .card-wrapper .jp-card {
    box-shadow: 0 12px 28px rgba(20, 20, 30, 0.22);
    font-family: var(--cp2-font);
}

.tour-payment-wrap .card-wrapper .jp-card .jp-card-front,
.tour-payment-wrap .card-wrapper .jp-card .jp-card-back {
    background: linear-gradient(145deg, #2a2a33, #17171d) !important;
}

/* identified durumda :before marka rengini şeffaflaştır → gradyan + ince doku */
.tour-payment-wrap .card-wrapper .jp-card.jp-card-identified .jp-card-front:before,
.tour-payment-wrap .card-wrapper .jp-card.jp-card-identified .jp-card-back:before {
    background-color: transparent !important;
}

/* okunur beyaz metin (koyu zeminde) — odaklı alan eklentice 1 opaklığa çıkar */
.tour-payment-wrap .card-wrapper .jp-card .jp-card-display {
    color: #fff;
    opacity: 0.85;
}

/* gri çip (.jp-card-shiny) → altın gradyan çip */
.tour-payment-wrap .card-wrapper .jp-card .jp-card-shiny {
    background: linear-gradient(145deg, #e8c77d, #c9a24f) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tour-payment-wrap .card-wrapper .jp-card .jp-card-shiny:before {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* taksit bilgi notu (tasarım .taksit): kırmızı kart ikonu + koyu-gri metin */
.tour-payment-wrap .cp2-install-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cp2-muted-2);
    line-height: 1.4;
}

.tour-payment-wrap .cp2-install-note .cp2-svg {
    width: 15px;
    height: 15px;
    color: var(--cp2-red);
}

.tour-payment-wrap .cp2-install-note .card-text-payment {
    color: var(--cp2-muted-2);
    font-weight: 700;
}

/* SSL güvence kutusu (tasarım .ssl): yeşil tint zeminli kutu, satır-içi yeşil
   kalkan ikonu + yeşil metin. Metin mevcut Comodo blocktrans'ı korur (çevirili);
   tasarımın "256 Bit SSL" ifadesiyle sözcük farkı vardır (bkz. rapor). */
.tour-payment-wrap .cp2-ssl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    background: #eff8f2;
    border-radius: 12px;
    padding: 13px 15px;
}

.tour-payment-wrap .cp2-ssl-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp2-ok);
    flex: 0 0 auto;
    margin-top: 1px;
}

.tour-payment-wrap .cp2-ssl-ic .cp2-svg {
    width: 17px;
    height: 17px;
}

.tour-payment-wrap .cp2-ssl span {
    font-size: 12px;
    color: #2a6844;
    font-weight: 700;
    line-height: 1.5;
}

.tour-payment-wrap .cp2-ssl span .text-capitalize {
    font-weight: 800;
}

.tour-payment-wrap .cp2-ssl b {
    color: #1f5537;
    font-weight: 800;
}

/* inline Lucide ikon seti (FA yerine) — temel boyut + inline hizalama */
.tour-payment-wrap .cp2-svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    stroke-width: 2;
}

/* =====================================================================
   CONFIRM SECTION — onay tikleri, uyarı, paybar (tasarım .consents/.warn/.paybar)
   ===================================================================== */
/* onaylar: tasarımın kırmızı-tik custom görünümü, mevcut native checkbox +
   conditionalCheck (x-ref/id_condition/id_rental_agreement → modal) mekanizması
   üzerine yalnız CSS ile. Kutu 20px, yuvarlak köşe; işaretli halde kırmızı tik
   (redesign.css checkbox skin'inden). ui.css'in 18px/12px değerlerini ezer. */
.tour-payment-wrap .car-confirm-checks {
    gap: 12px;
}

.tour-payment-wrap .car-check {
    grid-template-columns: 20px 1fr;
    column-gap: 11px;
    align-items: start;
    cursor: pointer;
}

/* ui.css [tp2] form-check-input kuralı !important taşıdığı için araç
   paritesindeki 20px/7px ölçüler de !important ile sabitlenir. */
.tour-payment-wrap .car-check .car-check-input {
    width: 20px !important;
    height: 20px !important;
    margin: 1px 0 0 0;
    border-radius: 7px !important;
}

.tour-payment-wrap .car-check .car-check-label {
    font-family: var(--cp2-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cp2-muted-2);
    line-height: 1.5;
}

/* amber uyarı kutusu (tasarım .warn) — amber palet ui.css'ten gelir; burada
   yalnız köşe/iç boşluk/tipografi + satır-içi Lucide üçgen ikon rengi. */
.tour-payment-wrap .car-confirm-warning {
    border-radius: 12px;
    padding: 13px 15px;
    font-family: var(--cp2-font);
    font-size: 12.5px;
    line-height: 1.5;
}

.tour-payment-wrap .car-confirm-warning .cp2-svg {
    width: 16px;
    height: 16px;
    color: #d9962a;
    margin-top: 1px;
}

/* ---------------------------------------------------------------------
   PAYBAR (tasarım .paybar): tek yatay tint şerit — SOL "Şimdi ödenecek tutar"
   etiketi (+ varsa kapıda-teslim notu), SAĞ tutar + "Ödemeyi Yap" butonu.
   Değer/koşul/submit davranışı markup'ta birebir korunur; burada yalnız düzen.
   --------------------------------------------------------------------- */
.tour-payment-wrap .cp2-paybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: 16px;
    background: var(--cp2-tint-2);
    border-radius: 14px;
    padding: 14px 14px 14px 20px;
}

.tour-payment-wrap .cp2-paybar-info {
    min-width: 0;
}

.tour-payment-wrap .cp2-paybar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--cp2-ink);
}

.tour-payment-wrap .cp2-paybar-label .cp2-svg {
    width: 18px;
    height: 18px;
    color: var(--cp2-red);
}

.tour-payment-wrap .cp2-paybar-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cp2-muted-2);
    line-height: 1.4;
}

.tour-payment-wrap .cp2-paybar-note .cp2-svg {
    width: 13px;
    height: 13px;
    color: var(--cp2-red);
}

.tour-payment-wrap .cp2-paybar-r {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.tour-payment-wrap .cp2-paybar-amount {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp2-red);
    white-space: nowrap;
}

/* "Ödemeyi Yap" — paybar içinde auto-genişlik kırmızı CTA (kilit ikonu + metin).
   ui.css / web-payment.css genişlik-100 ve gradyanını ezer; submit davranışı
   (type=submit, @click=setNextType('payment')) markup'ta korunur. */
.tour-payment-wrap .cp2-paybar .car-pay-submit,
.tour-payment-wrap .cp2-paybar .btn.btn-payment.car-pay-submit {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border: 0;
    border-radius: 12px;
    background: var(--cp2-red);
    background-image: none;
    color: #fff;
    font-family: var(--cp2-font);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cp2-red) 28%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tour-payment-wrap .cp2-paybar .car-pay-submit:hover,
.tour-payment-wrap .cp2-paybar .btn.btn-payment.car-pay-submit:hover {
    background: var(--cp2-red-deep);
    background-image: none;
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--cp2-red) 36%, transparent);
}

.tour-payment-wrap .cp2-paybar .car-pay-submit .cp2-svg {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke-width: 2.2;
}

/* paybar → dar ekranda dikey: bilgi üstte, tutar+buton altta yan yana */
@media (max-width: 575.98px) {
    .tour-payment-wrap .cp2-paybar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .tour-payment-wrap .cp2-paybar-r {
        margin-left: 0;
        justify-content: space-between;
    }
    .tour-payment-wrap .cp2-paybar-amount {
        font-size: 23px;
    }
}

/* =====================================================================
   AGREEMENT + INVOICE — iki yarımlı TEK kart (sözleşme | fatura)
   ---------------------------------------------------------------------
   sozlesme-fatura-kart-design.html portu. Kabuk (.payment-card) hairline/
   radius/shadow'u ortak kart sisteminden gelir; burada yalnızca iki-yarım
   grid + yarım-içi düzen tanımlanır. SOL yarım (kira sözleşmesi) Alpine
   x-if ile koşulludur; yoksa .cp2-agree--single ile SAĞ yarım (fatura) tüm
   genişliği alır ve aradaki dikey hairline kalkar. Mobilde alt alta iner,
   ayraç yatay hairline'a döner.
   ===================================================================== */
.tour-payment-wrap .cp2-agree-card {
    overflow: hidden;
}

.tour-payment-wrap .cp2-agree {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.tour-payment-wrap .cp2-agree.cp2-agree--single {
    grid-template-columns: 1fr;
}

.tour-payment-wrap .cp2-agree-half {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px;
    min-width: 0;
}

/* SOL | SAĞ ayracı — dikey hairline SAĞ yarımın sol kenarında; tek yarımda kalkar */
.tour-payment-wrap .cp2-agree-half--invoice {
    border-left: 1px solid var(--cp2-line);
}

.tour-payment-wrap .cp2-agree.cp2-agree--single .cp2-agree-half--invoice {
    border-left: 0;
}

/* Tur: tek-yarım fatura kartı KOMPAKT yatay düzen — solda ikon+başlık+açıklama
   (.cp2-agree-info), sağda aksiyon pill'leri; dikey dolgu yarıya iner. */
.tour-payment-wrap .cp2-agree--single .cp2-agree-half--invoice {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 24px;
}

.tour-payment-wrap .cp2-agree--single .cp2-agree-half--invoice .cp2-agree-info {
    min-width: 0;
}

.tour-payment-wrap .cp2-agree--single .cp2-agree-half--invoice .cp2-agree-desc {
    margin: 5px 0 0;
}

.tour-payment-wrap .cp2-agree--single .cp2-agree-half--invoice .cp2-agree-act {
    margin-top: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

@media (max-width: 767.98px) {
    .tour-payment-wrap .cp2-agree--single .cp2-agree-half--invoice {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* — yarım başlığı: ikon kutusu + başlık (+ küçük alt not) — */
.tour-payment-wrap .cp2-agree-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tour-payment-wrap .cp2-agree-ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--cp2-tint);
    color: var(--cp2-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap .cp2-agree-ic .cp2-svg {
    width: 20px;
    height: 20px;
}

.tour-payment-wrap .cp2-agree-t {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--cp2-ink);
}

.tour-payment-wrap .cp2-agree-t small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cp2-muted);
    letter-spacing: 0;
    margin-top: 3px;
}

/* — açıklama satırı — */
.tour-payment-wrap .cp2-agree-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--cp2-muted-2);
    line-height: 1.55;
    margin: 12px 0 16px;
}

/* — aksiyon satırı: en alta yaslanır (yarımlar eşit yükseklikte → hizalı pill) — */
.tour-payment-wrap .cp2-agree-act {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* — pill buton (sözleşme indir / fatura ekle) — */
.tour-payment-wrap .cp2-agree-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #f0c9c4;
    background: #fff;
    color: var(--cp2-red);
    font-family: var(--cp2-font);
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.2;
    padding: 11px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tour-payment-wrap .cp2-agree-btn:hover {
    background: var(--cp2-tint-2);
    border-color: var(--cp2-red);
    color: var(--cp2-red);
}

.tour-payment-wrap .cp2-agree-btn .cp2-agree-btn-in {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tour-payment-wrap .cp2-agree-btn .cp2-svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

/* — "Zorunlu değil" rozeti / dolu-durum rozeti — */
.tour-payment-wrap .cp2-agree-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp2-muted-2);
    background: #f6f6f8;
    border-radius: 999px;
    padding: 5px 12px;
}

.tour-payment-wrap .cp2-agree-tag--ok {
    color: var(--cp2-ok);
    background: var(--cp2-ok-tint);
}

.tour-payment-wrap .cp2-agree-tag .cp2-svg {
    width: 13px;
    height: 13px;
}

/* iki yarım → alt alta; ayraç yatay hairline olur (tek yarımda kalkar) */
@media (max-width: 767.98px) {
    .tour-payment-wrap .cp2-agree {
        grid-template-columns: 1fr;
    }
    .tour-payment-wrap .cp2-agree-half--invoice {
        border-left: 0;
        border-top: 1px solid var(--cp2-line);
    }
    .tour-payment-wrap .cp2-agree.cp2-agree--single .cp2-agree-half--invoice {
        border-top: 0;
    }
}

/* =====================================================================
   SECONDARY / OUTLINE BUTTONS (Select Driver, Use Money Point, Show All,
   Rental Agreement, Select Bill)
   ===================================================================== */
.tour-payment-wrap .btn-outline-primary,
.tour-payment-wrap .btn-outline-secondary {
    border: 1.5px solid var(--cp2-line);
    color: var(--cp2-ink);
    background: #fff;
    font-family: var(--cp2-font);
    font-weight: 700;
    border-radius: 10px;
}

.tour-payment-wrap .btn-outline-primary {
    border-color: var(--cp2-red);
    color: var(--cp2-red);
    background: var(--cp2-tint);
}

.tour-payment-wrap .btn-outline-primary:hover {
    background: var(--cp2-red);
    border-color: var(--cp2-red);
    color: #fff;
}

.tour-payment-wrap .btn-outline-secondary:hover {
    border-color: var(--cp2-red);
    color: var(--cp2-red);
    background: #fff9f8;
}

/* =====================================================================
   MODALS (conditions / rental agreement / bill info / select lists)
   Bootstrap modals re-skinned, scoped under .tour-payment-wrap
   ===================================================================== */
.tour-payment-wrap .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(20, 20, 30, 0.34);
    overflow: hidden;
    font-family: var(--cp2-font);
}

.tour-payment-wrap .modal-header {
    border-bottom: 1px solid var(--cp2-line);
    padding: 18px 22px;
    align-items: center;
}

.tour-payment-wrap .modal-body {
    padding: 18px 22px;
}

.tour-payment-wrap .modal-footer {
    border-top: 1px solid var(--cp2-line);
    padding: 14px 22px;
}

/* web/ui/modal.css floats ".modal .modal-title" as an absolute pill on the
   modal top border — pin it back into the header flow */
.tour-payment-wrap .modal .modal-title {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    transform: none;
    box-shadow: none;
    margin: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: var(--cp2-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--cp2-ink);
}

/* modal action buttons */
.tour-payment-wrap .modal .btn-primary {
    background: var(--cp2-red);
    border-color: var(--cp2-red);
    color: #fff;
    font-family: var(--cp2-font);
    font-weight: 800;
    border-radius: 10px;
}

.tour-payment-wrap .modal .btn-primary:hover {
    background: var(--cp2-red-deep);
    border-color: var(--cp2-red-deep);
    color: #fff;
}

/* select-list buttons (passenger / bill / money-point pickers) */
.tour-payment-wrap .modal .btn-secondary {
    background: #fff;
    border: 1.5px solid var(--cp2-line);
    color: var(--cp2-ink);
    font-family: var(--cp2-font);
    font-weight: 700;
    border-radius: 11px;
    padding: 11px 15px;
    text-align: left;
}

.tour-payment-wrap .modal .btn-secondary:hover {
    border-color: var(--cp2-red);
    background: #fff9f8;
    color: var(--cp2-ink);
}

.tour-payment-wrap .modal .color-primary {
    color: var(--cp2-ink) !important;
    font-weight: 800;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* iki sütun → tek sütun; özet mobilde formların ÜSTÜNE (uçak emsali order:-1) */
@media (max-width: 991.98px) {
    .tour-payment-wrap .cp2-page {
        grid-template-columns: 1fr;
    }
    .tour-payment-wrap .cp2-side {
        position: static;
        order: -1;
    }
    /* ödeme kartı: form alanları + kart önizleme tek sütuna iner (uçak emsali) */
    .tour-payment-wrap .cp2-paygrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tour-payment-wrap .payment-card .card-body {
        padding: 18px 16px;
    }
    .tour-payment-wrap .payment-card > .card-title-payment {
        padding: 16px;
    }
}

/* =====================================================================
   TOUR PORT ADDITIONS
   ---------------------------------------------------------------------
   Araç tarafında bu taban ölçüler car/payment/ui.css'ten gelir
   (.car-confirm-checks / .car-check / .car-confirm-warning taban,
   .cp2-phone-group genişlik, .car-payment-wrap padding-bottom). Tur
   ui.css'i minimal tutmak için, redesign.css'i kendi kendine yeterli
   kılacak taban kuralları burada tanımlanır (araçtaki NİHAİ değerlerle).
   ===================================================================== */

/* onay tikleri kolonu (tasarım .consents) — taban düzen */
.tour-payment-wrap .car-confirm-checks {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.tour-payment-wrap .car-check {
    display: grid;
    padding: 0;
    margin: 0;
    min-height: auto;
}

.tour-payment-wrap .car-check .car-check-input {
    float: none;
    flex: 0 0 auto;
}

.tour-payment-wrap .car-check .car-check-label {
    margin: 0;
}

/* amber uyarı kutusu (tasarım .warn) — taban palet + düzen */
.tour-payment-wrap .car-confirm-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff8ec;
    border: 1px solid #f4dcae;
    color: #8a6212;
    margin-bottom: 0;
}

/* Telefon kod seçici dar (MsDropdown widget'i + select fallback) — iletişim
   satırı e-posta ile tek satırda, kod 158px sabit (araç .cp2-phone-group). */
.tour-payment-wrap .cp2-phone-group .form-control.ms-dd.ms-pr,
.tour-payment-wrap .cp2-phone-group select.form-select {
    flex: 0 0 158px;
    max-width: 158px;
    min-width: 0;
}

/* Ödeme butonu ile footer arasında sabit boşluk (yapışmasın). Bootstrap
   .py-4 padding-bottom'u !important taşıdığından burada da !important şart. */
.tour-payment-wrap {
    padding-bottom: 150px !important;
}

/* base.css [tp2] katmanı `.card-title-payment > i:first-child`'i 38px tint
   rozete çevirir; araç dilinde bu ikonlar satır-içi kırmızıdır. Daha yüksek
   özgüllükle satır-içi kırmızıya geri al (araç görünümü). cp2-svg/cp2-ic
   ikon kutuları bu kuraldan etkilenmez (onlar <i> değil). */
.tour-payment-wrap .payment-card > .card-title-payment > i:first-child,
.tour-payment-wrap .payment-card > .card-title-payment > div > i:first-child {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: inline;
    margin: 0 6px 0 0 !important;
    color: var(--cp2-red);
    font-size: 17px;
}

/* =====================================================================
   RIGHT RAIL — TUR ÖZETİ + FİYAT DETAYLARI  (tps-)
   ---------------------------------------------------------------------
   zenrota-tur-odeme-ozeti-design.html birebir portu. Sağ kolonun iki DOM
   kartı — tur bilgi kartı (right_bar) + fiyat kartı (price_summary) — CSS
   ile TEK sürekli karta birleştirilir (join-top / join-bottom): üst kart
   yalnız üstten yuvarlanır, alt kart yalnız alttan; aradaki ince çizgi alt
   kartın üst kenarlığıdır (tasarımdaki meta ↔ fiyat ayracı). Skeleton
   kabukları (skeleton_side/skeleton_price) aynı join sınıflarını taşır →
   yükleme sırasında da tek kart okunur. Renkler --cp2-* token'larına bağlı.

   NOT: ui.css [tp2] redesign.css'ten SONRA yüklenir (cdn_style bloğu <head>'de
   style bloğundan ÖNCE gelir); paylaşılan kart sınıflarında (.payment-card /
   .card-body) eşit özgüllükte ui.css kazandığından, birleştirme kuralları
   `.tour-payment-wrap.tp2-page` ile scope'lanır. tps-* sınıfları ui.css'te
   tanımsız olduğundan onlar için çakışma yoktur.
   ===================================================================== */

/* — birleştirme: ÜST kart (tur / skeleton_side) — */
.tour-payment-wrap.tp2-page .tps-join-top {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* — birleştirme: ALT kart (fiyat / skeleton_price) — üst kenarlık = iç ayraç */
.tour-payment-wrap.tp2-page .tps-join-bottom {
    margin-top: 0 !important;
    border-top: 1px solid var(--cp2-line) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* — foto başlığı — */
.tour-payment-wrap.tp2-page .tps-photo {
    position: relative;
    height: 170px;
    background: #e9e9ec;
    overflow: hidden;
}

.tour-payment-wrap.tp2-page .tps-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tour-payment-wrap.tp2-page .tps-photo-ph {
    position: absolute;
    inset: 0;
    border: 2px dashed #d8d9dd;
    background: #fafafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #b7bac0;
    font-size: 12px;
    font-weight: 700;
}

.tour-payment-wrap.tp2-page .tps-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 18, 0.72));
    pointer-events: none;
}

.tour-payment-wrap.tp2-page .tps-photo-title {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.35;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* — gövde — */
.tour-payment-wrap.tp2-page .tps-body {
    padding: 18px 22px 20px;
}

.tour-payment-wrap.tp2-page .tps-provider {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 4px 10px;
    border: 1px solid var(--cp2-line);
    border-radius: 999px;
    background: #f6f6f8;
    color: var(--cp2-muted-2);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.tour-payment-wrap.tp2-page .tps-provider svg {
    color: var(--cp2-red);
    flex: 0 0 auto;
}

/* — 2 sütunlu ikonlu meta grid — */
.tour-payment-wrap.tp2-page .tps-mgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.tour-payment-wrap.tp2-page .tps-mrow {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    min-width: 0;
}

.tour-payment-wrap.tp2-page .tps-mic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--cp2-tint-2);
    color: var(--cp2-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap.tp2-page .tps-mtext {
    min-width: 0;
}

.tour-payment-wrap.tp2-page .tps-mk {
    font-size: 11px;
    font-weight: 800;
    color: var(--cp2-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.tour-payment-wrap.tp2-page .tps-mv {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cp2-ink);
    margin-top: 1px;
    line-height: 1.3;
}

.tour-payment-wrap.tp2-page .tps-brow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tour-payment-wrap.tp2-page .tps-brow + .tps-brow {
    margin-top: 3px;
}

.tour-payment-wrap.tp2-page .tps-brow > span:first-child {
    font-weight: 700;
    color: var(--cp2-muted);
}

/* ülke değeri kırmızı pill(ler) */
.tour-payment-wrap.tp2-page .tps-tag {
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    color: var(--cp2-red);
    background: var(--cp2-tint);
    border-radius: 999px;
    padding: 3px 11px;
    margin: 2px 4px 0 0;
    vertical-align: middle;
}

/* — fiyat bölümü — */
.tour-payment-wrap.tp2-page .tps-price {
    padding: 16px 22px 18px;
}

.tour-payment-wrap.tp2-page .tps-price-h {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--cp2-ink);
    margin-bottom: 11px;
}

.tour-payment-wrap.tp2-page .tps-price-ic {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--cp2-tint);
    color: var(--cp2-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tour-payment-wrap.tp2-page .tps-prows {
    display: flex;
    flex-direction: column;
}

.tour-payment-wrap.tp2-page .tps-prow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5.5px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp2-muted-2);
}

.tour-payment-wrap.tp2-page .tps-prow--discount > span,
.tour-payment-wrap.tp2-page .tps-prow--discount > b {
    color: #16a34a;
}
.tour-payment-wrap.tp2-page .tps-prow > b {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cp2-ink);
    font-variant-numeric: tabular-nums;
}

.tour-payment-wrap.tp2-page .tps-note {
    font-size: 12px;
    font-weight: 700;
    color: var(--cp2-muted);
}

/* — kırmızı-tint zeminli TOPLAM satırı — */
.tour-payment-wrap.tp2-page .tps-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--cp2-tint-2);
    border-radius: 13px;
    padding: 13px 16px;
    margin-top: 11px;
}

.tour-payment-wrap.tp2-page .tps-total-k {
    font-size: 14px;
    font-weight: 800;
    color: var(--cp2-ink);
}

.tour-payment-wrap.tp2-page .tps-total-v {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp2-red);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tour-payment-wrap.tp2-page .tps-total-v small {
    font-size: 14px;
    font-weight: 800;
}

/* — fx / yaklaşık maliyet notu — */
.tour-payment-wrap.tp2-page .tps-fx {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 13px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cp2-muted);
    line-height: 1.5;
}

.tour-payment-wrap.tp2-page .tps-fx > svg {
    color: var(--cp2-muted);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* tps ikon svg'leri blok hizalı */
.tour-payment-wrap.tp2-page .tps-mic svg,
.tour-payment-wrap.tp2-page .tps-price-ic svg,
.tour-payment-wrap.tp2-page .tps-photo-ph svg {
    display: block;
}

/* dar ekran: meta grid tek sütun */
@media (max-width: 575.98px) {
    .tour-payment-wrap.tp2-page .tps-mgrid {
        grid-template-columns: 1fr;
    }
}

.tour-payment-wrap.tp2-page .gender-container .form-check-input[type="radio"][value="M"]:checked {
    background-color: #3e6e93 !important;
    border-color: #3e6e93 !important;
}

.tour-payment-wrap.tp2-page .gender-container .form-check-input[type="radio"][value="M"]:focus {
    border-color: #3e6e93;
    box-shadow: 0 0 0 3px rgba(62, 110, 147, 0.16);
}

.tour-payment-wrap.tp2-page .gender-container .form-check-input[type="radio"][value="M"]:checked ~ label {
    color: #3e6e93;
}

/* Fiyat degisikligi onayi. Overlay sabit konumlu; x-if icerigi .tp2-page
   degiskenlerinin disinda kalabilecegi icin renkler dogrudan yazili. */
.tp2-pc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 20, 30, 0.45);
}
.tp2-pc-box {
    width: 100%;
    max-width: 420px;
    padding: 26px 26px 22px;
    border: 1px solid #ececef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 20, 30, 0.28);
    font-family: "Manrope", system-ui, sans-serif;
    color: #1c1c24;
}
.tp2-pc-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
}
.tp2-pc-lead {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b6f76;
}
.tp2-pc-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #ececef;
    border-radius: 12px;
    background: #fcefec;
}
.tp2-pc-old {
    font-size: 1rem;
    color: #8a8f98;
    text-decoration: line-through;
}
.tp2-pc-arrow {
    font-size: 1.1rem;
    color: #8a8f98;
}
.tp2-pc-new {
    font-size: 1.5rem;
    font-weight: 800;
    color: #d8291c;
}
.tp2-pc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tp2-pc-actions .btn {
    flex: 1 1 auto;
    min-width: 130px;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
}
.tp2-pc-accept,
.tp2-pc-accept:hover {
    border-color: #d8291c;
    background: #d8291c;
    color: #fff;
}
.tp2-pc-cancel {
    border: 1px solid #ececef;
    background: #fff;
    color: #1c1c24;
}