/* dropdown.portal.css — popovers glassy con overlay suave */

:root{
  color-scheme: light;
  --popover-ease: cubic-bezier(.22,.61,.36,1);
  --popover-radius: 20px;
  --popover-border: rgba(164,188,229,.72);
  --popover-surface: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,249,255,.94));
  --popover-shadow: 0 30px 60px rgba(10,24,45,.24), 0 12px 28px rgba(7,18,39,.18);
  --option-border: rgba(32,76,148,.16);
  --option-bg: linear-gradient(150deg, rgba(255,255,255,.98), rgba(248,252,255,.92));
  --option-bg-active: linear-gradient(150deg, rgba(255,255,255,1), rgba(225,237,255,.95));
}

.popover-inline-spacer{
  display:none;
}

@media (max-width:900px){
  .popover-inline-spacer[data-active="true"]{
    display:block;
    width:100%;
    padding:12px 0 20px;
  }
  .popover[data-inline-mode="true"]{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    max-width:none !important;
    width:100% !important;
    margin:0;
  }
  .popover[data-inline-mode="true"] .popover-box{
    width:100%;
    max-width:none;
  }
}

.popover-overlay{
  position: fixed;
  inset: 0;
  z-index: 12000;
  background:
    radial-gradient(1200px 800px at 50% -20%, rgba(255,255,255,.85), rgba(255,255,255,.55)),
    linear-gradient(180deg, rgba(246,249,255,.82), rgba(232,238,255,.82));
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--popover-ease);
}
.popover-overlay[hidden]{ display:none; }
.popover-overlay.is-visible,
.popover-overlay[data-show="true"],
.popover-overlay[data-visible="true"]{
  opacity: 1;
  pointer-events: auto;
}

.popover{
  position: absolute;
  z-index: 12010;
  max-width: min(420px, calc(100vw - 32px));
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(.96);
  transition: opacity .32s var(--popover-ease), transform .32s var(--popover-ease);
  pointer-events: none;
  max-height: var(--popover-max-height, calc(100vh - 36px));
}
.popover[data-open="true"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
}
.popover[data-state="closing"]{
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .popover{
    transition: opacity .2s linear;
    transform: none !important;
  }
}

.popover .popover-box{
  position: relative;
  border-radius: var(--popover-radius);
  background: var(--popover-surface);
  border: 1px solid var(--popover-border);
  box-shadow: var(--popover-shadow);
  overflow: hidden;
  max-height: inherit;
}
.popover .popover-box::before{
  content:"";
  position:absolute;
  inset:-25% -15% auto;
  height:60%;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  opacity:.7;
  pointer-events:none;
}

