/* ============================================================
   PayFast Donation Widget — MSF redesign
   File: public/css/payfast-payment-utility-public.css

   Everything is scoped under .msf-donate so nothing leaks into
   the WordPress theme. (The previous version styled bare h2/p/.row
   and forced [class*="col-"] widths globally — that is removed.)
   ============================================================ */

.msf-donate {
    --msf-ink: #222a1c;
    --msf-soft: #5c6353;
    --msf-paper: #fdfcf7;
    --msf-cream: #fbf3e4;
    --msf-orange: #e08a2b;
    --msf-orange-deep: #bf6f16;
    --msf-orange-soft: #fce7cb;
    --msf-green: #2e9d3a;
    --msf-green-num: #1f8a37;
    --msf-green-deep: #15602a;
    --msf-line: rgba(34, 42, 28, .12);
    --msf-shadow: 0 24px 50px -28px rgba(60, 42, 12, .38);
    --msf-radius: 22px;

    font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--msf-ink);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

.msf-donate *,
.msf-donate *::before,
.msf-donate *::after { box-sizing: border-box; }

/* ---------------- Response alerts ---------------- */
.msf-donate__alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 16px;
    margin-bottom: 22px;
    border: 1px solid var(--msf-line);
}
.msf-donate__alert--ok   { background: #eaf6e9; border-color: rgba(46, 157, 58, .3); }
.msf-donate__alert--fail { background: #fdecea; border-color: rgba(200, 72, 47, .3); }
.msf-donate__alert-icon { flex: 0 0 26px; line-height: 0; margin-top: 2px; }
.msf-donate__alert-title {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    margin: 0 0 4px;
    color: var(--msf-ink);
}
.msf-donate__alert-text { margin: 0; font-size: .93rem; color: var(--msf-soft); }
.msf-donate__ref { display: block; margin-top: 6px; font-size: .84rem; }

/* ---------------- Card shell ---------------- */
.msf-donate__card {
    background: #fff;
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
    box-shadow: var(--msf-shadow);
    overflow: hidden;
}

/* ---------------- Card header ---------------- */
.msf-donate__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-bottom: 1px solid var(--msf-line);
    background: #fff;
}
.msf-donate__head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: #eaf6e9;
    color: var(--msf-green-deep);
}
.msf-donate__head-title {
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 1.16rem;
    letter-spacing: -.01em;
    color: var(--msf-ink);
    margin: 0;
    flex: 1;
}
.msf-donate__head-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--msf-soft);
    white-space: nowrap;
}

/* ---------------- Right: form panel ---------------- */
.msf-donate__form-wrap { padding: 28px 30px 30px; background: #fff; }
.msf-donate__form { margin: 0; }

/* ---- donation type toggle: Charity / Zakat ---- */
.msf-donate__toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.msf-donate__toggle-btn {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 15px 10px;
    border-radius: 13px;
    border: 2px solid var(--msf-line);
    background: #fff;
    color: var(--msf-ink);
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.msf-donate__toggle-btn:hover { border-color: var(--msf-green); }
.msf-donate__toggle-btn.is-active {
    border-color: var(--msf-green);
    background: #eaf6e9;
    color: var(--msf-green-deep);
    box-shadow: 0 10px 20px -14px rgba(46, 157, 58, .9);
}

/* ---- project select ---- */
.msf-donate__select--full { width: 100%; }

.msf-donate__note {
    margin: 8px 0 0;
    font-size: .78rem;
    color: var(--msf-green-deep);
    background: #eaf6e9;
    border-radius: 9px;
    padding: 7px 11px;
}
.msf-donate__note[hidden] { display: none; }

/* ---- preset chips ---- */
.msf-donate__presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.msf-donate__chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 6px;
    border-radius: 13px;
    border: 2px solid var(--msf-line);
    background: #fff;
    color: var(--msf-ink);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
    text-align: center;
    line-height: 1.15;
}
.msf-donate__chip-cur {
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    font-size: .72rem;
    color: var(--msf-soft);
    letter-spacing: .04em;
}
.msf-donate__chip:hover { border-color: var(--msf-green); transform: translateY(-2px); }
.msf-donate__chip.is-active {
    border-color: var(--msf-green);
    background: #eaf6e9;
    color: var(--msf-green-deep);
    box-shadow: 0 10px 20px -12px rgba(46, 157, 58, .85);
}
.msf-donate__chip.is-active .msf-donate__chip-cur { color: var(--msf-green); }

/* the "Custom amount" chip reads as an action, not a preset value */
.msf-donate__chip--custom {
    border-style: dashed;
    color: var(--msf-soft);
}
.msf-donate__chip--custom.is-active {
    border-style: solid;
    color: var(--msf-green-deep);
}

/* fields */
.msf-donate__field { margin-bottom: 20px; }
.msf-donate__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.msf-donate__label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--msf-soft);
    margin-bottom: 7px;
}

