/**
 * Detail page ("/masjid/{slug}") redesign - MasjidVerse reference layout.
 *
 * All new rules here use an "mv-" prefix and are scoped to the
 * 'mosque_directory_detail' Twig template - kept in its own file/library
 * rather than mixed into the legacy .mosque-detail-*.mosjid-sidebar-
 * rules already in mosque-directory.css, so the old classes can be
 * removed later without having to untangle which rules are still load-
 * bearing for this page.
 **/


:root {
  --mv-blue: #2f6fed;
  --mv-blue-dark: #1e56c9;
  --mv-gradient: linear-gradient(252.45deg, #3ddbbf 10.98%, #3554c1 47.51%, #2e3c40 91.92%);
  --mv-ink: #1f2530;
  --mv-muted: #6b7280;
  --mv-border: #e6e8ec;
  --mv-panel-bg: #f4f6fb;
}

/* ---------------------------------------------------------------- */
/* Top bar                                                           */
/* ---------------------------------------------------------------- */
.mv-detail-topbar {
  background: #fff;
  border-bottom: 1px solid var(--mv-border);
  margin-bottom: 24px;
  /* Standard "full-bleed" breakout - the theme's page template wraps
     this in a padded/max-width content region, so just leaving this bar
     at width:auto keeps it stuck inside that region. This forces it to
     span the full viewport width regardless of whatever container it's
     nested in, while .mv-detail-topbar-inner below keeps the *content*
     (logo/date) aligned to the same 1280px column as the rest of the
     page. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.mv-detail-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.mv-detail-logo {
  display: flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--mv-ink);
}

.mv-detail-logo-img {
  display: block;
  height: 28px;
  width: auto;
}

.mv-detail-date {
  font-weight: 600;
  color: var(--mv-ink);
  font-size: 0.95rem;
  margin-left: 20px;
}

/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */
.mv-detail-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  /* Widened from 380px per feedback - the sidebar card (photo/map,
     name, CTA, contact list) was feeling cramped next to the main
     column. */
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 992px) {
  .mv-detail-layout {
    grid-template-columns: 1fr;
  }
}

.mv-detail-main {
  min-width: 0;
}

.mv-detail-section {
  margin-bottom: 25px;
  border-bottom: 1px solid #00000033;
  padding-bottom: 25px;
}

.mv-detail-section h2 {
  font-size: 1.375rem;
  font-weight: 400;
  color: #2E3C40;
  margin-bottom: 20px;
}

.mv-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mv-section-heading-row h2 {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Prayer times tab strip                                            */
/* ---------------------------------------------------------------- */
.mv-prayer-tabs {
  display: flex;
  flex-wrap: wrap;
  /* Each pill keeps its own content-driven (auto) width - space-between
     spreads the leftover width out as gaps between pills instead of
     leaving it as one dead strip after the last one (Isya). */
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 32px;
  /* One shared background for the whole strip now, instead of every
     tab repeating it individually - only the "next prayer" tab still
     overrides this with its own color (see .mv-prayer-tab--next). */
  background: #f8fafe99;
}

/* Each prayer is its own auto-width pill - width is just whatever the
   label/time text needs, per the given spec. Label + time sit inline on
   one line (was stacked on two lines). */
.mv-prayer-tab {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 35px;
  opacity: 0.8;
  padding: 5px 10px 5px 15px;
  border-left: 1.5px solid #010a2a1f;
  color: var(--mv-ink);
}

/* The soonest upcoming prayer (see mosque-prayer-times.js) - same shape,
   its own background/border-left color, full opacity so it stands out
   against the other (0.8 opacity) pills. */
.mv-prayer-tab--next {
  opacity: 1;
  background: #d6eafbab;
  border-left: 1.5px solid #2e86de;
}

.mv-prayer-tab-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mv-muted);
}

.mv-prayer-tab--next .mv-prayer-tab-label {
  color: #2e86de;
}

.mv-prayer-tab-value {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* SIMAS stats panel                                                 */
/* ---------------------------------------------------------------- */
.mv-simas-panel {
  background: var(--mv-panel-bg);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 40px;
  box-shadow: 0 0 15px 0 #0B25420D;
  background: #F8FAFE;
  opacity: 1;
}

.mv-simas-panel-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: #2E3C40;
  margin-bottom: 20px;
}

.mv-simas-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
}

.mv-simas-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mv-simas-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1B5FA8;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px 0 #D6EAFB;
  background: #D6EAFB;

}

