:root{--bg:#000;--c1:#0078a0;--c1b:#660066;--c1c:#28145a;--grad-mov:linear-gradient(90deg,rgb(102,0,102),rgb(40,20,90),rgb(0,120,160));--c2:#FFD85B;--w:900px;--chatw:340px;--gap:10px;--r:18px;--sh:0 10px 30px rgba(0,0,0,.28);--sh2:0 8px 22px rgba(0,0,0,.16);}
*{box-sizing:border-box;}html,body{height:100%;}
body{margin:0;font-family:"Open Sans",sans-serif;background:var(--bg) url(https://www.cool-hdsport.com/style/Background11.webp) top center repeat-x fixed;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}img{display:block;max-width:100%;height:auto;}
body{font-family:"Open Sans",Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.brand-badge .txt,.yellow,.promo h2{font-family:"Montserrat","Open Sans",Arial,system-ui,sans-serif;}

.wrap{max-width:var(--w);margin:0 auto;padding:0 12px;transition:margin .18s ease;}
.topwrap{max-width:var(--w);margin:0 auto;transition:margin .18s ease;}
@media(min-width:981px){.topwrap{max-width:880px;}}
@media(min-width:981px){body.chat-open .wrap,body.chat-open .topwrap{margin-right:calc(var(--chatw) + var(--gap));margin-left:auto;}}

/* HEADER */
.topbar{position:relative;top:auto;z-index:80;padding:10px 12px 6px;background:transparent;transition:none;}
body.hdr-hide .topbar{opacity:1;transform:none;pointer-events:auto;}
.topcard{background:var(--grad-mov);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 22px rgba(0,0,0,.32);border-radius:18px;padding:8px;}
.topgrid {display:grid;grid-template-columns:220px 1fr auto;grid-template-rows:auto auto;gap:8px 10px;align-items:center;}
@media(max-width:980px){.topgrid {grid-template-columns:1fr auto;grid-template-rows:auto;gap:10px;}}

.brand{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;gap:10px;min-width:200px;}
.brand-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);}
.brand-badge .mark{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;background:linear-gradient(180deg,#ff4fd8,#7a2bff);box-shadow:0 8px 16px rgba(0,0,0,.22);}
.brand-badge .txt{display:flex;flex-direction:column;line-height:1.05;font-family:"Montserrat",sans-serif;}
.brand-badge .txt b{font-size:14px;letter-spacing:.35px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);}
.brand-badge .txt span{font-size:11px;opacity:.92;font-weight:700;letter-spacing:.2px;color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.45);}
.brand-badge:hover{filter:brightness(1.05);}

.ico{width:16px;height:16px;display:inline-block;flex:0 0 auto;opacity:.92;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:14px;color:rgba(255,255,255,.92);font-weight:900;letter-spacing:.12px;line-height:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);transition:background .16s ease,transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease;white-space:nowrap;font-size:14px;}
.pill:hover{background:rgba(255,255,255,.10);transform:translateY(-1px);}
.pill:active{transform:translateY(0);}
.pill.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 0 14px rgba(255,255,255,.18);filter:brightness(1.08);}

.navrow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap;overflow:hidden;}
.nav1{grid-column:2;grid-row:1;justify-content:flex-start;}
.nav2{grid-column:2;grid-row:2;justify-content:flex-start;}
@media(max-width:980px){.brand{grid-column:1;grid-row:1;} .nav1,.nav2{display:none;}}

.chatbtn{grid-column:3;grid-row:1 / span 2;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:16px;color:#fff;font-weight:900;background:linear-gradient(180deg,rgba(20,20,20,.55),rgba(0,0,0,.55));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.22) inset,0 10px 26px rgba(0,0,0,.35),0 0 16px rgba(255,216,91,.18);cursor:pointer;user-select:none;white-space:nowrap;font-size:13.5px;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;}
.chatbtn:hover{filter:brightness(1.10);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.22) inset,0 12px 30px rgba(0,0,0,.40),0 0 18px rgba(255,216,91,.22);}
.chatbtn:active{transform:translateY(0);}
@media(max-width:980px){.chatbtn{grid-column:2;grid-row:1;align-self:center;padding:8px 13px;border-radius:14px;}}

