@charset "utf-8";
/* Naireen · components.css — buttons, floating contact, sound toggle, legal dialog */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-ar); font-weight:500; font-size:15.5px; line-height:1;
  padding:14px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, box-shadow .3s, color .3s;
}
.btn-sm{padding:10px 17px; font-size:14px}
.btn-gold{background:var(--gold); color:#0B0B0E; box-shadow:0 0 0 rgba(214,174,91,0)}
.btn-gold:hover{background:var(--flash); transform:translateY(-2px); box-shadow:0 10px 34px -12px rgba(214,174,91,.85)}
.btn-ghost{border-color:rgba(245,240,230,.22); color:var(--ivory)}
.btn-ghost:hover{border-color:var(--gold); color:var(--flash); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- floating contact ---------- */
.fab{position:fixed; z-index:45; bottom:max(18px,env(safe-area-inset-bottom,0px)); inset-inline-start:max(16px,env(safe-area-inset-left,0px));
  display:inline-flex; align-items:center; gap:9px; background:var(--gold); color:#0B0B0E; font-family:var(--f-ar); font-weight:500;
  font-size:14.5px; padding:12px 19px; border-radius:999px; box-shadow:0 14px 36px -12px rgba(0,0,0,.9);
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1), background .3s}
.fab.on{opacity:1; transform:none; pointer-events:auto}
.fab:hover{background:var(--flash)}
.fab-i{width:19px; height:19px; border-radius:50%; background:rgba(11,11,14,.14); display:grid; place-items:center; font-size:10px}
@media (max-width:620px){ .fab{font-size:14px; padding:11px 16px} }

/* ---------- sound toggle ---------- */
.snd{width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--mist); cursor:pointer; display:grid; place-items:center;
  transition:color .25s, border-color .25s, background .25s}
.snd:hover{color:var(--flash); border-color:rgba(214,174,91,.55)}
.snd[aria-pressed="true"]{color:var(--gold); border-color:rgba(214,174,91,.55); background:rgba(214,174,91,.08)}
.snd svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.snd .spk{fill:currentColor; stroke-width:1}
.snd .wv{opacity:0; transition:opacity .25s}
.snd[aria-pressed="true"] .wv{opacity:1}
.snd .xs{opacity:1; transition:opacity .25s}
.snd[aria-pressed="true"] .xs{opacity:0}
.snd.ring{animation:sndring .7s cubic-bezier(.16,1,.3,1)}
@keyframes sndring{0%{box-shadow:0 0 0 0 rgba(214,174,91,.55)}100%{box-shadow:0 0 0 14px rgba(214,174,91,0)}}

/* ---------- legal overlay ---------- */
#legal{position:fixed; inset:0; z-index:70; background:rgba(5,5,8,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; justify-content:center;
  padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.legal-panel{width:min(880px,100%); background:#0E0E13; border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; max-height:100%}
.legal-top{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.legal-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-inline-end:auto}
.legal-tabs button{font-family:var(--f-ar); font-size:14px; color:var(--mist); background:none; border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .25s,color .25s,border-color .25s}
.legal-tabs button:hover{color:var(--ivory); border-color:rgba(214,174,91,.5)}
.legal-tabs button[aria-selected="true"]{color:#0B0B0E; background:var(--gold); border-color:var(--gold)}
.legal-close{width:36px; height:36px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:none; color:var(--mist); font-size:18px; line-height:1; cursor:pointer; transition:border-color .25s,color .25s}
.legal-close:hover{border-color:var(--gold); color:var(--flash)}
.legal-body{overflow-y:auto; overscroll-behavior:contain; padding:22px clamp(16px,3vw,30px) 34px}
.legal-body h3{margin:26px 0 10px; font-size:clamp(20px,2.2vw,24px)}
.legal-body h3:first-of-type{margin-top:0}
.legal-body h4{margin:20px 0 6px; font-family:var(--f-ar); font-size:15.5px; font-weight:600; color:var(--ivory)}
.legal-body p{color:#B6B1A6; font-size:15px; line-height:1.92; margin:0 0 10px}
.legal-body ul{padding-inline-start:20px; margin:6px 0 12px}
.legal-body li{color:#B6B1A6; font-size:15px; line-height:1.9; margin-bottom:5px}
.legal-body .upd{font-family:var(--f-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:24px}
.note{border:1px dashed rgba(214,174,91,.5); background:rgba(214,174,91,.07); border-radius:13px; padding:13px 16px; color:var(--flash); font-size:13.5px; line-height:1.8; margin:0 0 22px}
.kv{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:10px 18px; margin:0}
.kv dt{color:var(--mist); font-family:var(--f-ui); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; padding-top:5px}
.kv dd{margin:0; color:var(--ivory); font-size:15px; line-height:1.7}
.kv .slot{color:var(--stone); border-bottom:1px dashed rgba(214,174,91,.55); padding-bottom:2px}
@media (max-width:620px){ .legal-tabs button{font-size:13px; padding:7px 11px} }