@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&family=Poppins:wght@700&family=Rubik:wght@400;500;700&display=swap');

:root {
  --mm-bg: #f7fafc;                 /* Ultra-light neutral */
  --mm-surface: #fff;               /* Main card background */
  --mm-primary: #1a84e7;            /* Primary blue (modern) */
  --mm-primary-dark: #1663ad;       /* Deeper blue */
  --mm-gradient: linear-gradient(90deg, #1a84e7 60%, #24e9ae 100%);
  --mm-table-hdr: #eef6fa;          /* Faint blue for table headers */
  --mm-table-row: #fafdff;          /* Alt row (cloud) */
  --mm-muted: #8699ab;
  --mm-border: #e3eaf1;
}
/* ==== GLOBAL RESET ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==== BODY / CONTAINER ==== */
body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rubik", Arial, sans-serif;
  background: var(--mm-bg);
  color: var(--mm-text);
  overflow-x: hidden;
}

.main-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.2rem;
  width: calc(100vw - 4vw); /* If you want 2vw padding each side */
  height: auto;
  box-sizing: border-box;
}
.left-panel, .right-panel {
  background: var(--mm-surface);
  border-radius: 24px;
  box-shadow: 0 4px 24px #1a84e71b;
  border: 1.5px solid var(--mm-border);
}

/* ==== LEFT PANEL MODERN CARD ==== */
.left-panel {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 300px;
  max-width: 700px;
  border-radius: 24px;
  background: var(--mm-surface);
  box-shadow: 0 8px 32px rgba(40,167,69,0.10);
  padding: 1.2rem 1rem;
  overflow: hidden;
}

.logo-container {
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align left */
  padding: 0.6rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.7rem;
  flex-shrink: 0;
}

.logo-name {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* space between logo and info */
  width: 100%; /* allow content to fill container */
}

