:root{--bg:#050507;--panel:rgba(18,18,24,.88);--red:#6f2dbd;--muted:#a1a1aa;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at top right,rgba(111,45,189,.24),transparent 32%),linear-gradient(135deg,#050507,#0b0b12 55%,#11051d);color:#fff;font-family:Inter,Arial,sans-serif;min-height:100vh}
a{color:#fff;text-decoration:none}.wrap{width:min(1100px,92vw);margin:auto}.nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:22px}.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--red),#4c1d95);display:grid;place-items:center;box-shadow:0 0 35px rgba(111,45,189,.35)}.pill{border:1px solid var(--line);padding:10px 14px;border-radius:999px;color:#ddd;background:rgba(255,255,255,.04)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding:50px 0}.hero h1{font-size:56px;line-height:1.02;margin:0 0 18px}.hero p{color:#c7c7d1;font-size:18px;line-height:1.6}.card{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.45)}.input{width:100%;padding:16px 15px;border-radius:16px;border:1px solid var(--line);background:#0b0b10;color:#fff;margin:8px 0 14px;font-size:16px}.btn{width:100%;border:0;border-radius:16px;padding:16px;background:linear-gradient(135deg,var(--red),#3b0764);color:white;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(111,45,189,.28)}.btn.alt{background:#161620;box-shadow:none;border:1px solid var(--line)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status{margin-top:18px;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);color:#ddd;min-height:48px}.legal{color:var(--muted);font-size:12px;line-height:1.4}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:30px 0 60px}.feature{padding:20px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.feature h3{margin:0 0 8px}.feature p{color:#bbb;margin:0;line-height:1.5}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:12px;text-align:left;color:#ddd}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero h1{font-size:38px}.features{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}


.brand-logo{
  height:44px;
  width:auto;
  max-width:210px;
  display:block;
}
.brand .logo{
  display:none;
}
.lock-note{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:rgba(111,45,189,.08);
  border:1px solid rgba(111,45,189,.22);
  color:#eee7ff;
  font-size:14px;
  line-height:1.45;
}
.inline-link-btn{
  display:block;
  text-align:center;
  margin-top:12px;
}


.activation-options{
  margin-top:18px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.activation-options h3{
  margin:0 0 12px;
  font-size:18px;
}
.trial-btn{
  background:linear-gradient(135deg,#ffffff,#d8d8e5);
  color:#111;
  box-shadow:0 14px 35px rgba(255,255,255,.12);
}

/* Yalovi UI refinements */
.brand-logo{height:44px;width:auto;max-width:210px;display:block}
.brand .logo{display:none}
.lang-switcher{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:6px}
.lang-btn{border:0;background:transparent;color:#cfd0d8;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:7px}
.lang-btn.active{background:#fff;color:#111}
.flag{font-size:18px;line-height:1}
.hidden{display:none!important}
.activation-options{margin-top:18px;padding:18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.activation-options h3{margin:0 0 12px;font-size:18px}
.trial-btn{background:linear-gradient(135deg,#ffffff,#d8d8e5);color:#111;box-shadow:0 14px 35px rgba(255,255,255,.12)}
.status:empty{display:none}
.status.is-hidden{display:none}
.lock-note{display:none}
.inline-link-btn{display:block;text-align:center;margin-top:12px}
.feature i,.btn i,.input-icon{margin-right:8px;color:#6f2dbd}
.disclaimer-footer{margin:58px auto 40px;max-width:1000px;padding:22px 26px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#c8c8d2;text-align:center;line-height:1.6;font-size:14px}
.disclaimer-footer strong{color:#fff}
.disclaimer-footer a{color:#fff;font-weight:800}
.nav-actions{display:flex;gap:10px;align-items:center}
@media(max-width:800px){.nav{gap:18px;align-items:flex-start}.nav-actions{width:100%;justify-content:space-between}.lang-btn{padding:7px 10px}.disclaimer-footer{text-align:left}}

/* Footer + language selector final polish */
.disclaimer-footer{
  margin:50px auto 30px !important;
  max-width:980px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.58) !important;
  text-align:center !important;
  line-height:1.45 !important;
  font-size:7.5px !important;
  box-shadow:none !important;
}
.disclaimer-footer strong{
  color:rgba(255,255,255,.76) !important;
  font-weight:700 !important;
}
.disclaimer-footer a{
  color:rgba(255,255,255,.72) !important;
  font-weight:700 !important;
}

.lang-switcher{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:999px !important;
  padding:5px !important;
}
.lang-btn{
  border:0 !important;
  background:transparent !important;
  color:#cfd0d8 !important;
  border-radius:999px !important;
  padding:7px 11px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  font-size:12px !important;
}
.lang-btn.active{
  background:#ffffff !important;
  color:#101014 !important;
}
.flag{
  width:19px !important;
  height:13px !important;
  display:inline-block !important;
  border-radius:2px !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset !important;
  flex:0 0 auto !important;
}
.flag-us{
  background:
    linear-gradient(180deg,#b22234 0 7.69%,#fff 7.69% 15.38%,#b22234 15.38% 23.07%,#fff 23.07% 30.76%,#b22234 30.76% 38.45%,#fff 38.45% 46.14%,#b22234 46.14% 53.83%,#fff 53.83% 61.52%,#b22234 61.52% 69.21%,#fff 69.21% 76.9%,#b22234 76.9% 84.59%,#fff 84.59% 92.28%,#b22234 92.28% 100%);
  position:relative;
}
.flag-us:before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:8px;height:7px;
  background:#3c3b6e;
  border-radius:2px 0 1px 0;
}
.flag-es{
  background:linear-gradient(180deg,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75% 100%);
}


/* Premium Glassmorphism + Animated Background */
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(111,45,189,.20), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(76,29,149,.28), transparent 32%),
    radial-gradient(circle at 50% 90%, rgba(111,45,189,.12), transparent 35%),
    linear-gradient(135deg,#030306,#08080e 45%,#12051f) !important;
  background-size:140% 140%, 130% 130%, 160% 160%, 200% 200% !important;
  animation:yaloviBgMove 14s ease-in-out infinite alternate !important;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 25%, rgba(111,45,189,.16), transparent 22%),
    radial-gradient(circle at 75% 45%, rgba(255,255,255,.035), transparent 18%),
    radial-gradient(circle at 42% 72%, rgba(111,45,189,.10), transparent 25%);
  filter:blur(42px);
  animation:yaloviGlowFloat 18s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.025) 45%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 90px);
  opacity:.55;
  mix-blend-mode:screen;
  animation:yaloviLightSweep 11s linear infinite;
}

@keyframes yaloviBgMove{
  0%{background-position:0% 20%, 90% 10%, 30% 90%, 0% 50%}
  50%{background-position:28% 50%, 60% 35%, 70% 65%, 55% 50%}
  100%{background-position:65% 28%, 30% 70%, 40% 35%, 100% 50%}
}

@keyframes yaloviGlowFloat{
  0%{transform:translate3d(-2%, -1%, 0) scale(1)}
  50%{transform:translate3d(3%, 2%, 0) scale(1.06)}
  100%{transform:translate3d(-1%, 3%, 0) scale(1.02)}
}

@keyframes yaloviLightSweep{
  0%{transform:translateX(-12%)}
  100%{transform:translateX(12%)}
}

/* Glass cards across the site */
.card,
.feature,
.stat,
.login-shell,
.login-form,
.login-info,
.sidebar,
.topbar,
.yalovi-security-modal,
.activation-options{
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
}

.card,
.feature,
.stat,
.activation-options{
  position:relative;
  overflow:hidden;
}

.card::before,
.feature::before,
.stat::before,
.activation-options::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.20), transparent 28%, transparent 68%, rgba(255,255,255,.055));
  opacity:.45;
}

.card::after,
.feature::after,
.stat::after,
.activation-options::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:999px;
  right:-90px;
  top:-90px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(111,45,189,.18), transparent 70%);
  filter:blur(8px);
}

.feature{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.feature:hover{
  transform:translateY(-4px);
  border-color:rgba(111,45,189,.34) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.46),
    0 0 38px rgba(111,45,189,.13),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Inputs also match glass UI */
.input,
.form-input,
.mini-input{
  background:rgba(0,0,0,.28) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.input:focus,
.form-input:focus,
.mini-input:focus{
  border-color:rgba(111,45,189,.55) !important;
  box-shadow:
    0 0 0 4px rgba(111,45,189,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  body,
  body::before,
  body::after{
    animation:none !important;
  }
}


/* User portal transfer/payment refinements */
.table-wrap{width:100%;max-width:100%;overflow-x:auto;border-radius:16px}
.table{width:100%;border-collapse:collapse;min-width:720px}
.table th,.table td{padding:13px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:13px}
.table th{color:rgba(255,255,255,.62);font-size:11px;text-transform:uppercase;letter-spacing:.08em}


/* User device login refinements */
.nav-actions .pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
}


/* Dark modern user panel + playlist forms */
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(70,80,120,.12), transparent 28%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.035), transparent 24%),
    linear-gradient(135deg,#07070c,#10101a 55%,#151221) !important;
}

.user-panel .card,
.playlist-form-card{
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  box-shadow:0 22px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.playlist-form-card{
  padding:28px;
  margin-bottom:20px;
}

.playlist-form-card h2{
  margin:0 0 24px;
}

.protect-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  margin:14px 0 10px;
  cursor:pointer;
}

.protect-row input{
  appearance:none;
  width:24px;
  height:24px;
  border-radius:7px;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.035);
  display:grid;
  place-items:center;
}

.protect-row input:checked{
  background:#6f2dbd;
  border-color:#6f2dbd;
}

.protect-row input:checked::after{
  content:"✓";
  color:#fff;
  font-weight:900;
  font-size:15px;
}

.pin-warning{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  border-radius:14px;
  background:rgba(255,145,0,.56);
  color:#fff0d4;
  font-weight:800;
  margin:10px 0 16px;
}

.pin-warning i{
  color:#fff1c8;
  font-size:22px;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:20px;
}

.hidden{
  display:none !important;
}


/* Billing PRO user panel */
.billing-status-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:18px;
  align-items:center;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);
  margin-bottom:18px;
  box-shadow:0 22px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.billing-status-card.trial{
  border-color:rgba(0,220,255,.28);
  background:linear-gradient(145deg,rgba(0,220,255,.10),rgba(255,255,255,.028));
}

.billing-status-card.active,
.billing-status-card.lifetime{
  border-color:rgba(40,209,124,.28);
  background:linear-gradient(145deg,rgba(40,209,124,.10),rgba(255,255,255,.028));
}

.billing-status-card.expired,
.billing-status-card.blocked{
  border-color:rgba(255,176,32,.30);
  background:linear-gradient(145deg,rgba(255,176,32,.10),rgba(255,255,255,.028));
}

.billing-kicker{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(255,255,255,.58);
  font-weight:900;
  margin-bottom:8px;
}

.billing-status-card h3{
  margin:0 0 7px;
  font-size:24px;
}

.billing-status-card p{
  margin:0;
  color:rgba(255,255,255,.66);
  line-height:1.5;
}

.billing-days{
  text-align:center;
  padding:18px;
  border-radius:20px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.09);
}

.billing-days strong{
  display:block;
  font-size:42px;
  line-height:1;
}

.billing-days span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:18px 0 10px;
}

.pricing-card{
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}

.pricing-card.featured{
  border-color:rgba(111,45,189,.28);
  box-shadow:0 18px 55px rgba(111,45,189,.08);
}

.pricing-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(111,45,189,.12);
  color:#6f2dbd;
  margin-bottom:12px;
  font-size:22px;
}

.pricing-card h3{
  margin:0 0 6px;
}

.pricing-card p{
  margin:0 0 14px;
  color:rgba(255,255,255,.62);
}

.price{
  font-size:34px;
  font-weight:900;
}

.price span{
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin-left:4px;
}

.payment-methods-pro{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:16px;
}

.payment-method-pro{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}

.payment-method-pro.default{
  border-color:rgba(40,209,124,.28);
}

.method-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}

