/* ── TGAS Donation – Public Form ────────────────────────────────────────────
   Layout:
   • Outer wrapper  → transparent flex container (inherits page #f7fcf5)
   • Left panel     → no background, blends with page
   • Right panel    → white card with shadow (the form)
   Font: inherits from site. !important used on all theme-overridable props.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --tdm-green:     #0F4941;
    --tdm-green-btn: #0F583A;
    --tdm-green-mid: #10b981;
    --tdm-green-bg:  #f7fcf5;
    --tdm-border:    #d1d5db;
    --tdm-text:      #1a2e25;
    --tdm-muted:     #6b7280;
    --tdm-radius:    10px;
    --tdm-input-h:   46px;
}

/* ════════════════════════════════════════════════════════════════════════════
   WRAPPER — pure flex layout, no card, no shadow, no border
   The page/Elementor section provides the #f7fcf5 background.
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-wrapper {
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     flex-start !important;
    gap:             20px !important;
    background:      transparent !important;
    box-shadow:      none !important;
    border:          none !important;
    border-radius:   0 !important;
    padding:         0 !important;
    width:           100% !important;
    max-width:       1240px !important;
    margin:          0 auto !important;
    overflow:        visible !important;
    font-family:     inherit !important;
    font-size:       14px;
    line-height:     1.5;
    color:           var(--tdm-text);
    box-sizing:      border-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   LEFT PANEL — steps section, transparent, blends with page
   flex: 1  →  takes remaining space after the fixed-width right card
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-wrapper .tdm-left {
    flex:           1 1 0 !important;
    min-width:      0;
    background:     transparent !important;
    box-shadow:     none !important;
    border:         none !important;
    border-radius:  0 !important;
    padding:        8px 0 0 0 !important;
    display:        flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════════════════════
   RIGHT PANEL — white form card with shadow
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-wrapper .tdm-right {
    flex:           1 1 0 !important;
    background:     #ffffff !important;
    border-radius:  14px !important;
    box-shadow:     0 4px 24px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05) !important;
    border:         none !important;
    padding:        28px 28px 32px !important;
    display:        flex;
    flex-direction: column;
    min-width:      0;
    box-sizing:     border-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   BRAND ROW
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-brand {
    display:     flex;
    align-items: center;
    gap:         11px;
    margin-bottom: 20px;
}
.tdm-brand-icon {
    width:         40px;
    height:        40px;
    background:    var(--tdm-green) !important;
    border-radius: 10px !important;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    box-shadow:    none !important;
}
.tdm-brand-icon svg { width: 20px; height: 20px; }
.tdm-brand-text {
    font-size:   17px !important;
    font-weight: 700 !important;
    color:       var(--tdm-green) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADINGS
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-heading {
    font-size:      30px !important;
    font-weight:    800 !important;
    color:          var(--tdm-green) !important;
    margin:         0 0 24px 0 !important;
    line-height:    1.15;
    letter-spacing: -.02em;
}
.tdm-steps-heading {
    font-size:   20px !important;
    font-weight: 700 !important;
    color:       var(--tdm-green) !important;
    margin:      0 0 16px 0 !important;
}
.tdm-form-header {
    margin-bottom: 20px;
}
.tdm-form-header h3 {
    margin:      0 !important;
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       var(--tdm-text) !important;
    border:      none !important;
    padding:     0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   STEPS LIST
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-steps {
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
    flex:       1;
}
.tdm-step {
    display:               grid !important;
    grid-template-columns: 38px 1fr 28px;
    align-items:           center;
    gap:                   12px;
    padding:               13px 0;
    border-bottom:         1px solid rgba(15,73,65,.12) !important;
    border-top:            none !important;
    border-left:           none !important;
    border-right:          none !important;
    background:            transparent !important;
    margin:                0 !important;
    box-shadow:            none !important;
}
.tdm-step:last-child { border-bottom: none !important; padding-bottom: 0; }

.tdm-step-icon {
    width:           38px;
    min-width:       38px;
    height:          38px;
    background:      var(--tdm-green) !important;
    border-radius:   9px !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff !important;
    box-shadow:      none !important;
}
.tdm-step-icon svg { width: 18px; height: 18px; }

.tdm-step-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    overflow:       hidden;
}
.tdm-step-text strong {
    font-size:     13.5px !important;
    font-weight:   700 !important;
    color:         var(--tdm-text) !important;
    line-height:   1.3;
    display:       block;
    word-break:    break-word;
}
.tdm-step-text span {
    font-size:   12px !important;
    color:       var(--tdm-muted) !important;
    line-height: 1.4;
    display:     block;
    word-break:  break-word;
}
.tdm-step-num {
    font-size:   24px;
    font-weight: 800;
    color:       rgba(15,73,65,.18) !important;
    line-height: 1;
    text-align:  right;
    width:       28px;
}

/* Initiative info (initiative-specific form) */
.tdm-initiative-thumb { margin-bottom: 12px; border-radius: 8px; overflow: hidden; }
.tdm-thumb-img        { width: 100%; height: 130px; object-fit: cover; display: block; }
.tdm-initiative-title { font-weight: 700; font-size: 15px; color: var(--tdm-green) !important; margin: 0 0 6px; }
.tdm-initiative-desc  { font-size: 13px; color: var(--tdm-muted) !important; margin: 0 0 12px; line-height: 1.55; }
.tdm-initiative-desc p { margin: 0; }
.tdm-progress-wrap    { margin-bottom: 14px; }
.tdm-progress-track   { height: 7px; background: #c6ddd9; border-radius: 99px; overflow: hidden; }
.tdm-progress-bar     { height: 100%; background: var(--tdm-green) !important; border-radius: 99px; }
.tdm-progress-labels  { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; }
.tdm-raised           { font-weight: 700; color: var(--tdm-green) !important; }
.tdm-goal             { color: var(--tdm-muted); }
.tdm-end-date         { font-size: 12px; color: var(--tdm-muted); margin: 0 0 14px; }

/* ════════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-form        { display: flex; flex-direction: column; gap: 14px; }
.tdm-row         { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tdm-field       { display: flex; flex-direction: column; gap: 5px; }
.tdm-field--full { grid-column: 1 / -1; }

.tdm-field label {
    font-size:   12.5px !important;
    font-weight: 600 !important;
    color:       #374151 !important;
    display:     block;
    margin:      0 0 4px 0 !important;
}
.tdm-required { color: #ef4444 !important; margin-left: 1px; }

/* All inputs, selects, textareas */
.tdm-field input[type="text"],
.tdm-field input[type="email"],
.tdm-field input[type="tel"],
.tdm-field input[type="number"],
.tdm-field select,
.tdm-field textarea {
    width:        100% !important;
    height:       var(--tdm-input-h) !important;
    border:       1.5px solid #d1d5db !important;
    border-radius: var(--tdm-radius) !important;
    padding:      0 12px !important;
    font-size:    13.5px !important;
    font-family:  inherit !important;
    color:        var(--tdm-text) !important;
    background:   #fff !important;
    box-shadow:   none !important;
    box-sizing:   border-box;
    appearance:   none;
    -webkit-appearance: none;
    transition:   border-color .15s, box-shadow .15s;
    line-height:  normal;
    margin:       0 !important;
}
.tdm-field textarea {
    height:     auto !important;
    padding:    10px 12px !important;
    resize:     vertical;
    min-height: 80px;
}
.tdm-field input:focus,
.tdm-field select:focus,
.tdm-field textarea:focus {
    outline:      none !important;
    border-color: var(--tdm-green) !important;
    box-shadow:   0 0 0 3px rgba(15,73,65,.1) !important;
    background:   #fff !important;
}
.tdm-field input::placeholder,
.tdm-field textarea::placeholder { color: #b0bcc4 !important; }

/* Select chevron */
.tdm-select-wrap { position: relative; }
.tdm-select-wrap select { padding-right: 32px !important; cursor: pointer; }
.tdm-select-wrap::after {
    content:       '';
    position:      absolute;
    right:         12px;
    top:           50%;
    transform:     translateY(-50%);
    border-left:   4px solid transparent;
    border-right:  4px solid transparent;
    border-top:    5px solid var(--tdm-muted);
    pointer-events: none;
}

/* ─── Amount field: ₦ as solid green badge, number input beside it ─────────── */
.tdm-amount-wrap {
    display:       flex !important;
    align-items:   stretch;
    border:        1.5px solid #d1d5db;
    border-radius: var(--tdm-radius);
    overflow:      hidden;
    background:    #fff;
    transition:    border-color .15s, box-shadow .15s;
}
.tdm-amount-wrap:focus-within {
    border-color: var(--tdm-green) !important;
    box-shadow:   0 0 0 3px rgba(15,73,65,.1) !important;
}
.tdm-currency {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    padding:         0 10px;
    background:      var(--tdm-green) !important;
    color:           #fff !important;
    font-size:       13px;
    font-weight:     700;
    flex-shrink:     0;
    user-select:     none;
    border-radius:   0 !important;
}
.tdm-amount-wrap input[type="number"] {
    flex:          1;
    height:        calc(var(--tdm-input-h) - 4px) !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding-left:  12px !important;
    min-width:     0;
    background:    #fff !important;
}
.tdm-amount-wrap input[type="number"]:focus {
    outline:    none !important;
    box-shadow: none !important;
    border:     none !important;
}

/* Quick amounts */
.tdm-quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tdm-quick-btn {
    padding:       5px 14px !important;
    border:        1.5px solid #d1d5db !important;
    border-radius: 99px !important;
    background:    #fff !important;
    font-size:     12.5px !important;
    font-weight:   600 !important;
    color:         var(--tdm-text) !important;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all .15s;
    line-height:   1.4;
    box-shadow:    none !important;
}
.tdm-quick-btn:hover,
.tdm-quick-btn.active {
    border-color: var(--tdm-green) !important;
    background:   var(--tdm-green-bg) !important;
    color:        var(--tdm-green) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DONATE BUTTON — highest specificity + !important to beat any theme rule
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-wrapper .tdm-right .tdm-submit-wrap .tdm-btn-donate,
.tdm-wrapper .tdm-right .tdm-submit-wrap button.tdm-btn-donate {
    width:            100% !important;
    height:           50px !important;
    background:       #0F583A !important;
    background-color: #0F583A !important;
    color:            #ffffff !important;
    border:           none !important;
    border-radius:    99px !important;
    font-size:        15px !important;
    font-weight:      700 !important;
    font-family:      inherit !important;
    cursor:           pointer !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    gap:              8px;
    letter-spacing:   .02em;
    box-shadow:       none !important;
    text-decoration:  none !important;
    outline:          none;
    margin:           0 !important;
    padding:          0 !important;
    line-height:      1 !important;
    transition:       background .2s;
}
.tdm-wrapper .tdm-right .tdm-submit-wrap .tdm-btn-donate:hover,
.tdm-wrapper .tdm-right .tdm-submit-wrap button.tdm-btn-donate:hover {
    background:       #0a4229 !important;
    background-color: #0a4229 !important;
    color:            #ffffff !important;
}
.tdm-wrapper .tdm-right .tdm-submit-wrap .tdm-btn-donate:disabled {
    opacity: .7 !important;
    cursor:  not-allowed !important;
}

.tdm-submit-wrap { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* Spinner */
.tdm-spinner { width: 18px; height: 18px; animation: tdm-spin .7s linear infinite; flex-shrink: 0; }
@keyframes tdm-spin { to { transform: rotate(360deg); } }

/* Secure note */
.tdm-secure-note {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    font-size:       11.5px;
    color:           var(--tdm-muted) !important;
    margin:          0;
}

/* ════════════════════════════════════════════════════════════════════════════
   ALERT / SUCCESS / NOTICES
   ════════════════════════════════════════════════════════════════════════════ */
.tdm-alert         { border-radius: var(--tdm-radius); padding: 11px 14px; font-size: 13px; margin-bottom: 12px; }
.tdm-alert--error  { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #dc2626 !important; }

.tdm-success {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex:            1;
    text-align:      center;
    padding:         36px 16px;
    gap:             10px;
}
.tdm-success-icon svg  { width: 58px; height: 58px; }
.tdm-success-title     { font-size: 21px !important; font-weight: 800 !important; color: var(--tdm-green) !important; margin: 0; }
.tdm-success-message   { margin: 0; font-size: 14px; color: var(--tdm-muted); }
.tdm-success-amount    { font-size: 32px !important; font-weight: 800 !important; color: var(--tdm-green) !important; margin: 4px 0; }
.tdm-success-email     { margin: 0; font-size: 13px; color: var(--tdm-muted); }

.tdm-notice         { background: var(--tdm-green-bg) !important; border: 1px solid #9fc8c2; border-radius: var(--tdm-radius); padding: 18px 22px; font-size: 14px; color: var(--tdm-green) !important; max-width: 680px; margin: 0 auto; }
.tdm-notice--ended  { background: #fef2f2 !important; border-color: #fecaca !important; color: #dc2626 !important; }
.tdm-notice p       { margin: 0; }
.tdm-error          { color: #dc2626 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape – handled by flex: 1 equally */

/* Tablet portrait – stack vertically */
@media (max-width: 860px) {
    .tdm-wrapper {
        flex-direction: column !important;
        gap:            20px !important;
        width:          100vw !important;
        max-width:      100vw !important;
        margin-left:    calc(-1 * ((100vw - 100%) / 2)) !important;
        padding-left:   16px !important;
        padding-right:  16px !important;
        box-sizing:     border-box !important;
        overflow-x:     hidden !important;
    }
    .tdm-wrapper .tdm-left {
        flex:       none !important;
        width:      100% !important;
        max-width:  100% !important;
        padding:    0 !important;
        box-sizing: border-box !important;
    }
    .tdm-wrapper .tdm-right {
        flex:       none !important;
        width:      100% !important;
        max-width:  100% !important;
        padding:    24px 20px 28px !important;
        box-sizing: border-box !important;
    }
    .tdm-step-num { font-size: 22px !important; }
}

/* Mobile – single column form rows */
@media (max-width: 560px) {
    .tdm-row                { grid-template-columns: 1fr !important; }
    .tdm-field--full        { grid-column: 1 !important; }
    .tdm-heading            { font-size: 24px !important; }
    .tdm-wrapper .tdm-right { padding: 20px 14px 24px !important; }
    .tdm-modal              { padding: 32px 22px 28px !important; }
    .tdm-toast              { right: 12px; left: 12px; max-width: none; }
    .tdm-step-num           { font-size: 20px !important; }
    .tdm-step-text strong   { font-size: 13px !important; }
    .tdm-step-text span     { font-size: 11.5px !important; }
    .tdm-field input,
    .tdm-field select,
    .tdm-field textarea,
    .tdm-amount-wrap        { max-width: 100% !important; box-sizing: border-box !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUCCESS MODAL
   ══════════════════════════════════════════════════════════════════════════════ */

/* Overlay */
.tdm-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         99999;
    opacity:         0;
    transition:      opacity .3s ease;
    padding:         20px;
    box-sizing:      border-box;
}
.tdm-modal-overlay.tdm-modal-overlay--in { opacity: 1; }

/* Modal card */
.tdm-modal {
    background:    #ffffff;
    border-radius: 20px;
    padding:       40px 36px 36px;
    max-width:     400px;
    width:         100%;
    text-align:    center;
    position:      relative;
    transform:     translateY(24px) scale(.96);
    transition:    transform .35s cubic-bezier(.34,1.56,.64,1);
    box-shadow:    0 24px 64px rgba(0,0,0,.2);
    z-index:       100000;
}
.tdm-modal-overlay--in .tdm-modal {
    transform: translateY(0) scale(1);
}

/* Illustration */
.tdm-modal__illustration {
    margin:        0 auto 20px;
    width:         120px;
    height:        100px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.tdm-modal__illustration svg { width: 120px; height: 100px; }

/* Title */
.tdm-modal__title {
    font-size:      22px !important;
    font-weight:    800 !important;
    color:          #111827 !important;
    margin:         0 0 10px 0 !important;
    line-height:    1.2;
    letter-spacing: -.02em;
}

/* Subtitle */
.tdm-modal__sub {
    font-size:   14px;
    color:       #6b7280;
    margin:      0 0 12px 0 !important;
    line-height: 1.55;
}

/* Amount */
.tdm-modal__amount {
    font-size:   26px !important;
    font-weight: 800 !important;
    color:       #0F4941 !important;
    margin:      0 0 24px 0 !important;
    display:     none; /* hidden if empty */
}
.tdm-modal__amount:not(:empty) { display: block; }

/* Close button */
.tdm-modal__close-btn {
    width:            100%;
    height:           50px;
    background:       #0F583A !important;
    background-color: #0F583A !important;
    color:            #ffffff !important;
    border:           none !important;
    border-radius:    99px !important;
    font-size:        15px !important;
    font-weight:      700 !important;
    font-family:      inherit !important;
    cursor:           pointer !important;
    letter-spacing:   .02em;
    transition:       background .2s;
    box-shadow:       none !important;
}
.tdm-modal__close-btn:hover {
    background:       #0a4229 !important;
    background-color: #0a4229 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONFETTI
   ══════════════════════════════════════════════════════════════════════════════ */
.tdm-confetti-wrap {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    overflow:       hidden;
    z-index:        99998;
}
.tdm-confetti-piece {
    position:         absolute;
    top:              -20px;
    border-radius:    2px;
    animation:        tdm-confetti-fall linear forwards;
    opacity:          .92;
}
@keyframes tdm-confetti-fall {
    0%   { transform: translateY(0)    rotate(0deg)   scaleX(1); opacity: .95; }
    50%  { transform: translateY(50vh) rotate(180deg) scaleX(-1); opacity: .9; }
    100% { transform: translateY(105vh) rotate(360deg) scaleX(1); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION (top-right)
   ══════════════════════════════════════════════════════════════════════════════ */
.tdm-toast {
    position:      fixed;
    top:           20px;
    right:         20px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    #ffffff;
    border:        1px solid #d1fae5;
    border-radius: 10px;
    padding:       12px 16px;
    box-shadow:    0 4px 20px rgba(0,0,0,.12);
    z-index:       100001;
    max-width:     300px;
    transform:     translateY(-80px);
    opacity:       0;
    transition:    transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
    font-family:   inherit;
}
.tdm-toast.tdm-toast--in {
    transform: translateY(0);
    opacity:   1;
}
.tdm-toast__icon { flex-shrink: 0; display: flex; }
.tdm-toast__text {
    font-size:   13.5px;
    font-weight: 600;
    color:       #111827;
    flex:        1;
}
.tdm-toast__close {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #6b7280;
    font-size:   14px;
    padding:     0;
    line-height: 1;
    flex-shrink: 0;
}
.tdm-toast__close:hover { color: #111827; }

/* ══════════════════════════════════════════════════════════════════════════════
   PAYMENT TYPE TOGGLE (One-Time / Recurring)
   ══════════════════════════════════════════════════════════════════════════════ */

.tdm-payment-toggle {
    display:       flex;
    gap:           0;
    background:    #f3f4f6;
    border-radius: 10px;
    padding:       4px;
    margin-bottom: 14px;
}
.tdm-toggle-btn {
    flex:            1;
    height:          38px;
    border:          none !important;
    border-radius:   8px !important;
    background:      transparent !important;
    color:           #6b7280 !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    font-family:     inherit !important;
    cursor:          pointer !important;
    display:         block !important;
    padding:         0 8px !important;
    text-align:      center !important;
    transition:      all .2s;
    box-shadow:      none !important;
    line-height:     38px !important;
    white-space:     nowrap;
}
.tdm-toggle-btn--active {
    background:  #ffffff !important;
    color:       #0F4941 !important;
    box-shadow:  0 1px 4px rgba(0,0,0,.1) !important;
}
.tdm-toggle-btn:hover:not(.tdm-toggle-btn--active) {
    color:      #1a2e25 !important;
    background: rgba(255,255,255,.5) !important;
}

/* Payment note */
.tdm-payment-note {
    font-size:     12.5px;
    color:         var(--tdm-muted);
    margin:        0 0 14px 0 !important;
    display:       flex;
    align-items:   center;
    gap:           5px;
}

/* ── Recurring extra fields ─────────────────────────────────────────────────── */
.tdm-recurring-fields {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

/* Divider label */
.tdm-recurring-divider {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   11.5px;
    font-weight: 700;
    color:       var(--tdm-green);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tdm-recurring-divider::before,
.tdm-recurring-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(15,73,65,.15);
}

/* Billing period radio picker */
.tdm-interval-picker {
    display: flex;
    gap:     8px;
    flex-wrap: wrap;
}
.tdm-interval-opt {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 14px;
    border:       1.5px solid #d1d5db;
    border-radius: 8px;
    cursor:       pointer;
    font-size:    13px;
    font-weight:  600;
    color:        var(--tdm-text);
    background:   #fff;
    transition:   all .15s;
    user-select:  none;
}
.tdm-interval-opt:has(input:checked) {
    border-color: var(--tdm-green);
    background:   rgba(15,73,65,.05);
    color:        var(--tdm-green);
}
.tdm-interval-opt input[type="radio"] {
    display: none;
}

/* Password field with eye toggle */
.tdm-password-wrap {
    position:     relative;
    display:      flex;
    align-items:  center;
}
.tdm-password-wrap input {
    flex:          1;
    padding-right: 42px !important;
}
.tdm-eye-btn {
    position:        absolute;
    right:           12px;
    background:      none !important;
    border:          none !important;
    cursor:          pointer;
    color:           var(--tdm-muted) !important;
    display:         flex;
    align-items:     center;
    padding:         0 !important;
    box-shadow:      none !important;
}
.tdm-eye-btn:hover { color: var(--tdm-green) !important; }

/* Field hint */
.tdm-field-hint {
    font-size:   11.5px;
    color:       var(--tdm-muted);
    margin-top:  4px;
    display:     block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DONOR DASHBOARD
   ══════════════════════════════════════════════════════════════════════════════ */

.tdm-dash-wrap {
    font-family: inherit;
    max-width:   100%;
    margin:      0 auto;
    display:     flex;
    flex-direction: column;
    gap:         20px;
    color:       var(--tdm-text);
}

/* Login card */
.tdm-dash-login {
    text-align:  center;
    padding:     60px 40px !important;
}
.tdm-dash-login__icon { margin: 0 auto 16px; }
.tdm-dash-login__title {
    font-size:   22px !important;
    font-weight: 800 !important;
    color:       var(--tdm-green) !important;
    margin:      0 0 10px 0 !important;
}
.tdm-dash-login__sub {
    font-size:   14px;
    color:       var(--tdm-muted);
    margin:      0 0 24px 0 !important;
    max-width:   380px;
    margin-left: auto;
    margin-right: auto;
}

/* Header */
.tdm-dash-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
    background:      #fff;
    border-radius:   14px;
    padding:         20px 24px;
    box-shadow:      0 2px 12px rgba(0,0,0,.06);
}
.tdm-dash-header__left {
    display:     flex;
    align-items: center;
    gap:         14px;
}
.tdm-dash-avatar {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--tdm-green);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    font-weight:     700;
    flex-shrink:     0;
}
.tdm-dash-welcome {
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       var(--tdm-text) !important;
    margin:      0 !important;
}
.tdm-dash-email { font-size: 13px; color: var(--tdm-muted); margin: 2px 0 0 0 !important; }

/* Stat cards */
.tdm-dash-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
}
.tdm-dash-stat {
    background:    #fff;
    border-radius: 12px;
    padding:       20px;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.tdm-dash-stat--green { border-left: 4px solid var(--tdm-green); }
.tdm-dash-stat__num   { font-size: 26px; font-weight: 800; color: var(--tdm-green); line-height: 1; }
.tdm-dash-stat__label { font-size: 12px; color: var(--tdm-muted); font-weight: 500; }

/* Card */
.tdm-dash-card {
    background:    #fff;
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
}
.tdm-dash-card__head {
    padding:       18px 24px;
    border-bottom: 1px solid #f3f4f6;
}
.tdm-dash-card__head h3 {
    margin:      0 !important;
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       var(--tdm-text) !important;
}

/* Table */
.tdm-dash-table-wrap { overflow-x: auto; }
.tdm-dash-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13.5px;
}
.tdm-dash-table th {
    padding:          10px 18px;
    background:       #f9fafb;
    text-align:       left;
    font-size:        11.5px;
    font-weight:      700;
    color:            #6b7280;
    text-transform:   uppercase;
    letter-spacing:   .04em;
    border-bottom:    1px solid #f3f4f6;
    white-space:      nowrap;
}
.tdm-dash-table td {
    padding:       12px 18px;
    border-bottom: 1px solid #f9fafb;
    color:         var(--tdm-text);
    vertical-align: middle;
}
.tdm-dash-table tbody tr:last-child td { border-bottom: none; }
.tdm-dash-table tbody tr:hover td { background: #f9fafb; }

/* Empty state */
.tdm-dash-empty {
    padding:         48px;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    color:           var(--tdm-muted);
    font-size:       14px;
}
.tdm-dash-empty p { margin: 0; }

/* Buttons */
.tdm-dash-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 20px;
    border-radius:   99px !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    font-family:     inherit !important;
    cursor:          pointer;
    border:          none !important;
    text-decoration: none !important;
    transition:      all .2s;
    line-height:     1;
    box-shadow:      none !important;
}
.tdm-dash-btn--primary {
    background: var(--tdm-green-btn) !important;
    color:      #fff !important;
}
.tdm-dash-btn--primary:hover { background: #0a4229 !important; }
.tdm-dash-btn--outline {
    background: transparent !important;
    border:     1.5px solid #d1d5db !important;
    color:      var(--tdm-text) !important;
}
.tdm-dash-btn--outline:hover { border-color: var(--tdm-green) !important; color: var(--tdm-green) !important; }
.tdm-dash-btn--danger {
    background: #fef2f2 !important;
    color:      #dc2626 !important;
    border:     1.5px solid #fecaca !important;
}
.tdm-dash-btn--danger:hover { background: #fee2e2 !important; }
.tdm-dash-btn--sm { padding: 6px 14px !important; font-size: 12px !important; }

.tdm-dash-muted { font-size: 12px; color: var(--tdm-muted); }

/* Notice */
.tdm-dash-notice {
    padding:       14px 18px;
    border-radius: 10px;
    font-size:     13.5px;
    font-weight:   500;
}
.tdm-dash-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.tdm-dash-notice--error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

/* Responsive */
@media (max-width: 640px) {
    .tdm-dash-stats { grid-template-columns: 1fr 1fr; }
    .tdm-dash-header { flex-direction: column; align-items: flex-start; }
    .tdm-interval-picker { flex-direction: column; }
    .tdm-interval-opt { justify-content: flex-start; }
}
@media (max-width: 400px) {
    .tdm-dash-stats { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AUTH PAGES (Login / Logout)
   ══════════════════════════════════════════════════════════════════════════════ */
.tdm-auth-page {
    min-height:      60vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         40px 16px;
    font-family:     inherit;
}
.tdm-auth-card {
    background:    #fff;
    border-radius: 20px;
    padding:       40px 36px;
    width:         100%;
    max-width:     420px;
    box-shadow:    0 8px 40px rgba(0,0,0,.1);
}
.tdm-auth-card--logout { text-align: center; }

.tdm-auth-brand {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 28px;
}
.tdm-auth-brand__icon {
    width:           36px;
    height:          36px;
    background:      #0F4941;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.tdm-auth-brand span { font-size: 15px; font-weight: 700; color: #0F4941; }

.tdm-auth-title { font-size: 22px !important; font-weight: 800 !important; color: #111827 !important; margin: 0 0 6px !important; }
.tdm-auth-sub   { font-size: 13.5px; color: #6b7280; margin: 0 0 22px !important; }
.tdm-auth-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:500; margin-bottom:16px; }

.tdm-auth-form    { display: flex; flex-direction: column; gap: 16px; }
.tdm-auth-field   { display: flex; flex-direction: column; gap: 5px; }
.tdm-auth-field label { font-size:12.5px; font-weight:600; color:#374151; }
.tdm-auth-field input {
    height: 44px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 0 13px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box;
    width: 100%;
}
.tdm-auth-field input:focus { border-color:#0F4941 !important; box-shadow:0 0 0 3px rgba(15,73,65,.1) !important; outline:none !important; }

.tdm-auth-remember { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; cursor:pointer; }

.tdm-auth-btn {
    width:            100%;
    height:           48px;
    background:       #0F583A !important;
    background-color: #0F583A !important;
    color:            #fff !important;
    border:           none !important;
    border-radius:    99px !important;
    font-size:        14px !important;
    font-weight:      700 !important;
    font-family:      inherit !important;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    text-decoration:  none !important;
    box-shadow:       none !important;
    transition:       background .2s;
}
.tdm-auth-btn:hover { background:#0a4229 !important; background-color:#0a4229 !important; }
.tdm-auth-btn--outline {
    background:  transparent !important;
    border:      2px solid #0F4941 !important;
    color:       #0F4941 !important;
}
.tdm-auth-btn--outline:hover { background:rgba(15,73,65,.06) !important; }

.tdm-auth-home-link {
    display:         flex;
    align-items:     center;
    gap:             6px;
    justify-content: center;
    margin-top:      20px;
    font-size:       13px;
    color:           #6b7280 !important;
    text-decoration: none !important;
    transition:      color .15s;
}
.tdm-auth-home-link:hover { color: #0F4941 !important; }

.tdm-auth-logout-icon { margin: 0 auto 16px; display:flex; align-items:center; justify-content:center; }
.tdm-auth-logout-actions { display:flex; flex-direction:column; gap:10px; margin-top:8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   DONOR PORTAL – Sidebar + Main layout
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --tdm-sidebar-w: 250px;
    --tdm-header-h:  64px;
}

.tdm-portal {
    display:     flex;
    min-height:  100vh;
    font-family: inherit;
    background:  #f5f7fa;
    color:       #1a2e25;
    position:    relative;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
.tdm-sidebar {
    width:        var(--tdm-sidebar-w);
    min-width:    var(--tdm-sidebar-w);
    background:   #0F4941;
    display:      flex;
    flex-direction: column;
    position:     sticky;
    top:          0;
    height:       100vh;
    overflow-y:   auto;
    flex-shrink:  0;
    z-index:      200;
    transition:   transform .3s ease;
}

/* Brand */
.tdm-sidebar__brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.tdm-sidebar__brand-icon {
    width:           36px;
    height:          36px;
    background:      rgba(255,255,255,.15);
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.tdm-sidebar__brand-name {
    display:     flex;
    flex-direction: column;
    gap:         1px;
    color:       #fff;
    font-size:   14px;
    font-weight: 700;
    line-height: 1.2;
}
.tdm-sidebar__brand-name small {
    font-size:   10px;
    font-weight: 400;
    opacity:     .65;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* User block */
.tdm-sidebar__user {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.tdm-sidebar__avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,.2);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    font-weight:     700;
    flex-shrink:     0;
}
.tdm-sidebar__user-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    overflow:       hidden;
    min-width:      0;
}
.tdm-sidebar__user-info strong {
    color:         #fff;
    font-size:     13px;
    font-weight:   700;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}
.tdm-sidebar__user-info small {
    color:         rgba(255,255,255,.55);
    font-size:     11px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

/* Nav links */
.tdm-sidebar__nav {
    flex:    1;
    padding: 12px 0;
}
.tdm-nav-link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         11px 20px;
    color:           rgba(255,255,255,.65) !important;
    text-decoration: none !important;
    font-size:       13.5px;
    font-weight:     500;
    border-radius:   0;
    transition:      all .15s;
    border-left:     3px solid transparent;
}
.tdm-nav-link svg { flex-shrink: 0; }
.tdm-nav-link:hover { color:#fff !important; background:rgba(255,255,255,.08); }
.tdm-nav-link--active {
    color:        #fff !important;
    background:   rgba(255,255,255,.12) !important;
    border-color: #10b981 !important;
    font-weight:  700;
}

/* Footer links */
.tdm-sidebar__footer {
    padding:       12px 0;
    border-top:    1px solid rgba(255,255,255,.1);
}
.tdm-sidebar-footer-link {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 20px;
    font-size:       13px;
    color:           rgba(255,255,255,.55) !important;
    text-decoration: none !important;
    transition:      color .15s;
}
.tdm-sidebar-footer-link:hover { color: rgba(255,255,255,.9) !important; }
.tdm-sidebar-footer-link--logout:hover { color: #fca5a5 !important; }

/* ── MAIN CONTENT ─────────────────────────────────────────────────────────── */
.tdm-portal-main {
    flex:       1;
    display:    flex;
    flex-direction: column;
    min-width:  0;
    min-height: 100vh;
}

/* Header */
.tdm-portal-header {
    height:          var(--tdm-header-h);
    background:      #fff;
    border-bottom:   1px solid #e5e7eb;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 28px;
    gap:             16px;
    position:        sticky;
    top:             0;
    z-index:         100;
    box-shadow:      0 1px 4px rgba(0,0,0,.05);
}
.tdm-portal-header__left {
    display:     flex;
    align-items: center;
    gap:         14px;
}
.tdm-portal-header__title {
    font-size:   17px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    margin:      0 !important;
}
.tdm-portal-header__breadcrumb {
    font-size:  11px;
    color:      #9ca3af;
    margin:     0 !important;
}
.tdm-portal-header__right {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.tdm-portal-header__home-btn,
.tdm-portal-header__logout-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 14px;
    border-radius:   99px;
    font-size:       12.5px;
    font-weight:     600;
    text-decoration: none !important;
    transition:      all .15s;
    white-space:     nowrap;
}
.tdm-portal-header__home-btn {
    background: #f3f4f6;
    color:      #374151 !important;
    border:     1px solid #e5e7eb;
}
.tdm-portal-header__home-btn:hover { background:#e5e7eb; color:#0F4941 !important; }
.tdm-portal-header__logout-btn {
    background: #fef2f2;
    color:      #dc2626 !important;
    border:     1px solid #fecaca;
}
.tdm-portal-header__logout-btn:hover { background:#fee2e2; }

/* Mobile sidebar toggle */
.tdm-sidebar-toggle {
    display:         none;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      #f3f4f6 !important;
    border:          none !important;
    border-radius:   8px !important;
    cursor:          pointer;
    color:           #374151 !important;
    flex-shrink:     0;
}

/* Content area */
.tdm-portal-content {
    flex:    1;
    padding: 28px;
}

/* ── STATS CARDS ──────────────────────────────────────────────────────────── */
.tdm-portal-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
    margin-bottom:         24px;
}
.tdm-pstat {
    background:    #fff;
    border-radius: 14px;
    padding:       20px;
    display:       flex;
    align-items:   center;
    gap:           16px;
    box-shadow:    0 1px 6px rgba(0,0,0,.06);
    border-left:   4px solid #e5e7eb;
}
.tdm-pstat--1 { border-color: #0F4941; }
.tdm-pstat--2 { border-color: #10b981; }
.tdm-pstat--3 { border-color: #3b82f6; }

.tdm-pstat__icon {
    width:           42px;
    height:          42px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    background:      rgba(15,73,65,.1);
    color:           #0F4941;
}
.tdm-pstat--2 .tdm-pstat__icon { background: rgba(16,185,129,.1); color: #10b981; }
.tdm-pstat--3 .tdm-pstat__icon { background: rgba(59,130,246,.1); color: #3b82f6; }

.tdm-pstat__info   { display: flex; flex-direction: column; gap: 2px; }
.tdm-pstat__num    { font-size: 22px; font-weight: 800; color: #111827; line-height: 1; }
.tdm-pstat__label  { font-size: 12px; color: #6b7280; }

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.tdm-portal-section { margin-bottom: 28px; }
.tdm-portal-section--narrow { max-width: 700px; }

.tdm-section-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   14px;
}
.tdm-section-title {
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    margin:      0 0 14px !important;
}
.tdm-section-head .tdm-section-title { margin: 0 !important; }
.tdm-section-sub   { font-size:13.5px; color:#6b7280; margin:0 0 20px !important; }
.tdm-section-link  { font-size:13px; color:#0F4941 !important; text-decoration:none !important; font-weight:600; }

/* ── QUICK ACTIONS ────────────────────────────────────────────────────────── */
.tdm-quick-actions {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
    margin-bottom:         24px;
}
.tdm-action-card {
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 14px;
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           8px;
    text-decoration: none !important;
    transition:    all .2s;
    cursor:        pointer;
}
.tdm-action-card:hover { border-color: #0F4941; box-shadow: 0 4px 16px rgba(15,73,65,.1); transform: translateY(-1px); }
.tdm-action-card__icon {
    width:           40px;
    height:          40px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
}
.tdm-action-card__icon--green  { background: #0F4941; }
.tdm-action-card__icon--blue   { background: #3b82f6; }
.tdm-action-card__icon--purple { background: #8b5cf6; }
.tdm-action-card strong { font-size: 13.5px; font-weight: 700; color: #111827; }
.tdm-action-card span   { font-size: 12px; color: #6b7280; }

/* ── TABLE ────────────────────────────────────────────────────────────────── */
.tdm-portal-table-wrap { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.06); overflow-x:auto; }
.tdm-portal-table      { width:100%; border-collapse:collapse; font-size:13.5px; }
.tdm-portal-table th   { padding:11px 18px; background:#f9fafb; text-align:left; font-size:11.5px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #f3f4f6; white-space:nowrap; }
.tdm-portal-table td   { padding:13px 18px; border-bottom:1px solid #f9fafb; color:#111827; vertical-align:middle; }
.tdm-portal-table tbody tr:last-child td { border-bottom:none; }
.tdm-portal-table tbody tr:hover td { background:#f9fafb; }

/* ── INITIATIVE GRID ──────────────────────────────────────────────────────── */
.tdm-initiative-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}
.tdm-ini-card {
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow:      hidden;
    text-decoration: none !important;
    display:       flex;
    flex-direction: column;
    transition:    all .2s;
}
.tdm-ini-card:hover { border-color:#0F4941; box-shadow:0 4px 20px rgba(15,73,65,.1); transform:translateY(-2px); }
.tdm-ini-card__img {
    height:             140px;
    background-size:    cover;
    background-position: center;
    background-color:   #f3f4f6;
}
.tdm-ini-card__img--placeholder,
.tdm-ini-card__img--general {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #d1d5db;
}
.tdm-ini-card__img--general { background-color: rgba(15,73,65,.06); color:#0F4941; }
.tdm-ini-card__img--general svg { width:32px; height:32px; }
.tdm-ini-card__body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tdm-ini-card__body h3 { font-size:14px !important; font-weight:700 !important; color:#111827 !important; margin:0 !important; }
.tdm-ini-card__body p  { font-size:12px; color:#6b7280; margin:0 !important; line-height:1.5; }
.tdm-ini-card__body small { font-size:11px; color:#9ca3af; }
.tdm-ini-progress { height:4px; background:#e5e7eb; border-radius:99px; overflow:hidden; }
.tdm-ini-progress__bar { height:100%; background:#0F4941; border-radius:99px; }
.tdm-ini-card--general .tdm-ini-card__img { height:80px; }

/* ── BACK ROW ─────────────────────────────────────────────────────────────── */
.tdm-back-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.tdm-back-link { display:flex; align-items:center; gap:6px; font-size:13px; color:#6b7280 !important; text-decoration:none !important; font-weight:500; transition:color .15s; }
.tdm-back-link:hover { color:#0F4941 !important; }
.tdm-back-row h2 { font-size:16px !important; font-weight:700 !important; color:#111827 !important; margin:0 !important; }

/* Inline form (donate tab) */
.tdm-inline-form-wrap .tdm-wrapper { margin: 0 !important; }

/* ── PORTAL CARD (profile, password) ─────────────────────────────────────── */
.tdm-portal-card {
    background:    #fff;
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    0 1px 6px rgba(0,0,0,.06);
}
.tdm-portal-card__head {
    padding:       22px 28px;
    border-bottom: 1px solid #f3f4f6;
}
.tdm-portal-card__head h2 { font-size:16px !important; font-weight:700 !important; color:#111827 !important; margin:0 0 4px !important; }
.tdm-portal-card__head p  { font-size:13px; color:#6b7280; margin:0 !important; }

/* Profile form */
.tdm-profile-form { padding: 24px 28px; display:flex; flex-direction:column; gap:18px; }
.tdm-pf-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tdm-pf-field { display:flex; flex-direction:column; gap:5px; }
.tdm-pf-field label { font-size:12.5px; font-weight:600; color:#374151; }
.tdm-pf-field input {
    height:44px !important; border:1.5px solid #d1d5db !important; border-radius:10px !important;
    padding:0 13px !important; font-size:13.5px !important; font-family:inherit !important;
    background:#fff !important; box-shadow:none !important; box-sizing:border-box; width:100%;
}
.tdm-pf-field input:focus { border-color:#0F4941 !important; box-shadow:0 0 0 3px rgba(15,73,65,.1) !important; outline:none !important; }
.tdm-pf-field input::placeholder { color:#b0bcc4 !important; }

/* Alerts */
.tdm-portal-alert { border-radius:10px; padding:11px 16px; font-size:13px; font-weight:500; }
.tdm-portal-alert--success { background:#f0fdf4; border:1px solid #bbf7d0; color:#16a34a; }
.tdm-portal-alert--error   { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }

/* Buttons */
.tdm-portal-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    height:          44px;
    padding:         0 22px;
    background:      #0F583A !important;
    background-color:#0F583A !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   99px !important;
    font-size:       13.5px !important;
    font-weight:     700 !important;
    font-family:     inherit !important;
    cursor:          pointer;
    text-decoration: none !important;
    transition:      background .2s;
    box-shadow:      none !important;
    white-space:     nowrap;
}
.tdm-portal-btn:hover { background:#0a4229 !important; background-color:#0a4229 !important; }
.tdm-portal-btn--sm   { height:34px !important; padding:0 14px !important; font-size:12.5px !important; }
.tdm-portal-btn--danger { background:#fef2f2 !important; background-color:#fef2f2 !important; color:#dc2626 !important; border:1.5px solid #fecaca !important; }
.tdm-portal-btn--danger:hover { background:#fee2e2 !important; background-color:#fee2e2 !important; }
.tdm-portal-btn__text { display:flex; align-items:center; gap:6px; }

/* Empty state */
.tdm-portal-empty { background:#fff; border-radius:16px; padding:60px 24px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; gap:10px; }
.tdm-portal-empty__icon { width:52px; height:52px; background:#f3f4f6; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#d1d5db; }
.tdm-portal-empty h3 { font-size:17px !important; font-weight:700 !important; color:#374151 !important; margin:0 !important; }
.tdm-portal-empty p  { font-size:13.5px; color:#6b7280; margin:0 !important; }

/* Sidebar overlay */
.tdm-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:199; }
.tdm-sidebar-overlay--visible { display:block; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tdm-portal-stats { grid-template-columns: repeat(2,1fr); }
    .tdm-quick-actions { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
    .tdm-sidebar {
        position: fixed;
        top:      0;
        left:     0;
        height:   100%;
        transform: translateX(-100%);
    }
    .tdm-sidebar--open { transform: translateX(0); }
    .tdm-sidebar-toggle { display:flex !important; }
    .tdm-portal-content { padding: 18px 16px; }
    .tdm-portal-header  { padding: 0 16px; }
    .tdm-portal-header__home-btn span,
    .tdm-portal-header__logout-btn span { display:none; }
    .tdm-pf-row { grid-template-columns: 1fr; }
    .tdm-portal-stats { grid-template-columns: 1fr; }
    .tdm-quick-actions { grid-template-columns: 1fr; }
    .tdm-portal-header__breadcrumb { display:none; }
    .tdm-auth-card { padding:28px 22px; }
}

@media (max-width: 560px) {
    .tdm-initiative-grid { grid-template-columns: 1fr; }
    .tdm-back-row h2 { font-size:14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DONATE TAB – Initiative cards grid
   ══════════════════════════════════════════════════════════════════════════════ */

.tdm-donate-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   20px;
}

.tdm-donate-card {
    background:     #fff;
    border-radius:  16px;
    overflow:       hidden;
    box-shadow:     0 2px 12px rgba(0,0,0,.07);
    border:         1.5px solid #f0f0f0;
    display:        flex;
    flex-direction: column;
    transition:     transform .2s, box-shadow .2s, border-color .2s;
}
.tdm-donate-card:hover {
    transform:    translateY(-3px);
    box-shadow:   0 8px 28px rgba(15,73,65,.12);
    border-color: #0F4941;
}

/* Cover image */
.tdm-donate-card__img {
    height:              180px;
    background-size:     cover;
    background-position: center;
    background-color:    #f3f4f6;
    position:            relative;
    flex-shrink:         0;
}
.tdm-donate-card__img--empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, rgba(15,73,65,.08), rgba(15,73,65,.04));
    color:           rgba(15,73,65,.35);
}

/* Progress % badge on image */
.tdm-donate-card__pct {
    position:      absolute;
    top:           12px;
    right:         12px;
    background:    rgba(15,73,65,.88);
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    padding:       4px 9px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
}

/* Card body */
.tdm-donate-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap:     10px;
    flex:    1;
}

.tdm-donate-card__title {
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    margin:      0 !important;
    line-height: 1.3;
}

.tdm-donate-card__desc {
    font-size:   13px;
    color:       #6b7280;
    margin:      0 !important;
    line-height: 1.55;
    flex:        1;
}

/* Progress bar */
.tdm-donate-card__progress-wrap   { display:flex; flex-direction:column; gap:5px; }
.tdm-donate-card__progress-track  { height:6px; background:#e5e7eb; border-radius:99px; overflow:hidden; }
.tdm-donate-card__progress-bar    { height:100%; background:linear-gradient(90deg, #0F4941, #10b981); border-radius:99px; transition:width .6s ease; }
.tdm-donate-card__progress-labels { display:flex; justify-content:space-between; font-size:11.5px; }
.tdm-donate-card__raised          { font-weight:700; color:#0F4941; }
.tdm-donate-card__goal            { color:#9ca3af; }

/* End date */
.tdm-donate-card__date {
    font-size:  12px;
    color:      #9ca3af;
    margin:     0 !important;
    display:    flex;
    align-items: center;
    gap:        4px;
}

/* CTA button */
.tdm-donate-card__btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    width:           100%;
    padding:         11px 16px;
    background:      #0F4941 !important;
    background-color:#0F4941 !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   10px !important;
    font-size:       13px !important;
    font-weight:     700 !important;
    font-family:     inherit !important;
    text-decoration: none !important;
    cursor:          pointer;
    margin-top:      auto;
    transition:      background .2s;
    box-sizing:      border-box;
}
.tdm-donate-card__btn:hover {
    background:       #0a4229 !important;
    background-color: #0a4229 !important;
    color:            #fff !important;
}

/* Back breadcrumb separator */
.tdm-back-sep {
    color:     #d1d5db;
    font-size: 16px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .tdm-donate-grid { grid-template-columns: 1fr; }
    .tdm-donate-card__img { height: 150px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .tdm-donate-grid { grid-template-columns: repeat(2, 1fr); }
}