/* =========================================================
   PDFLooks - Support Us Page
   ========================================================= */


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #ffffff;

    color: #0b1220;

    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   SUPPORT PAGE
   ========================================================= */

.support-page {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 31, 43, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37, 99, 235, 0.08),
            transparent 30%
        ),
        #ffffff;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.support-page::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.55;

    background-image:
        radial-gradient(
            rgba(239, 68, 68, 0.16) 1.4px,
            transparent 1.4px
        );

    background-size: 24px 24px;
}


.bg-shape {
    position: absolute;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;
}


.bg-shape-top {
    width: 390px;
    height: 390px;

    top: -220px;
    right: -150px;

    background:
        linear-gradient(
            135deg,
            #ff1724,
            #e50918
        );

    opacity: 0.95;
}


.bg-shape-bottom {
    width: 360px;
    height: 360px;

    bottom: -230px;
    left: -170px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    opacity: 0.95;
}


/* =========================================================
   HEADER
   ========================================================= */

.support-header {
    position: relative;

    z-index: 20;

    width: 100%;

    background: rgba(255, 255, 255, 0.94);

    border-bottom: 1px solid #e8ebf0;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);
}


.header-container {
    width: min(1240px, 94%);

    min-height: 82px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.site-logo img {
    width: 190px;

    height: auto;

    display: block;

    object-fit: contain;
}


.site-logo a {
    display: flex;

    align-items: center;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-left: auto;
}


.main-nav a {
    position: relative;

    font-size: 15px;

    font-weight: 700;

    color: #111827;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.main-nav a:hover {
    color: #ef1b27;

    transform: translateY(-1px);
}


.main-nav a.active {
    color: #ef1b27;
}


.main-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -9px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #ef1b27,
            #2563eb
        );
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.login-link {
    padding: 11px 14px;

    font-size: 15px;

    font-weight: 700;

    color: #111827;

    transition: 0.25s ease;
}


.login-link:hover {
    color: #ef1b27;
}


.signup-link {
    padding: 12px 19px;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f21d2a,
            #e81724
        );

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(239, 28, 40, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.signup-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(239, 28, 40, 0.28);
}


.theme-toggle {
    width: 43px;
    height: 43px;

    border: none;

    border-radius: 12px;

    background: #f5f7fa;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.theme-toggle:hover {
    transform: rotate(8deg) scale(1.05);

    background: #eef2f7;
}


/* =========================================================
   HERO
   ========================================================= */

.support-hero {
    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

    min-height: 580px;

    padding: 90px 0 80px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(340px, 0.9fr);

    align-items: center;

    gap: 60px;
}


.hero-content {
    position: relative;

    z-index: 3;
}


.support-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    margin-bottom: 22px;

    border-radius: 999px;

    background: #fff0f1;

    border: 1px solid #ffd5d8;

    color: #ef1724;

    font-size: 15px;

    font-weight: 800;
}


.hero-content h1 {
    max-width: 720px;

    font-size: clamp(
        44px,
        5.5vw,
        72px
    );

    line-height: 1.1;

    letter-spacing: -2px;

    font-weight: 900;

    color: #0b1220;
}


.hero-content h1 span {
    color: #ef1c28;
}


.hero-description {
    max-width: 700px;

    margin-top: 25px;

    color: #4b6380;

    font-size: 18px;

    line-height: 1.75;
}


.hero-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 32px;

    flex-wrap: wrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.primary-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 0 25px;

    border-radius: 10px;

    border: none;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f31c29,
            #df101c
        );

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(239, 28, 40, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.primary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(239, 28, 40, 0.30);
}


.secondary-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 0 25px;

    border-radius: 10px;

    border: 1px solid #dce3ec;

    background: #ffffff;

    color: #172033;

    font-size: 15px;

    font-weight: 800;

    transition:
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.secondary-btn:hover {
    color: #ef1c28;

    border-color: #ef1c28;

    transform: translateY(-2px);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.visual-card {
    position: relative;

    width: 270px;

    height: 270px;

    border-radius: 38px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f7ff
        );

    border: 1px solid #dce7f6;

    box-shadow:
        0 25px 70px rgba(20, 48, 90, 0.15);

    z-index: 2;
}


.visual-icon {
    width: 95px;
    height: 95px;

    margin-bottom: 18px;

    border-radius: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 50px;

    background:
        linear-gradient(
            145deg,
            #fff0f1,
            #ffffff
        );

    box-shadow:
        0 10px 30px rgba(239, 28, 40, 0.12);
}


.visual-card strong {
    font-size: 27px;

    color: #111827;
}


.visual-card > span {
    margin-top: 7px;

    font-size: 14px;

    color: #59708d;
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.floating-card {
    position: absolute;

    z-index: 4;

    padding: 13px 17px;

    border-radius: 13px;

    background: #ffffff;

    border: 1px solid #e7edf5;

    box-shadow:
        0 14px 35px rgba(25, 45, 75, 0.13);

    font-size: 14px;

    font-weight: 800;

    animation:
        floatCard 4s ease-in-out infinite;
}


.card-one {
    top: 38px;
    left: 15px;
}


.card-two {
    right: 10px;
    top: 105px;

    animation-delay: 0.8s;
}


.card-three {
    left: 45px;
    bottom: 35px;

    animation-delay: 1.4s;
}


@keyframes floatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


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

.why-support,
.support-options,
.transparency,
.support-faq {
    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

    padding: 90px 0;
}


.section-heading {
    text-align: center;

    max-width: 720px;

    margin:
        0 auto 45px;
}


.section-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #ef1c28;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.section-heading h2 {
    font-size: clamp(
        31px,
        4vw,
        46px
    );

    line-height: 1.3;

    color: #0b1220;

    font-weight: 900;

    letter-spacing: -1px;
}


