/* ===== SUNRISE-SUNSET WIDGET ===== */

/* --- Inline bar mode (placeholder present) --- */
.ss-bar {
  background: linear-gradient(135deg, #0B1D2E 0%, #0A6E7A 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  overflow: hidden;
  position: relative;
  z-index: 999;
  border-bottom: 2px solid #00B4D8;
}

.ss-bar .ss-compact {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 7px 18px;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: center;
  user-select: none;
}

.ss-bar .ss-compact span {
  white-space: nowrap;
}

.ss-bar .ss-status {
  background: rgba(255,255,255,0.12);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
}

.ss-bar .ss-status.golden-active {
  background: #FF9E5E;
  color: #0B1D2E;
  animation: ss-pulse 1.5s ease-in-out infinite;
}

/* --- Floating mini-widget mode --- */
.ss-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9998;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  max-width: 320px;
  min-width: 180px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0B1D2E 0%, #0A6E7A 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  border: 1.5px solid #00B4D8;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.ss-float.ss-golden-glow {
  box-shadow: 0 0 20px rgba(255,158,94,0.6), 0 4px 24px rgba(0,0,0,0.35);
  animation: ss-pulse 1.5s ease-in-out infinite;
}

.ss-float .ss-compact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 10px 14px;
  cursor: pointer;
  flex-wrap: wrap;
  user-select: none;
}

.ss-float .ss-compact span {
  white-space: nowrap;
}

.ss-float .ss-status {
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.75rem;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2px;
}

.ss-float .ss-status.golden-active {
  background: #FF9E5E;
  color: #0B1D2E;
}

/* --- Expanded panel (shared) --- */
.ss-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 16px;
  background: rgba(11,29,46,0.6);
}

.ss-expanded.open {
  max-height: 400px;
  padding: 12px 16px 16px;
}

.ss-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.82rem;
}

.ss-detail-row .ss-label {
  opacity: 0.75;
}

.ss-detail-row .ss-value {
  font-weight: 600;
}

/* --- Sun arc --- */
.ss-arc-wrap {
  position: relative;
  width: 100%;
  height: 64px;
  margin: 10px 0 6px;
  overflow: hidden;
}

.ss-arc-path {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 120px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 3px solid transparent;
  border-bottom: none;
  background: none;
  box-sizing: border-box;
}

/* Use a pseudo-element for the gradient arc */
.ss-arc-track {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 56px;
  overflow: hidden;
}

.ss-arc-track::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 112px;
  border-radius: 50% 50% 0 0;
  border: 3px solid #00B4D8;
  border-bottom: none;
  box-sizing: border-box;
  background: linear-gradient(90deg, #0B1D2E, #FF6B5A 30%, #FF9E5E 50%, #FF6B5A 70%, #0B1D2E);
  -webkit-mask: linear-gradient(#fff,#fff) padding-box, linear-gradient(#fff,#fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ss-sun-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FF9E5E;
  box-shadow: 0 0 8px rgba(255,158,94,0.7);
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: left 0.5s, bottom 0.5s;
}

.ss-sun-dot.below-horizon {
  background: #5a6a7a;
  box-shadow: 0 0 6px rgba(90,106,122,0.5);
}

.ss-horizon-line {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.ss-horizon-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  opacity: 0.5;
  padding: 2px 5% 0;
}

/* --- Close button --- */
.ss-close-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.ss-close-btn:hover { color: #fff; }
.ss-bar .ss-close-btn { top: 2px; right: 10px; }

/* --- Expand hint --- */
.ss-expand-hint {
  text-align: center;
  font-size: 0.65rem;
  opacity: 0.45;
  padding: 2px 0 4px;
  letter-spacing: 0.5px;
}

/* --- Pulse animation --- */
@keyframes ss-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,158,94,0.3); }
  50% { box-shadow: 0 0 22px rgba(255,158,94,0.7), 0 0 40px rgba(255,107,90,0.3); }
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .ss-bar .ss-compact {
    font-size: 0.78rem;
    gap: 0.6rem;
    padding: 6px 10px;
  }
  .ss-float {
    bottom: 14px;
    left: 10px;
    max-width: 260px;
    font-size: 0.78rem;
  }
}