html {
    scroll-behavior: smooth;
}

.pp-page {
    background: #f6f8fb;
    /*  min-height: 100vh;  */
}

.pp-container {
    max-width: 1024px;
}

.pp-card {
    border-radius: .75rem; /* 12px */
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

    .pp-card .card-header {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        background: linear-gradient(180deg, rgba(13,110,253,.07), rgba(25,135,84,.05));
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

.pp-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.pp-brand {
    min-width: 0;
}


.pp-brand-logo {
    flex-shrink: 0;
}

.pp-fade {
    opacity: 1;
    transition: opacity 180ms ease;
    will-change: opacity;
}

    .pp-fade.is-fading {
        opacity: 0;
    }


.pp-brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0d6efd, #20c997);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 10px 22px rgba(13,110,253,.20);
    flex: 0 0 auto;
}

.pp-brand-title {
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0;
    line-height: 1.1;
}


.pp-brand-sub {
    margin: .15rem 0 0 0;
    color: rgba(33,37,41,.65);
    font-size: .9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


.pp-kv .kv-label {
    font-size: .8rem;
    color: rgba(33,37,41,.65);
}

.pp-kv .kv-value {
    font-weight: 800;
}

.pp-amount-pill {
    font-weight: 800;
    letter-spacing: .2px;
}

.pp-help {
    background: rgba(13,110,253,.04);
    border: 1px solid rgba(13,110,253,.12);
}

.pp-sec-note {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: .9rem;
}

.pp-sticky {
    position: sticky;
    top: 1rem;
}

/* Mobile ergonomics */
@media (max-width: 576px) {
    .pp-card {
        border-radius: .9rem;
    }

        .pp-card .card-header {
            border-top-left-radius: .9rem;
            border-top-right-radius: .9rem;
        }
}


/* ================================
   Payment Result (Fail/Success)
   ================================ */

.pp-result {
    text-align: center;
}

.pp-result-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem auto;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

.pp-result-icon--fail {
    background: #fff;
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #dc3545;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

.pp-result-icon--success {
    background-color: rgba(25, 135, 84, 0.1); /* bootstrap success */
    color: #198754;
}
 
.pp-result-icon--info {
    background-color: #eaf2fb;
    color: #1e6fd9; /* Bootstrap primary'ye yakın */
}


.pp-result-title {
    font-size: 1.35rem;
    font-weight: 800;
}

.pp-result-sub {
    margin: .35rem 0 0 0;
    color: rgba(33, 37, 41, .70);
}

.pp-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 1rem 0;
}

.pp-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    background: rgba(13,110,253,.06);
    border: 1px solid rgba(13,110,253,.14);
    color: rgba(33, 37, 41, .85);
    max-width: 100%;
}

    .pp-chip code {
        color: inherit;
        font-weight: 800;
    }

.pp-msg-box {
    background: rgba(220, 53, 69, 0.04);
    border: 1px solid rgba(220, 53, 69, 0.16);
}

.pp-msg-title {
    font-weight: 800;
    margin: 0 0 .25rem 0;
}

.pp-processing {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
}

    .pp-processing .pp-msg-title {
        font-weight: 600;
        margin-bottom: 4px;
    }

    .pp-processing .pp-msg-body {
        color: #6c757d; /* bootstrap text-secondary */
    }

.pp-result--warning .pp-msg-title {
    color: #fd7e14; /* bootstrap warning-ish */
}

.pp-result--warning .pp-msg-body {
    color: #6c757d;
}

.pp-spinner {
    font-size: 1.5rem;
    line-height: 1;
}



.pp-msg-body {
    margin: 0;
    color: rgba(33, 37, 41, .75);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pp-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
/* Payment page brand icon */
.pp-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(13,110,253,0.10);
    color: #0d6efd;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    margin: 0 auto 1rem auto;
    font-size: 1.4rem;
}

.pp-result-sub {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(33, 37, 41, .65);
}

.pp-actions .btn {
    min-width: 160px;
    box-shadow: 0 6px 18px rgba(13,110,253,.25);
}

.pp-page {
    background: linear-gradient(180deg, #f6f8fb, #eef2f7);
}


}


/* Retry button: soft / secondary (not primary CTA) */
.pp-btn-retry {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.18);
    color: rgba(15, 23, 42, 0.82);
    box-shadow: none;
}

    .pp-btn-retry:hover,
    .pp-btn-retry:focus {
        background: rgba(15, 23, 42, 0.06);
        border-color: rgba(15, 23, 42, 0.28);
        color: rgba(15, 23, 42, 0.92);
    }

    .pp-btn-retry:active {
        background: rgba(15, 23, 42, 0.08);
        border-color: rgba(15, 23, 42, 0.35);
    }


@media (max-width: 576px) {

    .pp-page {
        overflow-x: hidden;
    }

    .pp-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
}


.pp-detail-box {
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: .75rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    flex-wrap: wrap; /* mobilde taşarsa alta kırılabilir */
}

.pp-detail-title {
    font-weight: 700;
    font-size: .85rem;
    color: rgba(15, 23, 42, 0.65);
    white-space: nowrap;
}

.pp-detail-body {
    font-size: .95rem;
    color: rgba(15, 23, 42, 0.85);
    overflow-wrap: anywhere;
    word-break: break-word;
}


.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #ddd;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-text {
    margin-top: 12px;
    font-size: 14px;
    color: #555;
}