/* =========================================================
   DONATION — PREMIUM GLASS UI
========================================================= */

.donation-section {
    position: relative;
    padding: 90px 0;
       background:
        radial-gradient(
            circle at 10% 20%,
            rgba(38, 101, 153, 0.129),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(244, 201, 93, 0.193),
            transparent 30%
        ),
        #6a6aa856;
    overflow: hidden;
}


/* =========================================================
   MAIN GLASS WRAPPER
========================================================= */

.donation-wrapper {
    position: relative;
    max-width: 1180px;
    margin: auto;
    padding: 55px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            rgba(82, 126, 190, 0.10),
            rgba(255, 255, 255, 0.32),
            rgba(125, 91, 174, 0.09)
        );

    border: 1px solid rgba(255,255,255,.78);

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

    box-shadow:
        0 25px 70px rgba(30,55,100,.10),
        inset 0 1px 0 rgba(255,255,255,.85);

    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   ANIMATED COLOR GLOWS
========================================================= */

.donation-wrapper::before,
.donation-wrapper::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(75px);

    pointer-events: none;

    z-index: -1;

    animation:
        donationFloat 8s ease-in-out infinite alternate;
}


.donation-wrapper::before {

    top: -130px;
    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(55,135,210,.25),
            rgba(90,70,180,.12),
            transparent 70%
        );
}


.donation-wrapper::after {

    right: -110px;
    bottom: -130px;

    background:
        radial-gradient(
            circle,
            rgba(145,85,190,.22),
            rgba(255,190,90,.12),
            transparent 70%
        );

    animation-delay: -3s;
}


@keyframes donationFloat {

    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(25px,-18px,0) scale(1.08);
    }

    100% {
        transform: translate3d(-15px,20px,0) scale(.96);
    }
}


/* =========================================================
   YELLOW SOFT GLOW
========================================================= */

.donation-glow-yellow {

    position: absolute;

    width: 220px;
    height: 220px;

    top: 38%;
    right: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,205,95,.22),
            transparent 70%
        );

    filter: blur(65px);

    z-index: -1;

    animation:
        yellowGlow 7s ease-in-out infinite alternate;
}


@keyframes yellowGlow {

    from {
        transform: translateY(-15px);
        opacity: .55;
    }

    to {
        transform: translateY(20px);
        opacity: .85;
    }
}


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

.donation-heading {
    text-align: center;
    margin-bottom: 45px;
}


.donation-icon {

    width: 72px;
    height: 72px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(45,120,190,.20),
            rgba(120,80,175,.18)
        );

    border:
        1px solid rgba(255,255,255,.65);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #315f9c;

    font-size: 27px;

    box-shadow:
        0 15px 35px rgba(45,85,140,.13),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition: .4s ease;

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


.donation-icon:hover {

    transform:
        translateY(-5px)
        rotate(-4deg)
        scale(1.05);

    box-shadow:
        0 20px 40px rgba(65,95,155,.20);
}


@keyframes donationIconFloat {

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

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


.donation-heading h2 {

    font-size: 32px;
    font-weight: 700;

    color: #183b67;

    margin-bottom: 12px;

    text-shadow:
        0 2px 10px rgba(50,80,120,.10);
}


.donation-heading p {

    max-width: 700px;

    margin: auto;

    color: #617087;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   GLASS INFORMATION CARDS
========================================================= */

.donation-info-card {

    position: relative;

    height: 100%;

    padding: 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.34),
            rgba(100,145,205,.10)
        );

    border:
        1px solid rgba(255,255,255,.68);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 15px 40px rgba(35,65,110,.08),
        inset 0 1px 0 rgba(255,255,255,.75);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


.donation-info-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    filter: blur(55px);

    opacity: .55;

    pointer-events: none;

    transition: .5s ease;
}


.donation-info-card.members::before {

    left: -80px;
    top: -80px;

    background:
        rgba(55,135,215,.22);
}


.donation-info-card.supporters::before {

    right: -80px;
    bottom: -80px;

    background:
        rgba(155,100,205,.22);
}