.section-heading p {
    margin-top: 13px;

    color: #5d7189;

    line-height: 1.7;

    font-size: 16px;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.benefits-grid {
    display: grid;

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

    gap: 18px;
}


.benefit-card {
    padding: 28px 23px;

    min-height: 245px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #e4e9f0;

    box-shadow:
        0 10px 30px rgba(23, 42, 70, 0.055);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.benefit-card:hover {
    transform: translateY(-6px);

    border-color: #ffd1d5;

    box-shadow:
        0 18px 38px rgba(23, 42, 70, 0.10);
}


.benefit-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 15px;

    background: #fff1f2;

    font-size: 28px;
}


.benefit-card h3 {
    font-size: 19px;

    color: #111827;

    margin-bottom: 10px;
}


.benefit-card p {
    color: #61748b;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   SUPPORT OPTIONS
   ========================================================= */

.support-options {
    max-width: 1050px;
}


.donation-grid {
    display: grid;

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

    gap: 17px;
}


.donation-card {
    position: relative;

    min-height: 205px;

    border-radius: 18px;

    border: 1px solid #dfe6ef;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.donation-card:hover {
    transform: translateY(-6px);

    border-color: #ef1c28;

    box-shadow:
        0 18px 40px rgba(239, 28, 40, 0.12);
}


.donation-card.popular {
    border: 2px solid #ef1c28;

    box-shadow:
        0 12px 30px rgba(239, 28, 40, 0.10);
}


.popular-badge {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 6px 11px;

    border-radius: 999px;

    background: #ef1c28;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.5px;
}


.donation-icon {
    font-size: 34px;

    margin-bottom: 3px;
}


.donation-card strong {
    font-size: 30px;

    color: #101827;
}


.donation-card > span:last-child {
    font-size: 13px;

    color: #718197;
}


/* =========================================================
   CUSTOM SUPPORT
   ========================================================= */

.custom-support {
    max-width: 650px;

    margin: 38px auto 0;

    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

    border: 1px solid #dfe7f2;

    text-align: center;
}


.custom-support h3 {
    margin-bottom: 18px;

    color: #1a2638;

    font-size: 18px;
}


.custom-amount-wrapper {
    display: flex;

    align-items: center;

    max-width: 470px;

    margin: auto;

    min-height: 53px;

    overflow: hidden;

    border: 1px solid #ccd6e2;

    border-radius: 10px;

    background: #ffffff;
}


.currency-symbol {
    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: 800;

    color: #ef1c28;
}


.custom-amount-wrapper input {
    flex: 1;

    height: 51px;

    min-width: 0;

    border: none;

    outline: none;

    padding: 0 10px;

    font-size: 15px;

    color: #172033;
}


.custom-amount-wrapper input::placeholder {
    color: #9aa7b7;
}


.custom-support-btn {
    height: 43px;

    margin-right: 5px;

    padding: 0 18px;

    border: none;

    border-radius: 8px;

    color: #ffffff;

    background: #ef1c28;

    font-weight: 800;

    transition: 0.25s ease;
}


.custom-support-btn:hover {
    background: #d9101c;

    transform: translateY(-1px);
}


/* =========================================================
   SUPPORT MESSAGE
   ========================================================= */

.support-message {
    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

    padding: 20px 0 90px;
}


.message-card {
    display: flex;

    align-items: center;

    gap: 25px;

    padding: 38px;

    border-radius: 23px;

    background:
        linear-gradient(
            110deg,
            #fff0f1,
            #f5f9ff
        );

    border: 1px solid #f0dce0;
}


.message-icon {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    font-size: 40px;

    box-shadow:
        0 10px 25px rgba(31, 45, 65, 0.08);
}


.message-content h2 {
    font-size: 27px;

    color: #101827;

    margin-bottom: 9px;
}


.message-content p {
    max-width: 780px;

    color: #596d84;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 10px;
}


.message-content strong {
    color: #ef1c28;

    font-size: 14px;
}


/* =========================================================
   TRANSPARENCY
   ========================================================= */

.transparency {
    max-width: 1050px;
}


.transparency-grid {
    display: grid;

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

    gap: 15px;
}


.transparency-item {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 22px;

    border-radius: 15px;

    border: 1px solid #e3e9f0;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.transparency-item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(30, 50, 75, 0.08);
}


.transparency-item > span {
    width: 51px;
    height: 51px;

    flex-shrink: 0;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f2f7ff;

    font-size: 25px;
}


.transparency-item strong {
    color: #172033;

    font-size: 16px;
}


.transparency-item p {
    margin-top: 4px;

    color: #6c7e93;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   FAQ
   ========================================================= */

.support-faq {
    max-width: 900px;
}


.faq-container {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.faq-item {
    overflow: hidden;

    border-radius: 13px;

    border: 1px solid #e1e7ef;

    background: #ffffff;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.faq-item[open] {
    border-color: #ffd0d4;

    box-shadow:
        0 10px 28px rgba(25, 45, 70, 0.07);
}


.faq-item summary {
    position: relative;

    padding: 20px 48px 20px 21px;

    cursor: pointer;

    list-style: none;

    color: #162033;

    font-size: 15px;

    font-weight: 800;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::after {
    content: "+";

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 23px;

    color: #ef1c28;

    font-weight: 400;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-item p {
    padding:
        0 21px 21px;

    color: #61748a;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-support {
    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: 20px auto 90px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #101b31,
            #152c55
        );

    box-shadow:
        0 25px 65px rgba(16, 30, 55, 0.18);
}


.final-support::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -170px;
    right: -90px;

    border-radius: 50%;

    background: #ef1c28;

    opacity: 0.9;
}


.final-support::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    bottom: -150px;
    left: -80px;

    border-radius: 50%;

    background: #2563eb;

    opacity: 0.9;
}


.final-support-content {
    position: relative;

    z-index: 2;

    padding: 70px 25px;

    text-align: center;

    color: #ffffff;
}


.final-heart {
    font-size: 42px;

    margin-bottom: 13px;
}


.final-support-content h2 {
    font-size: clamp(
        30px,
        4vw,
        45px
    );

    margin-bottom: 12px;
}


.final-support-content p {
    color: #c9d4e5;

    font-size: 16px;

    margin-bottom: 25px;
}


.final-support .primary-btn {
    background: #ffffff;

    color: #e91a26;

    box-shadow: none;
}


.final-support .primary-btn:hover {
    background: #f8fafc;
}


/* =========================================================
   FOOTER
   ========================================================= */

.support-footer {
    position: relative;

    z-index: 2;

    background: #0c1424;

    color: #ffffff;
}


.footer-container {
    width: min(1180px, 92%);

    margin: auto;

    padding: 48px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.footer-brand img {
    width: 170px;

    display: block;

    margin-bottom: 10px;

    background: #ffffff;

    border-radius: 5px;

    padding: 3px;
}


.footer-brand p {
    color: #9eabc0;

    font-size: 13px;
}


.footer-links {
    display: flex;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap;
}


.footer-links a {
    color: #c6d0df;

    font-size: 14px;

    transition: color 0.2s ease;
}


.footer-links a:hover {
    color: #ffffff;
}


.footer-bottom {
    width: min(1180px, 92%);

    margin: auto;

    padding: 18px 0 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    display: flex;

    justify-content: space-between;

    gap: 15px;

    color: #8492a8;

    font-size: 12px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode {
    background: #080d17;

    color: #e7edf7;
}


body.dark-mode .support-page {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 31, 43, 0.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37, 99, 235, 0.09),
            transparent 30%
        ),
        #080d17;
}


body.dark-mode .support-header {
    background: rgba(8, 13, 23, 0.94);

    border-bottom-color: #1d2738;
}


body.dark-mode .main-nav a,
body.dark-mode .login-link {
    color: #e8eef8;
}


body.dark-mode .main-nav a:hover,
body.dark-mode .main-nav a.active,
body.dark-mode .login-link:hover {
    color: #ff4b55;
}


body.dark-mode .theme-toggle {
    background: #182235;

    color: #ffffff;
}


body.dark-mode .hero-content h1,
body.dark-mode .section-heading h2,
body.dark-mode .benefit-card h3,
body.dark-mode .visual-card strong,
body.dark-mode .message-content h2,
body.dark-mode .transparency-item strong,
body.dark-mode .faq-item summary,
body.dark-mode .custom-support h3,
body.dark-mode .donation-card strong {
    color: #f2f6fc;
}


body.dark-mode .hero-description,
body.dark-mode .section-heading p,
body.dark-mode .benefit-card p,
body.dark-mode .message-content p,
body.dark-mode .transparency-item p,
body.dark-mode .faq-item p {
    color: #aab8cb;
}


body.dark-mode .benefit-card,
body.dark-mode .donation-card,
body.dark-mode .transparency-item,
body.dark-mode .faq-item,
body.dark-mode .secondary-btn,
body.dark-mode .custom-support,
body.dark-mode .visual-card {
    background: #101827;

    border-color: #253146;
}


body.dark-mode .benefit-card:hover {
    border-color: #8d2830;
}


body.dark-mode .secondary-btn {
    color: #e9eef7;
}


body.dark-mode .custom-support {
    background: #101827;
}


body.dark-mode .custom-amount-wrapper {
    background: #0b1220;

    border-color: #2b384d;
}


body.dark-mode .custom-amount-wrapper input {
    background: transparent;

    color: #ffffff;
}


body.dark-mode .custom-amount-wrapper input::placeholder {
    color: #77879d;
}


body.dark-mode .message-card {
    background:
        linear-gradient(
            110deg,
            #24171b,
            #101c31
        );

    border-color: #3a2830;
}


body.dark-mode .message-icon {
    background: #182235;
}


body.dark-mode .transparency-item > span {
    background: #182235;
}


body.dark-mode .faq-item[open] {
    border-color: #7b3036;
}

/* =========================================================
   PAYMENT METHODS
   India - UPI
   International - PayPal
   Nepal - eSewa / Khalti / Fonepay
   ========================================================= */

.payment-method-section {
    width: 100%;
    max-width: 900px;

    margin: 65px auto 0;

    padding: 42px 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    border: 1px solid #dfe7f1;

    box-shadow:
        0 18px 50px rgba(24, 45, 75, 0.08);
}


/* =========================================================
   SELECTED SUPPORT SUMMARY
   ========================================================= */

.selected-support-summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 650px;

    margin: 0 auto 30px;

    padding: 16px 20px;

    border-radius: 13px;

    background: #fff4f5;

    border: 1px solid #ffd7da;
}


.selected-support-summary span {
    color: #596b81;

    font-size: 14px;

    font-weight: 700;
}


.selected-support-summary strong {
    color: #ef1c28;

    font-size: 24px;

    font-weight: 900;
}


/* =========================================================
   COUNTRY SELECTION
   ========================================================= */

.payment-country-grid {
    display: grid;

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

    gap: 14px;

    max-width: 760px;

    margin: 0 auto 30px;
}


.payment-country-card {
    min-height: 145px;

    padding: 20px 14px;

    border: 1px solid #dfe6ef;

    border-radius: 17px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    text-align: center;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.payment-country-card:hover {
    transform: translateY(-4px);

    border-color: #ef1c28;

    box-shadow:
        0 14px 30px rgba(239, 28, 40, 0.10);
}


.payment-country-card.active {
    border: 2px solid #ef1c28;

    background:
        linear-gradient(
            145deg,
            #fff4f5,
            #ffffff
        );

    box-shadow:
        0 12px 30px rgba(239, 28, 40, 0.12);
}


.payment-country-icon {
    font-size: 32px;

    line-height: 1;

    margin-bottom: 5px;
}


.payment-country-name {
    color: #111827;

    font-size: 16px;

    font-weight: 900;
}


.payment-country-description {
    color: #718197;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   PAYMENT OPTIONS
   ========================================================= */

.payment-options {
    max-width: 760px;

    margin: auto;
}


.payment-group {
    padding: 25px;

    border-radius: 17px;

    background: #ffffff;

    border: 1px solid #e1e8f0;

    animation:
        paymentFadeIn 0.25s ease;
}


@keyframes paymentFadeIn {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   PAYMENT GROUP HEADER
   ========================================================= */

.payment-group-header {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.payment-group-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #f4f7fb;

    font-size: 27px;
}


.payment-group-header h3 {
    color: #111827;

    font-size: 19px;

    font-weight: 900;

    margin-bottom: 4px;
}


.payment-group-header p {
    color: #718197;

    font-size: 13px;
}


/* =========================================================
   PAYMENT METHOD CARD
   ========================================================= */

.payment-method-card {
    width: 100%;

    min-height: 76px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 14px;

    text-align: left;

    border: 1px solid #dfe6ef;

    border-radius: 13px;

    background: #ffffff;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}


.payment-method-card + .payment-method-card {
    margin-top: 10px;
}


.payment-method-card:hover {
    transform: translateY(-2px);

    border-color: #ef1c28;

    background: #fffafb;

    box-shadow:
        0 10px 25px rgba(20, 40, 70, 0.08);
}


.payment-method-card.selected {
    border: 2px solid #ef1c28;

    background: #fff5f6;
}


.payment-method-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f5f7fa;

    font-size: 24px;
}


.payment-method-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.payment-method-content strong {
    color: #111827;

    font-size: 16px;

    font-weight: 900;
}


.payment-method-content small {
    color: #718197;

    font-size: 12px;

    line-height: 1.45;
}


.payment-method-arrow {
    color: #ef1c28;

    font-size: 22px;

    font-weight: 900;

    transition:
        transform 0.2s ease;
}


.payment-method-card:hover .payment-method-arrow {
    transform: translateX(4px);
}


/* =========================================================
   PAYMENT MESSAGE
   ========================================================= */

.payment-message {
    max-width: 760px;

    margin: 20px auto 0;

    padding: 14px 17px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 11px;

    background: #f3f7ff;

    border: 1px solid #d8e5fb;

    color: #425a78;

    font-size: 13px;

    line-height: 1.5;
}


.payment-message-icon {
    flex-shrink: 0;

    font-size: 18px;
}


.payment-message.success {
    background: #effcf5;

    border-color: #c9f0da;

    color: #187044;
}


.payment-message.error {
    background: #fff2f3;

    border-color: #ffd0d4;

    color: #b4232c;
}


/* =========================================================
   HIDDEN PAYMENT ELEMENT
   ========================================================= */

[hidden] {
    display: none !important;
}


/* =========================================================
   PAYMENT SECTION DARK MODE
   ========================================================= */

body.dark-mode .payment-method-section {
    background:
        linear-gradient(
            145deg,
            #101827,
            #0e1726
        );

    border-color: #253146;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25);
}


body.dark-mode .selected-support-summary {
    background: #24171b;

    border-color: #573039;
}


body.dark-mode .selected-support-summary span {
    color: #aebbd0;
}


body.dark-mode .payment-country-card,
body.dark-mode .payment-group,
body.dark-mode .payment-method-card {
    background: #101827;

    border-color: #29364b;
}


body.dark-mode .payment-country-card:hover,
body.dark-mode .payment-method-card:hover {
    background: #151f31;

    border-color: #ef3843;
}


body.dark-mode .payment-country-card.active,
body.dark-mode .payment-method-card.selected {
    background: #24171b;

    border-color: #ef3843;
}


body.dark-mode .payment-country-name,
body.dark-mode .payment-group-header h3,
body.dark-mode .payment-method-content strong {
    color: #f2f6fc;
}


body.dark-mode .payment-country-description,
body.dark-mode .payment-group-header p,
body.dark-mode .payment-method-content small {
    color: #93a3b9;
}


body.dark-mode .payment-group-icon,
body.dark-mode .payment-method-icon {
    background: #182235;
}


body.dark-mode .payment-message {
    background: #132039;

    border-color: #294266;

    color: #a9bdd8;
}


body.dark-mode .payment-message.success {
    background: #10291d;

    border-color: #205e3c;

    color: #8bd6aa;
}


body.dark-mode .payment-message.error {
    background: #2a171a;

    border-color: #653037;

    color: #ffadb3;
}


/* =========================================================
   PAYMENT RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 820px) {

    .payment-method-section {
        padding: 35px 25px;
    }


    .payment-country-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;
    }


    .payment-country-card {
        min-height: 135px;

        padding: 16px 10px;
    }

}


/* =========================================================
   PAYMENT RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .payment-method-section {
        width: 100%;

        margin-top: 45px;

        padding: 28px 15px;

        border-radius: 19px;
    }


    .selected-support-summary {
        padding: 14px 15px;

        margin-bottom: 22px;
    }


    .selected-support-summary span {
        font-size: 12px;
    }


    .selected-support-summary strong {
        font-size: 20px;
    }


    .payment-country-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .payment-country-card {
        min-height: 85px;

        padding: 12px 15px;

        flex-direction: row;

        justify-content: flex-start;

        text-align: left;

        gap: 12px;
    }


    .payment-country-icon {
        font-size: 27px;

        margin: 0;
    }


    .payment-country-name {
        font-size: 14px;
    }


    .payment-country-description {
        font-size: 11px;
    }


    .payment-group {
        padding: 18px 13px;
    }


    .payment-group-header {
        gap: 10px;

        margin-bottom: 14px;
    }


    .payment-group-icon {
        width: 45px;
        height: 45px;

        font-size: 23px;
    }


    .payment-group-header h3 {
        font-size: 17px;
    }


    .payment-group-header p {
        font-size: 11px;
    }


    .payment-method-card {
        min-height: 68px;

        padding: 10px;
    }


    .payment-method-icon {
        width: 42px;
        height: 42px;

        font-size: 21px;
    }


    .payment-method-content strong {
        font-size: 14px;
    }


    .payment-method-content small {
        font-size: 10px;
    }


    .payment-method-arrow {
        font-size: 19px;
    }


    .payment-message {
        padding: 12px;

        font-size: 11px;
    }

}


/* =========================================================
   PAYMENT RESPONSIVE - VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .payment-method-section {
        padding: 24px 11px;
    }


    .payment-group {
        padding: 15px 10px;
    }


    .payment-method-content small {
        font-size: 9px;
    }


    .payment-country-description {
        font-size: 10px;
    }

}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .main-nav {
        gap: 18px;
    }


    .header-container {
        gap: 15px;
    }


    .benefits-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .donation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .support-hero {
        grid-template-columns:
            1fr;

        text-align: center;

        padding-top: 70px;
    }


    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-visual {
        min-height: 350px;
    }

}


/* =========================================================
   RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {

    .header-container {
        min-height: 70px;
    }


    .site-logo img {
        width: 155px;
    }


    .main-nav {
        display: none;
    }


    .header-actions {
        margin-left: auto;
    }


    .login-link {
        padding: 8px;
    }


    .signup-link {
        padding: 10px 13px;
    }


    .theme-toggle {
        width: 39px;
        height: 39px;
    }


    .message-card {
        align-items: flex-start;

        flex-direction: column;
    }


    .transparency-grid {
        grid-template-columns: 1fr;
    }


    .footer-container {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .support-page::before {
        background-size: 20px 20px;
    }


    .bg-shape-top {
        width: 260px;
        height: 260px;

        top: -150px;
        right: -130px;
    }


    .bg-shape-bottom {
        width: 250px;
        height: 250px;

        bottom: -160px;
        left: -130px;
    }


    .header-container {
        width: 94%;

        gap: 8px;
    }


    .site-logo img {
        width: 135px;
    }


    .header-actions {
        gap: 4px;
    }


    .login-link {
        font-size: 13px;
    }


    .signup-link {
        display: none;
    }


    .theme-toggle {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }


    .support-hero {
        width: 92%;

        padding:
            60px 0
            55px;

        gap: 20px;
    }


    .support-badge {
        font-size: 13px;

        padding: 8px 13px;
    }


    .hero-content h1 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .hero-description {
        font-size: 15px;

        line-height: 1.65;
    }


    .hero-actions {
        flex-direction: column;

        width: 100%;
    }


    .primary-btn,
    .secondary-btn {
        width: 100%;
    }


    .hero-visual {
        min-height: 300px;
    }


    .visual-card {
        width: 220px;
        height: 220px;

        border-radius: 30px;
    }


    .visual-icon {
        width: 75px;
        height: 75px;

        font-size: 38px;

        border-radius: 21px;
    }


    .visual-card strong {
        font-size: 23px;
    }


    .floating-card {
        padding: 10px 12px;

        font-size: 11px;
    }


    .card-one {
        left: 0;
        top: 35px;
    }


    .card-two {
        right: 0;
        top: 80px;
    }


    .card-three {
        left: 5px;
        bottom: 25px;
    }


    .why-support,
    .support-options,
    .transparency,
    .support-faq {
        padding: 65px 0;
    }


    .section-heading {
        margin-bottom: 30px;
    }


    .section-heading h2 {
        font-size: 31px;
    }


    .section-heading p {
        font-size: 14px;
    }


    .benefits-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .benefit-card {
        min-height: auto;

        padding: 24px 20px;
    }


    .donation-grid {
        grid-template-columns: 1fr 1fr;

        gap: 11px;
    }


    .donation-card {
        min-height: 175px;
    }


    .donation-card strong {
        font-size: 26px;
    }


    .donation-card > span:last-child {
        font-size: 11px;
    }


    .custom-support {
        padding: 22px 15px;
    }


    .custom-amount-wrapper {
        min-height: 48px;
    }


    .custom-amount-wrapper input {
        height: 47px;

        font-size: 13px;
    }


    .custom-support-btn {
        height: 39px;

        padding: 0 12px;

        font-size: 12px;
    }


    .message-card {
        padding: 25px;

        border-radius: 19px;
    }


    .message-content h2 {
        font-size: 23px;
    }


    .message-content p {
        font-size: 13px;
    }


    .transparency-item {
        padding: 17px;
    }


    .transparency-item > span {
        width: 45px;
        height: 45px;

        font-size: 21px;
    }


    .faq-item summary {
        padding:
            17px 43px 17px 17px;

        font-size: 14px;
    }


    .faq-item p {
        padding:
            0 17px 18px;

        font-size: 13px;
    }


    .final-support {
        width: 92%;

        margin-bottom: 60px;

        border-radius: 21px;
    }


    .final-support-content {
        padding: 55px 20px;
    }


    .final-support-content h2 {
        font-size: 31px;
    }


    .final-support-content p {
        font-size: 14px;
    }


    .footer-container {
        padding: 38px 0;

        gap: 25px;
    }


    .footer-links {
        gap: 14px;
    }


    .footer-bottom {
        flex-direction: column;

        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .site-logo img {
        width: 120px;
    }


    .login-link {
        font-size: 12px;
    }


    .theme-toggle {
        width: 35px;
        height: 35px;
    }


    .hero-content h1 {
        font-size: 36px;
    }


    .donation-grid {
        grid-template-columns: 1fr;
    }


    .donation-card {
        min-height: 145px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   PDFLooks - PAYMENT FLOW UPDATE
   Compatible with support.js
   ========================================================= */


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

#paymentMethods,
#payment-methods,
.payment-methods,
.payment-method-section {

    width: min(900px, 92%);

    margin: 60px auto 80px;

    padding: 42px 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    border: 1px solid #dfe7f1;

    box-shadow:
        0 18px 50px rgba(24, 45, 75, 0.08);

    position: relative;

    z-index: 5;
}


/* =========================================================
   SELECTED SUPPORT AMOUNT
   ========================================================= */

#selectedSupportAmount,
#selectedAmount {

    color: #ef1c28;

    font-size: 24px;

    font-weight: 900;
}


/* If selected amount is inside summary */

.selected-support-summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    max-width: 650px;

    margin: 0 auto 30px;

    padding: 16px 20px;

    border-radius: 13px;

    background: #fff4f5;

    border: 1px solid #ffd7da;
}


.selected-support-summary span {

    color: #596b81;

    font-size: 14px;

    font-weight: 700;
}


.selected-support-summary strong {

    color: #ef1c28;

    font-size: 24px;

    font-weight: 900;
}


/* =========================================================
   PAYMENT COUNTRY GRID
   ========================================================= */

.payment-country-grid {

    display: grid;

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

    gap: 14px;

    width: 100%;

    max-width: 760px;

    margin: 0 auto 30px;
}


/* =========================================================
   PAYMENT COUNTRY CARD
   ========================================================= */

.payment-card,
.payment-country-card,
.payment-method {

    position: relative;

    min-height: 145px;

    padding: 20px 15px;

    border: 1px solid #dce5ef;

    border-radius: 17px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.payment-card:hover,
.payment-country-card:hover,
.payment-method:hover {

    transform: translateY(-4px);

    border-color: #ef1c28;

    box-shadow:
        0 14px 30px rgba(239, 28, 40, 0.10);
}


/* =========================================================
   SELECTED PAYMENT CARD
   ========================================================= */

.payment-card.selected,
.payment-card.active,
.payment-country-card.selected,
.payment-country-card.active,
.payment-method.selected,
.payment-method.active {

    border: 2px solid #ef1c28;

    background:
        linear-gradient(
            145deg,
            #fff4f5,
            #ffffff
        );

    box-shadow:
        0 12px 30px rgba(239, 28, 40, 0.12);

    transform: translateY(-2px);
}


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

.payment-country-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px;

    border-radius: 14px;

    background: #f4f7fb;

    font-size: 28px;

    line-height: 1;
}


/* Support generic icon */

.payment-card > div:first-child {

    font-size: 30px;

    line-height: 1;

    margin-bottom: 5px;
}


/* =========================================================
   COUNTRY NAME
   ========================================================= */

.payment-country-name {

    color: #111827;

    font-size: 16px;

    font-weight: 900;
}


.payment-card h3,
.payment-country-card h3 {

    margin: 0;

    color: #111827;

    font-size: 16px;

    font-weight: 900;
}


/* =========================================================
   COUNTRY DESCRIPTION
   ========================================================= */

.payment-country-description {

    color: #718197;

    font-size: 12px;

    line-height: 1.4;
}


.payment-card p,
.payment-country-card p {

    margin: 0;

    color: #718197;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   PAYMENT OPTIONS CONTAINER
   ========================================================= */

.payment-options {

    width: 100%;

    max-width: 760px;

    margin: auto;
}


/* =========================================================
   INDIVIDUAL PAYMENT GROUP
   ========================================================= */

.payment-group {

    padding: 25px;

    border-radius: 17px;

    background: #ffffff;

    border: 1px solid #e1e8f0;

    animation:
        paymentFadeIn 0.25s ease;
}


@keyframes paymentFadeIn {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   PAYMENT GROUP HEADER
   ========================================================= */

.payment-group-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.payment-group-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #f4f7fb;

    font-size: 27px;
}


.payment-group-header h3 {

    margin: 0 0 4px;

    color: #111827;

    font-size: 19px;

    font-weight: 900;
}


.payment-group-header p {

    margin: 0;

    color: #718197;

    font-size: 13px;
}


/* =========================================================
   PAYMENT METHOD OPTIONS
   ========================================================= */

.payment-method-card {

    width: 100%;

    min-height: 76px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 14px;

    text-align: left;

    border: 1px solid #dfe6ef;

    border-radius: 13px;

    background: #ffffff;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}


.payment-method-card + .payment-method-card {

    margin-top: 10px;
}


.payment-method-card:hover {

    transform: translateY(-2px);

    border-color: #ef1c28;

    background: #fffafb;

    box-shadow:
        0 10px 25px rgba(20, 40, 70, 0.08);
}


.payment-method-card.selected,
.payment-method-card.active {

    border: 2px solid #ef1c28;

    background: #fff5f6;
}


/* =========================================================
   PAYMENT METHOD ICON
   ========================================================= */

.payment-method-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f5f7fa;

    font-size: 24px;
}


/* =========================================================
   PAYMENT METHOD CONTENT
   ========================================================= */

.payment-method-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.payment-method-content strong {

    color: #111827;

    font-size: 16px;

    font-weight: 900;
}


.payment-method-content small {

    color: #718197;

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   PAYMENT ARROW
   ========================================================= */

.payment-method-arrow {

    color: #ef1c28;

    font-size: 22px;

    font-weight: 900;

    transition:
        transform 0.2s ease;
}


.payment-method-card:hover
.payment-method-arrow {

    transform: translateX(4px);
}


/* =========================================================
   INDIA / UPI
   ========================================================= */

#indiaPayment {

    width: 100%;
}


#indiaPayment .payment-group-icon {

    background: #fff4f5;
}


/* =========================================================
   INTERNATIONAL / PAYPAL
   ========================================================= */

#internationalPayment {

    width: 100%;
}


#internationalPayment .payment-group-icon {

    background: #f0f6ff;
}


/* =========================================================
   NEPAL / ESEWA / KHALTI / FONEPAY
   ========================================================= */

#nepalPayment {

    width: 100%;
}


