/* Apple-style liquid glass overrides (loaded last) */

/* Backdrop: neutral dim to keep the page readable while popup is open */
.modal-overlay{
  background:
    linear-gradient(180deg, rgba(15,18,25,.38), rgba(15,18,25,.46));
  overflow: hidden;
}
.modal-overlay::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.14) 70%),
    radial-gradient(1600px 900px at -10% 0%, rgba(255,255,255,.10), transparent 70%);
  filter: blur(8px);
  opacity:.9;
}

/* Sheet: frosted blue-tinted glass with specular sheen and crisp border */
.modal-sheet{
  border-radius: 28px;
  background:
    /* Pleasant light-blue base with more translucency */
    linear-gradient(180deg, rgba(242,248,255,.62) 0%, rgba(231,242,255,.42) 100%),
    /* Subtle blue highlight for depth */
    radial-gradient(1400px 800px at 100% -40%, rgba(var(--primary-rgb), .10), transparent 70%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 28px 80px rgba(0,0,0,.28),
    0 10px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbars but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-sheet::-webkit-scrollbar{ width:0; height:0; display:none; }
.modal-sheet::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%),
    radial-gradient(900px 420px at 85% -10%, rgba(255,255,255,.20), transparent 70%);
  mix-blend-mode: screen;
  opacity:.7;
}

/* Header: crisp translucent cap with subtle blue sheen and divider */
.modal-header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.46)),
    radial-gradient(600px 320px at 100% -40%, rgba(var(--primary-rgb), .08), transparent 70%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(var(--primary-rgb), .18);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
}
.modal-title{ color: var(--gray-900); }

/* Close button: soft frosted pill with blue focus ring */
.modal-close{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  color: var(--gray-800);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  outline: none;
}
.modal-close:hover{ transform: translateY(-1px); }
.modal-close:focus-visible{
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), .35),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* Chips: frosted blue pills */
.chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.40)),
    radial-gradient(420px 260px at 0% 0%, rgba(var(--primary-rgb), .12), transparent 70%);
  border: 1px solid rgba(var(--primary-rgb), .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  color: var(--gray-800);
}

/* Spec cards: subtle blue panels */
.modal-specs .spec{
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.36)),
    radial-gradient(520px 320px at 100% 0%, rgba(var(--primary-rgb), .10), transparent 70%);
  border: 1px solid rgba(var(--primary-rgb), .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.modal-specs .spec:hover{ border-color: rgba(var(--primary-rgb), .40); }

/* Details blocks: frosted cards matching the panels */
.glass-detail{
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.28));
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  border-radius: 16px;
}
.glass-detail > summary{ color: var(--gray-800); }
.glass-detail .detail-body{ color: var(--gray-800); }

/* ----------------------- */
/* Dark theme adjustments  */
/* ----------------------- */
[data-theme="dark"] .modal-overlay{
  /* a bit stronger dim so glass reads clearly */
  background: linear-gradient(180deg, rgba(6,10,16,.62), rgba(6,10,16,.72));
}

[data-theme="dark"] .modal-sheet{
  background:
    linear-gradient(180deg, rgba(16,22,32,.72), rgba(12,18,28,.62)),
    radial-gradient(1200px 700px at 100% -30%, rgba(var(--primary-rgb), .12), transparent 70%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 26px 80px rgba(0,0,0,.5),
    0 10px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}

[data-theme="dark"] .modal-sheet::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%),
    radial-gradient(900px 420px at 85% -10%, rgba(255,255,255,.12), transparent 70%);
  opacity: .5;
}

[data-theme="dark"] .modal-header{
  background:
    linear-gradient(180deg, rgba(20,28,42,.85), rgba(16,24,36,.7)),
    radial-gradient(600px 320px at 100% -40%, rgba(var(--primary-rgb), .14), transparent 70%);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

[data-theme="dark"] .modal-title{ color: #E8ECF3; }
[data-theme="dark"] .modal-subtitle{ color: #BFD2EA; }
[data-theme="dark"] .modal-list li{ color: #D7E2F1; }

[data-theme="dark"] .chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10)),
    radial-gradient(420px 260px at 0% 0%, rgba(var(--primary-rgb), .18), transparent 70%);
  border: 1px solid rgba(var(--primary-rgb), .35);
  color: #E6EEF8;
}

[data-theme="dark"] .modal-specs .spec{
  background:
    linear-gradient(180deg, rgba(24,32,48,.6), rgba(18,26,40,.5)),
    radial-gradient(520px 320px at 100% 0%, rgba(var(--primary-rgb), .12), transparent 70%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .modal-specs .spec span{ color:#B0C2DA; }
[data-theme="dark"] .modal-specs .spec strong{ color:#E6EEF8; }

[data-theme="dark"] .glass-detail{
  background: linear-gradient(180deg, rgba(24,32,48,.55), rgba(18,26,40,.45));
  border: 1px solid rgba(255,255,255,.14);
}
[data-theme="dark"] .glass-detail > summary{ color:#E6EEF8; }
[data-theme="dark"] .glass-detail .detail-body{ color:#D7E2F1; }