.donation-info-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,255,255,.95);

    box-shadow:
        0 25px 55px rgba(35,65,110,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
}


.donation-info-card:hover::before {

    transform: scale(1.25);
    opacity: .8;
}


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

.info-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    margin-bottom: 15px;

    font-size: 19px;

    border:
        1px solid rgba(255,255,255,.55);

    backdrop-filter: blur(10px);
}


.members .info-icon {

    color: #326ba8;

    background:
        rgba(65,135,210,.13);

    box-shadow:
        0 8px 22px rgba(55,120,190,.10);
}


.supporters .info-icon {

    color: #7955a5;

    background:
        rgba(145,105,200,.13);

    box-shadow:
        0 8px 22px rgba(140,95,190,.10);
}


.donation-info-card h5 {

    color: #183b67;

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 10px;
}


.donation-info-card p {

    color: #68758a;

    font-size: 14px;

    line-height: 1.85;

    margin: 0;
}


/* =========================================================
   DIVIDER
========================================================= */

.donation-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 38px 0;
}


.donation-divider span {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65,100,155,.28),
            transparent
        );
}


.donation-divider i {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #6b7fa0;

    background:
        rgba(100,130,180,.08);

    border:
        1px solid rgba(255,255,255,.7);

    backdrop-filter: blur(10px);

    box-shadow:
        0 5px 15px rgba(40,70,110,.08);
}


/* =========================================================
   MAIN FORM GLASS
========================================================= */

.donation-form-card {

    position: relative;

    padding: 32px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.42),
            rgba(75,120,185,.08),
            rgba(145,100,195,.07)
        );

    border:
        1px solid rgba(255,255,255,.75);

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

    box-shadow:
        0 20px 55px rgba(35,65,110,.09),
        inset 0 1px 0 rgba(255,255,255,.82);

    overflow: hidden;
}


.donation-form-card::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,205,100,.20),
            transparent 70%
        );

    filter: blur(55px);

    pointer-events: none;

    animation:
        formGlow 6s ease-in-out infinite alternate;
}


@keyframes formGlow {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(-35px,30px);
    }
}


/* =========================================================
   FORM TITLE
========================================================= */

.form-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}


.form-title-icon {

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(55,130,195,.16),
            rgba(130,90,185,.14)
        );

    border:
        1px solid rgba(255,255,255,.7);

    backdrop-filter: blur(10px);

    color: #326ba8;

    box-shadow:
        0 8px 20px rgba(45,90,145,.08);
}


.form-title h4 {

    margin: 0;

    font-size: 19px;

    color: #183b67;

    font-weight: 700;
}


/* =========================================================
   LABELS
========================================================= */

.donation-label {

    display: block;

    color: #42536b;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 7px;
}


/* =========================================================
   GLASS INPUTS
========================================================= */

.donation-input,
.donation-select {

    width: 100%;

    height: 48px;

    border-radius: 14px;

    border:
        1px solid rgba(75,105,145,.18);

    background:
        rgba(255,255,255,.34);

    color: #33465f;

    padding: 0 15px;

    outline: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 5px 18px rgba(40,65,100,.035);

    transition:
        background .3s ease,
        border .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.donation-input:hover,
.donation-select:hover {

    background:
        rgba(255,255,255,.48);

    border-color:
        rgba(75,110,160,.27);
}


.donation-input:focus,
.donation-select:focus {

    border-color:
        rgba(60,115,175,.48);

    background:
        rgba(255,255,255,.62);

    box-shadow:
        0 0 0 4px rgba(65,125,190,.08),
        inset 0 1px 0 rgba(255,255,255,.8);

    transform: translateY(-1px);
}


/* SELECT */

.donation-select option {

    background: #ffffff;

    color: #263b55;
}


/* =========================================================
   PAYMENT METHODS
========================================================= */

.payment-methods {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 8px;
}


.payment-option {

    position: relative;
}


.payment-option input {

    position: absolute;

    opacity: 0;
}


.payment-option label {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 60px;

    padding: 12px 15px;

    border-radius: 16px;

    cursor: pointer;

    border:
        1px solid rgba(75,105,145,.16);

    background:
        rgba(255,255,255,.32);

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65);

    transition: .35s ease;
}


