/**
 * Premium Credit Card Form - Mobile Responsive Fixes
 * Tüm detay sayfalarında (tur, transfer, araç, konaklama) ortak kullanılır
 * 
 * Çözülen sorunlar:
 * 1. Kart numarası input'u mobilde tek satırda kalır (taşmaz)
 * 2. Label ile input yazısı karışmaz (net okunur)
 * 3. 3D kart preview mobilde düzgün ölçeklenir
 * 4. Taksit grid'i mobilde tek sütun olur
 */

/* ═══════════════════════════════════════════════
   FLOATING LABEL FIX - Label/Input karışmasını önle
   Bootstrap 5 form-floating override
   ═══════════════════════════════════════════════ */

/* Input yüksekliği ve padding - yazı yukarıda başlasın, label'e yer açılsın */
.premium-input-group.form-floating > .form-control,
.form-floating.premium-input-group > .form-control {
    height: 3.75rem !important;
    min-height: 3.75rem !important;
    padding-top: 1.75rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 2.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
}

/* Focus state */
.premium-input-group.form-floating > .form-control:focus,
.form-floating.premium-input-group > .form-control:focus {
    border-color: var(--primary, #f27025) !important;
    box-shadow: 0 0 0 4px rgba(242, 112, 37, 0.1) !important;
}

/* Label - Normal state (placeholder göründüğünde) */
.premium-input-group.form-floating > label,
.form-floating.premium-input-group > label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    padding: 1.1rem 0.75rem !important;
    pointer-events: none !important;
    border: none !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out !important;
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 30px) !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Label - Aktif/Dolu state (label yukarı çıktığında) */
.premium-input-group.form-floating > .form-control:focus ~ label,
.premium-input-group.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating.premium-input-group > .form-control:focus ~ label,
.form-floating.premium-input-group > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.72) translateY(-0.65rem) !important;
    color: var(--primary, #f27025) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    padding: 0.25rem 0.4rem !important;
    height: auto !important;
    background: white !important;
    border-radius: 2px !important;
    font-size: 0.95rem !important;
}

/* Placeholder şeffaf olsun - floating label için gerekli */
.premium-input-group.form-floating > .form-control::placeholder,
.form-floating.premium-input-group > .form-control::placeholder {
    color: transparent !important;
}

/* Focus durumunda placeholder hafif görünsün */
.premium-input-group.form-floating > .form-control:focus::placeholder,
.form-floating.premium-input-group > .form-control:focus::placeholder {
    color: #cbd5e1 !important;
}


/* ═══════════════════════════════════════════════
   KART NUMARASI - TEK SATIR GARANTİSİ
   ═══════════════════════════════════════════════ */

.premium-input-group .form-control[name="card_number"],
#card-number {
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Courier New', Courier, monospace !important;
}


/* ═══════════════════════════════════════════════
   INPUT ICON (Sağ taraftaki ikon)
   ═══════════════════════════════════════════════ */

.premium-input-group .input-icon-right {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    font-size: 1.2rem !important;
    color: #94a3b8 !important;
}

/* CVV info icon - tıklanabilir olsun */
.premium-input-group .input-icon-right[data-bs-toggle="tooltip"] {
    pointer-events: auto !important;
    cursor: help !important;
}


/* ═══════════════════════════════════════════════
   INPUT WRAPPER
   ═══════════════════════════════════════════════ */

.cc-inputs-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

.cc-inputs-wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cc-inputs-wrapper .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE (<= 576px)
   ═══════════════════════════════════════════════ */