.method-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  display:grid;
  place-items:center;
  color:#6f2dbd;
  font-size:22px;
}

.method-head h3{
  margin:0 0 5px;
}

.method-head h3 span{
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(40,209,124,.16);
  color:#9dffd0;
  vertical-align:middle;
  margin-left:6px;
}

.method-head p{
  margin:0;
  color:rgba(255,255,255,.60);
  line-height:1.5;
}

.method-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.billing-security-note{
  margin-top:18px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(0,220,255,.06);
  border:1px solid rgba(0,220,255,.18);
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:rgba(255,255,255,.72);
  line-height:1.5;
}

.billing-security-note i{
  color:#33dfff;
  font-size:20px;
}

@media(max-width:760px){
  .billing-status-card,
  .pricing-grid,
  .method-actions{
    grid-template-columns:1fr;
  }
}


/* Global Yalovi footer + full bleed fix */
html, body{
  min-height:100%;
}

body{
  overflow-x:hidden;
}

.wrap{
  min-height:auto;
}

.yalovi-footer{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:70px;
  padding:58px max(28px, calc((100vw - 1180px) / 2)) 26px;
  background:
    radial-gradient(circle at 14% 20%, rgba(111,45,189,.10), transparent 28%),
    linear-gradient(135deg, #12111d, #171625 58%, #0d0d14);
  border-top:1px solid rgba(255,255,255,.09);
  color:#fff;
  box-shadow:0 -28px 90px rgba(0,0,0,.34);
}

.yalovi-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 110px);
  opacity:.55;
}

.yalovi-footer-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(180px,.65fr) minmax(180px,.65fr);
  gap:80px;
  align-items:start;
}

.footer-logo{
  height:48px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  margin-bottom:22px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

.footer-brand-col p{
  max-width:420px;
  margin:0;
  color:rgba(255,255,255,.76);
  line-height:1.72;
  font-size:14px;
  font-weight:600;
}

.footer-social{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.footer-social a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  transition:.2s ease;
}

.footer-social a:hover{
  color:#fff;
  transform:translateY(-2px);
  border-color:rgba(111,45,189,.35);
  background:rgba(111,45,189,.12);
}

.footer-links-col h4{
  margin:0 0 22px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#ffffff;
  font-weight:900;
}

.footer-links-col a{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  color:rgba(255,255,255,.78);
  font-size:14px;
  font-weight:700;
  margin-bottom:16px;
  text-decoration:none;
  transition:.2s ease;
}

.footer-links-col a i{
  color:#6f2dbd;
}

.footer-links-col a:hover{
  color:#fff;
  transform:translateX(3px);
}

.yalovi-footer-bottom{
  position:relative;
  z-index:1;
  margin-top:58px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:700;
}

.scroll-top-btn{
  position:absolute;
  right:max(24px, calc((100vw - 1180px) / 2));
  bottom:24px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  transition:.2s ease;
}

.scroll-top-btn:hover{
  background:#6f2dbd;
  transform:translateY(-3px);
}

@media(max-width:900px){
  .yalovi-footer{
    padding:46px 24px 28px;
  }

  .yalovi-footer-inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .yalovi-footer-bottom{
    flex-direction:column;
  }

  .scroll-top-btn{
    right:22px;
  }
}


/* Global Header PRO */
.yalovi-global-header{
  position:sticky;
  top:0;
  z-index:900;
  width:100%;
  background:rgba(7,7,12,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 16px 60px rgba(0,0,0,.28);
}

.yalovi-header-inner{
  width:min(1180px, calc(100% - 36px));
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.yalovi-header-brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.yalovi-header-brand img{
  height:42px;
  width:auto;
  max-width:220px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.yalovi-main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:1 1 auto;
}

.yalovi-main-nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 12px;
  border-radius:999px;
  color:rgba(255,255,255,.74);
  font-weight:850;
  font-size:13px;
  text-decoration:none;
  transition:.2s ease;
  border:1px solid transparent;
}

.yalovi-main-nav a i{
  color:#6f2dbd;
  font-size:14px;
}

.yalovi-main-nav a:hover,
.yalovi-main-nav a.active{
  color:#fff;
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.09);
}

.yalovi-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.yalovi-header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  transition:.2s ease;
  white-space:nowrap;
}

.yalovi-header-btn.secondary{
  color:#fff;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.10);
}

.yalovi-header-btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#6f2dbd,#3b0764);
  box-shadow:0 12px 34px rgba(111,45,189,.20);
}

.yalovi-header-btn:hover{
  transform:translateY(-2px);
}

.yalovi-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.065);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

@media(max-width:980px){
  .yalovi-header-inner{
    min-height:70px;
  }

  .yalovi-menu-toggle{
    display:grid;
    place-items:center;
    order:3;
  }

  .yalovi-header-actions{
    display:none;
  }

  .yalovi-main-nav{
    position:absolute;
    left:18px;
    right:18px;
    top:78px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    border-radius:24px;
    background:rgba(10,10,16,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 80px rgba(0,0,0,.45);
    backdrop-filter:blur(20px);
  }

  .yalovi-main-nav.open{
    display:flex;
    animation:yaloviMenuIn .18s ease-out;
  }

  .yalovi-main-nav a{
    width:100%;
    justify-content:flex-start;
    border-radius:16px;
    padding:14px 15px;
    background:rgba(255,255,255,.035);
  }
}

@media(max-width:520px){
  .yalovi-header-inner{
    width:calc(100% - 24px);
  }

  .yalovi-header-brand img{
    height:34px;
    max-width:175px;
  }

  .yalovi-main-nav{
    left:12px;
    right:12px;
  }
}

@keyframes yaloviMenuIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Hide older local nav bars when global header is present */
body.has-global-header > .wrap > .nav:first-child,
body.has-global-header .wrap > header.nav:first-child{
  display:none !important;
}


/* Payment logos PRO */
.payment-logo-box{
  background:#fff !important;
  padding:8px !important;
}

.payment-logo-box img{
  width:58px;
  height:28px;
  object-fit:contain;
  display:block;
}

.payment-method-pro.default .payment-logo-box{
  box-shadow:0 0 0 2px rgba(40,209,124,.22);
}

.footer-payment-logos{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  flex-wrap:wrap;
}

.footer-payment-logos img{
  width:auto;
  height:18px;
  max-width:64px;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:7px;
  padding:4px 7px;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  opacity:.92;
}

.footer-payment-logos img:hover{
  opacity:1;
  transform:translateY(-1px);
}

@media(max-width:760px){
  .payment-logo-box img{
    width:52px;
    height:25px;
  }
  .footer-payment-logos img{
    height:17px;
  }
}


/* Header nav refinement based on requested style */
.yalovi-main-nav{
  gap:26px !important;
}

.yalovi-main-nav a{
  background:transparent !important;
  border:0 !important;
  padding:10px 4px !important;
  border-radius:0 !important;
  font-size:15px !important;
  font-weight:900 !important;
  color:#ffffff !important;
  position:relative;
}

.yalovi-main-nav a i{
  display:none !important;
}

.yalovi-main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:#6f2dbd;
  transform:scaleX(0);
  transform-origin:center;
  transition:.2s ease;
}

.yalovi-main-nav a:hover::after,
.yalovi-main-nav a.active::after{
  transform:scaleX(1);
}

/* Back to top fix */
.scroll-top-btn{
  position:fixed !important;
  right:28px !important;
  bottom:92px !important;
  z-index:950 !important;
  width:46px !important;
  height:46px !important;
}

.yalovi-footer-bottom{
  padding-right:72px;
}

/* Modern default animated background for landing/login/user pages */
body{
  background:
    radial-gradient(circle at 18% 15%, rgba(111,45,189,.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.045), transparent 24%),
    radial-gradient(circle at 52% 84%, rgba(76,29,149,.15), transparent 34%),
    linear-gradient(135deg,#050508,#0b0b12 52%,#10041d) !important;
  background-size:140% 140%, 130% 130%, 160% 160%, 200% 200% !important;
  animation:yaloviModernBg 16s ease-in-out infinite alternate !important;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 28%, rgba(111,45,189,.13), transparent 24%),
    radial-gradient(circle at 78% 52%, rgba(255,255,255,.04), transparent 22%);
  filter:blur(54px);
  animation:yaloviBgFloat 20s ease-in-out infinite alternate;
}

@keyframes yaloviModernBg{
  0%{background-position:0% 20%, 90% 10%, 40% 85%, 0% 50%}
  50%{background-position:30% 44%, 62% 36%, 72% 65%, 55% 50%}
  100%{background-position:70% 28%, 28% 70%, 35% 42%, 100% 50%}
}

@keyframes yaloviBgFloat{
  0%{transform:translate3d(-2%, -1%, 0) scale(1)}
  50%{transform:translate3d(3%, 2%, 0) scale(1.05)}
  100%{transform:translate3d(-1%, 3%, 0) scale(1.02)}
}

@media(max-width:980px){
  .yalovi-main-nav{
    gap:8px !important;
  }
  .yalovi-main-nav a{
    padding:14px 15px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.045) !important;
  }
  .yalovi-main-nav a::after{
    display:none;
  }
}

@media(max-width:700px){
  .scroll-top-btn{
    right:18px !important;
    bottom:82px !important;
  }
  .yalovi-footer-bottom{
    padding-right:0;
    padding-bottom:56px;
  }
}


/* Landing Commercial Sections PRO */
.yalovi-why-section,
.yalovi-how-section{
  width:min(1180px, calc(100% - 36px));
  margin:88px auto 0;
  position:relative;
}

.section-heading{
  text-align:center;
  max-width:760px;
  margin:0 auto 40px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(111,45,189,.12);
  border:1px solid rgba(111,45,189,.22);
  color:#eee7ff;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:16px;
}

.section-kicker i{
  color:#6f2dbd;
}

.section-heading h2{
  margin:0;
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.08;
  color:#fff;
  letter-spacing:-.03em;
}

.section-heading p{
  margin:16px auto 0;
  color:rgba(255,255,255,.64);
  font-size:17px;
  line-height:1.65;
  font-weight:650;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.why-card,
.step-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 22px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  transition:.25s ease;
}

.why-card::before,
.step-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.16), transparent 32%, transparent 68%, rgba(111,45,189,.07));
  opacity:.55;
}

.why-card:hover,
.step-card:hover{
  transform:translateY(-5px);
  border-color:rgba(111,45,189,.30);
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    0 0 34px rgba(111,45,189,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.why-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,#6f2dbd,#4c1d95);
  color:#fff;
  font-size:25px;
  margin:0 0 22px;
  box-shadow:0 16px 40px rgba(111,45,189,.22);
}

.why-card h3,
.step-card h3{
  position:relative;
  margin:0 0 12px;
  color:#fff;
  font-size:20px;
  letter-spacing:-.02em;
}

.why-card p,
.step-card p{
  position:relative;
  margin:0;
  color:rgba(255,255,255,.66);
  line-height:1.65;
  font-size:14px;
  font-weight:650;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.step-card{
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.step-visual{
  position:relative;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
}

.step-visual i{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:rgba(111,45,189,.14);
  border:1px solid rgba(111,45,189,.24);
  color:#6f2dbd;
  font-size:42px;
  box-shadow:0 20px 60px rgba(111,45,189,.10);
}

.step-visual span{
  position:absolute;
  top:0;
  right:0;
  font-size:68px;
  font-weight:950;
  line-height:1;
  color:rgba(255,255,255,.055);
}

@media(max-width:980px){
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .yalovi-why-section,
  .yalovi-how-section{
    width:calc(100% - 24px);
    margin-top:62px;
  }

  .why-grid,
  .steps-grid{
    grid-template-columns:1fr;
  }

  .why-card,
  .step-card{
    padding:24px;
  }

  .step-card{
    min-height:auto;
  }
}


/* Static default background override - no animation */
body{
  background:
    linear-gradient(rgba(3,3,6,.72), rgba(3,3,8,.82)),
    url('../img/default-bg.jpg') center center / cover no-repeat fixed !important;
  animation:none !important;
}

body::before,
body::after{
  animation:none !important;
}

.yalovi-global-header{
  background:rgba(7,7,12,.78) !important;
}

/* Cleaner device login card */
.device-login-card{
  max-width:440px;
  padding-top:34px !important;
}

.device-login-card h1{
  margin-top:0 !important;
}

.device-login-card .logo-center,
.helper-actions{
  display:none !important;
}


/* FINAL Background Visual Fix - Premium dark image treatment */
html{
  background:#050508 !important;
}

body{
  background-color:#050508 !important;
  background-image:
    linear-gradient(90deg, rgba(3,3,6,.94) 0%, rgba(3,3,6,.76) 42%, rgba(3,3,6,.84) 100%),
    url('../img/default-bg.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  animation:none !important;
  color:#fff !important;
}

body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(111,45,189,.15), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(111,45,189,.08), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54)) !important;
  filter:none !important;
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}

body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.018), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 96px) !important;
  opacity:.30 !important;
  animation:none !important;
  transform:none !important;
}

