/**
 * Ramadan Countdown Embed Widget Styles
 * Standalone, self-contained — no external dependencies
 */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rc-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

/* === THEMES === */

/* Dark Gold (default) */
.rc-embed.theme-dark-gold {
  background: linear-gradient(145deg, #0A1628, #152238);
  color: #F5F5F0;
}
.rc-embed.theme-dark-gold .rc-value {
  color: #D4A941;
  text-shadow: 0 0 20px rgba(212, 169, 65, 0.3);
}
.rc-embed.theme-dark-gold .rc-label { color: #94A3B8; }
.rc-embed.theme-dark-gold .rc-title { color: #F5F5F0; }
.rc-embed.theme-dark-gold .rc-unit {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 169, 65, 0.15);
}
.rc-embed.theme-dark-gold .rc-attribution a { color: #D4A941; }

/* Light Green */
.rc-embed.theme-light-green {
  background: linear-gradient(145deg, #F0FDF4, #ECFDF5);
  color: #064E3B;
}
.rc-embed.theme-light-green .rc-value { color: #059669; }
.rc-embed.theme-light-green .rc-label { color: #6B7280; }
.rc-embed.theme-light-green .rc-title { color: #064E3B; }
.rc-embed.theme-light-green .rc-unit {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(5, 150, 105, 0.15);
}
.rc-embed.theme-light-green .rc-attribution a { color: #059669; }

/* Midnight Blue */
.rc-embed.theme-midnight-blue {
  background: linear-gradient(145deg, #0F172A, #1E293B);
  color: #E2E8F0;
}
.rc-embed.theme-midnight-blue .rc-value { color: #60A5FA; }
.rc-embed.theme-midnight-blue .rc-label { color: #94A3B8; }
.rc-embed.theme-midnight-blue .rc-title { color: #E2E8F0; }
.rc-embed.theme-midnight-blue .rc-unit {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.15);
}
.rc-embed.theme-midnight-blue .rc-attribution a { color: #60A5FA; }

/* Minimal White */
.rc-embed.theme-minimal-white {
  background: #FFFFFF;
  color: #1F2937;
}
.rc-embed.theme-minimal-white .rc-value { color: #111827; }
.rc-embed.theme-minimal-white .rc-label { color: #6B7280; }
.rc-embed.theme-minimal-white .rc-title { color: #1F2937; }
.rc-embed.theme-minimal-white .rc-unit {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
}
.rc-embed.theme-minimal-white .rc-attribution a { color: #6B7280; }

/* === SIZES === */

/* Small */
.rc-embed.size-small .rc-title { font-size: 0.85rem; margin-bottom: 0.5rem; }
.rc-embed.size-small .rc-timer { gap: 0.35rem; }
.rc-embed.size-small .rc-unit { padding: 0.35rem 0.5rem; min-width: 48px; border-radius: 6px; }
.rc-embed.size-small .rc-value { font-size: 1.4rem; }
.rc-embed.size-small .rc-label { font-size: 0.55rem; }
.rc-embed.size-small .rc-separator { font-size: 1rem; }
.rc-embed.size-small .rc-date { font-size: 0.7rem; margin-top: 0.5rem; }
.rc-embed.size-small .rc-attribution { font-size: 0.55rem; margin-top: 0.5rem; }
.rc-embed.size-small .rc-mubarak { font-size: 1.1rem; }

/* Medium (default) */
.rc-embed.size-medium .rc-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.rc-embed.size-medium .rc-timer { gap: 0.5rem; }
.rc-embed.size-medium .rc-unit { padding: 0.6rem 0.75rem; min-width: 64px; border-radius: 8px; }
.rc-embed.size-medium .rc-value { font-size: 2rem; }
.rc-embed.size-medium .rc-label { font-size: 0.65rem; }
.rc-embed.size-medium .rc-separator { font-size: 1.4rem; }
.rc-embed.size-medium .rc-date { font-size: 0.8rem; margin-top: 0.75rem; }
.rc-embed.size-medium .rc-attribution { font-size: 0.65rem; margin-top: 0.75rem; }
.rc-embed.size-medium .rc-mubarak { font-size: 1.5rem; }

/* Large */
.rc-embed.size-large .rc-title { font-size: 1.5rem; margin-bottom: 1rem; }
.rc-embed.size-large .rc-timer { gap: 0.75rem; }
.rc-embed.size-large .rc-unit { padding: 0.85rem 1rem; min-width: 80px; border-radius: 10px; }
.rc-embed.size-large .rc-value { font-size: 2.8rem; }
.rc-embed.size-large .rc-label { font-size: 0.75rem; }
.rc-embed.size-large .rc-separator { font-size: 1.8rem; }
.rc-embed.size-large .rc-date { font-size: 0.95rem; margin-top: 1rem; }
.rc-embed.size-large .rc-attribution { font-size: 0.7rem; margin-top: 1rem; }
.rc-embed.size-large .rc-mubarak { font-size: 2rem; }

/* === LAYOUT === */

.rc-title {
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}

.rc-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.rc-unit {
  text-align: center;
}

.rc-value {
  font-weight: 700;
  line-height: 1.1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.rc-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-top: 0.2rem;
}

.rc-separator {
  font-weight: 300;
  opacity: 0.4;
  line-height: 1;
}

.rc-date {
  text-align: center;
  opacity: 0.7;
}

.rc-attribution {
  text-align: center;
  opacity: 0.6;
}

.rc-attribution a {
  text-decoration: none;
}

.rc-attribution a:hover {
  text-decoration: underline;
}

.rc-mubarak {
  text-align: center;
  font-weight: 700;
}

/* === RTL === */
.rc-embed[dir="rtl"] {
  direction: rtl;
}

/* Responsive — tiny embeds */
@media (max-width: 280px) {
  .rc-embed .rc-timer { gap: 0.2rem; }
  .rc-embed .rc-unit { min-width: 40px; padding: 0.3rem; }
  .rc-embed .rc-value { font-size: 1.2rem !important; }
  .rc-embed .rc-separator { display: none; }
}