@media (max-width: 576px) {

    /* 3D Card Preview - Mobilde küçült */
    .cc-preview-wrapper {
        max-width: 280px !important;
    }

    .cc-preview-card {
        height: 175px !important;
    }

    .cc-front, .cc-back {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .cc-number-display {
        font-size: 15px !important;
        letter-spacing: 1.5px !important;
        margin-top: 8px !important;
    }

    .cc-label {
        font-size: 7px !important;
    }

    .cc-value {
        font-size: 11px !important;
    }

    .cc-top svg, .cc-chip svg {
        width: 28px !important;
    }

    .cc-brand .fab, .cc-brand i {
        font-size: 1.5rem !important;
    }

    .cc-bottom {
        margin-top: 12px !important;
    }

    .cc-magnetic-strip {
        height: 32px !important;
        margin-top: 18px !important;
    }

    .cc-cvv-box {
        margin: 12px 16px 0 !important;
    }

    .cc-cvv-strip {
        height: 28px !important;
    }

    /* Input Container - Mobilde padding ayarla */
    .cc-inputs-wrapper {
        margin-top: -30px !important;
        padding: 50px 12px 16px !important;
        border-radius: 16px !important;
    }

    .premium-credit-card-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Floating Label - Mobil boyutlar */
    .premium-input-group.form-floating > .form-control,
    .form-floating.premium-input-group > .form-control {
        height: 3.5rem !important;
        min-height: 3.5rem !important;
        padding-top: 1.6rem !important;
        padding-bottom: 0.4rem !important;
        padding-left: 0.625rem !important;
        padding-right: 2.2rem !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }

    .premium-input-group.form-floating > label,
    .form-floating.premium-input-group > label {
        font-size: 0.85rem !important;
        padding: 0.95rem 0.625rem !important;
    }

    /* Label çıktığında (Mobil) */
    .premium-input-group.form-floating > .form-control:focus ~ label,
    .premium-input-group.form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating.premium-input-group > .form-control:focus ~ label,
    .form-floating.premium-input-group > .form-control:not(:placeholder-shown) ~ label {
        transform: scale(0.72) translateY(-0.55rem) !important;
        font-size: 0.85rem !important;
    }

    /* Kart No - Mobilde font küçült ama TEK SATIR */
    .premium-input-group .form-control[name="card_number"],
    #card-number {
        font-size: 0.9rem !important;
        letter-spacing: 1.5px !important;
        padding-right: 40px !important;
    }

    /* Son Kullanma ve CVV - Mobilde yan yana kalmalı */
    .cc-inputs-wrapper .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Row gap küçültme */
    .cc-inputs-wrapper .row.g-3 {
        --bs-gutter-y: 0.6rem !important;
        --bs-gutter-x: 0.5rem !important;
    }

    /* Taksit Grid - Mobilde 2 sütun */
    .installment-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .installment-item {
        padding: 8px 6px !important;
        border-radius: 10px !important;
    }

    .inst-count {
        font-size: 0.8rem !important;
    }

    .inst-amount {
        font-size: 0.75rem !important;
    }

    .installment-section {
        padding: 14px !important;
        border-radius: 14px !important;
        margin-top: 16px !important;
    }
}


/* ═══════════════════════════════════════════════
   TABLET RESPONSIVE (577px - 768px)
   ═══════════════════════════════════════════════ */

@media (min-width: 577px) and (max-width: 768px) {

    .cc-preview-wrapper {
        max-width: 320px !important;
    }

    .cc-preview-card {
        height: 200px !important;
    }

    .cc-number-display {
        font-size: 17px !important;
    }

    .premium-input-group.form-floating > .form-control,
    .form-floating.premium-input-group > .form-control {
        font-size: 0.95rem !important;
    }

    #card-number {
        font-size: 0.95rem !important;
        letter-spacing: 1.5px !important;
    }

    .installment-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════
   EXTRA SMALL (< 360px - çok küçük telefonlar)
   ═══════════════════════════════════════════════ */

@media (max-width: 360px) {

    .cc-preview-wrapper {
        max-width: 240px !important;
    }

    .cc-preview-card {
        height: 155px !important;
    }

    .cc-front, .cc-back {
        padding: 12px !important;
    }

    .cc-number-display {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }

    .cc-inputs-wrapper {
        padding: 40px 8px 12px !important;
    }

    .premium-input-group.form-floating > .form-control,
    .form-floating.premium-input-group > .form-control {
        height: 3.2rem !important;
        min-height: 3.2rem !important;
        font-size: 0.85rem !important;
    }

    .premium-input-group.form-floating > label,
    .form-floating.premium-input-group > label {
        font-size: 0.75rem !important;
    }

    #card-number {
        font-size: 0.82rem !important;
        letter-spacing: 0.5px !important;
    }

    .installment-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}