/* assets/css/components.css — modern components */

/* ══ CARD ══ */
.card{
  background:var(--S);border-radius:22px;
  border:1px solid var(--B);padding:22px;
  margin-bottom:18px;box-shadow:var(--shadow);
  transition:box-shadow 0.2s,transform 0.2s;
}
.card:hover{box-shadow:var(--shadow-md)}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px;flex-wrap:wrap}

/* ══ CALENDAR ══ */
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nv{
  width:44px;height:44px;background:var(--S3);
  border:1.5px solid var(--B);border-radius:14px;cursor:pointer;
  font-size:22px;color:var(--MT);display:flex;align-items:center;
  justify-content:center;transition:all 0.15s;
}
.cal-nv:hover{background:var(--AL);color:var(--A);border-color:rgba(0,200,150,0.4)}
.cal-ti{text-align:center}
.cal-mo{font-size:24px;font-weight:900;color:var(--T)}
.cal-sb{font-size:13px;color:var(--MT);margin-top:3px;font-weight:600}

.cal-gr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dn{text-align:center;font-size:12px;color:var(--HT);padding:8px 0;font-weight:800}
.cal-d{
  text-align:center;border-radius:14px;cursor:pointer;
  min-height:62px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding-top:7px;transition:background 0.12s;
}
.cal-d:active:not(.emp){background:var(--S2)}
@media(hover:hover){.cal-d:hover:not(.emp){background:var(--S2)}}
.sd{display:block;font-size:17px;color:var(--T);line-height:1.2;font-weight:800}
.cal-sub{display:flex;justify-content:center;gap:2px;margin-top:3px}
.hd{font-size:9px;color:var(--A);background:var(--AL);border-radius:4px;padding:0 4px;line-height:1.8;font-weight:700}
.gd{font-size:9px;color:var(--MT);background:var(--S2);border-radius:4px;padding:0 4px;line-height:1.8;font-weight:600}
.cal-d.fr .sd{color:var(--G);font-weight:900}
.cal-d.td{
  background:linear-gradient(135deg,var(--A),var(--AM));
  border-radius:14px;box-shadow:0 3px 12px rgba(0,200,150,0.4);
}
.cal-d.td .sd{color:#fff;font-weight:900}
.cal-d.td .gd{color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.15)}
.cal-d.td .hd{color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.22)}
.cal-d.emp{cursor:default;min-height:62px}
.cal-d.sel-d:not(.td){background:var(--AL);outline:2px solid var(--A);outline-offset:-2px}
.cal-d.sel-d.td{outline:2px solid rgba(255,255,255,0.8);outline-offset:-3px}
.cal-ft{display:flex;align-items:center;justify-content:flex-start;margin-top:14px}
.td-btn{
  background:var(--AL);border:1.5px solid rgba(0,200,150,0.3);
  border-radius:12px;padding:10px 22px;font-size:14px;
  font-weight:700;cursor:pointer;color:var(--AM);
  font-family:inherit;transition:all 0.15s;
}
.td-btn:hover{background:var(--ALD);border-color:var(--A)}