.mv-simas-stat-icon--teal { background: #0ea5a5; }
.mv-simas-stat-icon--sky { background: #3b82f6; }
.mv-simas-stat-icon--amber { background: #f59e0b; }
.mv-simas-stat-icon--emerald { background: #10b981; }
.mv-simas-stat-icon--rose { background: #f43f5e; }

.mv-simas-stat-value {
  font-size: 24px;
  font-weight: 400;
  color: #5864795C;
  line-height: 1.1;
}

.mv-simas-stat-label {
  font-size: 0.85rem;
  color: var(--mv-muted);
}

/* ---------------------------------------------------------------- */
/* Fasilitas / Kegiatan checklists                                   */
/* ---------------------------------------------------------------- */
.mv-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 16px;
}

@media (max-width: 480px) {
  .mv-checklist-grid {
    grid-template-columns: 1fr;
  }
}

.mv-checklist-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: #404852;
  font-size: 0.95rem;
}

.mv-checklist-item i {
  width: 20px;
  text-align: center;
  color: #404852;
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------- */
/* Carousel arrows (shared by nearby + events sections)              */
/* ---------------------------------------------------------------- */
.mv-carousel-nav {
  display: flex;
  gap: 8px;
}

.mv-carousel-btn {
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--mv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50% !important;
  border: 1px solid #ddd !important;
}

.mv-carousel-btn:hover {
  background: var(--mv-panel-bg);
}

/* ---------------------------------------------------------------- */
/* Masjid Terdekat Lainnya - nearby carousel                         */
/* ---------------------------------------------------------------- */
.mv-nearby-carousel {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}

.mv-nearby-card {
  scroll-snap-align: start;
  flex: 0 0 230px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--mv-border);
  background: #F8FAFE;
}

.mv-nearby-card-photo {
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: #d9d9d9;
}

.mv-nearby-card-body {
  padding: 12px 14px 16px;
}

.mv-nearby-card-name {
  font-weight: 700;
  color: var(--mv-ink);
  margin-bottom: 2px;
}

.mv-nearby-card-location {
  font-size: 0.82rem;
  color: var(--mv-muted);
  margin-bottom: 6px;
}

.mv-nearby-card-distance {
  font-size: 0.8rem;
  color: var(--mv-blue);
  font-weight: 600;
}

/* buildListItem's .mosque-list-thumb-wrap::after is a scrim meant to
   darken the bottom of the photo so the (still-white) overlay text
   stays legible when it sits *on top of* the image - since the nearby
   cards' overlay was moved to sit *below* the image instead (see the
   .mv-nearby-card .mosque-list-thumb-overlay override further down),
   that scrim has nothing left to do here but darken the photo itself,
   so it's switched off for this context. overflow: hidden is a
   defensive clip so nothing (this pseudo-element included) can render
   past the photo's own rounded edges. The list page itself
   (mosque-directory.css) is untouched - its cards still overlay the
   text on the photo and still need the scrim. */
.mv-nearby-card .mosque-list-thumb-wrap {
  overflow: hidden;
}

.mv-nearby-card-distance span {
  color: var(--mv-muted);
  font-weight: 400;
}

/* buildListItem's .mosque-list-thumb-overlay/.mosque-list-name/etc. are
   styled for sitting *on top of* the photo (absolute position, white
   text, gradient scrim) - here the nearby cards use the same classes
   for their name/distance/location block, but placed as a sibling
   *below* the photo instead, so this overrides just that positioning
   and color set for the .mv-nearby-card context. The list page itself
   (mosque-directory.css) is untouched. */
.mv-nearby-card .mosque-list-thumb-overlay {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 10px 14px 14px;
  background: none;
}

.mv-nearby-card .mosque-list-name {
  text-shadow: none;
  color: #4048525C;
  font-size: 14px;
  font-weight: 700;
}
.mv-nearby-card .mosque-list-name:hover{
  color: #2E3C40;
}
.mv-nearby-card .mosque-list-city {
  color: #5864795C;
  font-size: 13px;
  font-weight: 400;
}

.mv-nearby-card .mosque-list-distance-overlay {
  font-size: 12px;
  font-weight: 400;
}
.mv-nearby-card .mosque-list-distance-overlay .mosque-list-distance-value{
  color: #2E3C40;
}

.mv-nearby-card .mosque-list-distance-overlay .mosque-list-distance-time{
  color: #00000040;
}

/* ---------------------------------------------------------------- */
/* Jadwal Kajian & Event                                             */
/* ---------------------------------------------------------------- */
.mv-events-empty-note {
  color: var(--mv-muted);
  margin-bottom: 16px;
}

.mv-events-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
}

.mv-event-card {
  flex: 0 0 250px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #111;
  aspect-ratio: 3 / 4;
}

.mv-event-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.mv-event-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
}

.mv-event-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.mv-event-card-time {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- */
/* Sidebar card                                                      */
/* ---------------------------------------------------------------- */
.mv-detail-sidebar {
  position: sticky;
  top: 24px;
}

.mv-sidebar-card {
  border: 1px solid var(--mv-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 30, 60, 0.06);
}

.mv-sidebar-media {
  /* Was `display: grid` - a single implicit grid row *should* stretch
     to fill the container's height by default, but in practice this is
     what let Leaflet initialize #mosque-detail-map before that stretch
     was resolved, so it cached a shorter/offset size (the "map sits
     lower than the photo" bug) - flex + an explicit height on both
     children removes that ambiguity outright. See also the
     map.invalidateSize() calls added in mosque-detail-map.js, which
     re-check the size after the page has actually finished laying out. */
  display: flex;
  height: 200px;
  overflow: hidden;
}

.mv-sidebar-photo {
  flex: 1.3 1 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #333;
  position: relative;
}

.mv-sidebar-directions-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mv-gradient);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 60, 150, 0.35);
}