/* MOBILE menu */
.menubtn{display:none;flex:0 0 auto;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;color:#fff;font-weight:900;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);cursor:pointer;user-select:none;white-space:nowrap;font-size:13.5px;}
.menubtn svg{width:18px;height:18px;opacity:.95;}
.mnav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.48);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:90;} .mnav-overlay[aria-hidden="true"]{display:none;}
.mnav{position:fixed;left:12px;right:12px;top:82px;background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 18px 46px rgba(0,0,0,.45);transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .26s ease,opacity .22s ease;z-index:95;} .mnav[aria-hidden="true"]{display:none;}
.mnav-in{display:grid;gap:8px;padding:10px;}
.mnav a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:14px;color:#fff;font-weight:900;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.mnav a:hover{background:rgba(255,255,255,.12);}
.mnav a.active{background:rgba(255,255,255,.16);box-shadow:0 0 14px rgba(255,255,255,.16);}
.mnav .ico{width:18px;height:18px;}
.mnav[hidden],.mnav-overlay[hidden]{display:none;}
body.menu-open .mnav-overlay{opacity:1;pointer-events:auto;}
body.menu-open .mnav{transform:translateY(0);opacity:1;pointer-events:auto;}
@media(max-width:980px){.menubtn{display:inline-flex;}}
body.menu-open{touch-action:none;}
.mnav{overscroll-behavior:contain;}