.msf-donate__input,
.msf-donate__select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--msf-ink);
    background: #fff;
    border: 2px solid var(--msf-line);
    border-radius: 13px;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}
.msf-donate__input:focus,
.msf-donate__select:focus {
    outline: none;
    border-color: var(--msf-orange);
    box-shadow: 0 0 0 4px var(--msf-orange-soft);
}
.msf-donate__input::placeholder { color: #a9afa0; }

/* amount row: currency select + symbol + input */
.msf-donate__amount-row { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.msf-donate__amount-input { position: relative; }
.msf-donate__cur-symbol {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--msf-soft);
    pointer-events: none;
}
.msf-donate__input--amount {
    padding-left: 52px;
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -.01em;
    color: var(--msf-green-num);
}
/* hide number spinners */
.msf-donate__input--amount::-webkit-outer-spin-button,
.msf-donate__input--amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msf-donate__input--amount { -moz-appearance: textfield; }

.msf-donate__select {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6353' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    cursor: pointer;
}

.msf-donate__hint {
    font-size: .8rem;
    color: var(--msf-soft);
    margin: 4px 0 22px;
}

/* submit */
.msf-donate__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: var(--msf-green);
    border: none;
    border-radius: 13px;
    padding: 17px 28px;
    cursor: pointer;
    box-shadow: 0 18px 34px -16px rgba(46, 157, 58, .95);
    transition: transform .18s, background .18s, box-shadow .18s;
}
.msf-donate__submit:hover {
    background: var(--msf-green-deep);
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -16px rgba(21, 96, 42, .95);
}
.msf-donate__submit:active { transform: translateY(0); }

/* ---- US/Canada iCare route ---- */
.msf-donate__icare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--msf-line);
    border-radius: 13px;
    background: #fff;
    color: var(--msf-soft);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: border-color .18s, color .18s, background .18s;
}
.msf-donate__icare:hover {
    border-color: var(--msf-green);
    color: var(--msf-green-deep);
    background: #f6fbf5;
}
.msf-donate__icare-ext { flex: 0 0 13px; opacity: .7; }

/* ---- tax exemption note ---- */
.msf-donate__tax {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--msf-line);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--msf-soft);
}
.msf-donate__tax-star { flex: 0 0 15px; line-height: 0; margin-top: 3px; }
.msf-donate__tax strong { color: var(--msf-ink); font-weight: 700; }

/* secure footer */
.msf-donate__secure {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: .78rem;
    color: var(--msf-soft);
}
.msf-donate__payfast-logo {
    width: 74px;
    height: auto;
    flex: 0 0 74px;
    display: block;
    margin: 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
    .msf-donate__form-wrap { padding: 24px 22px 26px; }
    .msf-donate__head { padding: 18px 22px; }
    .msf-donate__row { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
    .msf-donate__presets { grid-template-columns: repeat(2, 1fr); }
    .msf-donate__amount-row { grid-template-columns: 100px 1fr; }
    .msf-donate__head-secure { display: none; }
    .msf-donate__icare { font-size: .8rem; text-align: left; }
    .msf-donate__secure { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .msf-donate * { transition: none !important; }
}