.mv-sidebar-map {
  flex: 1 1 0;
  height: 100%;
  background: #e9edf3;
}

/* Leaflet's own container class - belt-and-braces so the tile canvas
   itself never falls back to an intrinsic/auto height inside the flex
   item above. */
.mv-sidebar-map.leaflet-container {
  height: 100% !important;
  width: 100% !important;
}

/* Leaflet's default popup (mosque-detail-map.js's .bindPopup() on the
   main pin) is sized/padded for a full-size map - on this small sidebar
   map it reads as a big blank white box next to the mosque name. Shrink
   the font and padding so it's a compact label instead. */
.mv-sidebar-map .leaflet-popup-content-wrapper {
  padding: 2px;
  border-radius: 6px;
}

.mv-sidebar-map .leaflet-popup-content {
  margin: 4px 8px;
  font-size: 8px;
  line-height: 1.3;
}

.mv-sidebar-map .leaflet-popup-content a {
  font-size: 8px;
}

.mv-sidebar-map .leaflet-popup-tip-container {
  width: 16px;
  height: 8px;
}

.mv-sidebar-body {
  padding: 20px;
}

.mv-sidebar-name {
  font-size: 19px;
  font-weight: 400;
  color: #2E3C40;
  margin-bottom: 8px;
}

.mv-sidebar-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--mv-muted);
  margin-bottom: 10px;
}

.mv-sidebar-rating-stars {
  color: #f59e0b;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.mv-sidebar-rating-info {
  color: var(--mv-muted);
}

.mv-sidebar-type-address {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.mv-sidebar-type {
  font-weight: 400;
  color: #2E3C40;
  white-space: nowrap;
  font-size: 16px;
}

.mv-sidebar-address {
  font-size: 12px;
  color: #00000033;
  padding-top: 4px;
}

.mv-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.mv-sidebar-badge--success {
  background: #e7f8f0;
  color: #0e9f6e;
}

.mv-sidebar-badge--warning {
  background: #fef3e2;
  color: #b45309;
}

.mv-sidebar-cta {
  display: block;
  width: 100%;
  background: #569DE4 !important;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 16px;

}

.mv-sidebar-cta:hover {
  background: var(--mv-blue-dark);
}

.mv-sidebar-checkin-gauge {
  margin-bottom: 20px;
}

.mv-sidebar-checkin-track {
  height: 4px;
  border-radius: 999px;
  background: var(--mv-border);
  position: relative;
  margin-bottom: 6px;
}

.mv-sidebar-checkin-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--mv-blue);
}

.mv-sidebar-checkin-track::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mv-blue);
  transform: translate(-50%, -50%);
}

.mv-sidebar-checkin-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--mv-muted);
}

.mv-sidebar-checkin-empty {
  color: var(--mv-ink);
  font-weight: 600;
}

.mv-sidebar-contact {
  border-top: 1px solid var(--mv-border);
  padding-top: 16px;
}

.mv-sidebar-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.mv-sidebar-contact-row:last-child {
  margin-bottom: 0;
}

.mv-sidebar-contact-row i {
  width: 18px;
  text-align: center;
  color: var(--mv-blue);
  margin-top: 2px;
}

.mv-sidebar-contact-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mv-muted);
  margin-bottom: 2px;
}

.mv-sidebar-contact-row a,
.mv-sidebar-contact-row div div:last-child {
  font-size: 0.88rem;
  color: var(--mv-ink);
  word-break: break-word;
}
.mv-detail-topbar {
  box-shadow: 0px 0px 80px 0px #F5F6F8CC inset;
}
.mosque-list-thumb-wrap::after{
  background: linear-gradient(180deg, rgba(11, 37, 66, 0) 47.21%, #D6EAFB 116.84%) !important;
  margin: 6px;
  border-radius: 6px;
}