/* ═══════════════════════════════════════════════════════
   leo-glass-frame.css — Browser mockup component
   Shared between homeowner and professional landing pages.
   
   Usage:
     Light mode (default): <div class="glass-frame">
     Dark mode:            <div class="glass-frame glass-frame--dark">
   ═══════════════════════════════════════════════════════ */

/* ── Base (Light Mode) ── */
.glass-frame{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r);
  box-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.8) inset;
  padding:4px;
  overflow:hidden
}

.glass-frame-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-bottom:1px solid rgba(0,0,0,.06)
}

.glass-frame-dots{
  display:flex;
  gap:5px
}

.glass-frame-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.12)
}

.glass-frame-dots span:nth-child(1){ background:#DA654D }
.glass-frame-dots span:nth-child(2){ background:#D97706 }
.glass-frame-dots span:nth-child(3){ background:#115E59 }

.glass-frame-url{
  flex:1;
  text-align:center;
  font-size:10px;
  color:var(--muted);
  background:rgba(0,0,0,.04);
  border-radius:4px;
  padding:3px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px
}

.glass-frame-url svg{
  flex-shrink:0;
  stroke:var(--muted)!important
}

.glass-frame-url-text{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.glass-frame-body{
  padding:0;
  border-radius:0 0 calc(var(--r) - 4px) calc(var(--r) - 4px);
  overflow:hidden
}

/* ── Dark Mode Variant ── */
/* Inverted: dark base, light URL bar and dots */
.glass-frame--dark{
  background:rgba(30,27,24,.85);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset
}

.glass-frame--dark .glass-frame-bar{
  border-bottom:1px solid rgba(255,255,255,.08)
}


.glass-frame--dark .glass-frame-url{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.7)
}

.glass-frame--dark .glass-frame-url svg{
  stroke:rgba(255,255,255,.5)!important
}

.glass-frame--dark .glass-frame-url-text{
  color:rgba(255,255,255,.7)
}

/* Dark mode body content overrides */
.glass-frame--dark .glass-frame-body [style*="background:var(--card-solid)"]{
  background:#1C1917!important;
  color:rgba(255,255,255,.92)!important
}

.glass-frame--dark .glass-frame-body [style*="background:var(--cream)"]{
  background:#292524!important;
  color:rgba(255,255,255,.85)!important
}

.glass-frame--dark .glass-frame-body [style*="background:var(--cream-dk)"]{
  background:#292524!important;
  color:rgba(255,255,255,.85)!important
}

.glass-frame--dark .glass-frame-body [style*="color:var(--ink)"]{
  color:#FAFAF9!important
}

.glass-frame--dark .glass-frame-body [style*="color:var(--stone)"]{
  color:#D6D3D1!important
}

.glass-frame--dark .glass-frame-body [style*="color:var(--muted)"]{
  color:#A8A29E!important
}

.glass-frame--dark .glass-frame-body [style*="border:1px solid var(--border)"]{
  border-color:rgba(255,255,255,.12)!important
}

.glass-frame--dark .glass-frame-body [style*="border:1.5px solid var(--border)"]{
  border-color:rgba(255,255,255,.12)!important
}

.glass-frame--dark .glass-frame-body [style*="border-bottom:1px solid var(--border)"]{
  border-bottom-color:rgba(255,255,255,.12)!important
}

.glass-frame--dark .glass-frame-body [style*="border-top:1px solid var(--border)"]{
  border-top-color:rgba(255,255,255,.12)!important
}

.glass-frame--dark .glass-frame-body [style*="background:var(--teal-lt)"]{
  background:rgba(17,94,89,.2)!important
}

.glass-frame--dark .glass-frame-body [style*="border:1px solid rgba(0,0,0"]{
  border-color:rgba(255,255,255,.1)!important
}

.glass-frame--dark .glass-frame-body [style*="border-bottom:1px solid rgba(0,0,0"]{
  border-bottom-color:rgba(255,255,255,.08)!important
}

.glass-frame--dark .glass-frame-body [style*="border-top:1px solid rgba(0,0,0"]{
  border-top-color:rgba(255,255,255,.08)!important
}

.glass-frame--dark .glass-frame-body [style*="background:rgba(0,0,0,.03)"]{
  background:rgba(255,255,255,.04)!important
}

.glass-frame--dark .glass-frame-body [style*="background:rgba(0,0,0,.04)"]{
  background:rgba(255,255,255,.04)!important
}

.glass-frame--dark .glass-frame-body p,
.glass-frame--dark .glass-frame-body div,
.glass-frame--dark .glass-frame-body span,
.glass-frame--dark .glass-frame-body li{
  color:inherit
}

.glass-frame--dark .glass-frame-body [style*="color:#92400E"]{
  color:#FCD34D!important
}

.glass-frame--dark .glass-frame-body [style*="color:#444"]{
  color:#D6D3D1!important
}

.glass-frame--dark .glass-frame-body [style*="color:rgba(0,0,0"]{
  color:rgba(255,255,255,.65)!important
}

.glass-frame--dark .glass-frame-body svg[style*="stroke:var(--muted)"]{
  stroke:#A8A29E!important
}

.glass-frame--dark .glass-frame-body [style*="background:rgba(245,158,11,.12)"]{
  background:rgba(245,158,11,.2)!important
}

.glass-frame--dark .glass-frame-body button[style*="background:var(--terra)"]{
  color:#fff!important
}

.glass-frame--dark .glass-frame-body [style*="border-left:3px solid var(--amber)"]{
  background:#292524!important
}

.glass-frame--dark .glass-frame-body [style*="border-left:3px solid var(--green)"]{
  background:#292524!important
}

.glass-frame--dark .glass-frame-body [style*="background:rgba(0,128,128"]{
  background:rgba(16,185,129,.12)!important
}

/* Dark mode profile card overrides */
.glass-frame--dark .wf-profile{
  background:#1C1917!important;
  border-color:rgba(255,255,255,.12)!important
}

.glass-frame--dark .wf-profile-name{
  color:#FAFAF9!important
}

.glass-frame--dark .wf-profile-meta{
  color:#A8A29E!important
}

.glass-frame--dark .wf-profile-body [style*="color:var(--stone)"]{
  color:#D6D3D1!important
}

/* Dark mode cost table overrides */
.glass-frame--dark .wf-cost-table td{
  border-bottom-color:rgba(255,255,255,.12)!important;
  color:#D6D3D1
}

.glass-frame--dark .wf-cost-table tr:last-child td{
  color:#FAFAF9
}

/* Dark mode map chip overrides */
.glass-frame--dark .glass-map-chip{
  color:#f5f5f4!important
}

.glass-frame--dark .glass-map-chip.glass-map-chip--br{
  color:rgba(255,255,255,.78)!important
}

/* ── Nested glass panels (thumbnails, media) ── */
.glass-frame--dark .glass-inset{
  border-radius:var(--r);
  position:relative;
  flex-shrink:0;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 22px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.09) inset;
  padding:3px;
  overflow:hidden
}

.glass-frame--dark .glass-inset--thumb{
  width:72px;
  height:72px
}

.glass-frame--dark .glass-inset--thumb-sm{
  width:36px;
  height:36px
}

.glass-frame--dark .glass-inset--var-thumb{
  width:56px;
  height:56px
}

.glass-frame--dark .glass-inset--var-wide{
  flex:1;
  min-width:0;
  height:56px
}

.glass-frame--dark .glass-inset__media{
  position:relative;
  width:100%;
  height:100%;
  border-radius:calc(var(--r) - 3px);
  overflow:hidden
}

.glass-frame--dark .glass-inset__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.glass-frame--dark .glass-inset--more{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.78)!important;
  background:rgba(255,255,255,.06)!important
}

/* ── Responsive ── */
@media(max-width:600px){
  .glass-frame{
    margin:0 auto
  }
}

@media(max-width:480px){
  .glass-frame{
    max-width:100%!important;
    margin:0 auto
  }
  .glass-frame-url{
    font-size:9px;
    padding:3px 6px
  }
}