/* =============================================
   IDO Yolcu Bilgileri Sayfası
   ============================================= */

/* Page Background (transparent) */
.pax-page-bg {
    background: transparent;
    min-height: 100vh;
    padding: 40px 0;
    width: 100%;
    position: relative;
}

/* Step Indicator */
.step-indicator {
    display: flex;
    /* Daireler tek hizada kalsin; uzun etiketler iki satira insin diye
       center yerine flex-start kullaniyoruz. */
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Her adim esit genislik alsin; aksi halde adimlar etiket uzunluguna gore
       kayiyor ve daireler dengesiz duruyor. */
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    position: relative;
}

/* Adimlari birlestiren cizgi. Ayri bir <div> olarak dursa yatayda yer kapliyor,
   sutunlari daraltiyor ve dairelerin iki yaninda genis boslukla "kopuk centik"
   gibi gorunuyordu. Bunun yerine her adimin uzerine, kendi dairesinden bir
   sonrakine kadar uzanan bir cizgi ciziyoruz. */
.step::after {
    content: '';
    position: absolute;
    top: 20.5px;
    left: calc(50% + 30px);
    right: calc(-50% + 30px);
    height: 3px;
    background: #c8d6e5;
    border-radius: 2px;
}

.step:last-child::after {
    display: none;
}

/* Tamamlanmis bir adimdan sonraki cizgi de tamamlanmis sayilir */
.step.completed::after {
    background: #42c7e7;
}
.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #c8d6e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    transition: background .3s;
}
.step.active .step-num {
    background: #0E1D48;
    box-shadow: 0 0 0 5px rgba(14,29,72,0.15);
}
.step.completed .step-num {
    background: #42c7e7;
}
.step-text {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
    max-width: 100%;
}
.step.active .step-text {
    color: #0E1D48;
    font-weight: 700;
}
.step.completed .step-text {
    color: #42c7e7;
}
/* Cizgiler artik .step::after ile ciziliyor; markup'taki bu elemanlar
   geriye donuk uyumluluk icin duruyor ama yer kaplamiyor. */
.step-line {
    display: none;
}

/* =============================================
   Trip Summary Card (IDO style)
   ============================================= */
.trip-summary-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(14,29,72,0.10);
    border: 1px solid rgba(14,29,72,0.06);
    overflow: hidden;
}
.trip-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #0E1D48 0%, #1a3a7a 100%);
    color: #fff;
}
.trip-route {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trip-route-from,
.trip-route-to {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.trip-route-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(66,199,231,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #42c7e7;
}
.trip-total-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trip-total-price small {
    font-size: 11px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.trip-total-price strong {
    font-size: 26px;
    font-weight: 800;
    color: #42c7e7;
    line-height: 1.1;
}

/* Mid section */
.trip-summary-mid {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(14,29,72,0.06);
}
.trip-date-info {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.trip-date-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0f6ff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #0E1D48;
}
.trip-date-badge i {
    color: #42c7e7;
    font-size: 14px;
}
.trip-date-badge strong {
    font-weight: 700;
}
.trip-pax-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pax-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7931e12, #ff6b3512);
    border: 1px solid rgba(247,147,30,0.2);
    font-size: 12px;
    font-weight: 600;
    color: #0E1D48;
    white-space: nowrap;
}
.pax-tag i {
    color: #f7931e;
    font-size: 11px;
}

/* Detail toggle */
.trip-summary-detail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #0E1D48;
    transition: background .2s;
    user-select: none;
}
.trip-summary-detail-toggle:hover {
    background: #f8f9fc;
}
.trip-summary-detail-toggle i {
    font-size: 11px;
    transition: transform .2s;
}
.trip-summary-detail {
    padding: 0 24px 16px;
}
.trip-price-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid rgba(14,29,72,0.04);
}
.trip-price-row:last-child {
    border-bottom: none;
}
.trip-price-row span:last-child {
    font-weight: 600;
    color: #0E1D48;
}
.trip-price-row.trip-price-total {
    border-top: 2px solid #0E1D48;
    padding-top: 10px;
    margin-top: 4px;
}

/* Section Title */
.section-title {
    color: #0E1D48;
    font-weight: 700;
    font-size: 20px;
}