/* MAIN */
.white{margin:8px auto 18px;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px;} /* (1) distanta mai mica sub meniu */
.chgrid{display:grid;gap:10px;padding:12px;border-radius:18px;background:#dfe3ec;border:1px solid #c7cedc;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);grid-template-columns:repeat(5,minmax(0,1fr));} /* (2) gri mai inchis */
@media(max-width:900px){.chgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:680px){.chgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.chbtn{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:#eef1f7;border:1px solid #cfd6e4;box-shadow:0 6px 16px rgba(0,0,0,.10);min-height:58px;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;min-width:0;}
.chbtn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.14);filter:brightness(1.02);}
.badge{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;flex:0 0 auto;}
.b-red{background:linear-gradient(180deg,#ff4d4d,#d40000);}
.b-green{background:linear-gradient(180deg,#29d18c,#0b8b5c);}
.b-blue{background:linear-gradient(180deg,#4d8bff,#2453c9);}
.t1{display:flex;flex-direction:column;gap:2px;min-width:0;}
.t1 strong{font-size:13px;font-weight:900;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.t1 span{font-size:12px;font-weight:700;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

.adwrap{margin:10px 0 12px;border-radius:16px;overflow:hidden;background:#fff;height:250px;display:flex;align-items:center;justify-content:center;contain:layout paint;}
@media(max-width:768px){.adwrap{height:250px;}} /* pastrezi aceeasi inaltime ca sa nu “sara” */
.adwrap ins.adsbygoogle{display:block;width:100%;height:100%;}

.yellow{margin:10px 0 12px;background:var(--c2);border-radius:14px;padding:12px 14px;position:relative;display:flex;align-items:center;justify-content:center;color:#2b2200;font-size:15px;box-shadow:0 8px 18px rgba(0,0,0,.14);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:800;letter-spacing:.12px;text-align:center;}
.yico{width:18px;height:18px;display:inline-block;opacity:.95;position:absolute;left:14px;top:50%;transform:translateY(-50%);}
.ytext{display:block;width:100%;padding:0 28px;line-height:1.2;min-height:1.2em;}

.frame{border-radius:16px;overflow:hidden;background:#fff;}
.frame iframe{width:100%;height:850px;border:0;display:block;background:#fff;}
.frame{border-radius:16px;overflow:hidden;background:#fff;min-height:850px;}
@media(max-width:992px){.frame{min-height:78vh;}}
@media(max-width:992px){.frame iframe{height:78vh;min-height:520px;}}

/* (4) mesaj SEO – stabil (in HTML, fara CLS) */
.promo{width:100%;margin:12px 0 12px;padding:12px 14px;border:1px solid #cfd3da;border-radius:12px;background:#f6f7f9;color:#222;line-height:1.25;box-sizing:border-box;}
.promo h2{font-size:18px;font-weight:900;text-align:center;margin:6px 0 8px;font-family:"Montserrat",sans-serif;}
.promo p{margin:6px 0;font-size:14px;}
.promo hr{border:none;border-top:1px solid #ddd;margin:10px 0;}
.promo ul{list-style:none;padding:0;margin:0;text-align:left;}
.promo li{margin:6px 0;font-size:13.5px;}
.promo li.head{font-size:14px;font-weight:800;}
@media(max-width:520px){.promo{padding:12px 12px;} .promo h2{font-size:16px;} .promo p{font-size:13px;} .promo li{font-size:13px;}}

/* FOOTER */
.footer{margin-top:14px;background:var(--grad-mov);color:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.32);padding:16px;}
.fgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start;}
.footer h3{margin:8px 0 10px;font-weight:900;}
.footer p{margin:10px 0 0;line-height:1.45;color:rgba(255,255,255,.92);}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.footer a{color:#fff;font-weight:800;}
.footer a:hover{text-decoration:underline;}
.copy{margin-top:14px;text-align:center;color:rgba(255,255,255,.85);font-weight:800;}
@media(max-width:780px){.fgrid{grid-template-columns:1fr;}}

/* CHAT panel desktop */
.chat{position:fixed;right:0;top:0;width:var(--chatw);height:100%;background:#fff;z-index:85;box-shadow:-12px 0 34px rgba(0,0,0,.28);transform:translateX(calc(var(--chatw) + 28px));opacity:0;pointer-events:none;transition:transform .78s cubic-bezier(.14,.92,.18,1),opacity .40s ease;display:flex;flex-direction:column;will-change:transform,opacity;}
.chat.open{transform:translateX(0);opacity:1;pointer-events:auto;}
@media(max-width:980px){.chat{display:none;}}
@media(max-width:980px){body{background-attachment:scroll;}}
@media(prefers-reduced-motion:reduce){.chat{transition:none;}}
.chead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--grad-mov);color:#fff;border-bottom:1px solid rgba(255,255,255,.18);font-weight:900;}
.chead .x{font-size:28px;line-height:1;color:#fff;cursor:pointer;user-select:none;opacity:.92;}
.cbody{flex:1;min-height:0;}
.cbody iframe{width:100%;height:100%;border:0;display:block;}
.cfoot{border-top:1px solid rgba(255,255,255,.18);background:var(--grad-mov);padding:8px;display:flex;gap:8px;justify-content:center;align-items:center;}
.cbtn{width:38px;height:38px;min-width:38px;border-radius:10px;border:0;background:#fff;box-shadow:0 5px 12px rgba(0,0,0,.09);cursor:pointer;display:grid;place-items:center;position:relative;}
.cbtn:hover{filter:brightness(1.03);}
.cbtn:active{transform:translateY(1px);}
.cbtn svg{width:18px;height:18px;opacity:.85;}
.cbtn .n{position:absolute;right:5px;bottom:4px;font-size:10px;font-weight:900;color:#333;opacity:.55;line-height:1;}
.cbtn{backdrop-filter:blur(6px);background:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(0,0,0,.18);}

@media(max-width:768px){.chgrid{display:none;} .footer{text-align:center;} .footer img{margin:0 auto;} .footer ul{justify-items:center;} .footer p{max-width:520px;margin-left:auto;margin-right:auto;}}

.nosel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.nosel a,.nosel button,.nosel input,.nosel textarea,.nosel select{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;} 
.topbar,.topbar *{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;}
.chat,.chat *{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;}

/* NEON LOGO */
.logo-neon{margin:0 auto 10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.22);text-align:center;}
.logo-neon .ln1{display:block;font-family:"Montserrat",sans-serif;font-weight:900;font-size:22px;letter-spacing:1.2px;text-transform:uppercase;background:linear-gradient(90deg,#fff,#ffd85b,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.logo-neon .ln2{display:block;margin-top:6px;font-family:"Montserrat",sans-serif;font-weight:900;font-size:13px;letter-spacing:.8px;color:#ffd85b;text-transform:uppercase;}
.logo-neon .ln3{display:block;margin-top:5px;font-family:"Montserrat",sans-serif;font-weight:800;font-size:12px;letter-spacing:.5px;color:rgba(255,255,255,.88);text-transform:uppercase;}
.footer .fleft p{margin:12px auto 0;max-width:540px;text-align:center;font-size:12.5px;font-weight:700;line-height:1.45;color:rgba(255,255,255,.85);letter-spacing:.15px;}
@media(max-width:520px){.logo-neon .ln1{font-size:20px;}.logo-neon .ln2{font-size:12.5px;}.logo-neon .ln3{font-size:11.5px;}}

/* NEW CHAT */
#chatBox .chatload{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);z-index:2;}
#chatBox.is-loading .chatload{display:flex;}
#chatBox .chatload .dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:chatdot 1s infinite;}
#chatBox .chatload .txt{color:#fff;font:600 13px/1.2 Arial;}
@keyframes chatdot{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.7);opacity:1;}}
#chatBox .cbtn.active{outline:2px solid rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;}
#chatBox .cbody{position:relative;}
#chatFrame{position:relative;z-index:1;width:100%;height:100%;border:0;}

.terms{max-width:900px;margin:0 auto;padding:20px;font-size:14px;line-height:1.6;color:#222;}
.terms h2{margin-bottom:10px;}
.terms h3{margin-top:20px;}
.terms hr{margin:20px 0;}