/* astrologrr-muhurta.css - Divine, shimmer, warm gold for muhurta tools. */
/* ==== Fonts ==== */
@import url('https://fonts.googleapis.com/css2?family=Gloock:wght@400;700&display=swap');

/* 
  === Astrologrr Muhurta Color Palette Reference ===

  Primary Gold/Brown:     #b9801c (section heads, important highlights)
  Soft Gold BG:           #fff8ee, #ffe8b3 (backgrounds, shimmer)
  Button Gold:            #ffe5b3, #d5a33a
  Border Gold:            #e7c370
  Input BG:               #fffbe7
  Good (Success/Green):   #28a745  (.status-good, for good periods)
  Bad (Danger/Red):       #e53935  (.status-bad, for bad periods)
  Neutral (Yellow):       #f7b801  (.status-neutral, for neutral periods)
  Table Head:             #ffefcd, #af7117
  Error Red:              #ae1a3b   (.astro-muhurta-error)
  Loader Gold:            #b9801c   (.astro-muhurta-loading)
  Text Default:           #77490d   (table text)
*/

body, .astro-muhurta-wrap {
  font-family: 'EB Garamond', serif;
}

/* ---- Main Container ---- */
.astro-muhurta-wrap {
  max-width: 100vw;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 3em auto 2.4em auto;
  padding: 2em 0.5em 2.3em 0.5em;
  background: linear-gradient(140deg, #fff8ee 85%, #ffe8b3 100%);
  border-radius: 32px;
  border: 2px solid #e7c370;
  box-shadow:
    0 6px 28px 0 #fff4db,
    0 2px 12px 0 #b9801c18,
    0 0 42px 2px #fff0b360 inset,
    0 0 80px 0 #ffe3a0c2 inset;
  position: relative;
  overflow: hidden;
}

/* --- Animated glow shimmer on top edge --- */
.astro-muhurta-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 12px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg, #ffe8b3 10%, #fffbe7 50%, #ffe5b3 90%);
  opacity: 0.55;
  filter: blur(4px);
  pointer-events: none;
  z-index: 3;
  animation: divine-shimmer 3.3s linear infinite;
}
@keyframes divine-shimmer {
  0% { opacity: 0.45; filter: blur(3px);}
  45% { opacity: 0.7; filter: blur(7px);}
  100% { opacity: 0.45; filter: blur(3px);}
}

/* ==== Status Coloring & Emoji Dot for Muhurta Bars ==== */
.status-dot {
  font-size: 1.17em;
  margin-right: 0.16em;
  vertical-align: middle;
}
.status-good {
  color: #28a745;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px #ecffe0b0;
}
.status-bad {
  color: #e53935;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px #ffdedea4;
}
.status-neutral {
  color: #f7b801;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px #fff3d1b2;
}
.muhurta-running-time {
  color: #b9801c;
  font-size: 0.99em;
  margin-left: 0.25em;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --- Main bar (running now) --- */
.muhurta-current-bar {
  color: #a06a16;
  font-size: 1.12em;
  font-weight: 600;
  border-radius: 14px;
  margin: 1.2em 0 1.6em 0;
  padding: 0.7em 1.2em;
  text-align: center;
  letter-spacing: 0.02em;
  animation: fadein 0.7s;
  display: none; /* hidden by default */
}

/* --- Top bar --- */
.astro-muhurta-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.3em;
  background: none;
  border-radius: 16px;
  box-shadow: none;
  padding: 0;
  position: relative;
  z-index: 4;
}

