:root { --turquoise:#40d4cc; --navy:#102d58; --red:#d84343; --ink:#111827; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; color:var(--ink); background:#eef5f5; }
.app-header { height:84px; padding:15px 18px; background:var(--turquoise); display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:2; }
h1 { margin:0; font-size:clamp(1.55rem, 7vw, 2.2rem); letter-spacing:-1.2px; }
.filters-button { background:var(--navy); border:0; border-radius:24px; color:#fff; padding:12px 16px; font-size:1rem; font-weight:bold; white-space:nowrap; cursor:pointer; }
main, #map { height:calc(100dvh - 84px); width:100%; }
.map-message { position:fixed; z-index:1; top:105px; left:50%; transform:translateX(-50%); margin:0; padding:12px 16px; max-width:90%; border-radius:12px; background:#fff; box-shadow:0 3px 12px #0003; text-align:center; }
.filter-panel { position:fixed; z-index:5; top:0; right:0; width:min(100%, 400px); height:100dvh; padding:21px; overflow:auto; background:#fff; box-shadow:-6px 0 18px #0003; transform:translateX(105%); transition:transform .25s ease; }
.filter-panel.open { transform:translateX(0); }
.panel-heading { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ddd; }
h2 { margin:0 0 13px; font-size:1.6rem; }.icon-button { border:0; background:none; font-size:2rem; cursor:pointer; line-height:1; }
fieldset { padding:17px 0; border:0; border-bottom:1px solid #e2e2e2; } legend { font-size:1.15rem; font-weight:bold; margin-bottom:9px; } fieldset label { display:block; margin:10px 0; }
#filtersForm > label { display:block; margin:18px 0; font-weight:bold; } select { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid #bcc5c9; border-radius:8px; background:#fff; font-size:1rem; }
.check-row { font-weight:normal !important; }.check-row small { color:#52616b; }.time-labels { display:flex; justify-content:space-between; }.range-row { display:flex; gap:9px; margin-top:8px; }.range-row input { width:50%; accent-color:var(--navy); }
.reset-button { width:100%; padding:13px; border:1px solid var(--navy); border-radius:8px; background:#fff; color:var(--navy); font-size:1rem; font-weight:bold; cursor:pointer; }.scrim { position:fixed; inset:0; z-index:4; background:#0005; }
.bottom-sheet { position:fixed; z-index:3; bottom:0; left:0; width:100%; max-height:78dvh; padding:10px 22px 28px; overflow:auto; background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -4px 18px #0003; transform:translateY(105%); transition:transform .25s ease; }.bottom-sheet.open { transform:translateY(0); }.sheet-handle { width:44px; height:5px; margin:0 auto 14px; border-radius:3px; background:#b5bdc1; }.sheet-close { position:absolute; right:15px; top:14px; }.bottom-sheet h2 { margin-right:36px; }.bottom-sheet p { line-height:1.45; }.day-group h3 { margin:19px 0 7px; font-size:1.05rem; }.mass-time { margin:4px 0; }.directions { display:block; margin-top:22px; padding:14px; border-radius:10px; background:var(--navy); color:white; font-weight:bold; text-align:center; text-decoration:none; }
.church-pin { width:34px; height:34px; border:3px solid white; border-radius:50% 50% 50% 0; background:var(--red); color:#fff; font-size:24px; font-weight:bold; line-height:29px; text-align:center; transform:rotate(-45deg); box-shadow:0 2px 5px #0005; }.church-pin span { display:block; transform:rotate(45deg); }
.gm-style .gm-style-iw-c { padding:12px !important; }.map-popup { min-width:190px; }.map-popup h3 { margin:0 0 8px; font-size:1rem; }.map-popup p { margin:4px 0; font-size:.9rem; }.info-button { width:100%; margin-top:8px; padding:8px; border:0; border-radius:7px; background:var(--navy); color:#fff; font-weight:bold; cursor:pointer; }
@media (min-width:700px) { .app-header{padding-inline:7vw;} .bottom-sheet{left:50%; width:min(620px,100%); transform:translate(-50%,105%); border-radius:22px 22px 0 0; }.bottom-sheet.open{transform:translate(-50%,0);} }