/* =============================================================
   sitebar.css — televizia.store-ის ზედა და ქვედა პანელი (ამინდისა და ტელევიზიის გვერდებისთვის)
   იგივე იერი, რაც მთავარ საიტზე (style.css + site.css + frames.css), მხოლოდ .sb-* კლასებით,
   რომ გვერდის საკუთარ სტილებს არ შეეჯახოს.
   ============================================================= */
:root{
  --sb-card:#1a1f2e; --sb-bg2:#131722; --sb-border:#262c3d; --sb-frame:#2a3147;
  --sb-text:#f2f3f7; --sb-sec:#9aa0b4; --sb-accent:#6c5ce7;
  --sb-grad:linear-gradient(135deg,#6c5ce7 0%,#00d9c0 100%);
  --sb-max:1200px; --sb-pad:24px; --sb-bar-h:78px;
}
@media (max-width:768px){ :root{ --sb-pad:16px; } }
@media (min-width:1250px){ :root{ --sb-max:min(97vw,2200px); --sb-pad:28px; } }
@media (min-width:1700px){ :root{ --sb-pad:36px; } }

/* ---------- ზედა პანელი ---------- */
.sb-nav{
  position:sticky; top:0; z-index:1000; box-sizing:border-box; width:100%; min-height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  background:rgba(19,23,34,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sb-border);
  font-family:'Segoe UI','Helvetica Neue',Arial,"Noto Sans Georgian",sans-serif; line-height:1.6; text-shadow:none;
}
.sb-nav *{ box-sizing:border-box; }
.sb-nav a{ color:inherit; text-decoration:none; }
.sb-logo{
  flex:0 1 auto; min-width:0; white-space:nowrap; font-weight:800; letter-spacing:-.5px;
  font-size:clamp(16px,4.6vw,24px); line-height:1.2;
  background-image:var(--sb-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.sb-logo a{ display:block; overflow-wrap:normal; word-break:normal; -webkit-text-fill-color:transparent; }
.sb-actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-shrink:0; }
.sb-btn{
  display:inline-flex; align-items:center; margin:0; padding:8px 12px; font-size:13px; font-weight:600; white-space:nowrap;
  color:var(--sb-sec); background:var(--sb-card); border:1px solid var(--sb-border); border-radius:999px; line-height:1.2;
  transition:border-color .2s,color .2s; cursor:pointer;
}
.sb-btn:hover{ color:var(--sb-text); border-color:var(--sb-accent); }
.sb-cta{ color:#fff!important; background:var(--sb-grad)!important; border-color:transparent!important; }
@media (max-width:420px){
  .sb-nav{ padding-left:10px; padding-right:10px; gap:6px; }
  .sb-actions{ gap:4px; }
  .sb-btn{ padding:7px 8px; font-size:11.5px; }
}
@media (min-width:769px){
  .sb-nav{ min-height:68px; padding:calc(14px + env(safe-area-inset-top,0px)) 24px 14px; }
  .sb-actions{ gap:8px; }
  .sb-btn{ padding:9px 18px; font-size:14px; }
}
@media (min-width:1250px){ .sb-nav{ padding-left:28px; padding-right:28px; } }

/* ---------- ენის ჩამოსაშლელი (KA ▾) ---------- */
.sb-lang{ position:relative; display:inline-block; flex-shrink:0; }
.sb-lang-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:5px;
  padding:8px 11px; font-size:13px; font-weight:700; letter-spacing:.3px; line-height:1.2;
  color:var(--sb-text); background:var(--sb-card); border:1px solid var(--sb-border); border-radius:999px; transition:border-color .2s;
}
.sb-lang-btn:hover,.sb-lang.open .sb-lang-btn{ border-color:var(--sb-accent); }
.sb-lang-caret{ transition:transform .2s; }
.sb-lang.open .sb-lang-caret{ transform:rotate(180deg); }
.sb-lang-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:1100; min-width:84px; padding:4px;
  background:var(--sb-card); border:1px solid var(--sb-border); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.sb-lang-menu[hidden]{ display:none; }
.sb-lang-menu button{
  -webkit-appearance:none; appearance:none; display:block; width:100%; margin:0; padding:9px 14px; font:inherit; font-size:13px; font-weight:700;
  letter-spacing:.3px; text-align:center; cursor:pointer; color:var(--sb-sec); background:transparent; border:0; border-radius:10px; white-space:nowrap;
}
.sb-lang-menu button:hover{ color:var(--sb-text); background:var(--sb-bg2); }
.sb-lang-menu button.active{ background:var(--sb-grad); color:#fff; }
@media (min-width:769px){ .sb-lang-btn{ padding:9px 14px; font-size:14px; } }
@media (max-width:420px){ .sb-lang-btn{ padding:7px 8px; font-size:11.5px; gap:4px; } }

/* ---------- ქვედა პანელი ---------- */
.sb-bottom{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px;
  position:fixed; left:0; right:0; bottom:0; z-index:900; box-sizing:border-box;
  padding:6px max(6px,calc((100% - var(--sb-max))/2 + var(--sb-pad))) calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(19,23,34,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--sb-border);
  font-family:'Segoe UI','Helvetica Neue',Arial,"Noto Sans Georgian",sans-serif; text-shadow:none; transform:none; width:auto; border-radius:0; margin:0;
}
.sb-bottom *{ box-sizing:border-box; }
.sb-bottom a{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; min-width:0; min-height:0;
  padding:7px 1px; font-size:10px; line-height:1.15; font-weight:400; color:var(--sb-sec); text-align:center; text-decoration:none;
  border:1px solid var(--sb-frame); border-radius:12px; background:rgba(26,31,46,.85); overflow-wrap:normal; hyphens:manual; -webkit-hyphens:manual;
}
.sb-bottom a span.sb-ic{ position:relative; display:inline-block; font-size:19px; line-height:1.2; }
.sb-bottom a:hover,.sb-bottom a:active{ color:var(--sb-text); border-color:var(--sb-accent); }
.sb-bottom a.on{ color:#fff; border-color:var(--sb-accent); background:rgba(108,92,231,.22); }
.sb-badge{ position:absolute; top:-4px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#ff3b5c; color:#fff; font:700 10px/16px sans-serif; text-align:center; box-shadow:0 0 0 2px rgba(19,23,34,.96); }
.sb-bottom.sb-in{ gap:2px; }
.sb-bottom.sb-in a{ font-size:9px; padding:7px 0; }
.sb-bottom.sb-in a span.sb-ic{ font-size:18px; }
@media (min-width:769px){
  .sb-bottom a{ font-size:12.5px; padding:8px 2px; }
  .sb-bottom a span.sb-ic{ font-size:22px; }
  .sb-bottom.sb-in a{ font-size:12px; }
  .sb-bottom.sb-in a span.sb-ic{ font-size:21px; }
}
@media (max-width:360px){ .sb-bottom.sb-in a{ font-size:8.5px; } .sb-bottom.sb-in a span.sb-ic{ font-size:17px; } }