/* Input/Select Styling */
.astro-muhurta-input-wrap {
  flex: 1 1 220px;
  min-width: 140px;
  margin-bottom: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.astro-muhurta-input-wrap label {
  font-family: inherit;
  font-size: 1.04em;
  font-weight: 500;
  margin-bottom: 0.17em;
  color: #c88d17;
  letter-spacing: 0.01em;
}

/* Inputs shimmer glow on focus */
.astro-muhurta-input-wrap input[type="text"] {
  font-size: 1.13em;
  padding: 0.55em 1.1em;
  border-radius: 12px;
  border: 1.5px solid #f1dab2;
  background: #fffbe7;
  color: #68460c;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  box-shadow: 0 2px 16px #ffe8b3b5 inset, 0 0 0 1.5px #ffe6b390;
  transition: border 0.22s, box-shadow 0.18s;
  line-height: 44px;
  margin: 0;
  appearance: none;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  text-shadow: 0 1px 10px #fff9e3d0;
  background-image: linear-gradient(100deg, #fffbe7 75%, #ffe7b0 100%);
  animation: shimmer-input 3.1s linear infinite;
}
@keyframes shimmer-input {
  0% { box-shadow: 0 2px 16px #ffe8b3b5 inset, 0 0 0 1.5px #ffe6b390;}
  50% { box-shadow: 0 4px 24px #ffe6b399 inset, 0 0 0 1.5px #e3a53780;}
  100% { box-shadow: 0 2px 16px #ffe8b3b5 inset, 0 0 0 1.5px #ffe6b390;}
}

.astro-muhurta-input-wrap input:focus {
  border: 1.7px solid #c88d17;
  outline: none;
  box-shadow: 0 0 0 4px #ffe8b3c4, 0 2px 28px #fff3d080 inset;
  background: #fffbe0;
  color: #a07e27;
}

/* --- Calendar Icon Button --- */
/* .muhurta-date-picker-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(45%) sepia(44%) saturate(297%) hue-rotate(6deg) brightness(95%) contrast(88%);
} */

.muhurta-date-picker-wrap {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(96deg, #fffbe7 80%, #ffe8b3 100%);
  border-radius: 10px;
  border: 1.5px solid #eed8ac;
  box-sizing: border-box;
  height: 42px;
  width: 46px;
  margin: 0 0.22em;
  position: relative;
  background-image: linear-gradient(100deg, #fffbe7 75%, #ffe7b0 100%);
  animation: shimmer-input 3.1s linear infinite;
}
.muhurta-date-picker-wrap button,
.calendar-icon-btn {
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.calendar-icon-btn svg{
  stroke: #7b560a;
  display: block;  
}

/* Hide native date input (keep clickable area) */
.hidden-date-input {
  opacity:0;
  position:absolute; left:0;right: 0;
  width:100%;
  height:100%;
  pointer-events: none;
  z-index: -1;
}

/* --- Buttons --- */
.astro-muhurta-btns {
  display: flex;
  gap: 0.5em;
  flex-shrink: 0;
  align-items: center;
}

.astro-muhurta-btns button {
  height: 44px;
  min-width: 110px;
  border-radius: 9px;
  padding: 0 1.2em;
  font-size: 1.08em;
  font-family: inherit;
  background: linear-gradient(94deg, #ffebb6 0%, #ffe5b3 65%, #d5a33a 100%);
  color: #7b560a;
  border: none;
  font-weight: 700;
  box-shadow:
    0 2px 14px #fff5c8a8,
    0 1.5px 7px #e5a62725,
    0 0 10px #ffe8b330 inset;
  transition: 
    background 0.22s,
    box-shadow 0.18s,
    color 0.18s,
    transform 0.13s;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-shadow: 0 1.5px 4px #fff6e3a4, 0 0.5px 2px #efd07c60;
  background-size: 100% 100%;
  vertical-align: middle;
  margin: 0 0 0 8px;
  outline: none;
  line-height: 44px;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.muhurta-date-picker-wrap button:hover,
.astro-muhurta-btns button:hover {
  background: linear-gradient(93deg, #fff4d2 7%, #ffeaa7 80%, #b9801c 100%);
  color: #7b560a;
  box-shadow:
    0 2px 30px #ffe3a3cc,
    0 2px 8px #ffe9b170 inset,
    0 0 18px #f7d18a47;
  transform: translateY(-2px) scale(1.035);
}
.muhurta-date-picker-wrap button:active,
.astro-muhurta-btns button:active {
  background: linear-gradient(92deg, #ffe8b3 0%, #e2c171 100%);
  color: #a68418;
  box-shadow: 0 1.5px 7px #ffd99346;
  transform: scale(0.97);
}
.astro-muhurta-btns button:last-child { margin-right: 0; }
.muhurta-date-picker-wrap button:focus,
.astro-muhurta-btns button:focus {
  outline: 2px solid #ffe6b0;
  background: linear-gradient(90deg, #fff2cc 10%, #ffe1a6 100%);
  color: #b9801c;
}
@keyframes shimmerybtn {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* --- Autocomplete Suggest Box --- */
.astro-muhurta-suggest {
  position: absolute;
  z-index: 22;
  background: #fffbe6;
  border-radius: 12px;
  box-shadow: 0 8px 32px #ffe8b3ad, 0 1.5px 7px #b9801c26;
  min-width: 200px;
  max-width: 350px;
  margin-top: 2px;
  padding: 0.19em 0;
  border: 1.5px solid #eed1a6;
}
.astro-muhurta-suggest-item {
  padding: 0.56em 1.15em;
  cursor: pointer;
  font-size: 1.06em;
  border-bottom: 1px solid #fff3d1;
  transition: background 0.12s;
  color: #86431d;
  font-weight: 500;
}
.astro-muhurta-suggest-item:last-child { border-bottom: none; }
.astro-muhurta-suggest-item:hover, .astro-muhurta-suggest-item:focus {
  background: #ffe8b3cc;
}

/* --- Loader and Error --- */
.astro-muhurta-loading {
  color: #b9801c;
  text-align: center;
  padding: 1.5em 0 1.7em 0;
  font-size: 1.16em;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px #ffe8b3c9, 0 1.5px 2px #b9801c33;
}
.astro-muhurta-error {
  color: #ae1a3b;
  background: #fff4ef;
  border-radius: 10px;
  text-align: center;
  padding: 1em 0.7em;
  margin: 1.2em 0;
  font-size: 1.03em;
  font-weight: 500;
  border: 1.5px solid #ffd7c2;
  box-shadow: 0 2px 12px #ffd6bd3b;
}

/* --- Tables & Results --- */
.muhurta-block {
  margin-bottom: 2.4em;
}
.muhurta-section {
  font-size: 1.23em;
  margin-bottom: 0.42em;
  font-weight: 700;
  color: #b9801c;
  display: flex;
  align-items: center;
  gap: 0.7em;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px #ffe8b3b5;
  background: none;
}
.muhurta-section small {
  font-weight: 500;
  font-size: 0.97em;
  color: #8a5c16;
  margin-left: 1.4em;
  opacity: 0.85;
}
.muhurta-result-table-2col {
  display: flex;
  gap: 2.8em;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.muhurta-result-table-2col > .muhurta-block {
  flex: 1 1 420px;
  min-width: 320px;
  max-width: 600px;
  box-sizing: border-box;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
@media (max-width: 1100px) {
  .muhurta-result-table-2col > .muhurta-block { flex-basis: 340px; }
}
@media (max-width: 850px) {
  .muhurta-result-table-2col { flex-direction: column; gap: 1.8em; }
}
.chaughadia-table-wrap,
.muhurta-result-table {
  background: linear-gradient(94deg, #fffbe7 90%, #fff5cc 100%);
  border-radius: 15px;
  box-shadow: 0 4px 18px #ffe7b3a0, 0 1px 7px #e5a62719;
  margin-bottom: 1.1em;
  overflow-x: auto;
  padding: 0.07em 0.11em;
}
.muhurta-result-table {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
  font-size: 1.11em;
  background: transparent;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px #fff7e050;
  animation: fadein 0.7s;
}
.muhurta-result-table th, .muhurta-result-table td {
  padding: 0.61em 0.8em;
  border-bottom: 1.5px solid #f5deb7;
}
.muhurta-result-table th {
  background: #ffefcd;
  font-weight: 700;
  color: #af7117;
  border-bottom: 2.2px solid #e9c77c;
  text-shadow: 0 1.5px 9px #ffecbc75;
}
.muhurta-result-table td {
  color: #77490d;
  text-shadow: 0 1px 4px #ffefcd18;
}
.muhurta-result-table tr:last-child td {   
    border-bottom: 2px solid #ecd69a;
}
.muhurta-result-table tbody tr:hover {
  background: linear-gradient(90deg, #fffbe7 70%, #ffe7b3 100%);
  box-shadow: 0 0 8px #ffe9bb44;
  transition: background 0.13s;
}
.muhurta-note {
  margin-top: 1.8em;
  font-size: 1.03em;
  color: #b9801c;
  text-align: right;
  letter-spacing: 0.012em;
  text-shadow: 0 1.5px 11px #ffe8b3b0;
  font-family: 'Gloock', 'Georgia', serif;
}

.astro-muhurta-wrap,
.astro-muhurta-btns button {
  box-shadow:
    0 6px 28px 0 #fff4db,
    0 2px 12px 0 #b9801c18,
    0 0 42px 2px #fff0b360 inset;
}

@media (max-width: 700px) {
  .astro-muhurta-wrap { max-width: 99vw; padding: 0.6em 0.08em 1.8em 0.08em; }
  .muhurta-section { font-size: 1em; }
  .muhurta-result-table th, .muhurta-result-table td { font-size: 1em; }
  .muhurta-result-table { min-width: 220px; }
  .muhurta-result-table-2col { flex-direction: column; gap: 1.8em; }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}