/* Passenger Card */
.pax-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(14,29,72,0.08);
    border: 1px solid rgba(14,29,72,0.06);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.pax-card:hover {
    box-shadow: 0 4px 20px rgba(14,29,72,0.12);
}
.pax-card-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, #f8f9fc 0%, #fff 100%);
    border-bottom: 1px solid transparent;
    transition: background .2s;
}
.pax-card-header:hover {
    background: linear-gradient(135deg, #eef2f8 0%, #f8f9fc 100%);
}
.pax-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 14px;
    flex-shrink: 0;
}
#ticketBuyerSection .pax-card-icon {
    background: linear-gradient(135deg, #0E1D48 0%, #1a3a7a 100%);
}
.pax-card-title {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pax-card-title strong {
    font-size: 15px;
    color: #0E1D48;
}
.pax-card-title small {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
}
.pax-seat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8f7fc;
    color: #0E1D48;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 10px;
    white-space: nowrap;
}
.pax-seat-badge i {
    color: #42c7e7;
    font-size: 12px;
}
.pax-card-chevron {
    color: #0E1D48;
    font-size: 14px;
    padding: 4px;
}

/* Card Body */
.pax-card-body {
    padding: 24px 28px;
    border-top: 1px solid rgba(14,29,72,0.06);
}

/* Form Elements */
.pax-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}
.pax-label .req {
    color: #e74c3c;
}
.pax-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dce3ed;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.pax-input:focus {
    border-color: #42c7e7;
    box-shadow: 0 0 0 3px rgba(66,199,231,0.12);
}
.pax-input::placeholder {
    color: #aab4c4;
}
select.pax-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Radio */
.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid #dce3ed;
    transition: border-color .2s, background .2s;
}
.radio-label:has(input:checked) {
    border-color: #42c7e7;
    background: rgba(66,199,231,0.06);
    color: #0E1D48;
    font-weight: 600;
}
.radio-label input[type="radio"] {
    accent-color: #42c7e7;
}

/* Checkbox */
.pax-tc-citizen {
    width: 18px;
    height: 18px;
    accent-color: #42c7e7;
    cursor: pointer;
}

/* Price Summary */
.price-summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(14,29,72,0.08);
    border: 1px solid rgba(14,29,72,0.06);
}
.price-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid rgba(14,29,72,0.04);
}
.price-row.discount span:last-child {
    color: #27ae60;
    font-weight: 600;
}
.price-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #0E1D48;
    border-top: 2px solid #0E1D48;
    margin-top: 4px;
}
.btn-proceed {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0E1D48 0%, #1a3a7a 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-proceed:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14,29,72,0.25);
}
.btn-proceed:active {
    transform: translateY(0);
}
.btn-proceed:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 575px) {
    .pax-card-header {
        padding: 12px 14px;
    }
    .pax-card-body {
        padding: 16px;
    }
    .pax-card-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
        margin-right: 10px;
    }
    .pax-card-title strong {
        font-size: 14px;
    }
    .step-num {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .step.active .step-num {
        box-shadow: 0 0 0 3px rgba(14,29,72,0.15);
    }
    .step-text {
        font-size: 10.5px;
        letter-spacing: -0.1px;
    }
    .step::after {
        /* 34/2 - 3/2 */
        top: 15.5px;
        left: calc(50% + 23px);
        right: calc(-50% + 23px);
        height: 2px;
    }
    .price-total {
        font-size: 16px;
    }
    /* Trip Summary Mobile */
    .trip-summary-top {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
        align-items: flex-start;
    }
    .trip-route-from,
    .trip-route-to {
        font-size: 16px;
    }
    .trip-total-price {
        text-align: left;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .trip-total-price strong {
        font-size: 20px;
    }
    .trip-summary-mid {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .trip-pax-tags {
        gap: 6px;
    }
    .pax-tag {
        font-size: 11px;
        padding: 4px 10px;
    }
    .trip-summary-detail {
        padding: 0 16px 14px;
    }
}

/* Inline Validation Errors */
.pax-field-error {
    color: #dc3545;
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px;
    display: block;
    line-height: 1.3;
}
.pax-input.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.12);
}
.pax-input.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.18);
}