/* ===================================================== */
/* GLOBAL SAFETY */
/* ===================================================== */

html,
body {

    overflow-x: hidden;

}

* {

    box-sizing: border-box;

}

/* ===================================================== */
/* LARGE LAPTOPS */
/* ===================================================== */

@media (max-width: 1200px) {

    .support-wrapper {

        max-width: 1000px;

    }

}

/* ===================================================== */
/* TABLETS / SMALL LAPTOPS */
/* ===================================================== */

@media (max-width: 1024px) {

    .support-wrapper {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .profile-card {

        width: 100%;

        max-width: 460px;

        margin: 0 auto;

    }

    .support-panel {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .panel-subtitle {

        margin-inline: auto;

    }

    .currency-toggle,
    .quick-amounts,
    .payment-icons,
    .social-links {

        justify-content: center;

    }

    .support-form {

        width: 100%;

    }

}

/* ===================================================== */
/* TABLETS */
/* ===================================================== */

@media (max-width: 768px) {

    .main-container {

        padding: 20px;

    }

    .profile-card,
    .support-panel {

        padding: 28px;

        border-radius: 24px;

    }

    .panel-title {

        font-size: 2.2rem;

        justify-content: center;

        flex-wrap: wrap;

    }

    .panel-subtitle {

        font-size: 0.95rem;

    }

    .profile-name {

        font-size: 1.8rem;

    }

    .profile-avatar {

        width: 110px;

        height: 110px;

    }

    .quick-amounts,
    .payment-icons {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        width: 100%;

        gap: 14px;

    }

    .amount-btn,
    .payment-item {

        width: 100%;

    }

    .currency-toggle {

        width: 100%;

    }

    .currency-btn {

        flex: 1;

    }

}

/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media (max-width: 520px) {

    .main-container {

        padding: 12px;

    }

    .support-wrapper {

        gap: 16px;

    }

    .profile-card,
    .support-panel {

        width: 100%;

        padding: 22px;

        border-radius: 20px;

    }

    .panel-title {

        font-size: 1.8rem;

        line-height: 1.2;

    }

    .panel-subtitle {

        font-size: 0.9rem;

    }

    .profile-name {

        font-size: 1.5rem;

    }

    .profile-description p {

        font-size: 0.92rem;

    }

    .profile-avatar {

        width: 90px;

        height: 90px;

    }

    .social-links {

        gap: 12px;

        flex-wrap: wrap;

    }

    .social-btn {

        width: 46px;

        height: 46px;

        font-size: 1.1rem;

    }

    .quick-amounts,
    .payment-icons {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    .amount-btn,
    .payment-item {

        padding: 12px;

        font-size: 0.9rem;

        border-radius: 14px;

    }

    .currency-btn {

        padding: 12px 18px;

    }

    .support-btn {

        width: 100%;

        padding: 18px;

        border-radius: 18px;

    }

    .input-wrapper input,
    .textarea-wrapper textarea {

        padding: 16px;

        font-size: 0.95rem;

    }

}

/* ===================================================== */
/* VERY SMALL DEVICES */
/* ===================================================== */

@media (max-width: 380px) {

    .panel-title {

        font-size: 1.5rem;

    }

    .panel-subtitle {

        font-size: 0.85rem;

    }

    .profile-name {

        font-size: 1.3rem;

    }

    .profile-avatar {

        width: 78px;

        height: 78px;

    }

    .quick-amounts,
    .payment-icons {

        grid-template-columns: 1fr;

    }

    .currency-toggle {

        flex-direction: column;

    }

    .currency-btn {

        width: 100%;

    }

}