/* Floating Date/Time + Weather Widget */
#fdw-widget.fdw-widget{
  position: fixed;
  z-index: 99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  width: 54px;
  height: 54px;
}

/* Default desktop corner margins: 10px */
#fdw-widget.fdw-pos-bl{ left: var(--fdw-left, 10px); bottom: var(--fdw-bottom, 10px); }
#fdw-widget.fdw-pos-br{ right: var(--fdw-right, 10px); bottom: var(--fdw-bottom, 10px); }
#fdw-widget.fdw-pos-tl{ left: var(--fdw-left, 10px); top: var(--fdw-top, 10px); }
#fdw-widget.fdw-pos-tr{ right: var(--fdw-right, 10px); top: var(--fdw-top, 10px); }

#fdw-widget .fdw-toggle{
  border: none;
  padding: 0;
  margin: 0;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, opacity .15s ease;
}

#fdw-widget .fdw-toggle:hover{ transform: translateY(-2px); }

#fdw-widget.fdw-theme-dark .fdw-toggle{
  background: rgba(20,20,20,0.92);
  color: #fff;
}
#fdw-widget.fdw-theme-light .fdw-toggle{
  background: rgba(255,255,255,0.92);
  color: #111;
}

#fdw-widget .fdw-icon{ font-size: 18px; line-height: 1; }
#fdw-widget .fdw-bubble-temp{ font-size: 12px; font-weight: 700; opacity: .95; }

/*
  Panel is absolutely positioned so the toggle stays tucked into the corner
  even when the panel is hidden.
*/
#fdw-widget .fdw-panel{
  position: absolute;
  border-radius: 16px;
  padding: 10px 12px;
  width: 290px;
  max-width: 78vw;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  transition: opacity .15s ease, transform .15s ease;
}

/* Panel placement: it expands AWAY from the corner */
#fdw-widget.fdw-pos-bl .fdw-panel{ left: 0; bottom: calc(54px + 10px); transform-origin: bottom left; }
#fdw-widget.fdw-pos-br .fdw-panel{ right: 0; bottom: calc(54px + 10px); transform-origin: bottom right; }
#fdw-widget.fdw-pos-tl .fdw-panel{ left: 0; top: calc(54px + 10px); transform-origin: top left; }
#fdw-widget.fdw-pos-tr .fdw-panel{ right: 0; top: calc(54px + 10px); transform-origin: top right; }

#fdw-widget.fdw-theme-dark .fdw-panel{ background: rgba(20,20,20,0.88); color: #fff; }
#fdw-widget.fdw-theme-light .fdw-panel{ background: rgba(255,255,255,0.92); color: #111; }

#fdw-widget .fdw-title{ font-size: 12px; opacity: .85; margin-bottom: 6px; }
#fdw-widget .fdw-row{ display: flex; justify-content: space-between; gap: 12px; align-items: center; }
#fdw-widget .fdw-left{ min-width: 120px; }
#fdw-widget .fdw-time{ font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
#fdw-widget .fdw-date{ font-size: 12px; opacity: .85; white-space: nowrap; }
#fdw-widget .fdw-weather-line{ display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; }
#fdw-widget .fdw-temp{ font-size: 14px; font-weight: 800; white-space: nowrap; }
#fdw-widget .fdw-cond{ font-size: 12px; opacity: .9; white-space: nowrap; }
#fdw-widget .fdw-loc{ font-size: 11px; opacity: .7; text-align: right; margin-top: 2px; }
#fdw-widget .fdw-hint{ font-size: 11px; opacity: .65; margin-top: 8px; }

/* Collapsed state: hide panel but keep toggle fixed in the corner */
#fdw-widget[data-collapsed="true"] .fdw-panel{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
}
#fdw-widget[data-collapsed="false"] .fdw-panel{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* For bottom corners, panel sits ABOVE toggle, so collapse animation should move DOWN toward the toggle */
#fdw-widget.fdw-pos-bl[data-collapsed="true"] .fdw-panel,
#fdw-widget.fdw-pos-br[data-collapsed="true"] .fdw-panel{
  transform: translateY(6px) scale(0.98);
}

/* Responsive tweaks + per-corner mobile offsets */
@media (max-width: 480px){
  #fdw-widget.fdw-pos-bl{ left: var(--fdw-m-left, 10px); bottom: var(--fdw-m-bottom, 10px); }
  #fdw-widget.fdw-pos-br{ right: var(--fdw-m-right, 10px); bottom: var(--fdw-m-bottom, 10px); }
  #fdw-widget.fdw-pos-tl{ left: var(--fdw-m-left, 10px); top: var(--fdw-m-top, 10px); }
  #fdw-widget.fdw-pos-tr{ right: var(--fdw-m-right, 10px); top: var(--fdw-m-top, 10px); }
  #fdw-widget .fdw-panel{ width: 260px; max-width: 86vw; }

  /* Mobile special mode: top-centered half-circle anchor */
  #fdw-widget.fdw-mobile-top-half{
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
    width: 96px;
    height: 42px;
  }
  #fdw-widget.fdw-mobile-top-half .fdw-toggle{
    width: 96px;
    height: 42px;
    border-radius: 0 0 999px 999px;
  }
  #fdw-widget.fdw-mobile-top-half .fdw-toggle:hover{ transform: none; }
  #fdw-widget.fdw-mobile-top-half .fdw-panel{
    left: 50%;
    right: auto;
    top: calc(42px + 8px);
    bottom: auto;
    transform-origin: top center;
    transform: translateX(-50%);
  }
  #fdw-widget.fdw-mobile-top-half[data-collapsed="true"] .fdw-panel{
    transform: translateX(-50%) translateY(-6px) scale(0.98);
  }
  #fdw-widget.fdw-mobile-top-half[data-collapsed="false"] .fdw-panel{
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Hidden state used for mobile scroll-hide */
#fdw-widget.fdw-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}