.payment-option label i {

    font-size: 21px;

    color: #4c6e9d;

    transition: .3s ease;
}


.payment-option label span {

    color: #455870;

    font-size: 13px;

    font-weight: 600;
}


.payment-option label:hover {

    transform: translateY(-2px);

    background:
        rgba(255,255,255,.48);

    box-shadow:
        0 10px 25px rgba(45,80,125,.08);
}


.payment-option input:checked + label {

    border-color:
        rgba(55,115,180,.48);

    background:
        linear-gradient(
            135deg,
            rgba(65,135,205,.15),
            rgba(135,95,200,.11)
        );

    box-shadow:
        0 10px 25px rgba(50,90,140,.09),
        inset 0 1px 0 rgba(255,255,255,.8);
}


.payment-option input:checked + label i {

    transform: scale(1.12);

    color: #315f9c;
}


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

.amount-wrapper {

    position: relative;
}


.amount-wrapper span {

    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #7a8799;

    font-size: 13px;

    z-index: 2;
}


.amount-wrapper input {

    padding-left: 55px;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.donation-submit {

    position: relative;

    width: 100%;

    height: 52px;

    margin-top: 10px;

    border: none;

    border-radius: 16px;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #326fa8,
            #465e9d,
            #735a9c
        );

    box-shadow:
        0 12px 28px rgba(55,85,145,.20);

    transition: .4s ease;
}


.donation-submit::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: .7s ease;
}


.donation-submit:hover::before {

    left: 130%;
}


.donation-submit:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(55,85,145,.28);
}


.donation-submit i {

    margin-right: 7px;
}


/* =========================================================
   SECURITY
========================================================= */

.donation-secure {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 15px;

    color: #8994a4;

    font-size: 12px;
}


.donation-secure i {

    color: #5f8a73;
}


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

@media (max-width: 767px) {

    .donation-section {
        padding: 55px 0;
    }

    .donation-wrapper {

        width: calc(100% - 24px);

        padding: 28px 18px;

        border-radius: 26px;
    }

    .donation-heading h2 {
        font-size: 25px;
    }

    .donation-heading p {
        font-size: 13px;
    }

    .donation-form-card {

        padding: 22px 17px;

        border-radius: 22px;
    }

    .payment-methods {

        grid-template-columns: 1fr;
    }

}
p {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 2;
    font-weight: 400;
    word-spacing: 1px;
    letter-spacing: 0;
    text-align: right;
}
/* =========================================================
   DONATION - RTL / LTR
   Bootstrap row / columns MUST NOT be reversed.
   ========================================================= */


/* =========================================================
   HEADER - RTL
   ========================================================= */

.donation-heading-rtl {
    direction: rtl !important;
    text-align: right !important;
}

.donation-heading-rtl h2,
.donation-heading-rtl p {
    direction: rtl !important;
    text-align: right !important;
}


/* HEADER - LTR */

.donation-heading-ltr {
    direction: ltr !important;
    text-align: left !important;
}