/* Event dots */
.ev-dots{display:flex;justify-content:center;gap:2px;margin-top:4px;height:6px;align-items:center}
.ev-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ev-dot-af{background:var(--A)}.ev-dot-isl{background:var(--G)}.ev-dot-int{background:var(--INT)}
.ev-panel{background:var(--S3);border-radius:18px;padding:16px;margin-top:14px;border:1px solid var(--B);animation:evIn 0.2s ease}
@keyframes evIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ev-panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ev-panel-date{font-size:13px;color:var(--MT);font-weight:700}
.ev-panel-close{background:var(--S2);border:1px solid var(--B);color:var(--MT);cursor:pointer;font-size:14px;padding:4px 10px;border-radius:9px;transition:all 0.12s}
.ev-item{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:14px;margin-bottom:6px;border:1px solid transparent}
.ev-item-af{background:var(--AL);border-color:rgba(0,200,150,0.2)}
.ev-item-isl{background:var(--GL);border-color:rgba(240,165,0,0.2)}
.ev-item-int{background:var(--INTL);border-color:rgba(37,99,235,0.15)}
.ev-item-icon{font-size:20px;flex-shrink:0;line-height:1.3;margin-top:1px}
.ev-item-title{font-size:14px;font-weight:700;color:var(--T);line-height:1.4}
.ev-item-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;margin-top:5px;padding:3px 10px;border-radius:99px}
.ev-item-badge-af{background:var(--AL);color:var(--AM)}.ev-item-badge-isl{background:var(--GL);color:var(--GM)}.ev-item-badge-int{background:var(--INTL);color:var(--INT)}
.ev-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 13px;background:var(--S3);border-radius:14px;border:1px solid var(--B)}
.ev-leg-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--MT);font-weight:700}
.ev-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ev-month-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--B)}
.ev-month-title{font-size:13px;font-weight:800;color:var(--MT);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.ev-month-title::before{content:'';width:3px;height:14px;background:linear-gradient(to bottom,var(--A2),var(--AM));border-radius:2px;flex-shrink:0}
.ev-month-scrl{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--BM) transparent}
.ev-month-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:var(--S);border:1px solid var(--B);cursor:pointer;transition:all 0.12s}
.ev-month-row:hover{background:var(--S2);border-color:var(--BM)}
.ev-month-daynum{font-size:16px;font-weight:800;color:var(--T);min-width:24px;text-align:center;flex-shrink:0}
.ev-month-bar{width:4px;height:32px;border-radius:3px;flex-shrink:0}
.ev-month-bar-af{background:var(--A)}.ev-month-bar-isl{background:var(--G)}.ev-month-bar-int{background:var(--INT)}
.ev-month-ev-name{font-size:13px;font-weight:700;color:var(--T);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-month-ev-type{font-size:11px;color:var(--HT);font-weight:600;margin-top:2px}
.ev-month-chevron{font-size:13px;color:var(--HT);flex-shrink:0}

/* ══ PRAYER ══ */
.mdh{display:flex;gap:8px;margin-bottom:14px}
.mb{
  flex:1;padding:11px 8px;font-size:15px;font-weight:700;
  border-radius:14px;border:1.5px solid var(--BM);
  background:transparent;color:var(--MT);cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.mb.on{
  background:linear-gradient(135deg,var(--AL),var(--ALD));
  color:var(--AD);border-color:var(--A);
  box-shadow:0 0 0 2px rgba(0,200,150,0.12);
}
.pr-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:14px;
  font-size:16px;font-weight:600;color:var(--T);
  margin-bottom:5px;background:var(--S3);
  transition:background 0.15s;
}
.pr-row.cur{background:var(--AL);border:1.5px solid rgba(0,200,150,0.25)}
.pn{display:flex;align-items:center;gap:12px}
.pn-ic{font-size:18px}
.pt{color:var(--A);font-weight:900;font-variant-numeric:tabular-nums;font-size:17px}
.pr-row.cur .pt{color:var(--AM)}

.nxt-b{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--GL),rgba(240,165,0,0.08));
  color:var(--GM);border-radius:99px;padding:6px 14px;
  font-size:13px;font-weight:800;white-space:nowrap;
  border:1px solid rgba(240,165,0,0.25);
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--G);animation:pulse 2s ease infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.6)}}

.geo{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--B);flex-wrap:wrap}
.geo-b{
  font-size:14px;font-weight:700;color:var(--A);
  background:var(--AL);border:1.5px solid rgba(0,200,150,0.3);
  border-radius:99px;padding:9px 18px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:all 0.15s;
}
.geo-b:hover{background:var(--ALD);border-color:var(--A)}
.geo-inf{flex:1;min-width:0}
.geo-ct{font-size:15px;font-weight:800;color:var(--T)}
.geo-cd{font-size:12px;color:var(--HT);font-weight:500}

/* Loading / Error */
.wx-loading,.rates-loading{text-align:center;color:var(--HT);font-size:14px;padding:32px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.wx-spin{width:32px;height:32px;border:3px solid var(--B);border-top-color:var(--A);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wx-error,.rates-err{text-align:center;color:var(--HT);font-size:14px;padding:24px;line-height:1.7}

/* Selects */
.wx-sel{
  font-size:14px;padding:9px 14px;border-radius:12px;
  border:1.5px solid var(--BM);background:var(--S3);
  color:var(--T);font-family:inherit;outline:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  font-weight:700;min-width:120px;
}

/* ══ PRAYER PAGE EXTRAS ══ */
.city-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.city-info-item{background:var(--S3);border-radius:14px;padding:14px 16px;border:1px solid var(--B)}
.city-info-lbl{font-size:12px;color:var(--HT);font-weight:700;margin-bottom:5px}
.city-info-val{font-size:17px;font-weight:800;color:var(--T)}

.prayer-date-card{display:flex;flex-direction:column;gap:8px}
.prayer-date-row{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:var(--S3);border-radius:13px;border:1px solid var(--B);flex-wrap:wrap;gap:6px}
.prayer-date-lbl{font-size:13px;font-weight:700;color:var(--MT)}
.prayer-date-val{font-size:14px;font-weight:800;color:var(--T)}

.other-cities-grid{display:flex;flex-wrap:wrap;gap:8px}
.other-city-btn{font-size:13px;font-weight:700;color:var(--MT);text-decoration:none;padding:8px 14px;border-radius:12px;border:1.5px solid var(--B);background:var(--S3);white-space:nowrap;transition:all 0.15s}
.other-city-btn:hover{color:var(--A);background:var(--AL);border-color:rgba(0,200,150,0.35)}

.prayer-guide{display:flex;flex-direction:column;gap:12px}
.guide-row{display:flex;align-items:flex-start;gap:13px;padding:12px 14px;background:var(--S3);border-radius:13px;border:1px solid var(--B)}
.guide-icon{font-size:24px;line-height:1;flex-shrink:0;margin-top:2px}
.guide-row strong{font-size:14px;font-weight:800;color:var(--T);display:block;margin-bottom:3px}
.guide-row span{font-size:13px;color:var(--MT);line-height:1.5}