/*
 * Library Hours Widget — library-widget.css
 *
 * Customize the widget using CSS custom properties on .library-widget or #library-widget:
 *
    .library-widget {
      --lw-open-bg: #e8f5e9;
      --lw-open-color: #1b5e20;
      --lw-font-size: 3rem;
    }
 */
 


.library-widget {
  /* ── Status colors ───────────────────────────────── */
  --lw-open-bg:      #d4edda;
  --lw-open-color:   #155724;
  --lw-open-dot:     #28a745;

  --lw-closed-bg:    #f8d7da;
  --lw-closed-color: #721c24;
  --lw-closed-dot:   #dc3545;


  /* ── Chrome ──────────────────────────────────────── */
  --lw-bg:           #ffffff;
  --lw-border:       1px solid #dee2e6;
  --lw-text:         #333333;
  --lw-muted:        #6c757d;
  --lw-today-bg:     #f0f7ff;
  --lw-today-color:  #004080;

  /* ── Layout ──────────────────────────────────────── */
  --lw-radius:       10px;
  --lw-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
  --lw-padding:      1rem 1.25rem;
  --lw-font:         inherit;
  --lw-font-size:    1.4rem;

  /* ── Applied styles ──────────────────────────────── */
  font-family: var(--lw-font);
  font-size:   var(--lw-font-size);
  background:  var(--lw-bg);
  border:      var(--lw-border);
  border-radius: var(--lw-radius);
  box-shadow:  var(--lw-shadow);
  max-width:   420px;
  width:       100%;
  overflow:    hidden;
  box-sizing:  border-box;
}

.library-widget *,
.library-widget *::before,
.library-widget *::after {
  box-sizing: border-box;
}

/* ── Status bar ──────────────────────────────────────── */

.lw-status {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
  padding:     var(--lw-padding);
  flex-wrap:   wrap;
}

.lw-status.lw-open   { background: var(--lw-open-bg);   color: var(--lw-open-color); }
.lw-status.lw-closed { background: var(--lw-closed-bg); color: var(--lw-closed-color); }

/* Pulsing dot */
.lw-dot {
  width:        10px;
  height:       10px;
  border-radius: 50%;
  flex-shrink:  0;
}

.lw-open   .lw-dot { background: var(--lw-open-dot);   animation: lw-pulse 2s infinite; }
.lw-closed .lw-dot { background: var(--lw-closed-dot); }

@keyframes lw-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(40, 167, 69, 0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(40, 167, 69, 0); }
}

.lw-status-text {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

/* ── Hours panel (always visible) ────────────────────── */

.lw-hours {
  padding:    1rem 1.25rem;
  border-top: var(--lw-border);
}

/* ── Hours rows ──────────────────────────────────────── */

.lw-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.42rem 0.2rem;
  border-bottom:   1px solid #f0f0f0;
  font-size:       1rem;
  color:           var(--lw-text);
}

.lw-row:last-child {
  border-bottom: none;
}

.lw-day {
  font-weight: 500;
}

.lw-time {
  color: var(--lw-muted);
}

/* Today highlight */
.lw-today-row {
  background:    var(--lw-today-bg);
  border-radius: 4px;
  padding-left:  0.3rem;
  padding-right: 0.3rem;
}

.lw-today-row .lw-day,
.lw-today-row .lw-time {
  color:       var(--lw-today-color);
  font-weight: 700;
}

.lw-today-badge {
  font-size:    0.7rem;
  font-weight:  500;
  opacity:      0.75;
  margin-left:  0.3rem;
}

/* ── Emergency closure ───────────────────────────────── */

.lw-status.lw-emergency {
  background: var(--lw-emergency-bg,    #fff3cd);
  color:      var(--lw-emergency-color, #6d4c00);
  flex-wrap:  wrap;
}

.lw-emergency .lw-dot {
  background: var(--lw-emergency-dot, #f0a500);
  animation:  lw-pulse-warn 2s infinite;
}

@keyframes lw-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0   rgba(240, 165, 0, 0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(240, 165, 0, 0); }
}

/* ── Loading / error ─────────────────────────────────── */

.lw-loading,
.lw-error {
  padding:    var(--lw-padding);
  text-align: center;
  font-size:  0.9rem;
  color:      var(--lw-muted);
}

.lw-error { color: var(--lw-closed-color); }

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 380px) {
  .library-widget {
    --lw-font-size: 0.88rem;
    --lw-padding:   0.8rem 1rem;
  }
}

.library-widget .lw-row {
  font-size: 1.4rem;
}