:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#d32f2f;
  --shadow:0 10px 25px rgba(2,8,23,.08);
  --radius:18px;
  --radius-sm:12px;
  --tabbar-h:74px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

.app{min-height:100%;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));}


/* Top bar */
.topbar{position:sticky;top:0;z-index:20;background:var(--card);box-shadow:0 2px 10px rgba(2,8,23,.06);padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;display:flex;align-items:center;gap:10px}
.topbar__left,.topbar__right{width:auto;min-width:44px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

.topbar__left{justify-content:flex-start}
.topbar__right{justify-content:flex-end}
/* In RTL we want the greeting anchored to the outer right edge */
html[dir="rtl"] .topbar__right{justify-content:flex-start}
.topbar__hello{font-size:12px;text-decoration:none;color:var(--text);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__center{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
.topbar__logo{width:28px;height:28px;object-fit:contain}
.topbar__title{font-weight:900;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.iconbtn{border:0;background:transparent;font-size:18px;line-height:1; padding:10px;border-radius:999px}
.iconbtn:active{background:rgba(211,47,47,.10)}

/* Top-right hello alignment (RTL: anchor to the outer edge) */
html[dir="rtl"] .topbar__right{justify-content:flex-start}

.view{padding:14px;max-width:820px;margin:0 auto}

/* Helpers */
.mt{margin-top:12px}
.mt2{margin-top:18px}
.muted{color:var(--muted);font-size:13px;line-height:1.35}
.h2{font-size:18px;font-weight:900;margin:0}
.h3{font-size:15px;font-weight:900;margin:0}

/* Cards / sections */
.section{display:block}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card__body{padding:14px}

/* Home hero */
.hero{position:relative;z-index:1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero__img{width:100%;height:190px;object-fit:cover;display:block;filter:saturate(1.05)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 60%, rgba(0,0,0,0) 100%)}
.hero__content{position:absolute;inset:0;padding:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hero__title{color:#fff;font-weight:1000;font-size:clamp(16px,4vw,20px);text-shadow:0 2px 12px rgba(0,0,0,.35);flex:1;white-space:nowrap}
.hero__logo{width:32px;height:32px;object-fit:contain;background:rgba(255,255,255,.85);border-radius:12px;padding:3px}

/* Action buttons (mockup-like) */
.actions{position:relative;z-index:2;margin-top:-22px;padding:0 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.actions.actions--4{grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){
  .actions{grid-template-columns:1fr; margin-top:12px; padding:0}
}
.actionCard{background:linear-gradient(180deg,#fff,rgba(211,47,47,.02));border-radius:var(--radius);box-shadow:0 14px 28px rgba(2,8,23,.10), 0 2px 0 rgba(0,0,0,.06);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:1px solid rgba(2,8,23,.06)}
.actionCard__icon{width:44px;height:44px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0)) , rgba(211,47,47,.14);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(2,8,23,.10)}
.actionCard__label{font-weight:900;font-size:13px}

/* Layout */
.row{display:flex;gap:12px;align-items:center}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.row--between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}

.btn{border:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,0)) , var(--primary);color:#fff;padding:12px 14px;border-radius:14px;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(2,8,23,.12), 0 2px 0 rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(2,8,23,.10), 0 1px 0 rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.25)}
.btn--ghost{background:linear-gradient(180deg, rgba(211,47,47,.10), rgba(211,47,47,0));color:var(--primary);border:1px solid rgba(211,47,47,.25);box-shadow:0 10px 20px rgba(2,8,23,.08), inset 0 1px 0 rgba(255,255,255,.65)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}

.kpi{background:rgba(2,8,23,.03);border-radius:16px;padding:12px}
.kpi__label{font-size:12px;color:var(--muted);font-weight:800}
.kpi__value{font-size:18px;font-weight:1000;margin-top:4px}

.banner{background:rgba(211,47,47,.10);border:1px solid rgba(211,47,47,.18);border-radius:16px;padding:10px 12px;font-size:13px}
.alert{background:rgba(2,8,23,.03);border-radius:16px;padding:12px;margin-top:10px}
.alert__title{font-weight:900;margin-bottom:6px}

.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:8px 10px;border-radius:999px;background:rgba(2,8,23,.06);font-weight:900;font-size:13px}

.progress{height:12px;background:rgba(2,8,23,.08);border-radius:999px;overflow:hidden}
.progress__bar{height:100%;background:var(--primary);width:0%}

/* Map */
.map{height:52vh;min-height:260px;border-radius:18px;overflow:hidden}
@media (max-height:740px){
  .map{height:45vh;min-height:240px}
}

/* Keep Leaflet attribution above the fixed tabbar */
.leaflet-control-attribution{
  margin-bottom:calc(var(--tabbar-h) + 6px);
}

/* Leaflet uses high z-index for controls; keep them below our fixed tabbar */
.leaflet-top, .leaflet-bottom{ z-index: 10 !important; }
.leaflet-control{ z-index: 10 !important; }
.leaflet-bottom{ bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 6px) !important; }

/* Lists */
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:rgba(2,8,23,.03)}

/* Donation cards (Personal) */
.donCard{background:rgba(2,8,23,.03);border-radius:16px;padding:12px}
.donCard__row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(2,8,23,.06)}
.donCard__row:last-child{border-bottom:0}
.donCard__label{color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
.donCard__value{font-size:13px;text-align:end;word-break:break-word}
.donCard__actions{display:flex;gap:8px;justify-content:flex-start;margin-top:10px}
html[dir="ltr"] .donCard__value{text-align:start}

.chip{border:0;background:rgba(2,8,23,.06);border-radius:999px;padding:10px;cursor:pointer}
.chip:active{transform:translateY(1px)}

/* Tabs */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--card);padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 25px rgba(2,8,23,.08);display:flex;justify-content:space-around;gap:8px;height:var(--tabbar-h)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:16px}
.tab__icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.tab__label{font-size:12px;color:var(--muted);font-weight:900}
.tab.is-active{background:rgba(211,47,47,.10)}
.tab.is-active .tab__label{color:var(--primary)}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));background:#111827;color:#fff;padding:10px 12px;border-radius:999px;box-shadow:var(--shadow);z-index:2100;font-size:13px}