/* Content readability over background */
.wrap{
  position:relative;
  z-index:1;
}

.card,
.feature,
.why-card,
.step-card,
.device-login-card,
.billing-status-card,
.payment-method-pro,
.pricing-card{
  background:
    linear-gradient(145deg, rgba(12,12,18,.82), rgba(8,8,12,.70)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.yalovi-global-header{
  background:rgba(5,5,8,.88) !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}

/* Hero area cleaner spacing/contrast */
.hero{
  position:relative;
  z-index:1;
}

.hero h1{
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}

.hero p{
  color:rgba(255,255,255,.76) !important;
}

/* Make lower sections not look gray */
.yalovi-why-section,
.yalovi-how-section{
  position:relative;
  z-index:1;
}

.section-heading p{
  color:rgba(255,255,255,.70) !important;
}

/* Mobile: avoid fixed attachment rendering bugs */
@media(max-width:780px){
  body{
    background-attachment:scroll !important;
    background-position:center top !important;
  }
}


/* FULL COMPLETE REBUILD FOOTER FIX */
.yalovi-footer{
  background:linear-gradient(180deg, rgba(5,5,8,0) 0%, rgba(5,5,8,.88) 38%, rgba(5,5,8,1) 100%) !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  box-shadow:none !important;
}
.yalovi-footer::before{
  background:radial-gradient(circle at 18% 12%, rgba(111,45,189,.09), transparent 32%), radial-gradient(circle at 82% 18%, rgba(111,45,189,.045), transparent 28%) !important;
  opacity:1 !important;
}
.yalovi-footer-inner,.yalovi-footer-bottom{position:relative;z-index:2}
.scroll-top-btn{position:fixed!important;right:28px!important;bottom:92px!important;z-index:950!important}


/* SELECT UI PRO FIX — custom Yalovi dropdown style */
select.input,
.input select,
select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-color:rgba(5,5,10,.72) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.88) 50%),
    linear-gradient(135deg, rgba(255,255,255,.88) 50%, transparent 50%),
    linear-gradient(135deg, rgba(111,45,189,.16), rgba(255,255,255,.035)) !important;
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px),
    0 0 !important;
  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  border-radius:16px !important;
  padding:16px 46px 16px 18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.20) !important;
  cursor:pointer !important;
}

select.input:hover,
select:hover{
  border-color:rgba(111,45,189,.42) !important;
  background-color:rgba(8,8,14,.82) !important;
}

select.input:focus,
select:focus{
  outline:none !important;
  border-color:rgba(111,45,189,.80) !important;
  box-shadow:
    0 0 0 4px rgba(111,45,189,.13),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

select option{
  background:#09090f !important;
  color:#ffffff !important;
  font-weight:700 !important;
  padding:12px !important;
}

select option:checked{
  background:#6f2dbd !important;
  color:#ffffff !important;
}

/* Contact page cleanup */
.support-page .brand,
.support-page .logo-center,
.support-page .support-extra-link{
  display:none !important;
}

.support-page{
  margin-top:72px !important;
}


/* TICKETS PRO + SELECT UI FINAL */
select.input,
select{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  background-color:rgba(5,5,10,.72)!important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%),
    linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%),
    linear-gradient(135deg, rgba(111,45,189,.16), rgba(255,255,255,.035))!important;
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px),
    0 0!important;
  background-size:6px 6px,6px 6px,100% 100%!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  border-radius:16px!important;
  padding:16px 46px 16px 18px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
select:focus{
  outline:none!important;
  border-color:rgba(111,45,189,.8)!important;
  box-shadow:0 0 0 4px rgba(111,45,189,.13)!important;
}
select option{background:#09090f!important;color:#fff!important;font-weight:700!important}

.support-head-pro h1{
  font-size:clamp(34px,4vw,54px);
  margin:12px 0 10px;
}
.support-head-pro p{
  color:rgba(255,255,255,.68);
  line-height:1.65;
  font-weight:650;
}
.support-form-pro textarea{
  min-height:150px;
  resize:vertical;
}
.support-submit-btn{
  width:100%;
  margin-top:8px;
}
.success-ticket{
  border-color:rgba(40,209,124,.28)!important;
  background:rgba(40,209,124,.10)!important;
}
.error-ticket{
  border-color:rgba(111,45,189,.28)!important;
  background:rgba(111,45,189,.10)!important;
}


/* CONTACT PAGE FULL FIX */
.contact-page-wrap{
  min-height:auto !important;
  padding-top:72px !important;
}

.support-page.contact-hero-card{
  width:min(860px,100%) !important;
  margin:0 auto 26px !important;
  padding:34px !important;
}

.support-head-pro{
  margin-bottom:24px !important;
}

.support-head-pro h1{
  font-size:clamp(38px,4vw,58px) !important;
  margin:18px 0 12px !important;
  letter-spacing:-.04em !important;
}

.support-head-pro p{
  color:rgba(255,255,255,.72) !important;
  line-height:1.65 !important;
  font-weight:700 !important;
  max-width:760px !important;
}

.support-form-pro{
  margin-top:22px !important;
}

.field-pro{
  display:block !important;
  margin-bottom:8px !important;
}

.field-pro label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:rgba(255,255,255,.86) !important;
  font-weight:900 !important;
  font-size:13px !important;
  margin:0 0 7px !important;
}

.field-pro label i{
  color:#6f2dbd !important;
}

.support-form-pro textarea.input{
  min-height:150px !important;
  resize:vertical !important;
}

.support-submit-btn{
  width:100% !important;
  min-height:52px !important;
  margin-top:10px !important;
}

.contact-info-grid{
  width:min(860px,100%) !important;
  margin:0 auto 70px !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
}

.contact-mini-card{
  padding:22px !important;
}

.contact-mini-card i{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:15px !important;
  background:rgba(111,45,189,.14) !important;
  color:#6f2dbd !important;
  font-size:22px !important;
  margin-bottom:14px !important;
}

.contact-mini-card h3{
  margin:0 0 8px !important;
}

.contact-mini-card p{
  margin:0 !important;
  color:rgba(255,255,255,.65) !important;
  line-height:1.55 !important;
}

.success-ticket{
  border-color:rgba(40,209,124,.28)!important;
  background:rgba(40,209,124,.10)!important;
}

.error-ticket{
  border-color:rgba(111,45,189,.28)!important;
  background:rgba(111,45,189,.10)!important;
}

/* Ensure footer appears after contact content */
body:has(.contact-page-wrap) .yalovi-footer{
  margin-top:40px !important;
}

@media(max-width:900px){
  .contact-info-grid{
    grid-template-columns:1fr !important;
  }
  .support-page.contact-hero-card{
    padding:24px !important;
  }
}
/* Roku device image under landing hero title */
.hero-roku-device-wrap{
  margin:16px 0 18px;
  max-width:620px;
  width:100%;
}
.hero-roku-device-img{
  display:block;
  width:min(100%,620px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.55));
  transform:translateX(-6px);
}
@media(max-width:800px){
  .hero-roku-device-wrap{
    margin:14px auto 18px;
    max-width:100%;
  }
  .hero-roku-device-img{
    width:100%;
    max-width:540px;
    margin:0 auto;
    transform:none;
  }
}

/* Landing language selector — premium header control */
.landing-language{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035)) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}
.landing-language-label{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 4px 0 10px !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}
.landing-language-label i{color:#8b5cf6 !important;font-size:14px !important;}
.landing-language .lang-switcher{
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  padding:4px !important;
  gap:4px !important;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.28) !important;
}
.landing-language .lang-btn{
  min-width:72px !important;
  justify-content:center !important;
  padding:9px 12px !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}
.landing-language .lang-btn:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
}
.landing-language .lang-btn.active{
  background:linear-gradient(135deg,#ffffff,#e9e9f2) !important;
  color:#101014 !important;
  box-shadow:0 8px 22px rgba(255,255,255,.13) !important;
}
.landing-language .flag{
  width:22px !important;
  height:15px !important;
  border-radius:4px !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.36) inset,0 2px 8px rgba(0,0,0,.22) !important;
}
.nav-actions{flex-wrap:wrap !important;justify-content:flex-end !important;}
@media(max-width:800px){
  .nav{align-items:center !important;}
  .nav-actions{width:100% !important;justify-content:flex-start !important;gap:10px !important;}
  .landing-language{width:100% !important;justify-content:space-between !important;}
  .landing-language .lang-switcher{margin-left:auto !important;}
}
@media(max-width:480px){
  .landing-language-label span{display:none !important;}
  .landing-language .lang-btn{min-width:64px !important;padding:8px 10px !important;}
  .landing-language{width:auto !important;}
}


/* HEADER LANGUAGE SELECTOR VISIBILITY FIX + DEFAULT BACKGROUND SUPPORT */
.yalovi-header-language{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  position:relative !important;
  z-index:1005 !important;
  margin-left:auto !important;
}
.yalovi-global-header .landing-language{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.yalovi-global-header .landing-language .lang-switcher,
.yalovi-global-header .landing-language .lang-btn,
.yalovi-global-header .landing-language .flag{
  opacity:1 !important;
  visibility:visible !important;
}
.yalovi-global-header .landing-language .lang-btn{
  border:none !important;
  outline:none !important;
}
.yalovi-global-header .landing-language .lang-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(111,45,189,.32), 0 8px 22px rgba(255,255,255,.13) !important;
}
@media(max-width:1180px){
  .yalovi-header-inner{gap:12px !important;}
  .yalovi-main-nav{gap:4px !important;}
  .yalovi-main-nav a{padding:9px 10px !important;font-size:12px !important;}
  .yalovi-header-btn{padding:9px 11px !important;font-size:12px !important;}
}
@media(max-width:980px){
  .yalovi-header-actions{display:none !important;}
  .yalovi-header-language{margin-left:0 !important;}
  .yalovi-header-language .landing-language-label span{display:none !important;}
  .yalovi-header-language .landing-language-label{padding-left:8px !important;}
  .yalovi-global-header .landing-language .lang-btn{min-width:58px !important;padding:8px 9px !important;}
}
@media(max-width:620px){
  .yalovi-header-inner{width:calc(100% - 22px) !important;gap:8px !important;}
  .yalovi-header-brand img{height:30px !important;max-width:142px !important;}
  .yalovi-header-language{padding:4px !important;gap:5px !important;}
  .yalovi-header-language .landing-language-label{display:none !important;}
  .yalovi-global-header .landing-language .lang-btn{min-width:auto !important;padding:7px 8px !important;font-size:11px !important;gap:5px !important;}
  .yalovi-global-header .landing-language .flag{width:20px !important;height:14px !important;}
  .yalovi-menu-toggle{width:40px !important;height:40px !important;border-radius:13px !important;}
}
@media(max-width:420px){
  .yalovi-header-brand img{max-width:118px !important;}
  .yalovi-global-header .landing-language .lang-btn span:last-child{display:none !important;}
}

/* =========================================================
   LANDING MOBILE OPTIMIZATION FIX
   Keeps desktop premium layout and rebuilds mobile spacing.
   ========================================================= */
