dialog#modal{width:min(960px,calc(100% - 48px));max-width:960px;max-height:90dvh;border:1px solid #e4eaf2;border-radius:28px;background:#fff;box-shadow:0 30px 100px #0615324d;padding:0;overscroll-behavior:contain}
dialog#modal::backdrop{background:#0c1d40a6;backdrop-filter:blur(5px)}
#modal .modal-header{position:sticky;top:0;z-index:2;background:#fffffff5;backdrop-filter:blur(12px);padding:20px 28px;gap:18px;border-bottom:1px solid #e9edf3}
#modal .modal-header h2{font-size:21px;line-height:1.6;letter-spacing:-.2px}
#modal .modal-header .icon-btn{border:1px solid #e1e7ef;border-radius:50%;width:42px;height:42px;flex-shrink:0;background:#f8fafc}
#modal .modal-body{padding:24px 28px 28px}
.giving-step{display:flex;align-items:center;gap:9px;color:var(--blue);font-size:11px;margin-bottom:25px;line-height:1.5}
.step-number{display:grid;place-items:center;border-radius:50%;width:27px;height:27px;flex-shrink:0;background:#e9f6f5;color:#007e82;font-size:12px;font-weight:600}
.step-number .icon{width:15px;height:15px}
.giving-step .muted{color:#8590a2}.step-number.muted{background:#f0f3f7}
.step-divider{width:34px;height:1px;background:#dce4ef;margin-inline:3px}
#modal .detail-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:28px;align-items:start}
.detail-story{min-width:0}
#modal .detail-photo{width:100%;height:235px;object-fit:cover;border-radius:19px;margin:0}
.detail-funding{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:21px}
.detail-funding>div{display:flex;flex-direction:column;gap:5px}
.detail-funding>div>span{font-size:10px;color:var(--muted)}
.detail-funding strong{font-size:25px;color:var(--blue);font-weight:700;line-height:1.4}
.detail-percent{font-size:12px;color:#007f83;background:#eaf8f6;padding:6px 11px;border-radius:99px}
.detail-story .progress{height:7px;margin-top:13px;background:#edf1f5;border-radius:99px}
.detail-story .progress>span{background:linear-gradient(90deg,#00b2b3,#008b90)}
.detail-goals{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#718096;font-size:10px;flex-wrap:wrap}
.detail-goals>span{display:flex;gap:6px;align-items:center}
#modal .detail-desc{font-size:12px;line-height:2.1;margin:22px 0 0;color:#69768b;white-space:pre-line}
#modal .text-link{font-size:11px;margin-top:18px;min-height:40px;gap:10px;color:var(--blue)}
#modal .donation-box,.cart-summary{background:#f7f9fc;border:1px solid #e4eaf2;border-radius:22px;padding:24px;min-width:0}
.donation-eyebrow{display:block;color:var(--teal);font-size:10px;font-weight:500;margin-bottom:9px}
#modal .donation-box h3,.cart-summary h3{font-size:22px;color:var(--navy);line-height:1.6;margin:0}
.donation-intro,.cart-summary>p:not(.payment-notice):not(.amount-error){font-size:12px;line-height:1.9;color:#738096;margin:8px 0 23px}
#modal .amount-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 22px}
#modal .amount-buttons button{display:flex;justify-content:center;align-items:center;min-height:48px;padding:9px 5px;border:1px solid #dce4ee;border-radius:12px;background:#fff;color:#52617a;font-size:14px;font-weight:600}
#modal .amount-buttons button.selected{border-color:var(--teal);background:#eaf8f6;color:#007c80;box-shadow:inset 0 0 0 1px #008b901a}
#modal .field-label,.cart-amount-label{display:block;font-size:11px;font-weight:500;color:#586982;margin-bottom:8px}
.amount-field{min-width:0}
#modal .amount-input{display:flex;align-items:center;min-height:54px;border:1px solid #cfdae8;border-radius:12px;background:#fff;padding:10px 15px;gap:9px;max-width:none;width:100%;margin:0}
#modal .amount-input:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #00b2b314}
#modal .amount-input:has(input[aria-invalid="true"]){border-color:#bd4a42}
#modal .amount-input input{font:600 20px MontserratArabic,Arial,sans-serif;width:100%;min-width:0;color:var(--blue);text-align:right}
#modal .amount-input .sar-symbol{font-size:18px;flex-shrink:0}
.amount-error{font-size:10px;line-height:1.8;color:#a73832;margin:5px 0 0;min-height:0}
.amount-error:empty{display:none}
.contribution-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px;padding-top:19px;border-top:1px solid #e0e7ef;font-size:12px;color:#617187}
.contribution-summary strong{font-size:22px;color:var(--blue)}
#modal .donation-buttons{display:block;margin-top:20px}
#modal .donation-buttons .btn,#modal .cart-footer .btn{width:100%;min-height:50px;border-radius:999px;font-size:12px;padding:12px 18px;justify-content:space-between;gap:8px}
.donation-hint{font-size:10px;color:#7b8799;text-align:center;line-height:1.8;margin:12px 0 0}
.payment-notice{font-size:10px;line-height:1.9;color:#79654b;background:#f5f0e7;border:1px solid #e9dfcd;border-radius:12px;padding:12px 13px;margin:19px 0 0}
.cart-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:25px;align-items:start}
.cart-list{min-width:0}
.cart-list-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}
.cart-list-heading h3{font-size:16px;color:var(--ink)}
.cart-list-heading>span{font-size:11px;color:#7c8899}
#modal .cart-item{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;gap:12px;padding:16px;border:1px solid #e3e9f1;border-radius:18px;align-items:start;background:#fff;margin-bottom:12px}
#modal .cart-item img,.unavailable-photo{width:64px;height:74px;border-radius:12px;object-fit:cover;background:#eef3f8;display:grid;place-items:center}
#modal .cart-item h3{font-size:13px;line-height:1.8;margin:0 0 12px;color:var(--ink)}
.cart-item-content{min-width:0}
#modal .cart-item .amount-input{min-height:43px;padding:7px 10px;border-radius:10px}
#modal .cart-item .amount-input input{font-size:16px}
.cart-amount-label{font-size:10px;margin-bottom:5px}
#modal .remove-contribution{width:32px;height:32px;min-width:0;border-radius:50%;color:#8290a3;background:#f6f8fb}
#modal .remove-contribution:hover{color:#a73832;background:#fff0ee}
#modal .remove-contribution .icon{width:17px;height:17px}
.cart-item-content>p{font-size:11px;color:#8b655c;line-height:1.9}
#modal .cart-total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 0;padding:21px 0;border-top:1px solid #e0e7ef;border-bottom:1px solid #e0e7ef;font-size:13px;color:#52647c}
#modal .cart-total strong{font-size:27px;color:var(--blue);line-height:1.5}
#modal .cart-footer{display:flex;flex-direction:column;gap:10px;margin-top:22px}
#modal .cart-footer .btn-outline{background:#fff;justify-content:center}
#modal .cart-footer .btn:disabled{background:#e4eaf1;color:#8b97a9;opacity:1}
#modal .empty-cart{padding:28px 15px 38px;display:flex;flex-direction:column;align-items:center;text-align:center}
.empty-cart-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:25px;background:#eaf6f5;color:var(--teal);margin-bottom:23px}
.empty-cart-icon .icon{width:32px;height:32px}
#modal .empty-cart h3{font-size:26px;line-height:1.7;color:var(--navy);margin:0}
#modal .empty-cart p{font-size:13px;color:#748197;line-height:2;max-width:350px;margin:10px 0 25px}
#modal .empty-cart .btn{border-radius:999px;min-height:50px;font-size:12px}
@media(max-width:700px){
 dialog#modal{width:calc(100% - 20px);max-height:94dvh;border-radius:23px}
 #modal .modal-header{padding:16px 18px;gap:12px}
 #modal .modal-header h2{font-size:17px}
 #modal .modal-header .icon-btn{width:36px;height:36px}
 #modal .modal-body{padding:18px}
 .giving-step{font-size:10px;gap:7px;margin-bottom:20px;flex-wrap:wrap}
 .step-number{width:24px;height:24px;font-size:11px}.step-divider{width:20px}
 #modal .detail-grid,.cart-layout{grid-template-columns:1fr;gap:22px}
 #modal .detail-photo{height:190px;border-radius:16px}
 #modal .detail-desc{margin-top:17px}
 #modal .donation-box,.cart-summary{padding:20px;border-radius:18px}
 #modal .donation-box h3,.cart-summary h3{font-size:21px}
 #modal .amount-buttons{gap:7px}
 #modal .amount-buttons button{font-size:13px}
 #modal .cart-item{grid-template-columns:54px minmax(0,1fr) 28px;gap:10px;padding:13px}
 #modal .cart-item img,.unavailable-photo{width:54px;height:65px}
 #modal .remove-contribution{width:28px;height:28px}
 #modal .cart-item h3{font-size:12px}
 #modal .cart-total strong{font-size:26px}
 #modal .empty-cart{padding:20px 0 27px}
 #modal .empty-cart h3{font-size:22px}
}