#nepalPayment .payment-group-icon {

    background: #f2f8ff;
}


/* =========================================================
   PAYMENT MESSAGE
   ========================================================= */

.payment-message {

    max-width: 760px;

    margin: 20px auto 0;

    padding: 14px 17px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 11px;

    background: #f3f7ff;

    border: 1px solid #d8e5fb;

    color: #425a78;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   CONTINUE BUTTON
   ========================================================= */

#continueBtn,
#continuePayment,
.continue-btn,
.custom-support-btn {

    cursor: pointer;

    border: none;

    background:
        linear-gradient(
            135deg,
            #f21d2a,
            #e81724
        );

    color: #ffffff;

    font-weight: 800;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


#continueBtn:hover,
#continuePayment:hover,
.continue-btn:hover,
.custom-support-btn:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #e81724,
            #cf0d18
        );

    box-shadow:
        0 10px 25px rgba(239, 28, 40, 0.22);
}


#continueBtn:active,
#continuePayment:active,
.continue-btn:active,
.custom-support-btn:active {

    transform: translateY(0);

}


/* =========================================================
   CUSTOM AMOUNT AREA
   ========================================================= */

.custom-support {

    max-width: 650px;

    margin: 38px auto 0;

    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

    border: 1px solid #dfe7f2;

    text-align: center;
}