.logo-image {
  flex: 0 0 60px; /* Set desired logo area width */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img {
  height: 60px;
  width: 60px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  padding: 4px;
  border: 2px solid #23956b; /* accent border */
  box-sizing: border-box;
}

.mosque-info {
  flex: 1; /* fills available space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.mosque-info h1 {
  font-family: "Fredoka", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--mm-primary-700);
  margin: 0;
  line-height: 1.45;
}

.mosque-info p {
  font-size: 0.97rem;
  margin: 2px 0;
  line-height: 1.56;
  opacity: 0.94;
  color: black;
}

.mosque-info h1 + p {
  margin-top: 4px;
}
/* ---- Analog Clock Section (DESIGN FROM YOUR CODE) ---- */
.modern-clock {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 0.55rem 0;
  width: 100%;
}
.modern-clock .analog-clock {
  position: relative;
  width: 80%;
  max-width: 320px;
  aspect-ratio: 1/1;
  height: auto !important;
  min-width: 180px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff url('img/clock.png') center/cover no-repeat;
  border-radius: 50%;
  border: 3px solid #2e7d6d;   /* Emerald clock border */
  box-shadow: 0 8px 20px rgba(40,167,69,0.08), inset 0 6px 10px rgba(255,255,255,0.18);
  transition: background 0.4s, box-shadow 0.4s, border 0.15s;
}
.center-dot {position: absolute;width:12px;height:12px;background:#1a74be;border-radius:50%;z-index:10;}
.toggleClass {position: absolute;top: 16px;right: 16px;width: 22px;height: 22px;border-radius: 50%;background: #091921;cursor: pointer;}
body.dark .toggleClass { background: #d1dae3; }
.hour, .min, .sec {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.hr, .mn, .sc { position: absolute;top:50%;left:50%;transform-origin:center bottom; transform:translate(-50%,-100%) rotate(0deg);}
.hr {width:6px;height:65px;} .hr::before{content:'';position:absolute;bottom:0;width:6px;height:60px;background:#000;border-radius:4px;}
.mn {width:4px;height:95px;} .mn::before{content:'';position:absolute;bottom:0;width:4px;height:85px;background:#000;border-radius:4px;}
.sc {width:2px;height:120px;} .sc::before{content:'';position:absolute;bottom:0;width:2px;height:105px;background:red;border-radius:3px;}
.hr::before {
  background: #000;
}

.mn::before {
  background: #000;
}
body.dark .hr::before {
  background: white;
}

body.dark .mn::before {
  background: white;
}

.digital-section {
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.45rem;
  box-shadow: 0 2px 6px rgba(61, 206, 158, 0.08);
  color: var(--mm-primary-700);
  font-family: "Rubik", sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); /* Soft, neutral shadow */
}
.digital-clock #time {font-family: "Fredoka", "Poppins", sans-serif; font-size: 2.22rem;font-weight: bold;color: black;}
.digital-clock #date, .digital-clock #hijri {padding-top: 0.09em;font-size: 1.03rem; color: black;opacity: 0.93;}


/* ==== RIGHT PANEL MODERN CARD ==== */
.right-panel {
  flex: 1.15 1.15 400px;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  max-width: 700px;
  border-radius: 22px;
  background: var(--mm-bg);
  box-shadow: 0 8px 32px rgba(40, 167, 69, 0.09);
  padding: 1rem 1rem 1.1rem 1rem;
  overflow: hidden;
}

.countdown-container {
  flex: 0 0 30%;   /* Fixed 30% of right panel */
  min-height: 120px;
  max-height: none;
  background: var(--mm-gradient);
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 4px 20px #1a84e720;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0.14rem;
  padding: 1.22rem 0.8rem 1.03rem 0.8rem;
  /*box-shadow: 0 2px 8px rgba(46,125,109,0.14);*/
  transition: min-height 0.2s;
}
#countdown-timer {
  font-weight: 800 !important;
  background: none;
  text-align: center;
  /* add a consistent font-size for desktop */
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
  line-height: 1.18;
  font-family: "Poppins", sans-serif !important;
  color: #222 !important;
  text-shadow: 0 2px 8px #fff, 0 1px 1px #1699e0;
  letter-spacing: 1px;
}
.table-container {
  background: var(--mm-surface);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(40, 167, 69, 0.08);
  padding: 1.48rem 0.7rem 1rem 0.7rem;
  margin-top: 0.08rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: auto;
}
.table-container table { width:100%; border-collapse:separate; border-spacing:0; }
.table-container th {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 1.09rem;
  font-weight: 700;
  border: none;
  padding: 1.04rem 0.8rem;
  background: #fff;
  color: black;
  border-radius: 0.5rem 0.5rem 0 0;
  text-align: center; /* Center header text */
}

.table-container td {
  padding: 1.08rem 0.8rem;
  font-size: 1.11rem;
  font-family: "Rubik", "Poppins", Arial, sans-serif;
  border-bottom: 1px solid var(--mm-border);
  background: var(--mm-table-row);
  color: #222;
  text-align: center; /* Center cell text */
}

@keyframes rowBlink {
  0%,100% { background: #e6f9fe; color: #2e7d6d; }
  50%     { background: #c4f3e4; color: #389e85; }
}

.table-container tr.active-row td {
  animation: rowBlink 4.7s linear infinite; /* slower blink motion */
  font-family: "Poppins", "Fredoka", "Rubik", Arial, sans-serif;
  font-weight: 400;
  border-bottom: 2.5px solid #2e7d6d;
  font-size: 1.13rem;
  background: #e6f9fe;
  color: #389e85;
  text-align: center;
}

/* ==== FAB BUTTON ==== */
.fab {position:fixed;bottom:25px;right:25px;background:#0078d4;color:white;border:none;border-radius:50%;width:52px;height:52px;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,0.13);transition:background 0.2s,transform 0.2s;}
.fab:hover {background: #005fa3;transform:scale(1.08);}
@media (max-width: 900px) {
  .fab {
    display: none !important;
  }
}
/* ==== RESPONSIVE ==== */
@media (max-width:900px) {
  .main-container {flex-direction:column !important; min-height:auto !important; height:auto !important;}
  .left-panel, .right-panel {
    max-width: 100vw !important; width: 100vw !important;
    border-radius: 0 !important; padding: 0.6rem 0.18rem;
    min-height: 98vh !important; height: 98vh !important; overflow-y: auto !important; overflow-x: hidden !important;
  }
  .modern-clock .analog-clock {max-width:92vw; min-height: 140px;}
  .logo-container, .digital-section, .countdown-container, .table-container { margin: 0.38rem auto; border-radius: 10px !important; max-width: 98vw;}
  .table-container {padding: 1rem 0.03rem !important; font-size: 0.98rem;}
  .table-container th, .table-container td {padding: 0.7rem 0.12rem !important;}
  #countdown-timer {
    font-size: 1.15rem !important;
  }
}

@media (max-width:580px) {
  .main-container {min-width: 0 !important;}
  .logo-image img.logo-img {height: 47px !important; width: 47px !important;}
  .mosque-info h1 {font-size: 1.02rem !important;}
  .mosque-info p {font-size: 0.82rem !important;}
  .digital-section, .logo-container, .table-container {border-radius: 7px !important;}
}

/* Prevents overflow for all containers */
.left-panel > *, .right-panel > *, .logo-container, .digital-section, .table-container, .countdown-container {
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* ==== FLOATING SCREEN MODAL ==== */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 125, 109, 0.11); /* Soft green, 11% opacity */
  opacity: 0;
  pointer-events: none;
  z-index: 1040;
  transition: opacity 0.3s cubic-bezier(0.77,0,0.18,1);
}


.floating-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  transform: translate(-50%, -50%) scale(0.95);
  background: linear-gradient(135deg, #e9fbe2 0%, #f7fbf8 90%);
  border-radius: 30px;
  box-shadow:
    0 16px 42px 0 rgba(46,125,109,0.19),
    0 1.5px 12px 0 rgba(40,167,69,0.12);
  padding: 2.15rem 2.1rem 1.6rem 2.1rem;
  min-width: 310px;
  max-width: 92vw;
  width: 370px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.32s cubic-bezier(0.7,0,0.3,1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.3rem;
}

.floating-screen.active,
.backdrop.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.switch-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.switch-title {
  font-family: "Poppins", "Fredoka", sans-serif;
  color: var(--mm-primary-600);
  font-size: 1.22rem;
  font-weight: 700;
  margin-bottom: 0.20rem;
  letter-spacing: 0.03rem;
}

.switch-sub {
  color: var(--mm-muted);
  font-size: 0.97rem;
  font-family: "Rubik", sans-serif;
  margin-bottom: 0.1rem;
}

.close-btn {
  background: #dcffe7;
  color: var(--mm-primary-600);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5px 6px rgba(40,167,69,0.13);
  cursor: pointer;
  transition: background 0.18s;
}
.close-btn:hover {
  background: #2e7d6d;
  color: #fff;
}
/* Card content area for options/switch menu */
.content-container {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: stretch;
  margin-bottom: 0.2rem;
}

.content-card {
  background: linear-gradient(135deg,#fff 60%,#e9fbe2 100%);
  border-radius: 13px;
  box-shadow: 0 0.5px 9px rgba(40,167,69,0.10);
  padding: 1rem 1.1rem 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: box-shadow 0.21s, transform 0.21s;
  position: relative;
  font-family: "Rubik", "Poppins", Arial, sans-serif;
}

.content-card:hover {
  box-shadow: 0 5px 18px #2e7d6d22, 0 1.5px 12px 0 #28a7451b;
  transform: translateY(-3px) scale(1.02);
}

.content-card .icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #eafbf0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
}

.content-card a {
  margin-left: auto;
  text-decoration: none;
  background: #2e7d6d;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding: 0.38em 1.02em;
  border-radius: 8px;
  box-shadow: 0 0.5px 4px rgba(40,167,69,0.10);
  transition: background 0.17s;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border: none;
}
.content-card a:hover {
  background: var(--mm-accent-teal);
  color: #203a2c;
}

@media (max-width: 500px) {
  .floating-screen {
    min-width: 94vw;
    width: 98vw;
    border-radius: 13px;
    padding: 1rem 0.35rem 0.7rem 0.35rem;
    max-width: 99vw;
    gap: 0.5rem;
  }
  .switch-header {margin-bottom: 0.48rem;}
  .content-container {gap: 0.38rem;}
  .content-card {padding: 0.7rem 0.7rem 0.6rem 0.7rem;}
  .content-card .icon {width: 28px; height: 28px; margin-right: 0.3rem;}
  .content-card a {font-size: 0.98rem;}
}
@media (max-width:900px) {
  body,
  html {
    width: 100vw !important;
    overflow-x: hidden !important;
  }
  .main-container {
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }
  .left-panel,
  .right-panel {
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: unset !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  /* Unified card padding and spacing */
  .logo-container,
  .digital-section,
  .table-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    margin-bottom: 1.1rem !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    background-clip: padding-box !important;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.07);
  }
  .logo-container {margin-top: 1.2rem !important;}
  .modern-clock {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto 1.1rem auto !important;
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 170px !important;
    padding: 0 !important;
    background: none !important;
  }
  .modern-clock .analog-clock {
    margin: 0 auto !important;
    max-width: 89vw;
    min-width: 60vw;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.07);
  }
 /* Keep countdown fixed to bottom as footer */
  .countdown-container {
    position: static !important; /* remove fixed positioning */
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 1.1rem 0 !important; /* space below digital-section */
  padding: 0.65rem 4vw !important; /* horizontal padding to match other sections */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #2e7d6d 65%, #7ed5c6 100%) !important;
  border-radius: 0 !important;
  height:auto;
  }
   #countdown-timer {
    font-family: "Poppins", "Fredoka", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.09rem !important;
    color: #fff !important;
    letter-spacing: 1.3px;
    text-shadow: 0 1px 8px #1f8537;
    background: none;
    text-align: center;
    line-height: 1.16;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100vw !important;
    white-space: nowrap;
  }
  /* Padding at bottom so content not hidden behind fixed countdown */
  .main-container {
    padding-bottom: 3.2em !important;
  }
}

@media (min-width: 1800px) {
  html, body {
    width: 100vw !important;
    min-height: 100vh !important;
    font-size: 1.35rem !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  .main-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    padding: 0 1vw !important;     /* minimal horizontal padding */
    gap: 2rem !important;          /* smaller gap prevents overflow */
    min-height: 100vh !important;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0 !important;     /* no top padding unless header needed */
  }
  .left-panel, .right-panel {
    flex: 1 1 48%;                 /* slightly more balanced */
    max-width: 950px !important;   /* guarantee max width fits within container */
    font-size: 1.32rem !important;
    padding: 2rem 1vw !important;
    border-radius: 36px !important;
    box-sizing: border-box;
  }
  .logo-image img.logo-img {
    height: 108px !important;
    width: 108px !important;
  }
  .modern-clock .analog-clock {
    width: 32vw !important;
    max-width: 700px !important;
    min-width: 300px !important;
    height: 32vw !important;
    max-height: 700px !important;
    min-height: 300px !important;
    margin-top: 0 !important;
  }
  .digital-clock #time {
    font-size: 4.2rem !important;
  }
  .digital-clock #date, .digital-clock #hijri {
    font-size: 1.56rem !important;
  }
  .table-container th, .table-container td {
    font-size: 1.55rem !important;
  }
  #countdown-timer {
    font-size: 2.2rem !important;
  }
  .modern-clock {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 300px;
    margin: 0 auto;
  }
  .analog-clock {
    width: 32vw !important;
    max-width: 700px !important;
    min-width: 300px !important;
    height: 32vw !important;
    max-height: 700px !important;
    min-height: 300px !important;
    margin-top: 0 !important;
  }
  .left-panel {
    display: flex;
    flex-direction: column;
    height: auto;                   /* let content dictate height */
    min-height: 0;
    box-sizing: border-box;
    padding: 2rem 1vw !important;
    gap: 1.5rem !important;
  }
  .logo-container, .modern-clock, .digital-section {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==== SINGLE PANEL FULL-SCREEN (TV) ==== */

body.single-left,
body.single-right {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--mm-bg);
  overflow: hidden;
}

/* main-container takes the whole TV */
body.single-left .main-container,
body.single-right .main-container {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* the single panel fills the screen */
body.single-left .left-panel,
body.single-right .right-panel {
  flex: 1 1 auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}