/* Modal */
dialog.modal{border:0;border-radius:18px;box-shadow:var(--shadow);width:min(640px, calc(100% - 24px));padding:0}
dialog.modal::backdrop{background:rgba(2,8,23,.5)}
.modal__content{padding:14px}
.label{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-top:10px}
.input, select, textarea{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#fff;font-size:15px}

/* Clear (X) button for free-typing fields */
.clearWrap{position:relative;width:100%}
.input.clearable, textarea.input.clearable{padding-left:44px}
.clearX{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:12px;border:0;background:rgba(211,47,47,.10);color:var(--primary);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.clearX:active{background:rgba(211,47,47,.18)}
.clearX[hidden]{display:none}

/* Donation table */
.tableWrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:620px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(2,8,23,.08);text-align:right;vertical-align:top}
html[dir="ltr"] .table th, html[dir="ltr"] .table td{ text-align:left; }
.table th{font-size:12px;color:var(--muted);font-weight:900}
.table td{font-size:13px}
.table .wrap{white-space:normal;word-break:break-word;max-width:240px}

/* Install hint */
.installHint{font-size:13px;color:var(--muted);margin-top:8px}

/* Date inputs (Map) - improve RTL alignment on Android */
.dateWrap{position:relative}
html[dir="rtl"] .dateWrap::after{content:"▾";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:900;pointer-events:none}
html[dir="rtl"] .dateInput{appearance:none;-webkit-appearance:none;text-align:right;padding-left:38px;padding-right:12px;position:relative}
html[dir="rtl"] .dateInput::-webkit-calendar-picker-indicator{opacity:0;display:block;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}


/* Grid cards */
.gridCards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.gridCards{grid-template-columns:1fr}}

/* Spots list */
.spot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:16px;background:rgba(2,8,23,.03)}
.spot__main{flex:1;min-width:0}
.spot__title{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot__actions{display:flex;gap:8px}

/* Navigation chooser icons */
.navIcon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:20px;margin:0 auto;background:rgba(2,8,23,.06)}
.navIcon--gm{background:rgba(66,133,244,.18)}
.navIcon--wz{background:rgba(0,188,212,.18)}
.navIcon img{width:28px;height:28px;display:block}


/* Map filters */
.gridFilters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:640px){.gridFilters{grid-template-columns:1fr}}
.btn-row{flex-wrap:wrap}
.btn-row .input{flex:1;min-width:180px}
.btn-row .clearWrap{flex:1;min-width:180px}


/* Autocomplete city dropdown */
.autoWrap{position:relative}
.suggest{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 6px);background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);max-height:220px;overflow:auto;z-index:50}
.suggest__item{display:block;width:100%;text-align:start;padding:10px 12px;background:transparent;border:0;font:inherit;cursor:pointer}
.suggest__item:hover{background:#f5f5f5}

.donCard__check{display:flex;align-items:center;gap:10px;font-size:14px}
.donCard__check input{transform:scale(1.1)}
.tabSvg{display:block}
.backArrow{display:inline-block;min-width:1ch}

/* Icon images */
.tabImg{width:22px;height:22px;object-fit:contain;display:block}
.homeImg{width:26px;height:26px;object-fit:contain;display:block}
.actionCard__icon img{width:26px;height:26px;object-fit:contain;display:block}
.tab__icon img{width:22px;height:22px;object-fit:contain;display:block}