/* =========================================================
   MIND POWER ARTISTS
   STATUS PAGES (payment success / failed / pending, 404)
   ---------------------------------------------------------
   Builds on home.css: .cta-section, .cta-glow, .cta-content,
   .section-label, .service-icon, .hero-actions, .btn, .text-link.
   Only the centred card frame and H1 sizing live here.
========================================================= */


/* ===== SECTION ===== */

.status-section {
    position: relative;

    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;

    padding: 140px 0 110px;

    border-top: 0;
}


/* ===== CARD ===== */

.status-card {
    position: relative;

    max-width: 720px;

    margin-inline: auto;

    padding: 56px 48px;

    border:
        1px solid
        rgba(244,123,32,0.24);

    border-radius:
        var(--radius-xl);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(244,123,32,0.12),
            transparent 55%
        ),
        #111;
}


/* ===== ICON ===== */

.status-card .service-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 26px;

    border-radius: 16px;
}

.status-card .service-icon svg {
    width: 30px;
    height: 30px;
}


/* ===== HEADING + TEXT ===== */

.status-card h1 {
    margin: 12px 0 0;

    color: var(--mpa-white);

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1.08;

    letter-spacing: -0.04em;
}

.status-card h1 span {
    color: var(--mpa-orange);
}

.status-card .cta-content p {
    color: var(--mpa-muted);

    font-size: 15px;
}

.status-card .hero-actions {
    flex-wrap: wrap;

    margin-top: 34px;
}


/* ===== HELP LINE ===== */

.status-card .cta-content .status-help {
    margin-top: 30px;

    padding-top: 24px;

    border-top:
        1px solid var(--mpa-border);

    font-size: 13px;
}

.status-help .text-link {
    font-size: 13px;

    white-space: normal;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 680px) {

    .status-section {
        min-height: 0;

        padding: 120px 0 80px;
    }

    .status-card {
        padding: 42px 24px;

        border-radius:
            var(--radius-lg);
    }

}

@media (max-width: 420px) {

    .status-card {
        padding: 34px 18px;
    }

}


/* ===== FOCUS STATES (MPA-065) ===== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mpa-orange-light, #ff9b4a);

    outline-offset: 4px;
}