.donation-heading-ltr h2,
.donation-heading-ltr p {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   INFORMATION CARDS - RTL
   ========================================================= */

.donation-info-rtl {
    direction: rtl !important;
    text-align: right !important;
}

.donation-info-rtl h5,
.donation-info-rtl p {
    direction: rtl !important;
    text-align: right !important;
}


/* Information icon stays visually independent */

.donation-info-rtl .info-icon {
    direction: ltr !important;
}


/* =========================================================
   INFORMATION CARDS - LTR
   ========================================================= */

.donation-info-ltr {
    direction: ltr !important;
    text-align: left !important;
}

.donation-info-ltr h5,
.donation-info-ltr p {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   FORM CARD - RTL
   ========================================================= */

.donation-form-rtl {
    direction: ltr !important;
}


/*
   VERY IMPORTANT:
   Keep Bootstrap rows LTR.
   This prevents col-md-6 fields from reversing.
*/

.donation-form-rtl .donation-form-row {
    direction: ltr !important;
}


/* Form title */

.donation-form-rtl .form-title {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
}

.donation-form-rtl .form-title h4 {
    direction: rtl !important;
    text-align: right !important;
}


/* =========================================================
   LABELS - RTL
   ========================================================= */

.donation-form-rtl .donation-label {
    display: block !important;
    direction: rtl !important;
    text-align: right !important;
}


/* =========================================================
   INPUT - RTL
   ========================================================= */

.donation-form-rtl .donation-input {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
}


/* Placeholder */

.donation-form-rtl .donation-input::placeholder {
    direction: rtl !important;
    text-align: right !important;
}


/* =========================================================
   SELECT - RTL
   ========================================================= */

.donation-form-rtl .donation-select {
    direction: rtl !important;
    text-align: right !important;
}


/* =========================================================
   AMOUNT - RTL
   ========================================================= */

.donation-form-rtl .amount-wrapper {
    direction: ltr !important;
}

.donation-form-rtl .amount-wrapper input {
    direction: ltr !important;
    text-align: right !important;
}

.donation-form-rtl .amount-wrapper span {
    direction: ltr !important;
}


/* =========================================================
   PAYMENT METHODS - RTL
   ========================================================= */

.donation-form-rtl .payment-methods {
    direction: rtl !important;
    text-align: right !important;
}


/*
   Each payment option remains a single visual item.
*/

.donation-form-rtl .payment-option {
    direction: rtl !important;
}


/* Payment label */

.donation-form-rtl .payment-option label {
    direction: rtl !important;
    text-align: right !important;
}


/* Icon + text */

.donation-form-rtl .payment-option label {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
}


/* =========================================================
   NOTE / TEXTAREA - RTL
   ========================================================= */

.donation-form-rtl textarea.donation-input {
    direction: rtl !important;
    text-align: right !important;
}


/* =========================================================
   SUBMIT - RTL
   ========================================================= */

.donation-form-rtl .donation-submit {
    direction: rtl !important;
    text-align: center !important;
}


/* Secure information */

.donation-form-rtl .donation-secure {
    direction: rtl !important;
    text-align: center !important;
}


/* =========================================================
   FORM CARD - LTR
   ========================================================= */

.donation-form-ltr {
    direction: ltr !important;
}


/*
   Keep Bootstrap row LTR.
*/

.donation-form-ltr .donation-form-row {
    direction: ltr !important;
}


/* Form title */

.donation-form-ltr .form-title {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
}

.donation-form-ltr .form-title h4 {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   LABELS - LTR
   ========================================================= */

.donation-form-ltr .donation-label {
    display: block !important;
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   INPUT - LTR
   ========================================================= */

.donation-form-ltr .donation-input {
    direction: ltr !important;
    text-align: left !important;
}


/* Placeholder */

.donation-form-ltr .donation-input::placeholder {
    direction: ltr !important;
    text-align: left !important;
}


/* Select */

.donation-form-ltr .donation-select {
    direction: ltr !important;
    text-align: left !important;
}


/* Amount */

.donation-form-ltr .amount-wrapper {
    direction: ltr !important;
}

.donation-form-ltr .amount-wrapper input {
    direction: ltr !important;
    text-align: left !important;
}


/* Payment */

.donation-form-ltr .payment-methods {
    direction: ltr !important;
    text-align: left !important;
}

.donation-form-ltr .payment-option {
    direction: ltr !important;
}

.donation-form-ltr .payment-option label {
    direction: ltr !important;
    text-align: left !important;
}


/* Submit */

.donation-form-ltr .donation-submit {
    direction: ltr !important;
    text-align: center !important;
}


/* Secure */

.donation-form-ltr .donation-secure {
    direction: ltr !important;
    text-align: center !important;
}


/* =========================================================
   BDI
   ========================================================= */

.donation-rtl bdi {
    direction: rtl !important;
    unicode-bidi: isolate !important;
}

.donation-ltr bdi {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}


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

@media (max-width: 767.98px) {

    .donation-form-rtl .form-title {
        flex-direction: row-reverse !important;
    }

    .donation-form-ltr .form-title {
        flex-direction: row !important;
    }

}