/**
 * NECOX — Page Payment Modals
 *
 * 4 modal: gateway picker, iyzico iframe, success, error.
 * Tum degerler --pp-modal-* / --pp-picker-* / --pp-iframe-* /
 * --pp-success-* / --pp-error-* CSS variable'lardan beslenir.
 *
 * @since 3.57.1
 */

/* ============================================================
   1. ROOT (kapsayici + overlay)
   ============================================================ */
.necox-pp-modal-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.necox-pp-modal-root[hidden] { display: none; }

.necox-pp-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--pp-modal-overlay-color, #000);
    opacity: var(--pp-modal-overlay-opacity, 0.75);
    backdrop-filter: blur(var(--pp-modal-overlay-blur, 8px));
    -webkit-backdrop-filter: blur(var(--pp-modal-overlay-blur, 8px));
}

/* ============================================================
   2. MODAL TASIYICI (her bir modal)
   ============================================================ */
.necox-pp-modal {
    position: relative;
    width: 100%;
    max-width: var(--pp-modal-container-max-w, 460px);
    z-index: 1;
    animation: necox-pp-modal-in 0.18s ease-out;
}
.necox-pp-modal[hidden] { display: none; }

@keyframes necox-pp-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.necox-pp-modal-container {
    background: var(--pp-modal-container-bg, #0a1124);
    border: var(--pp-modal-container-border-w, 1px) solid var(--pp-modal-container-border, rgba(255,255,255,0.08));
    border-radius: var(--pp-modal-container-radius, 14px);
    overflow: hidden;
    color: var(--pp-modal-header-title-color, #e8e9f0);
    backdrop-filter: var(--pp-modal-container-backdrop, none);
    -webkit-backdrop-filter: var(--pp-modal-container-backdrop, none);
    box-shadow: var(--pp-modal-container-shadow, 0 20px 60px rgba(0,0,0,0.4));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

/* (.necox-pp-modal-container--iframe tanimi 6. bolume tasindi — height fix icin) */

/* ============================================================
   3. ORTAK HEADER + CLOSE
   ============================================================ */
.necox-pp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pp-modal-header-padding, 16px) 18px;
    background: var(--pp-modal-header-bg, transparent);
    border-bottom: 1px solid var(--pp-modal-header-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
.necox-pp-modal-step {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pp-modal-header-step-color, #7a8198);
    margin-bottom: 2px;
    display: block;
    font-weight: 500;
}
.necox-pp-modal-title {
    margin: 0;
    font-size: var(--pp-modal-header-title-size, 16px);
    font-weight: 500;
    color: var(--pp-modal-header-title-color, #e8e9f0);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.necox-pp-modal-close {
    background: var(--pp-modal-close-bg, transparent);
    border: 1px solid var(--pp-modal-close-border, transparent);
    color: var(--pp-modal-close-color, #7a8198);
    width: var(--pp-modal-close-size, 28px);
    height: var(--pp-modal-close-size, 28px);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}
.necox-pp-modal-close:hover {
    opacity: 0.7;
}

/* Centered modallarda close sag uste mutlak yerlesir */
.necox-pp-modal-container--centered .necox-pp-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ============================================================
   4. PICKER MODAL — Paket ozet ust kart
   ============================================================ */
.necox-pp-picker-summary {
    background: var(--pp-picker-summary-bg, linear-gradient(180deg, rgba(58,130,246,0.08) 0%, transparent 100%));
    border-bottom: 1px solid var(--pp-picker-summary-border, rgba(255,255,255,0.08));
    padding: var(--pp-picker-summary-padding, 18px);
    flex-shrink: 0;
}
.necox-pp-picker-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.necox-pp-picker-pkg {
    display: flex;
    gap: 12px;
    align-items: center;
}
.necox-pp-picker-pkg-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--pp-picker-pkg-icon-bg, rgba(58,130,246,0.12));
    color: var(--pp-picker-pkg-icon-color, inherit);
    border: 1px solid rgba(58,130,246,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.necox-pp-picker-pkg-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--pp-picker-pkg-name-color, #fff);
}
.necox-pp-picker-pkg-meta {
    font-size: 11px;
    color: var(--pp-picker-pkg-meta-color, #7a8198);
    margin-top: 2px;
}

.necox-pp-picker-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}
.necox-pp-picker-total-label {
    font-size: 11px;
    color: var(--pp-picker-total-label-color, #7a8198);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}
.necox-pp-picker-total-value {
    font-size: var(--pp-picker-total-size, 24px);
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--pp-picker-total-value-color, #fff);
    background: var(--pp-picker-total-bg, transparent);
    background-clip: var(--pp-picker-total-bg-clip, border-box);
    -webkit-background-clip: var(--pp-picker-total-bg-clip, border-box);
    -webkit-text-fill-color: var(--pp-picker-total-text-fill, currentColor);
}
.necox-pp-picker-total-currency {
    font-size: 13px;
    color: var(--pp-picker-pkg-meta-color, #7a8198);
    font-weight: 400;
    -webkit-text-fill-color: currentColor;
    background: none;
    margin-left: 4px;
}

/* ============================================================
   5. PICKER MODAL — Body (gateway listesi)
   ============================================================ */
.necox-pp-picker-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}
.necox-pp-picker-section-label {
    font-size: 11px;
    color: var(--pp-modal-header-step-color, #7a8198);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-weight: 500;
}
.necox-pp-gw-list {
    display: flex;
    flex-direction: column;
    gap: var(--pp-picker-gw-gap, 8px);
    margin-bottom: 14px;
}
.necox-pp-gw {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--pp-picker-gw-border, rgba(255,255,255,0.08));
    background: var(--pp-picker-gw-bg, rgba(255,255,255,0.02));
    border-radius: var(--pp-picker-gw-radius, 10px);
    padding: var(--pp-picker-gw-padding, 14px);
    cursor: pointer;
    transition: all 0.15s ease;
}
.necox-pp-gw input[type="radio"] {
    accent-color: var(--pp-picker-gw-radio-color, #3a82f6);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.necox-pp-gw.is-active,
.necox-pp-gw:has(input[type="radio"]:checked) {
    border: 1.5px solid var(--pp-picker-gw-active-border, #3a82f6);
    background: var(--pp-picker-gw-active-bg, rgba(58,130,246,0.08));
    box-shadow: 0 0 20px var(--pp-picker-gw-active-shadow, transparent);
}

.necox-pp-gw-logo {
    width: 40px;
    height: 28px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #1a4dad;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.necox-pp-gw-logo-paytr  { background: linear-gradient(135deg, #fff 50%, #ee3124 50%); color: #003; font-size: 9px; }
.necox-pp-gw-logo-paypal { background: #003087; color: #009cde; font-size: 8px; }
.necox-pp-gw-logo-banka  { background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.3); color: inherit; font-size: 14px; }

.necox-pp-gw-text {
    flex: 1;
    min-width: 0;
}
.necox-pp-gw-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-picker-gw-name-color, inherit);
}
.necox-pp-gw-desc {
    font-size: 11px;
    color: var(--pp-picker-gw-desc-color, #7a8198);
    margin-top: 2px;
}
.necox-pp-gw-recommended {
    background: var(--pp-picker-gw-recommended-bg, rgba(58,130,246,0.15));
    color: var(--pp-picker-gw-recommended-color, #7eb3ff);
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Continue button */
.necox-pp-picker-btn {
    width: 100%;
    background: var(--pp-picker-btn-bg, #3a82f6);
    color: var(--pp-picker-btn-color, #fff);
    border: 0;
    border-radius: var(--pp-picker-btn-radius, 8px);
    height: var(--pp-picker-btn-height, 48px);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0 30px var(--pp-picker-btn-shadow-color, transparent);
    transition: transform 0.15s ease;
}
.necox-pp-picker-btn:hover { transform: translateY(-1px); }
.necox-pp-picker-btn:active { transform: translateY(0); }

.necox-pp-picker-trust {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
    color: var(--pp-picker-trust-color, #7a8198);
    margin-top: 12px;
    flex-wrap: wrap;
}
.necox-pp-picker-trust-sep {
    color: var(--pp-picker-trust-sep-color, #7a8198);
    opacity: 0.5;
}

/* ============================================================
   6. IFRAME MODAL
   ============================================================ */
/* Container — sabit yukseklik + flex */
.necox-pp-modal-container--iframe {
    max-width: var(--pp-iframe-max-w, 600px);
    width: 100%;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}
/* Header sabit yer kapsin */
.necox-pp-modal-container--iframe > .necox-pp-modal-header {
    flex: 0 0 auto;
}
/* Iframe-inner kalan tum yuksekligi al, ICINE scroll yap */
.necox-pp-modal-container--iframe > .necox-pp-iframe-inner {
    flex: 1 1 auto;
    min-height: 0;             /* flex child overflow icin sart */
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--pp-iframe-inner-bg, #fff);
    padding: var(--pp-iframe-padding, 0);
}
/* iyzico iframe icerigi container'i kirmasin */
.necox-pp-iframe-inner > iframe,
.necox-pp-iframe-inner > div,
.necox-pp-iframe-inner #iyzipay-checkout-form-content,
.necox-pp-iframe-inner .iyzico-checkout-form-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* iyzico'nun iframe height'i auto olunca ic icerik yayilir,
       parent (iframe-inner) scroll'u devreye girer */
}
/* Defansif: iyzico script'i icine fixed/absolute koyabilir, bunlari engelle */
.necox-pp-iframe-inner * {
    max-width: 100%;
}
.necox-pp-iframe-inner [style*="position: fixed"],
.necox-pp-iframe-inner [style*="position:fixed"] {
    position: relative !important;
}

/* ============================================================
   7. SUCCESS / ERROR — Centered icerik
   ============================================================ */
.necox-pp-modal-container--centered {
    text-align: center;
    padding: 40px 28px 28px;
    align-items: center;
}

.necox-pp-result-icon {
    width: var(--pp-success-icon-size, 64px);
    height: var(--pp-success-icon-size, 64px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 0 40px var(--pp-success-icon-glow, transparent);
}
.necox-pp-result-icon--success {
    background: var(--pp-success-icon-bg, rgba(58,130,246,0.15));
    color: var(--pp-success-icon-color, #3a82f6);
}
.necox-pp-result-icon--error {
    width: var(--pp-error-icon-size, 64px);
    height: var(--pp-error-icon-size, 64px);
    background: var(--pp-error-icon-bg, rgba(239,68,68,0.15));
    color: var(--pp-error-icon-color, #ef4444);
    box-shadow: 0 0 40px var(--pp-error-icon-glow, transparent);
}

.necox-pp-result-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.4px;
}
.necox-pp-modal--success .necox-pp-result-title { color: var(--pp-success-title-color, inherit); }
.necox-pp-modal--error   .necox-pp-result-title { color: var(--pp-error-title-color, inherit); }

.necox-pp-result-message {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-success-message-color, #a8aec3);
}
.necox-pp-modal--error .necox-pp-result-message { color: var(--pp-error-message-color, #a8aec3); }

.necox-pp-error-solution {
    background: var(--pp-error-solution-bg, rgba(239,68,68,0.08));
    border: 1px solid var(--pp-error-solution-border, rgba(239,68,68,0.2));
    color: var(--pp-error-solution-color, #fca5a5);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
    text-align: left;
}

.necox-pp-result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}
.necox-pp-result-btn {
    width: 100%;
    padding: 12px 18px;
    border-radius: 8px;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.necox-pp-result-btn:hover { transform: translateY(-1px); }
.necox-pp-result-btn--success {
    background: var(--pp-success-btn-bg, #3a82f6);
    color: var(--pp-success-btn-color, #fff);
}
.necox-pp-result-btn--error {
    background: var(--pp-error-retry-bg, #ef4444);
    color: var(--pp-error-retry-color, #fff);
}
.necox-pp-result-link {
    color: var(--pp-success-link-color, #7a8198);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 0;
}
.necox-pp-modal--error .necox-pp-result-link {
    color: var(--pp-error-back-color, #7a8198);
}
.necox-pp-result-link:hover { text-decoration: underline; }

.necox-pp-result-countdown {
    margin-top: 16px;
    font-size: 11px;
    color: var(--pp-success-message-color, #7a8198);
    opacity: 0.7;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .necox-pp-modal-root {
        padding: 0;
        align-items: flex-end;
    }
    .necox-pp-modal {
        max-width: 100%;
    }
    .necox-pp-modal-container {
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
    }
    /* Iframe modal mobilde full ekran (iyzico formu uzun) */
    .necox-pp-modal-container--iframe {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .necox-pp-modal-container--centered {
        border-radius: 16px 16px 0 0;
        padding: 36px 24px 24px;
    }
    .necox-pp-result-title { font-size: 19px; }
    .necox-pp-picker-pkg-icon { width: 42px; height: 42px; font-size: 20px; }
    .necox-pp-picker-total-value { font-size: 22px; }
}

/* ============================================================
   9. PRESET-SPESIFIK GORSEL DETAYLAR (modal seviyesi)
   v3.57.2 — Aktif preset checkout sayfasinin <main>'inden
   inherit edilir (data attribute ile). Modaller body'ye eklendigi
   icin secici `:has()` veya body class kullanmiyoruz; bunun yerine
   modal-root uzerinde data-preset attribute olusturulur.
   ============================================================ */

/* ─── Vercel: konteyner kose neon highlight */
.necox-pp-modal-root[data-preset="vercel"] .necox-pp-modal-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.6) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.necox-pp-modal-root[data-preset="vercel"] .necox-pp-modal-container {
    position: relative;
}

/* ─── Vercel: gateway karti hover */
.necox-pp-modal-root[data-preset="vercel"] .necox-pp-gw:hover:not(.is-active) {
    border-color: rgba(167, 139, 250, 0.3);
    background: rgba(167, 139, 250, 0.04);
    transition: all 0.18s ease;
}

/* ─── Vercel: continue buton hover glow */
.necox-pp-modal-root[data-preset="vercel"] .necox-pp-picker-btn:hover {
    box-shadow: 0 0 40px rgba(167, 139, 250, 0.6), 0 0 20px rgba(34, 211, 238, 0.3);
    transform: translateY(-2px);
}

/* ─── Vercel: success/error icon pulse animation */
.necox-pp-modal-root[data-preset="vercel"] .necox-pp-result-icon {
    animation: necox-pp-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes necox-pp-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}