.custom-support h3 {

    margin-bottom: 18px;

    color: #1a2638;

    font-size: 18px;

    font-weight: 800;
}


.custom-amount-wrapper {

    display: flex;

    align-items: center;

    max-width: 470px;

    margin: auto;

    min-height: 53px;

    overflow: hidden;

    border: 1px solid #ccd6e2;

    border-radius: 10px;

    background: #ffffff;
}


.custom-amount-wrapper input,
#customAmount,
#amountInput {

    flex: 1;

    min-width: 0;

    height: 51px;

    border: none;

    outline: none;

    padding: 0 12px;

    background: transparent;

    color: #172033;

    font-size: 15px;
}


.custom-amount-wrapper input:focus,
#customAmount:focus,
#amountInput:focus {

    outline: none;
}


/* =========================================================
   AMOUNT CARDS
   ========================================================= */

.support-card,
.amount-card,
.donation-card[data-amount] {

    position: relative;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.support-card:hover,
.amount-card:hover,
.donation-card[data-amount]:hover {

    transform: translateY(-5px);

    border-color: #ef1c28;

    box-shadow:
        0 14px 30px rgba(239, 28, 40, 0.10);
}


.support-card.selected,
.support-card.active,
.amount-card.selected,
.amount-card.active,
.donation-card.selected,
.donation-card.active {

    border: 2px solid #ef1c28;

    background:
        linear-gradient(
            145deg,
            #fff4f5,
            #ffffff
        );

    box-shadow:
        0 15px 35px rgba(239, 28, 40, 0.12);
}


/* =========================================================
   HIDDEN
   ========================================================= */

[hidden] {

    display: none !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode
#paymentMethods,
body.dark-mode
#payment-methods,
body.dark-mode
.payment-methods,
body.dark-mode
.payment-method-section {

    background:
        linear-gradient(
            145deg,
            #101827,
            #0e1726
        );

    border-color: #253146;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25);
}


body.dark-mode
.payment-card,
body.dark-mode
.payment-country-card,
body.dark-mode
.payment-method,
body.dark-mode
.payment-group,
body.dark-mode
.payment-method-card {

    background: #101827;

    border-color: #29364b;
}


body.dark-mode
.payment-card:hover,
body.dark-mode
.payment-country-card:hover,
body.dark-mode
.payment-method:hover,
body.dark-mode
.payment-method-card:hover {

    background: #151f31;

    border-color: #ef3843;
}


body.dark-mode
.payment-card.selected,
body.dark-mode
.payment-card.active,
body.dark-mode
.payment-country-card.selected,
body.dark-mode
.payment-country-card.active,
body.dark-mode
.payment-method.selected,
body.dark-mode
.payment-method.active,
body.dark-mode
.payment-method-card.selected {

    background: #24171b;

    border-color: #ef3843;
}


body.dark-mode
.payment-card h3,
body.dark-mode
.payment-card p,
body.dark-mode
.payment-country-name,
body.dark-mode
.payment-country-card h3,
body.dark-mode
.payment-group-header h3,
body.dark-mode
.payment-method-content strong {

    color: #f2f6fc;
}


body.dark-mode
.payment-card p,
body.dark-mode
.payment-country-description,
body.dark-mode
.payment-country-card p,
body.dark-mode
.payment-group-header p,
body.dark-mode
.payment-method-content small {

    color: #93a3b9;
}


body.dark-mode
.payment-country-icon,
body.dark-mode
.payment-group-icon,
body.dark-mode
.payment-method-icon {

    background: #182235;
}


body.dark-mode
.selected-support-summary {

    background: #24171b;

    border-color: #573039;
}


body.dark-mode
.selected-support-summary span {

    color: #aebbd0;
}


body.dark-mode
.custom-support {

    background: #101827;

    border-color: #253146;
}


body.dark-mode
.custom-amount-wrapper {

    background: #0b1220;

    border-color: #2b384d;
}


body.dark-mode
.custom-amount-wrapper input,
body.dark-mode
#customAmount,
body.dark-mode
#amountInput {

    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    #paymentMethods,
    #payment-methods,
    .payment-methods,
    .payment-method-section {

        padding: 35px 25px;
    }


    .payment-country-grid {

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

        gap: 10px;
    }


    .payment-card,
    .payment-country-card {

        min-height: 135px;

        padding: 16px 10px;
    }

}


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

@media (max-width: 600px) {

    #paymentMethods,
    #payment-methods,
    .payment-methods,
    .payment-method-section {

        width: 92%;

        margin-top: 45px;

        padding: 28px 15px;

        border-radius: 19px;
    }


    .selected-support-summary {

        padding: 14px 15px;

        margin-bottom: 22px;
    }


    .selected-support-summary span {

        font-size: 12px;
    }


    .selected-support-summary strong {

        font-size: 20px;
    }


    .payment-country-grid {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .payment-card,
    .payment-country-card {

        min-height: 85px;

        padding: 12px 15px;

        flex-direction: row;

        justify-content: flex-start;

        text-align: left;

        gap: 12px;
    }


    .payment-card > div:first-child,
    .payment-country-icon {

        margin: 0;

        flex-shrink: 0;
    }


    .payment-card h3,
    .payment-country-card h3 {

        font-size: 14px;
    }


    .payment-card p,
    .payment-country-card p {

        font-size: 11px;
    }


    .payment-group {

        padding: 18px 13px;
    }


    .payment-group-header {

        gap: 10px;

        margin-bottom: 14px;
    }


    .payment-group-icon {

        width: 45px;

        height: 45px;

        font-size: 23px;
    }


    .payment-group-header h3 {

        font-size: 17px;
    }


    .payment-group-header p {

        font-size: 11px;
    }


    .payment-method-card {

        min-height: 68px;

        padding: 10px;
    }


    .payment-method-icon {

        width: 42px;

        height: 42px;

        font-size: 21px;
    }


    .payment-method-content strong {

        font-size: 14px;
    }


    .payment-method-content small {

        font-size: 10px;
    }


    .payment-method-arrow {

        font-size: 19px;
    }


    .custom-support {

        padding: 22px 15px;
    }


    .custom-amount-wrapper {

        min-height: 48px;
    }


    .custom-amount-wrapper input,
    #customAmount,
    #amountInput {

        height: 47px;

        font-size: 13px;
    }


    #continueBtn,
    #continuePayment,
    .continue-btn {

        min-height: 42px;

        padding: 0 15px;

        font-size: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #paymentMethods,
    #payment-methods,
    .payment-methods,
    .payment-method-section {

        padding: 24px 11px;
    }


    .payment-group {

        padding: 15px 10px;
    }


    .payment-method-content small {

        font-size: 9px;
    }


    .payment-country-description {

        font-size: 10px;
    }

}