html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
body.landing-page{
  min-width:0 !important;
}
body.landing-page .wrap{
  width:min(1180px, calc(100% - 36px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* The global header is the official header. Hide old inner landing nav. */
body.landing-page .wrap > header.nav{
  display:none !important;
}
body.landing-page .hero{
  width:100% !important;
  min-width:0 !important;
}
body.landing-page .hero > div,
body.landing-page .card,
body.landing-page .features,
body.landing-page .feature,
body.landing-page .why-card,
body.landing-page .step-card{
  min-width:0 !important;
}
body.landing-page .card{
  width:100% !important;
}
body.landing-page .input,
body.landing-page .btn,
body.landing-page select,
body.landing-page textarea{
  max-width:100% !important;
}
body.landing-page .hero-roku-device-img{
  max-width:100% !important;
}

@media(max-width:980px){
  body.landing-page .yalovi-global-header{
    position:sticky !important;
    top:0 !important;
    z-index:1200 !important;
  }
  body.landing-page .yalovi-header-inner{
    min-height:66px !important;
    width:calc(100% - 24px) !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.landing-page .yalovi-header-brand{
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  body.landing-page .yalovi-header-brand img{
    height:32px !important;
    max-width:138px !important;
  }
  body.landing-page .yalovi-header-language{
    order:2 !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    max-width:132px !important;
  }
  body.landing-page .yalovi-menu-toggle{
    order:3 !important;
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
  }
  body.landing-page .yalovi-main-nav{
    top:72px !important;
    left:12px !important;
    right:12px !important;
    z-index:1300 !important;
  }
  body.landing-page .landing-language{
    gap:4px !important;
    padding:4px !important;
    border-radius:999px !important;
    width:auto !important;
  }
  body.landing-page .landing-language-label{
    display:none !important;
  }
  body.landing-page .landing-language .lang-switcher{
    padding:3px !important;
    gap:3px !important;
  }
  body.landing-page .landing-language .lang-btn{
    min-width:42px !important;
    height:32px !important;
    padding:6px 8px !important;
    font-size:11px !important;
    gap:5px !important;
  }
  body.landing-page .landing-language .flag{
    width:19px !important;
    height:13px !important;
  }
}

@media(max-width:760px){
  body.landing-page{
    background-position:center top !important;
    background-size:cover !important;
    background-attachment:scroll !important;
  }
  body.landing-page .wrap{
    width:calc(100% - 24px) !important;
  }
  body.landing-page .hero{
    grid-template-columns:1fr !important;
    gap:20px !important;
    padding:28px 0 22px !important;
    text-align:center !important;
  }
  body.landing-page .hero h1{
    font-size:clamp(34px, 10vw, 46px) !important;
    line-height:1.02 !important;
    letter-spacing:-.05em !important;
    margin:0 auto 14px !important;
    max-width:12ch !important;
  }
  body.landing-page .hero-roku-device-wrap{
    width:100% !important;
    max-width:420px !important;
    margin:10px auto 2px !important;
  }
  body.landing-page .hero-roku-device-img{
    width:100% !important;
    max-height:190px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)) !important;
  }
  body.landing-page .card{
    padding:22px 18px !important;
    border-radius:24px !important;
    margin:0 auto !important;
    text-align:left !important;
  }
  body.landing-page .card h2{
    font-size:20px !important;
    margin-top:0 !important;
  }
  body.landing-page .input{
    min-height:52px !important;
    padding:14px 14px !important;
    font-size:15px !important;
    border-radius:15px !important;
  }
  body.landing-page .btn{
    min-height:52px !important;
    padding:14px 14px !important;
    border-radius:15px !important;
    font-size:14px !important;
  }
  body.landing-page .grid2{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.landing-page .features{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:14px 0 34px !important;
  }
  body.landing-page .feature{
    padding:18px !important;
    border-radius:20px !important;
    text-align:left !important;
  }
  body.landing-page .yalovi-why-section,
  body.landing-page .yalovi-how-section{
    width:calc(100% - 24px) !important;
    margin-top:42px !important;
  }
  body.landing-page .section-heading{
    margin-bottom:22px !important;
  }
  body.landing-page .section-heading h2{
    font-size:clamp(28px, 8vw, 36px) !important;
    line-height:1.08 !important;
  }
  body.landing-page .section-heading p{
    font-size:15px !important;
    line-height:1.55 !important;
  }
  body.landing-page .section-kicker{
    font-size:10px !important;
    padding:7px 10px !important;
    margin-bottom:12px !important;
  }
  body.landing-page .why-grid,
  body.landing-page .steps-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.landing-page .why-card,
  body.landing-page .step-card{
    padding:20px !important;
    border-radius:22px !important;
  }
  body.landing-page .why-icon{
    width:50px !important;
    height:50px !important;
    border-radius:17px !important;
    font-size:22px !important;
    margin-bottom:16px !important;
  }
  body.landing-page .step-visual{
    min-height:84px !important;
    margin-bottom:16px !important;
  }
  body.landing-page .step-visual i{
    width:68px !important;
    height:68px !important;
    border-radius:23px !important;
    font-size:32px !important;
  }
  body.landing-page .step-visual span{
    font-size:50px !important;
  }
  body.landing-page .yalovi-footer{
    margin-top:34px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media(max-width:420px){
  body.landing-page .yalovi-header-inner{
    width:calc(100% - 18px) !important;
    gap:6px !important;
  }
  body.landing-page .yalovi-header-brand img{
    height:28px !important;
    max-width:108px !important;
  }
  body.landing-page .yalovi-header-language{
    max-width:92px !important;
  }
  body.landing-page .landing-language .lang-btn{
    min-width:36px !important;
    padding:6px 7px !important;
  }
  body.landing-page .landing-language .lang-btn span:last-child{
    display:none !important;
  }
  body.landing-page .yalovi-menu-toggle{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
  }
  body.landing-page .hero{
    padding-top:24px !important;
  }
  body.landing-page .hero h1{
    font-size:clamp(31px, 10.5vw, 40px) !important;
  }
  body.landing-page .card{
    padding:20px 15px !important;
  }
}

/* =========================================================
   ROKU PURPLE BRAND PALETTE — FINAL GLOBAL OVERRIDE
   Replaces the former red accent with a Roku-inspired
   black + purple visual system across the public portal.
   ========================================================= */
:root{
  --roku-black:#050508;
  --roku-panel:#111018;
  --roku-purple:#6f2dbd;
  --roku-purple-2:#3b0764;
  --roku-purple-soft:#8b5cf6;
  --red:#6f2dbd;
  --red2:#3b0764;
  --accent:#6f2dbd;
  --accent-2:#3b0764;
  --accent-soft:#8b5cf6;
}
body{
  background-color:var(--roku-black) !important;
}
body::before{
  background:
    radial-gradient(circle at 18% 20%,rgba(111,45,189,.16),transparent 30%),
    radial-gradient(circle at 78% 18%,rgba(139,92,246,.09),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.58)) !important;
}
.btn,
.yalovi-header-btn.primary,
.support-submit-final{
  background:linear-gradient(135deg,var(--roku-purple),var(--roku-purple-2)) !important;
  box-shadow:0 16px 42px rgba(111,45,189,.26) !important;
}
.btn:hover,
.yalovi-header-btn.primary:hover,
.support-submit-final:hover{
  filter:brightness(1.08) saturate(1.05) !important;
}
.btn.alt{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(111,45,189,.26) !important;
}
.feature i,
.btn i,
.input-icon,
.yalovi-main-nav a i,
.footer-links-col a i,
.field-pro label i,
.support-field label i,
.section-kicker i,
.pricing-icon,
.method-icon{
  color:var(--roku-purple-soft) !important;
}
.logo,
.why-icon{
  background:linear-gradient(135deg,var(--roku-purple),var(--roku-purple-2)) !important;
  box-shadow:0 16px 42px rgba(111,45,189,.28) !important;
}
.section-kicker,
.support-kicker,
.lock-note{
  background:rgba(111,45,189,.14) !important;
  border-color:rgba(139,92,246,.30) !important;
  color:#eee7ff !important;
}
.input:focus,
.form-input:focus,
.mini-input:focus,
.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus,
select:focus{
  border-color:rgba(139,92,246,.82) !important;
  box-shadow:0 0 0 4px rgba(111,45,189,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.feature:hover,
.why-card:hover,
.step-card:hover{
  border-color:rgba(139,92,246,.34) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.42), 0 0 34px rgba(111,45,189,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.yalovi-main-nav a::after{
  background:var(--roku-purple-soft) !important;
}
.yalovi-footer{
  background:linear-gradient(180deg, rgba(5,5,8,0) 0%, rgba(10,6,18,.90) 38%, rgba(5,5,8,1) 100%) !important;
}
.yalovi-footer::before{
  background:
    radial-gradient(circle at 18% 12%, rgba(111,45,189,.12), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(139,92,246,.07), transparent 28%) !important;
}
.footer-social a:hover,
.scroll-top-btn:hover{
  border-color:rgba(139,92,246,.38) !important;
  background:var(--roku-purple) !important;
}
.pricing-card.featured{
  border-color:rgba(139,92,246,.30) !important;
  box-shadow:0 18px 55px rgba(111,45,189,.10) !important;
}
.pricing-icon,
.method-icon,
.contact-mini-card i,
.support-mini-card i,
.step-visual i{
  background:rgba(111,45,189,.15) !important;
  border-color:rgba(139,92,246,.27) !important;
  color:var(--roku-purple-soft) !important;
}
select.input,
select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.90) 50%),
    linear-gradient(135deg, rgba(255,255,255,.90) 50%, transparent 50%),
    linear-gradient(135deg, rgba(111,45,189,.18), rgba(255,255,255,.035)) !important;
}
select.input:hover,
select:hover{
  border-color:rgba(139,92,246,.48) !important;
}
select option:checked{
  background:var(--roku-purple) !important;
}
.support-alert.error,
.error-ticket{
  background:rgba(111,45,189,.12) !important;
  border-color:rgba(139,92,246,.28) !important;
  color:#eee7ff !important;
}
.landing-language-label i{
  color:var(--roku-purple-soft) !important;
}
.yalovi-global-header .landing-language .lang-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(139,92,246,.35), 0 8px 22px rgba(255,255,255,.13) !important;
}

/* Step cards image upgrade - Roku visual workflow */
.step-visual.step-visual-image{
  min-height:150px;
  overflow:hidden;
  border-radius:22px;
  margin:-4px 0 22px;
  background:linear-gradient(145deg, rgba(111,45,189,.12), rgba(255,255,255,.035));
  border:1px solid rgba(139,92,246,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.22);
}
.step-visual.step-visual-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.22) 100%);
}
.step-visual.step-visual-image img{
  width:100%;
  height:100%;
  min-height:150px;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .35s ease, filter .35s ease;
}
.step-card:hover .step-visual.step-visual-image img{
  transform:scale(1.045);
  filter:saturate(1.06) contrast(1.04);
}
.step-visual.step-visual-image span{
  top:14px;
  right:16px;
  z-index:2;
  color:rgba(255,255,255,.20);
  text-shadow:0 10px 34px rgba(0,0,0,.45);
}
@media(max-width:980px){
  body.landing-page .step-visual.step-visual-image{
    min-height:150px !important;
    height:150px !important;
    margin:-2px 0 16px !important;
    border-radius:20px !important;
  }
  body.landing-page .step-visual.step-visual-image img{
    min-height:150px !important;
  }
  body.landing-page .step-visual.step-visual-image span{
    font-size:46px !important;
    top:12px !important;
    right:14px !important;
  }
}
@media(max-width:520px){
  body.landing-page .step-visual.step-visual-image{
    min-height:128px !important;
    height:128px !important;
  }
  body.landing-page .step-visual.step-visual-image img{
    min-height:128px !important;
  }
}


/* =========================================================
   FINAL POLISH — activation note, legal cleanup, portal badge,
   and premium fading marquee.
   ========================================================= */
body.landing-page .secure-note{
  font-size:8px !important;
  line-height:1.35 !important;
  letter-spacing:.01em !important;
  opacity:.88 !important;
}
body.landing-page .secure-note i{
  font-size:9px !important;
  margin-right:4px !important;
}

.yalovi-marquee-wrap{
  width:min(1100px,92vw);
  margin:0 auto 48px;
  position:relative;
}
.yalovi-marquee{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  min-height:46px;
  display:flex;
  align-items:center;
  background:linear-gradient(135deg,rgba(111,45,189,.12),rgba(255,255,255,.025));
  border:1px solid rgba(139,92,246,.20);
  box-shadow:0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.yalovi-marquee::before,
.yalovi-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:3;
  pointer-events:none;
}
.yalovi-marquee::before{
  left:0;
  background:linear-gradient(90deg,#050508 0%,rgba(5,5,8,.92) 25%,rgba(5,5,8,0) 100%);
}
.yalovi-marquee::after{
  right:0;
  background:linear-gradient(270deg,#050508 0%,rgba(5,5,8,.92) 25%,rgba(5,5,8,0) 100%);
}
.yalovi-marquee-track{
  display:flex;
  align-items:center;
  gap:64px;
  white-space:nowrap;
  will-change:transform;
  animation:yaloviMarqueeLeft 32s linear infinite;
  padding:0 64px;
}
.yalovi-marquee-track span{
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
  text-shadow:0 0 24px rgba(139,92,246,.22);
}
.yalovi-marquee-track span::before{
  content:"✦";
  color:#8b5cf6;
  margin-right:14px;
}
@keyframes yaloviMarqueeLeft{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:760px){
  .yalovi-marquee-wrap{width:calc(100% - 24px);margin:0 auto 36px;}
  .yalovi-marquee{min-height:44px;border-radius:16px;}
  .yalovi-marquee::before,.yalovi-marquee::after{width:56px;}
  .yalovi-marquee-track{gap:40px;padding:0 40px;animation-duration:26s;}
  .yalovi-marquee-track span{font-size:11px;}
}

.portal-support-badge{
  width:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:11px 16px !important;
  margin:0 0 22px !important;
  border-radius:999px !important;
}


/* =========================================================
   HEADER + LANGUAGE + MARQUEE FINAL FIX
   ========================================================= */
.yalovi-header-language .landing-language-label.icon-only{
  display:inline-grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  margin:0 !important;
}
.yalovi-header-language .landing-language-label.icon-only span{
  display:none !important;
}
body.landing-page .secure-note{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
  font-size:8.5px !important;
  line-height:1.35 !important;
  width:100% !important;
}
body.landing-page .secure-note i{
  font-size:9.5px !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}
body.landing-page .secure-note span{
  display:inline-block !important;
}
.yalovi-marquee::before{
  background:linear-gradient(90deg, rgba(5,5,8,1) 0%, rgba(5,5,8,.94) 34%, rgba(5,5,8,0) 100%) !important;
}
.yalovi-marquee::after{
  background:linear-gradient(270deg, rgba(5,5,8,1) 0%, rgba(5,5,8,.94) 34%, rgba(5,5,8,0) 100%) !important;
}
body.has-global-header .wrap > header.nav:first-child,
body.has-global-header > .wrap > header.nav:first-child{
  display:none !important;
}
@media(max-width:760px){
  .yalovi-header-language .landing-language-label.icon-only{display:none !important;}
  body.landing-page .secure-note{font-size:8.5px !important;}
}


/* =========================================================
   LANGUAGE SELECTOR MINIMAL + MANAGE PLAYLISTS HEADER FIX
   Removes the extra icon and the outer glass card, keeping one
   clean inner language pill in the current global header.
   ========================================================= */
.yalovi-header-language.landing-language{
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.yalovi-header-language .landing-language-label,
.yalovi-header-language .landing-language-label.icon-only{
  display:none !important;
}
.yalovi-header-language .lang-switcher{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035)) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}
.yalovi-header-language .lang-btn{
  min-width:76px !important;
  height:38px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
}
.yalovi-header-language .lang-btn.active{
  background:linear-gradient(135deg,#ffffff,#ececf5) !important;
  color:#101014 !important;
}
body.has-global-header .wrap > header.nav,
body.has-global-header main > header.nav,
body.has-global-header .device-login-shell > header.nav{
  display:none !important;
}
@media(max-width:620px){
  .yalovi-header-language .lang-switcher{padding:4px !important;gap:4px !important;}
  .yalovi-header-language .lang-btn{min-width:46px !important;height:32px !important;padding:6px 8px !important;font-size:11px !important;}
  .yalovi-header-language .flag{width:20px !important;height:14px !important;}
}
@media(max-width:420px){
  .yalovi-header-language .lang-btn span:last-child{display:none !important;}
}

/* User playlist actions */
.playlist-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.btn.tiny{
  min-height:34px;
  padding:8px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1;
}
.btn.danger{
  background:linear-gradient(135deg,#7b2cff,#4c0d88) !important;
  border:1px solid rgba(199,125,255,.35) !important;
  color:#fff !important;
}
.btn.danger:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Payment logo boxes - clean white safe area */
.payment-method-pro .method-head{
  align-items:center !important;
  gap:18px !important;
}
.payment-method-pro .method-icon.payment-logo-box{
  width:76px !important;
  height:54px !important;
  flex:0 0 76px !important;
  border-radius:16px !important;
  background:#fff !important;
  padding:8px 10px !important;
  overflow:hidden !important;
  box-shadow:0 12px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
.payment-method-pro .payment-logo-box img{
  width:100% !important;
  height:100% !important;
  max-width:58px !important;
  max-height:34px !important;
  object-fit:contain !important;
  display:block !important;
  margin:auto !important;
}
@media(max-width:760px){
  .payment-method-pro .method-icon.payment-logo-box{
    width:70px !important;
    height:50px !important;
    flex-basis:70px !important;
  }
  .playlist-actions{justify-content:flex-start}
}

/* Yalovi modal alerts */
.yalovi-confirm-backdrop{
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.72);
  display:grid; place-items:center;
  padding:20px;
  backdrop-filter:blur(10px);
}
.yalovi-confirm-card{
  width:min(440px,92vw);
  border-radius:26px;
  padding:28px;
  background:linear-gradient(145deg,rgba(18,15,28,.98),rgba(5,5,10,.98));
  border:1px solid rgba(157,78,221,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  color:#fff;
  text-align:center;
}
.yalovi-confirm-icon{
  width:58px; height:58px; border-radius:20px;
  display:grid; place-items:center;
  margin:0 auto 16px;
  background:linear-gradient(135deg,#7b2cff,#3b0a68);
  color:#fff; font-size:24px;
}
.yalovi-confirm-card h3{margin:0 0 10px;font-size:22px}
.yalovi-confirm-card p{margin:0;color:rgba(255,255,255,.72);line-height:1.55}
.yalovi-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:520px){.yalovi-confirm-actions{grid-template-columns:1fr}}

/* Protected playlist PIN modal */
.yalovi-pin-card .yalovi-pin-input{
  width:100%;
  margin:14px 0 4px;
  text-align:center;
  letter-spacing:.22em;
  font-weight:900;
}
.yalovi-pin-card .yalovi-pin-input.input-error{
  border-color:rgba(255,87,87,.85)!important;
  box-shadow:0 0 0 4px rgba(255,87,87,.14)!important;
}

/* V155 - Playlist table overflow + custom scrollbar polish */
html,
body{
  overflow-x:hidden !important;
}

/* Brand scrollbars across the site */
*{
  scrollbar-width:thin;
  scrollbar-color:#8e35ff rgba(255,255,255,.08);
}
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:rgba(255,255,255,.055);
  border-radius:999px;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#b76cff,#5c109b);
  border-radius:999px;
  border:2px solid rgba(10,8,18,.86);
  box-shadow:0 0 18px rgba(157,78,221,.38);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg,#d7a0ff,#7a20d2);
}
*::-webkit-scrollbar-corner{
  background:transparent;
}

/* Avoid horizontal scrolling in Added Playlists */
.table-wrap{
  overflow-x:hidden !important;
  overflow-y:visible !important;
  border-radius:18px !important;
}
.table{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
.table th,
.table td{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  vertical-align:middle !important;
}
.table th:nth-child(1),
.table td:nth-child(1){width:15%;}
.table th:nth-child(2),
.table td:nth-child(2){width:9%;}
.table th:nth-child(3),
.table td:nth-child(3){width:39%;}
.table th:nth-child(4),
.table td:nth-child(4){width:12%;}
.table th:nth-child(5),
.table td:nth-child(5){width:12%;}
.table th:nth-child(6),
.table td:nth-child(6){width:13%;}
.playlist-actions{
  gap:7px !important;
  justify-content:flex-start !important;
}
.playlist-actions .btn.tiny{
  white-space:nowrap !important;
}
@media(max-width:900px){
  .table thead{display:none;}
  .table,
  .table tbody,
  .table tr,
  .table td{display:block;width:100% !important;}
  .table tr{
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .table td{
    border-bottom:0 !important;
    padding:7px 8px !important;
  }
  .table td:nth-child(1){font-weight:800;color:#fff;}
  .table td:nth-child(2),
  .table td:nth-child(4),
  .table td:nth-child(5){color:rgba(255,255,255,.72);}
  .playlist-actions{margin-top:8px;}
}


/* V156 - Icon-only playlist action buttons */
.playlist-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.playlist-actions .btn.tiny.icon-only,
.playlist-actions .playlist-action-icon{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:13px !important;
  line-height:1 !important;
  overflow:hidden !important;
}
.playlist-actions .btn.tiny.icon-only i,
.playlist-actions .playlist-action-icon i{
  margin:0 !important;
  font-size:16px !important;
  line-height:1 !important;
}
.table th:nth-child(6),
.table td:nth-child(6){
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  text-align:center !important;
}
.table td:nth-child(6){
  overflow:visible !important;
}
@media(max-width:900px){
  .table td:nth-child(6){width:100% !important;max-width:none !important;text-align:left !important;}
  .playlist-actions{justify-content:flex-start !important;}
}

/* V230 - Added Playlists table polish */
.table-wrap .table th,
.table-wrap .table td{
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.table-wrap .table th{
  font-size:11px !important;
  letter-spacing:.075em !important;
}
.table-wrap .table td{
  font-size:14px !important;
}
.table th:nth-child(1),
.table td:nth-child(1){width:23% !important;}
.table th:nth-child(2),
.table td:nth-child(2){width:8% !important;}
.table th:nth-child(3),
.table td:nth-child(3){width:34% !important;}
.table th:nth-child(4),
.table td:nth-child(4){width:8% !important;text-align:center !important;}
.table th:nth-child(5),
.table td:nth-child(5){width:12% !important;}
.table th:nth-child(6),
.table td:nth-child(6){width:15% !important;}
.pl-name span,
.pl-server span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.pl-type,
.pl-date,
.pl-lock{
  white-space:nowrap !important;
}
.pl-lock .bi-lock-fill{
  color:#b77cff;
  font-size:18px;
  filter:drop-shadow(0 0 8px rgba(183,124,255,.35));
}
.pl-unlocked{color:rgba(255,255,255,.45)}
.pl-actions-cell{padding-right:8px !important;}
.playlist-actions{
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.playlist-action-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
@media(max-width:900px){
  .table-wrap .table td{white-space:normal !important;}
  .pl-name span,.pl-server span{white-space:normal;}
  .playlist-actions{justify-content:flex-start !important;}
}


/* V299 - Playlist EPG icon-only table alignment fix */
.table-wrap{overflow-x:hidden!important;}
.table-wrap .table{table-layout:fixed!important;width:100%!important;}
.table-wrap .table th,
.table-wrap .table td{vertical-align:middle!important;}
.table th:nth-child(1),.table td:nth-child(1){width:19%!important;}
.table th:nth-child(2),.table td:nth-child(2){width:8%!important;}
.table th:nth-child(3),.table td:nth-child(3){width:32%!important;}
.table th:nth-child(4),.table td:nth-child(4){width:8%!important;text-align:center!important;}
.table th:nth-child(5),.table td:nth-child(5){width:11%!important;text-align:center!important;}
.table th:nth-child(6),.table td:nth-child(6){width:8%!important;min-width:0!important;max-width:none!important;text-align:center!important;padding-left:4px!important;padding-right:4px!important;overflow:visible!important;}
.table th:nth-child(7),.table td:nth-child(7){width:14%!important;text-align:right!important;}
.pl-actions-cell{padding-left:4px!important;padding-right:0!important;overflow:visible!important;}
.playlist-actions{justify-content:flex-end!important;gap:7px!important;flex-wrap:nowrap!important;min-width:86px;}
.playlist-actions .playlist-action-icon{width:36px!important;height:36px!important;min-width:36px!important;border-radius:12px!important;}
.epg-icon-cell{overflow:visible!important;text-align:center!important;}
.epg-icon-btn{width:36px!important;height:36px!important;min-width:36px!important;border-radius:12px!important;}
@media(max-width:900px){
  .table th:nth-child(6),.table td:nth-child(6),.table th:nth-child(7),.table td:nth-child(7){width:100%!important;max-width:none!important;text-align:left!important;}
  .epg-icon-cell{text-align:left!important;}
}

/* V300 - EPG Source Library modal */
.epg-source-manager-card{max-width:620px!important;width:min(620px,94vw)!important;}
.epg-source-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;}
.epg-source-grid label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.58);font-weight:900;}
.epg-source-select{appearance:none;width:100%;height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));color:#fff;padding:0 14px;font-weight:800;outline:none;}
.epg-source-select option{background:#17111f;color:#fff;}
.epg-source-mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.epg-mode-chip{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 8px;text-align:center;background:rgba(255,255,255,.05);color:#fff;font-weight:900;cursor:pointer;transition:.18s ease;}
.epg-mode-chip:hover{border-color:rgba(210,160,255,.45);}
.epg-mode-chip.active{background:linear-gradient(135deg,rgba(142,55,255,.72),rgba(82,15,142,.88));border-color:rgba(210,160,255,.65);box-shadow:0 0 18px rgba(142,55,255,.22);}
.epg-custom-wrap.is-hidden,.epg-library-wrap.is-hidden{display:none;}
.epg-icon-btn.library{background:rgba(0,196,255,.14)!important;border-color:rgba(0,196,255,.34)!important;color:#fff!important;}
@media(max-width:720px){.epg-source-mode-row{grid-template-columns:1fr}.epg-source-actions{grid-template-columns:1fr!important}}

/* V301 - CPN custom dropdown for EPG Source Library */
.epg-source-manager-card{overflow:visible!important;}
.epg-library-wrap{position:relative;z-index:20;}
.yalovi-custom-select{position:relative;width:100%;z-index:25;}
.yalovi-select-trigger{
  width:100%;height:52px;border-radius:18px;border:1px solid rgba(190,115,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 16px 0 18px;font-weight:900;letter-spacing:.01em;cursor:pointer;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(120,43,220,.20),0 12px 28px rgba(0,0,0,.20);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.yalovi-select-trigger:hover,.yalovi-custom-select.open .yalovi-select-trigger{
  border-color:rgba(210,160,255,.72);background:linear-gradient(180deg,rgba(142,55,255,.18),rgba(255,255,255,.04));
  box-shadow:0 0 24px rgba(142,55,255,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
.yalovi-select-trigger i{font-size:15px;color:#d7b8ff;transition:transform .18s ease;}
.yalovi-custom-select.open .yalovi-select-trigger i{transform:rotate(180deg);}
.yalovi-select-menu{
  position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;max-height:260px;overflow-y:auto;
  border:1px solid rgba(190,115,255,.38);border-radius:18px;background:rgba(14,10,20,.98);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 28px rgba(142,55,255,.22);padding:8px;z-index:9999;
  scrollbar-width:thin;scrollbar-color:#8e37ff rgba(255,255,255,.06);
}
.yalovi-select-menu::-webkit-scrollbar{width:8px;}
.yalovi-select-menu::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:99px;}
.yalovi-select-menu::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a650ff,#5c0fab);border-radius:99px;}
.yalovi-custom-select.open .yalovi-select-menu{display:block;animation:yaloviDropIn .16s ease both;}
@keyframes yaloviDropIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.yalovi-select-option{
  width:100%;border:0;border-radius:14px;background:transparent;color:#fff;text-align:left;cursor:pointer;
  padding:13px 14px;display:flex;align-items:center;transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.yalovi-select-option span{font-weight:900;font-size:14px;line-height:1.2;}
.yalovi-select-option small{font-size:11px;color:rgba(255,255,255,.56);font-weight:600;line-height:1.25;}
.yalovi-select-option:hover,.yalovi-select-option.active{
  background:linear-gradient(135deg,rgba(142,55,255,.72),rgba(82,15,142,.76));
  box-shadow:inset 0 0 0 1px rgba(220,185,255,.24),0 6px 18px rgba(142,55,255,.22);
}
.yalovi-select-option:hover small,.yalovi-select-option.active small{color:rgba(255,255,255,.78);}
.epg-source-current[data-library-url]{font-size:11px;line-height:1.45;color:rgba(255,255,255,.58);max-height:34px;overflow:hidden;text-overflow:ellipsis;}


/* V304 - Clean numbered EPG library list, left aligned */
.yalovi-select-trigger span[data-epg-library-label]{
  display:block!important;
  width:100%!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.yalovi-select-option{
  justify-content:flex-start!important;
  gap:12px!important;
  text-align:left!important;
  padding:13px 16px!important;
}
.yalovi-select-option .epg-option-number{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:26px!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  font-size:12px!important;
  line-height:1!important;
  color:#e9d6ff!important;
  background:rgba(142,55,255,.18)!important;
  border:1px solid rgba(210,160,255,.25)!important;
}
.yalovi-select-option .epg-option-title{
  flex:1 1 auto!important;
  text-align:left!important;
  font-weight:900!important;
  font-size:14px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.yalovi-select-option:hover .epg-option-number,
.yalovi-select-option.active .epg-option-number{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.30)!important;
}


/* V305 - EPG library compact left list: 01 - Source Name */
.yalovi-select-option{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:0!important;
  text-align:left!important;
  padding:13px 18px!important;
}
.yalovi-select-option .epg-option-number{
  display:none!important;
}
.yalovi-select-option .epg-option-title{
  flex:1 1 auto!important;
  width:100%!important;
  display:block!important;
  text-align:left!important;
  font-weight:900!important;
  font-size:14px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.yalovi-select-trigger span[data-epg-library-label]{
  text-align:left!important;
}


/* V312 - Playlist Library separate tab, one card per row */
.playlist-library-section .playlist-library-title{margin-top:0}
.playlist-library-section .playlist-library-grid{grid-template-columns:1fr;max-width:760px}
.playlist-library-section .playlist-library-card{width:100%;max-width:760px}
@media(min-width:981px){.playlist-library-section .playlist-card-actions{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* V313 - Playlist Library active first, pulsing active indicator, expiration line */
.playlist-status-badge.active{display:inline-flex;align-items:center;gap:7px;}
.playlist-live-dot{width:9px;height:9px;border-radius:50%;background:#28f58f;box-shadow:0 0 0 rgba(40,245,143,.65);display:inline-block;animation:yaloviPulseGreen 1.35s infinite;}
@keyframes yaloviPulseGreen{0%{box-shadow:0 0 0 0 rgba(40,245,143,.65)}70%{box-shadow:0 0 0 9px rgba(40,245,143,0)}100%{box-shadow:0 0 0 0 rgba(40,245,143,0)}}
.playlist-library-section .playlist-card-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}

/* V315 - protected playlist edit feedback toast */
.yalovi-toast-box{position:fixed;right:28px;bottom:28px;z-index:999999;display:grid;gap:10px;max-width:360px;pointer-events:none}
.yalovi-toast{opacity:0;transform:translateY(10px);border-radius:16px;padding:13px 16px;background:rgba(20,18,28,.96);border:1px solid rgba(183,124,255,.28);box-shadow:0 18px 35px rgba(0,0,0,.35);color:#fff;font-weight:800;line-height:1.35;transition:.22s ease}
.yalovi-toast.show{opacity:1;transform:translateY(0)}
.yalovi-toast.error{border-color:rgba(255,70,70,.35);background:rgba(55,18,26,.96)}
.yalovi-toast.info{border-color:rgba(0,196,255,.28)}

/* =========================================================
   V381 - Playlist Manager protected access card refinement
   ========================================================= */
.portal-access-card{
  position:relative;
  overflow:hidden;
  padding:30px !important;
  border-radius:28px !important;
  background:linear-gradient(145deg,rgba(14,13,20,.96),rgba(13,9,20,.90)) !important;
  border:1px solid rgba(181,124,255,.20) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.portal-access-card::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-110px;
  top:-125px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,45,189,.22),rgba(111,45,189,0) 68%);
  pointer-events:none;
}
.portal-access-card > *{position:relative;z-index:1}
.portal-access-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.portal-access-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#d8b9ff;
  background:rgba(111,45,189,.15);
  border:1px solid rgba(183,124,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.24);
}
.portal-access-icon i{font-size:20px;color:#d8b9ff !important}
.portal-access-eyebrow{
  display:block;
  margin-bottom:4px;
  color:#b991ec;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.portal-access-head h2{margin:0;font-size:24px;line-height:1.15;color:#fff}
.portal-access-copy{margin:0 0 20px !important;color:rgba(255,255,255,.68) !important;font-size:13px !important;line-height:1.65 !important}
.portal-access-actions{display:grid;gap:10px}
.portal-access-action{
  min-height:58px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.portal-access-action:hover,.portal-access-action:focus-visible{transform:translateY(-1px);outline:none}
.portal-access-action-primary{
  background:linear-gradient(135deg,#7728cf,#541195);
  border-color:rgba(205,158,255,.34);
  box-shadow:0 13px 30px rgba(82,17,149,.26),inset 0 1px 0 rgba(255,255,255,.10);
}
.portal-access-action-primary:hover,.portal-access-action-primary:focus-visible{
  border-color:rgba(223,190,255,.60);
  box-shadow:0 16px 34px rgba(82,17,149,.34),0 0 0 3px rgba(142,55,255,.10);
}
.portal-access-action-secondary{background:rgba(255,255,255,.045);border-color:rgba(183,124,255,.18)}
.portal-access-action-secondary:hover,.portal-access-action-secondary:focus-visible{background:rgba(111,45,189,.12);border-color:rgba(183,124,255,.36)}
.portal-access-action-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(0,0,0,.17);border:1px solid rgba(255,255,255,.08)}
.portal-access-action-icon i{font-size:14px;color:#d9bdff !important}
.portal-access-action-text{display:block;min-width:0;text-align:left}
.portal-access-action-text strong{display:block;font-size:12px;line-height:1.2;color:#fff}
.portal-access-action-text small{display:block;margin-top:3px;font-size:10px;line-height:1.25;color:rgba(255,255,255,.56);font-weight:700}
.portal-access-action-arrow{font-size:14px;color:#c99cff !important}
.portal-access-status{
  margin-top:16px;
  padding:14px 15px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  border-radius:16px;
  background:rgba(255,176,32,.065);
  border:1px solid rgba(255,176,32,.18);
  color:#fff;
}
.portal-access-status > i{margin-top:2px;font-size:15px;color:#ffc96b !important}
.portal-access-status strong{display:block;margin:0 0 4px;font-size:11px;line-height:1.2;color:#ffe4b0;text-transform:uppercase;letter-spacing:.06em}
.portal-access-status span{display:block;font-size:11px;line-height:1.45;color:rgba(255,255,255,.68)}
@media(max-width:900px){
  .portal-access-card{padding:22px !important}
  .portal-access-head h2{font-size:22px}
  .portal-access-action{grid-template-columns:32px minmax(0,1fr) 16px}
}

/* =========================================================
   V382 - Activation plan polish + professional verified state
   + global footer viewport closure
   ========================================================= */

/* Trial remains the primary Roku-purple action with white copy. */
body.landing-page .activation-options .trial-btn,
body.landing-page .activation-options .trial-btn span,
body.landing-page .activation-options .trial-btn i{
  color:#fff !important;
}
body.landing-page .activation-options .trial-btn{
  background:linear-gradient(135deg,#7a2ed1,#541195) !important;
  border:1px solid rgba(218,184,255,.28) !important;
  box-shadow:0 12px 30px rgba(84,17,149,.28) !important;
}

/* Paid plan actions use the requested solid yellow + black system. */
body.landing-page .activation-options .activation-plan-btn{
  background:#f5c84b !important;
  color:#090909 !important;
  border:1px solid #f5c84b !important;
  box-shadow:0 10px 24px rgba(245,200,75,.14) !important;
  text-shadow:none !important;
}
body.landing-page .activation-options .activation-plan-btn span,
body.landing-page .activation-options .activation-plan-btn i{
  color:#090909 !important;
}
body.landing-page .activation-options .activation-plan-btn:hover,
body.landing-page .activation-options .activation-plan-btn:focus-visible{
  background:#ffd965 !important;
  border-color:#ffe18a !important;
  color:#050505 !important;
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 13px 30px rgba(245,200,75,.20),0 0 0 3px rgba(245,200,75,.08) !important;
}

/* Activation feedback is a first-class status surface, not raw text. */
body.landing-page .activation-status-card{
  position:relative;
  overflow:hidden;
  margin-top:18px !important;
  padding:16px 17px !important;
  min-height:0 !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(18,17,25,.94),rgba(13,11,19,.90)) !important;
  border:1px solid rgba(183,124,255,.18) !important;
  color:rgba(255,255,255,.78) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.landing-page .activation-status-card::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-80px;
  top:-92px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,45,189,.18),transparent 70%);
  pointer-events:none;
}
body.landing-page .activation-status-card > *{position:relative;z-index:1}
body.landing-page .activation-status-card.activation-status-verified{
  border-color:rgba(76,211,145,.22) !important;
  background:linear-gradient(145deg,rgba(15,22,21,.94),rgba(13,11,19,.92)) !important;
}
.activation-status-head{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
}
.activation-status-shield{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(52,211,153,.10);
  border:1px solid rgba(52,211,153,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.activation-status-shield i{margin:0 !important;color:#67e8ad !important;font-size:18px !important}
.activation-status-heading{min-width:0}
.activation-status-kicker{
  display:block;
  margin-bottom:3px;
  color:#82edbc;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.activation-status-heading strong{display:block;color:#fff;font-size:14px;line-height:1.2}
.activation-state-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  background:rgba(255,255,255,.06);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.activation-state-badge.active,.activation-state-badge.trial{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.25);color:#9bf4cb}
.activation-state-badge.pending{background:rgba(245,200,75,.10);border-color:rgba(245,200,75,.24);color:#ffe49a}
.activation-state-badge.expired,.activation-state-badge.blocked{background:rgba(255,89,89,.10);border-color:rgba(255,89,89,.24);color:#ffb6b6}
.activation-status-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:13px;
}
.activation-status-details > div{
  min-width:0;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.07);
}
.activation-status-details span{display:block;color:rgba(255,255,255,.48);font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.activation-status-details strong{display:block;margin-top:4px;color:#fff;font-size:11px;line-height:1.25;overflow-wrap:anywhere}
body.landing-page .activation-status-help{
  margin:11px 0 0 !important;
  color:rgba(255,255,255,.58) !important;
  font-size:10px !important;
  line-height:1.45 !important;
}

/* Close short public pages at the viewport edge instead of exposing
   a separate black strip below the footer. Tall pages remain natural. */
body:has(.yalovi-footer){
  min-height:100vh !important;
  display:flex;
  flex-direction:column;
}
body:has(.yalovi-footer) > .yalovi-footer{
  flex:1 0 auto;
}
body:has(.yalovi-footer) > .support-footer-force{
  width:100%;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
body:has(.yalovi-footer) > .support-footer-force .yalovi-footer{
  flex:1 0 auto;
}
.yalovi-footer{
  margin-bottom:0 !important;
}

@media(max-width:620px){
  .activation-status-head{grid-template-columns:38px minmax(0,1fr)}
  .activation-state-badge{grid-column:1/-1;justify-self:start;margin-left:49px}
  .activation-status-details{grid-template-columns:1fr}
}


/* =========================================================
   V383 - Portal action color consistency + Cloud Backup polish
   ========================================================= */

/* Requested yellow secondary actions: scoped to the exact portal controls. */
.portal-cancel-yellow,
.method-actions .billing-year-action,
.cloud-backup-actions .cloud-backup-delete-action{
  background:#f5c84b !important;
  border-color:#f5c84b !important;
  color:#090909 !important;
  text-shadow:none !important;
  box-shadow:0 10px 24px rgba(245,200,75,.13) !important;
}
.portal-cancel-yellow i,
.method-actions .billing-year-action i,
.cloud-backup-actions .cloud-backup-delete-action i{
  color:#090909 !important;
}
.portal-cancel-yellow:hover,
.portal-cancel-yellow:focus-visible,
.method-actions .billing-year-action:hover,
.method-actions .billing-year-action:focus-visible,
.cloud-backup-actions .cloud-backup-delete-action:hover,
.cloud-backup-actions .cloud-backup-delete-action:focus-visible{
  background:#ffd965 !important;
  border-color:#ffe18a !important;
  color:#050505 !important;
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 13px 30px rgba(245,200,75,.19),0 0 0 3px rgba(245,200,75,.07) !important;
}

/* Compact, professional Cloud Backup information surfaces. */
.cloud-backup-grid{
  gap:10px !important;
  margin:16px 0 12px !important;
}
.cloud-backup-card.cloud-backup-stat{
  min-height:86px !important;
  padding:13px 14px !important;
  border-radius:17px !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(13,11,19,.72)) !important;
  border:1px solid rgba(183,124,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.16) !important;
}
.cloud-backup-stat-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(111,45,189,.13);
  border:1px solid rgba(183,124,255,.18);
}
.cloud-backup-stat-icon i{
  margin:0 !important;
  color:#c99cff !important;
  font-size:14px !important;
}
.cloud-backup-stat-copy{min-width:0}
.cloud-backup-card.cloud-backup-stat .cloud-backup-stat-copy strong{
  margin:0 0 4px !important;
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:.075em !important;
  color:rgba(255,255,255,.49) !important;
}
.cloud-backup-card.cloud-backup-stat .cloud-backup-stat-copy span{
  display:block !important;
  font-size:13px !important;
  line-height:1.23 !important;
  font-weight:850 !important;
  color:#fff !important;
  word-break:normal !important;
  overflow-wrap:anywhere;
}
.cloud-backup-card.cloud-backup-details{
  min-height:0 !important;
  padding:14px 15px !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.042),rgba(13,11,19,.76)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.cloud-backup-details-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
}
.cloud-backup-details-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(111,45,189,.11);
  border:1px solid rgba(183,124,255,.16);
}
.cloud-backup-details-icon i{margin:0 !important;color:#c99cff !important;font-size:13px !important}
.cloud-backup-card.cloud-backup-details .cloud-backup-details-head strong{
  margin:0 0 2px !important;
  color:#fff !important;
  font-size:10px !important;
  letter-spacing:.065em !important;
}
.cloud-backup-details-head small{
  display:block;
  color:rgba(255,255,255,.43);
  font-size:9.5px;
  line-height:1.3;
  font-weight:650;
}
.cloud-backup-card.cloud-backup-details .cloud-backup-muted{
  margin:0 !important;
  padding:10px 11px !important;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.055);
  color:rgba(255,255,255,.61) !important;
  font-size:10.5px !important;
  line-height:1.48 !important;
  overflow-wrap:anywhere;
}

@media(max-width:900px){
  .cloud-backup-card.cloud-backup-stat{
    grid-template-columns:32px minmax(0,1fr) !important;
    min-height:76px !important;
  }
}


/* =========================================================
   V384 - Missing yellow portal actions + selector specificity fix
   ========================================================= */
/*
   .btn.alt carries an !important background in the global Roku palette.
   Use compound selectors here so the approved yellow action surface wins
   deterministically without changing unrelated secondary buttons.
*/
.btn.alt.portal-cancel-yellow,
.btn.alt.portal-xc-yellow,
.playlist-card-btn.portal-edit-yellow{
  background:#f5c84b !important;
  border-color:#f5c84b !important;
  color:#090909 !important;
  text-shadow:none !important;
  box-shadow:0 10px 24px rgba(245,200,75,.13) !important;
}
.btn.alt.portal-cancel-yellow i,
.btn.alt.portal-xc-yellow i,
.playlist-card-btn.portal-edit-yellow i,
.playlist-card-btn.portal-edit-yellow span{
  color:#090909 !important;
}
.btn.alt.portal-cancel-yellow:hover,
.btn.alt.portal-cancel-yellow:focus-visible,
.btn.alt.portal-xc-yellow:hover,
.btn.alt.portal-xc-yellow:focus-visible,
.playlist-card-btn.portal-edit-yellow:hover,
.playlist-card-btn.portal-edit-yellow:focus-visible{
  background:#ffd965 !important;
  border-color:#ffe18a !important;
  color:#050505 !important;
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 13px 30px rgba(245,200,75,.19),0 0 0 3px rgba(245,200,75,.07) !important;
}


/* =========================================================
   V388 - Premium portal notices + pastel device summary cards
   ========================================================= */

.yalovi-pin-card .btn.alt.portal-pin-cancel-yellow{
  background:#f5c84b !important;
  border-color:#f5c84b !important;
  color:#090909 !important;
  text-shadow:none !important;
  box-shadow:0 10px 24px rgba(245,200,75,.15) !important;
}
.yalovi-pin-card .btn.alt.portal-pin-cancel-yellow i{color:#090909 !important;margin-right:7px}
.yalovi-pin-card .btn.alt.portal-pin-cancel-yellow:hover,
.yalovi-pin-card .btn.alt.portal-pin-cancel-yellow:focus-visible{
  background:#ffd965 !important;
  border-color:#ffe18a !important;
  color:#050505 !important;
  outline:none;
  transform:translateY(-1px);
  box-shadow:0 13px 30px rgba(245,200,75,.20),0 0 0 3px rgba(245,200,75,.08) !important;
}

.device-summary .summary-item{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:15px 16px !important;
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 26px rgba(0,0,0,.15);
}
.device-summary .summary-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.98;
  pointer-events:none;
}
.device-summary .summary-item strong{
  font-size:10.5px !important;
  margin-bottom:6px !important;
  color:rgba(255,255,255,.58) !important;
}
.device-summary .summary-device-id{border-color:rgba(180,145,255,.25) !important}
.device-summary .summary-device-id::before{background:linear-gradient(145deg,rgba(166,123,255,.15),rgba(77,50,119,.075))}
.device-summary .summary-device-key{border-color:rgba(104,193,255,.25) !important}
.device-summary .summary-device-key::before{background:linear-gradient(145deg,rgba(91,190,255,.145),rgba(35,87,121,.07))}
.device-summary .summary-status{border-color:rgba(108,220,171,.24) !important}
.device-summary .summary-status::before{background:linear-gradient(145deg,rgba(87,210,157,.14),rgba(34,99,72,.07))}
.device-summary .summary-expiration{border-color:rgba(245,200,75,.24) !important}
.device-summary .summary-expiration::before{background:linear-gradient(145deg,rgba(245,200,75,.135),rgba(115,88,26,.065))}

.premium-notice{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:15px 16px;
  border-radius:19px;
  background:linear-gradient(145deg,rgba(255,255,255,.062),rgba(13,10,20,.76));
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
}
.premium-notice::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-70px;
  top:-78px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,124,255,.10),transparent 68%);
  pointer-events:none;
}
.premium-notice-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(142,55,255,.13);
  border:1px solid rgba(190,135,255,.19);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.premium-notice-icon i{margin:0 !important;font-size:17px;color:#caa2ff}
.premium-notice-copy{min-width:0}
.premium-notice-kicker{
  display:block;
  margin-bottom:3px;
  color:rgba(255,255,255,.48);
  font-size:9px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.premium-notice-copy strong{display:block;margin:0 0 4px;color:#fff;font-size:13.5px;line-height:1.22;font-weight:900}
.premium-notice-copy p{margin:0;color:rgba(255,255,255,.65);font-size:11.5px;line-height:1.47}
.premium-notice-chip{
  position:relative;
  z-index:1;
  white-space:nowrap;
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.095);
  color:rgba(255,255,255,.77);
  font-size:9.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.transfer-notice-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:4px 0 26px}
.transfer-notice-info{
  border-color:rgba(83,205,236,.19);
  background:linear-gradient(145deg,rgba(37,146,174,.09),rgba(13,10,20,.78));
}
.transfer-notice-info .premium-notice-icon{background:rgba(49,196,230,.10);border-color:rgba(77,213,244,.18)}
.transfer-notice-info .premium-notice-icon i{color:#68ddf5}
.transfer-notice-limit{
  border-color:rgba(245,200,75,.20);
  background:linear-gradient(145deg,rgba(166,123,40,.085),rgba(13,10,20,.78));
}
.transfer-notice-limit .premium-notice-icon{background:rgba(245,200,75,.10);border-color:rgba(245,200,75,.18)}
.transfer-notice-limit .premium-notice-icon i{color:#f5c84b}
.transfer-notice-limit .premium-notice-chip{background:rgba(245,200,75,.09);border-color:rgba(245,200,75,.16);color:#ffe7a0}

.billing-trial-notice{
  margin:0 0 18px;
  border-color:rgba(81,206,235,.20);
  background:linear-gradient(145deg,rgba(27,139,166,.09),rgba(13,10,20,.78));
}
.billing-trial-notice .premium-notice-icon{background:rgba(49,196,230,.10);border-color:rgba(77,213,244,.18)}
.billing-trial-notice .premium-notice-icon i{color:#68ddf5}
.billing-trial-notice .premium-notice-chip{background:rgba(49,196,230,.08);border-color:rgba(77,213,244,.17);color:#bdf5ff}

@media(max-width:760px){
  .premium-notice{grid-template-columns:40px minmax(0,1fr);padding:14px}
  .premium-notice-icon{width:40px;height:40px}
  .premium-notice-chip{grid-column:2;justify-self:start;margin-top:2px}
}


/* ============================================================
   YALOVI WEB PANEL v3.91 — PUBLIC APP EXPERIENCE SHOWCASE
   Homepage-only refinement: inline feature headings + protected
   screenshot marquee. No lightbox, no zoom, no full-size links.
   ============================================================ */
.why-card-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  min-width:0;
}
.why-card-head .why-icon{
  flex:0 0 50px;
  width:50px;
  height:50px;
  margin:0;
  border-radius:17px;
  font-size:22px;
}
.why-card-head h3{
  margin:0;
  min-width:0;
  line-height:1.2;
}

.yalovi-app-showcase{
  width:min(1180px, calc(100% - 36px));
  margin:88px auto 0;
  position:relative;
  overflow:hidden;
}
.yalovi-app-showcase .showcase-heading{
  width:min(760px, calc(100% - 36px));
  margin-bottom:34px;
}
.yalovi-showcase-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:10px 0 18px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  user-select:none;
  -webkit-user-select:none;
}
.yalovi-showcase-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:yaloviShowcaseMoveLeft 62s linear infinite;
}
.yalovi-showcase-viewport:hover .yalovi-showcase-track{
  animation-play-state:paused;
}
.yalovi-showcase-group{
  display:flex;
  align-items:stretch;
  gap:18px;
  padding-right:18px;
}
.yalovi-showcase-card{
  flex:0 0 auto;
  width:410px;
  margin:0;
  perspective:1000px;
}
.yalovi-showcase-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:22px;
  background:#0a0810;
  border:1px solid rgba(139,92,246,.24);
  box-shadow:
    0 20px 50px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.055);
  transform:translate3d(0,0,0) rotateX(0) rotateY(0);
  transition:transform .32s cubic-bezier(.22,.61,.36,1), border-color .32s ease, box-shadow .32s ease;
}
.yalovi-showcase-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,4,12,.02), rgba(6,4,12,.16));
}
.yalovi-showcase-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  filter:saturate(.92) contrast(.96) brightness(.92);
  transition:filter .32s ease;
}
.yalovi-showcase-sheen{
  position:absolute;
  z-index:2;
  inset:-30% auto -30% -45%;
  width:35%;
  transform:skewX(-14deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:0;
  pointer-events:none;
}
.yalovi-showcase-chip{
  position:absolute;
  z-index:3;
  left:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(7,5,12,.72);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
  font-size:11px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.yalovi-showcase-card:hover .yalovi-showcase-frame{
  transform:translateY(-5px) rotateX(1.2deg) rotateY(-1.2deg);
  border-color:rgba(167,139,250,.48);
  box-shadow:
    0 28px 62px rgba(0,0,0,.42),
    0 0 26px rgba(111,45,189,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.yalovi-showcase-card:hover img{
  filter:saturate(.98) contrast(.98) brightness(.95);
}
.yalovi-showcase-card:hover .yalovi-showcase-sheen{
  opacity:1;
  animation:yaloviShowcaseSheen .85s ease both;
}
.yalovi-app-showcase + .yalovi-how-section{
  margin-top:82px;
}
@keyframes yaloviShowcaseMoveLeft{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
@keyframes yaloviShowcaseSheen{
  from{left:-45%;}
  to{left:125%;}
}
@media(max-width:900px){
  .yalovi-showcase-card{width:340px;}
  .yalovi-showcase-group{gap:14px;padding-right:14px;}
  .yalovi-showcase-track{animation-duration:58s;}
}
@media(max-width:620px){
  .yalovi-app-showcase{margin-top:62px;}
  .yalovi-app-showcase .showcase-heading{width:calc(100% - 24px);margin-bottom:26px;}
  .yalovi-showcase-card{width:286px;}
  .yalovi-showcase-frame{border-radius:18px;}
  .yalovi-showcase-chip{left:10px;bottom:10px;min-height:27px;padding:0 9px;font-size:10px;}
  .yalovi-showcase-track{animation-duration:54s;}
  .yalovi-app-showcase + .yalovi-how-section{margin-top:62px;}
}
@media(prefers-reduced-motion:reduce){
  .yalovi-showcase-track{animation:none;transform:none;}
  .yalovi-showcase-viewport{overflow-x:auto;scrollbar-width:none;}
  .yalovi-showcase-viewport::-webkit-scrollbar{display:none;}
  .yalovi-showcase-card:hover .yalovi-showcase-sheen{animation:none;}
}

/* =========================================================
   YALOVI WEB PANEL v3.93 — COMPACT PREMIUM PUBLIC FAQ
   ========================================================= */
.yalovi-faq-section{
  width:min(1180px, calc(100% - 36px));
  margin:68px auto 0;
  position:relative;
}
.yalovi-faq-section .faq-heading{
  max-width:760px;
  margin-bottom:24px;
}
.yalovi-faq-section .faq-heading h2{
  margin-bottom:8px;
}
.yalovi-faq-section .faq-heading p{
  max-width:720px;
}
.yalovi-faq-list{
  width:min(100%, 1040px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:10px 12px;
}
.yalovi-faq-item{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.024));
  border:1px solid rgba(255,255,255,.095);
  box-shadow:0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(132%);
  -webkit-backdrop-filter:blur(16px) saturate(132%);
  transition:border-color .24s ease, box-shadow .24s ease, background .24s ease, transform .24s ease;
}
.yalovi-faq-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,.10), transparent 30%),
    linear-gradient(120deg, rgba(255,255,255,.05), transparent 30%, transparent 72%, rgba(111,45,189,.04));
  opacity:.7;
}
.yalovi-faq-item:hover{
  transform:translateY(-1px);
  border-color:rgba(139,92,246,.24);
  box-shadow:0 16px 42px rgba(0,0,0,.29), 0 0 22px rgba(111,45,189,.06), inset 0 1px 0 rgba(255,255,255,.07);
}
.yalovi-faq-item.is-open{
  border-color:rgba(139,92,246,.34);
  background:linear-gradient(145deg, rgba(111,45,189,.115), rgba(255,255,255,.026));
  box-shadow:0 18px 48px rgba(0,0,0,.31), 0 0 24px rgba(111,45,189,.08), inset 0 1px 0 rgba(255,255,255,.075);
}
.yalovi-faq-question{
  position:relative;
  z-index:1;
  width:100%;
  min-height:60px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 30px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.yalovi-faq-question:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(167,139,250,.80), inset 0 0 0 4px rgba(111,45,189,.14);
}
.yalovi-faq-index{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(111,45,189,.14);
  border:1px solid rgba(139,92,246,.22);
  color:#bca7ff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.07em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.yalovi-faq-question-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:13.5px;
  line-height:1.3;
  font-weight:840;
  letter-spacing:-.008em;
}
.yalovi-faq-question-main > i{
  flex:0 0 auto;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#c7b6ff;
  background:rgba(111,45,189,.12);
  border:1px solid rgba(139,92,246,.17);
  font-size:12px;
}
.yalovi-faq-toggle{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.075);
  color:#dcd3ec;
  font-size:12px;
  transition:transform .30s cubic-bezier(.2,.8,.2,1), background .24s ease, border-color .24s ease, color .24s ease;
}
.yalovi-faq-item.is-open .yalovi-faq-toggle{
  transform:rotate(45deg);
  color:#fff;
  background:linear-gradient(135deg, rgba(139,92,246,.80), rgba(111,45,189,.70));
  border-color:rgba(167,139,250,.42);
}
.yalovi-faq-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.22,.72,.18,1);
}
.yalovi-faq-item.is-open .yalovi-faq-panel{
  grid-template-rows:1fr;
}
.yalovi-faq-panel-inner{
  min-height:0;
  overflow:hidden;
}
.yalovi-faq-panel-inner p{
  margin:0 42px 0 54px;
  padding:10px 0 14px;
  color:rgba(255,255,255,.67);
  font-size:12.25px;
  line-height:1.55;
  font-weight:610;
  border-top:1px solid rgba(255,255,255,.06);
}
.yalovi-faq-item.is-open .yalovi-faq-panel-inner p{
  color:rgba(255,255,255,.76);
}
@media(max-width:860px){
  .yalovi-faq-list{
    grid-template-columns:1fr;
    width:min(100%, 760px);
    gap:9px;
  }
}
@media(max-width:720px){
  .yalovi-faq-section{
    width:calc(100% - 24px);
    margin-top:54px;
  }
  .yalovi-faq-section .faq-heading{margin-bottom:18px;}
  .yalovi-faq-question{
    min-height:58px;
    grid-template-columns:32px minmax(0,1fr) 28px;
    gap:9px;
    padding:9px 10px;
  }
  .yalovi-faq-index{
    width:30px;
    height:30px;
    border-radius:9px;
    font-size:9px;
  }
  .yalovi-faq-question-main{
    gap:7px;
    font-size:13px;
  }
  .yalovi-faq-question-main > i{
    width:25px;
    height:25px;
    border-radius:8px;
    font-size:11px;
  }
  .yalovi-faq-toggle{
    width:27px;
    height:27px;
    border-radius:8px;
  }
  .yalovi-faq-panel-inner p{
    margin:0 12px 0 48px;
    padding-top:9px;
    padding-bottom:12px;
    font-size:12px;
    line-height:1.52;
  }
}
@media(max-width:430px){
  .yalovi-faq-question{
    grid-template-columns:30px minmax(0,1fr) 27px;
  }
  .yalovi-faq-question-main > i{display:none;}
  .yalovi-faq-panel-inner p{
    margin-left:44px;
    margin-right:11px;
  }
}
@media(prefers-reduced-motion:reduce){
  .yalovi-faq-item,
  .yalovi-faq-toggle,
  .yalovi-faq-panel{
    transition:none !important;
  }
}