.popover .popover-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px 14px;
  border-bottom:1px solid rgba(13,42,95,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,248,255,.86));
}
.popover .popover-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  color:#081d46;
  font-size:1rem;
  letter-spacing:.01em;
}
.popover .popover-title .popover-icon{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: linear-gradient(150deg, #eef4ff, #d8e5ff);
  border:1px solid rgba(30,86,174,.35);
  color:#1e4c9f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(24,58,116,.18);
}
.popover .popover-close{
  all:unset;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  cursor:pointer;
  color:#0b1f44;
  transition: background .2s var(--popover-ease), color .2s var(--popover-ease);
}
.popover .popover-close:hover,
.popover .popover-close:focus-visible{
  background: rgba(15,23,42,.08);
}
.popover .popover-close:focus-visible{
  outline:2px solid rgba(24,94,235,.45);
  outline-offset:2px;
}

.popover .popover-body{
  position:relative;
  padding:18px 20px 22px;
  background: linear-gradient(180deg, rgba(248,251,255,.97), rgba(240,247,255,.94));
}

.popover.is-scrollable{
  overflow: hidden;
}
.popover.is-scrollable .popover-box{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.popover.is-scrollable .popover-body{
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 18px;
  margin-right: -4px;
}

.popover .option-group{
  border:0;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.popover label.option{
  position:relative;
  display:block;
  padding:16px 18px 16px 56px;
  border-radius:16px;
  border:1px solid var(--option-border);
  background: var(--option-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  color:#0b1f44;
  font-weight:700;
  transition:
    border-color .22s var(--popover-ease),
    box-shadow .22s var(--popover-ease),
    background .22s var(--popover-ease),
    transform .22s var(--popover-ease);
}
.popover label.option:hover{
  border-color: rgba(30,86,174,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 12px 28px rgba(15,40,82,.12);
  transform: translateY(-1px);
}
.popover label.option:has(input:checked){
  border-color: rgba(30,86,174,.65);
  background: var(--option-bg-active);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 36px rgba(19,48,98,.16);
}
.popover label.option input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin:0;
  border-radius:50%;
  border:2px solid rgba(32,76,148,.35);
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .2s var(--popover-ease), box-shadow .2s var(--popover-ease);
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
}
.popover label.option input[type="radio"]::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:inherit;
  background:transparent;
  transition: background .2s var(--popover-ease);
}
.popover label.option input[type="radio"]:checked{
  border-color:#1e4c9f;
  box-shadow: 0 0 0 4px rgba(30,86,174,.16);
}
.popover label.option input[type="radio"]:checked::after{
  background:#1e4c9f;
}
.popover label.option input[type="radio"]:focus-visible{
  outline:2px solid rgba(36,99,235,.45);
  outline-offset:3px;
}
.popover label.option span{
  display:block;
  line-height:1.35;
}
.popover label.option.option--disabled{
  opacity:.55;
  pointer-events:none;
}
.popover label.option span small{
  display:block;
  font-size:.83rem;
  font-weight:500;
  color:rgba(11,31,68,.65);
  margin-top:4px;
}
.popover label.option:has(input:checked) span{
  color:#0a2772;
}
.popover label.option input[type="radio"]:checked + span{
  color:#0a2772;
}
.popover label.option.option--subpanel::after{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(11,31,68,.45);
  border-bottom:2px solid rgba(11,31,68,.45);
  transform:translateY(-50%) rotate(-45deg);
  transition: transform .2s var(--popover-ease), border-color .2s var(--popover-ease);
}
.popover label.option.option--subpanel:has(input:checked)::after{
  border-color:#0a2772;
}
.popover label.option.option--subpanel:hover::after{
  transform:translateY(-50%) rotate(-45deg) translateX(3px);
}

.wind-alert-panel{
  position:absolute;
  inset:0;
  z-index:5;
  padding:18px 20px 22px;
  background:linear-gradient(180deg, rgba(248,251,255,.96), rgba(240,247,255,.94));
  backdrop-filter:blur(6px) saturate(1.05);
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:stretch;
  transition:opacity .28s var(--popover-ease);
}
.wind-alert-panel.is-visible{
  opacity:1;
  pointer-events:auto;
}
.wind-alert-card{
  width:100%;
  height:100%;
  border-radius:18px;
  border:1px solid rgba(164,188,229,.65);
  box-shadow:0 24px 48px rgba(12,30,60,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(240,247,255,.94));
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}
.wind-alert-panel__header{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.wind-alert-panel__titles{
  flex:1;
}
.wind-alert-back{
  all:unset;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(39,86,174,.25);
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(230,239,255,.9));
  cursor:pointer;
  color:#1b3c86;
  transition:transform .2s var(--popover-ease), box-shadow .2s var(--popover-ease);
}
.wind-alert-back span::before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.wind-alert-back:hover{
  transform:translateX(-2px);
  box-shadow:0 8px 18px rgba(16,32,68,.22);
}
.wind-alert-panel__titles h4{
  margin:4px 0;
  font-size:1.12rem;
  color:#081d46;
}
.wind-alert-panel__titles p{
  margin:0;
  font-size:.9rem;
  color:rgba(8,29,70,.72);
}
.wind-alert-chip{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(26,78,162,.1);
  color:#1a4ea2;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.02em;
}
.wind-alert-panel .option-group{
  flex:1;
  overflow:auto;
  padding-top:6px;
}
.wind-alert-panel .option-group--wind{
  border-top:0;
  padding-top:0;
}

@media (max-width:640px){
  .popover .popover-box{
    border-radius:18px;
  }
  .popover .popover-header{
    padding:14px 18px 12px;
  }
  .popover .popover-body{
    padding:16px 16px 20px;
  }
  .popover label.option{
    border-radius:14px;
    padding:14px 16px 14px 52px;
  }
}

/* === Patch: performance hints === */
.popover{ will-change: opacity, transform; }
.popover-overlay{ will-change: opacity; }