:root{
  --bg:#030406;
  --text:#ffffff;
  --muted:#9fb0b6;
  --accent1:#6f4cff;
  --accent2:#00e6c9;
  --accent3:#ff5fa8;
  --card-border: rgba(255,255,255,0.04);
  --radius:16px;
  --blur:12px;
  --maxw:1240px;
  --shadow: 0 16px 50px rgba(0,0,0,0.7);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

html,body{height:100%}
body{
  margin:0;
  font-family:'Vazirmatn', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px; overflow-x:hidden;
}

/* Canvas background */
#ai-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; display:block; }
.bg-overlay{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 340px at 10% 10%, rgba(111,76,255,0.045), transparent 10%),
    radial-gradient(520px 260px at 92% 88%, rgba(0,230,200,0.03), transparent 8%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  mix-blend-mode: screen; opacity:0.98;
}

/* ---------- TLD multi-select chips (limitable + scroll) ---------- */
.tld-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;

  /* limit height + enable scroll when many items */
  max-height:140px;        /* change as you like */
  padding:6px;
  overflow:auto;
  box-sizing:border-box;
}

/* aesthetic: subtle scrollbar for modern browsers */
.tld-chips::-webkit-scrollbar { height:10px; width:10px; }
.tld-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius:999px; }
.tld-chips::-webkit-scrollbar-track { background: transparent; }

/* keep chips same visual style */
.tld-chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
  cursor:pointer;
  background:transparent;
  font-weight:800;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* selected state */
.tld-chip.selected{
  background: linear-gradient(90deg,var(--accent2),var(--accent1));
  color:#07121a;
  box-shadow: 0 8px 24px rgba(111,76,255,0.08);
  transform: translateY(-3px);
}

/* focus style for keyboard accessibility */
.tld-chip[tabindex="0"]:focus{
  outline:3px solid rgba(111,76,255,0.12);
  outline-offset:3px;
}

/* -----------------------
   Cart control & modal (dark, AI-themed, premium)
   Replace the old cart styles with this gorgeous variant
   ----------------------- */
.cart-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline-start: 12px;
  z-index: 40;
}

.cart-btn {
  position: relative;
  border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  font-size: 18px;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 2px 8px rgba(111,76,255,0.04);
  transition: transform .14s ease, box-shadow .18s ease, background .18s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
}
.cart-btn:active { transform: translateY(1px) scale(.995); }
.cart-btn:focus {
  outline: none;
  box-shadow: var(--focus-glow), 0 18px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(111,76,255,0.12);
}

/* badge: neon pill with subtle glow and pop animation */
.cart-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  color: #07121a;
  font-weight:900;
  font-size:12px;
  position:absolute;
  top:-8px;
  right:-8px;
  box-shadow: 0 8px 30px rgba(111,76,255,0.12), 0 2px 6px rgba(0,0,0,0.6);
  transform-origin: center;
  animation: badgePop .42s ease;
}
.cart-badge.hidden { display:none; }

@keyframes badgePop {
  0% { transform: scale(.6); opacity:0; }
  60% { transform: scale(1.12); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

/* Backdrop  modal: frosted glass with accent rim and float animation */
.cart-modal-backdrop {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,8,10,0.65), rgba(6,8,10,0.72));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.9,.3,1);
  backdrop-filter: blur(6px);
}
.cart-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-modal {
  width: min(960px, calc(100% - 40px));
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(180deg, rgba(10,12,14,0.96), rgba(8,10,12,0.98));
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 8px 40px rgba(111,76,255,0.06);
  padding: 22px;
  direction: rtl;
  border: 1px solid rgba(111,76,255,0.06);
  position: relative;
  transform: translateY(8px);
  animation: modalFloat .36s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes modalFloat {
  from { opacity: 0; transform: translateY(18px) scale(.996); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cart-modal .header {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  margin-bottom:18px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  padding-bottom:12px;
}
.cart-modal h2 {
  margin:0;
  font-size:25px;
  font-weight:900;
  letter-spacing:0.3px;
  color:var(--text);
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cart-modal .header .close-note {
  font-size:13px;
  color:var(--muted);
  margin-left:12px;
}

/* Cart: more prominent domain + price layout */
.cart-item { display:flex; gap:14px; align-items:center; justify-content:space-between; padding:14px; border-radius:12px; background: linear-gradient(90deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008)); border:1px solid rgba(255,255,255,0.02); transition: transform .12s ease, box-shadow .12s ease, background .12s; }

/* left column */
.cart-item .left { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }

/* domain wrap: domain + tagline */
.cart-domain-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }

.cart-domain {
  font-weight:900;
  font-size:20px;
  direction:ltr;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* strong, motivating visual */
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size:20px;
  letter-spacing:0.4px;
  text-shadow: 0 6px 22px rgba(111,76,255,0.06);
}

/* even bigger on available items (if you want stronger effect) */
.cart-item.tile-available .cart-domain,
.cart-item.available .cart-domain { font-size:22px; text-shadow: 0 10px 40px rgba(0,230,200,0.06); }

/* small CTA-like tagline to motivate user */
.cart-domain-tagline {
  font-size:13px;
  color: var(--accent2);
  font-weight:800;
  opacity:0.95;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,230,200,0.06), rgba(111,76,255,0.03));
  width:fit-content;
}

/* ensure menu is truly non-interactive when closed */
.menu-items[aria-hidden="true"] {
  pointer-events: none !important;   /* no clicks */
  visibility: hidden !important;     /* not visible to hit testing */
  opacity: 0 !important;             /* visual */
  transform: translateY(-50%) translateX(-6px) scale(.996) !important;
}

/* visible/open */
.menu-items[aria-hidden="false"] {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}


/* provider under domain */
.cart-provider { font-size:13px; color: var(--muted); display:flex; gap:8px; align-items:center; }
.cart-provider .provider-name { font-weight:900; color: var(--accent2); font-size:13px; direction:ltr; }

/* right column: price + actions */
.cart-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-inline-start:12px; }

/* price styling: bold boxed pill */
.cart-price {
  font-weight:900;
  font-size:16px;
  padding:8px 12px;
  border-radius:12px;
  background: linear-gradient(90deg, rgba(111,76,255,0.08), rgba(0,230,200,0.06));
  color: #ffffff;
  box-shadow: 0 10px 36px rgba(111,76,255,0.06);
}

/* ensure actions appear beneath price on narrow widths */
@media (max-width:520px) {
  .cart-item { flex-direction: column; align-items:stretch; gap:10px; }
  .cart-right { align-items:stretch; flex-direction:row; justify-content:space-between; }
  .cart-price { order:2; }
  .cart-actions { order:1; }
}

/* micro animation when item appears */
.cart-item { transform: translateY(6px); opacity:0; animation: cartItemIn .28s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes cartItemIn { to { transform: translateY(0); opacity:1; } }

.cart-actions { display:flex; gap:10px; align-items:center; }
.btn-danger {
  background: linear-gradient(90deg, rgba(255,80,80,0.98), rgba(239,68,68,0.96));
  color: #fff;
  border: none;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 10px 28px rgba(239,68,68,0.12);
  transition: transform .12s;
}
.btn-danger:hover { transform: translateY(-3px); }

.btn-proceed {
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  color: #07121a;
  border: none;
  padding:12px 18px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 18px 60px rgba(111,76,255,0.12), 0 6px 18px rgba(0,0,0,0.6);
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.btn-proceed:active { transform: translateY(1px) scale(.998); }
.btn-proceed .checkout-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }

.small-muted { font-size:13px; color:var(--muted); }
.empty-note { text-align:center; padding:28px 12px; color:var(--muted); font-weight:700; }

/* subtle divider & footer area inside modal */
.cart-modal .footer-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top: 1px dashed rgba(255,255,255,0.02);
  padding-top:12px;
  margin-top:8px;
}

/* responsive tweaks */
@media (max-width:720px){
  .cart-modal { width: calc(100% - 28px); padding:14px; border-radius:12px; }
  .cart-item { padding:12px; }
  .cart-btn { padding:8px; min-width:40px; min-height:40px; border-radius:10px; }
  .cart-badge { top:-6px; right:-6px; }
}

/* small utility: convert "ghost" add button state when item already in cart */
.cart-btn.checkout, .add-to-cart.checkout {
  background: linear-gradient(90deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .cart-badge { animation:none; transform:none; }
  .cart-modal { animation:none; transform:none; }
  .cart-item { transition: none; }
}


/* Pricing block styles */
.pricing-block { margin-top:10px; border-radius:12px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.02); }
.our-price { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:8px; border-radius:10px; background: linear-gradient(90deg, rgba(0,230,200,0.03), rgba(111,76,255,0.02)); box-shadow: 0 10px 30px rgba(0,230,200,0.03); }
.our-features { display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.provider-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.provider-row { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px; border-radius:10px; background:rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.02); }
.provider-left { display:flex; align-items:center; gap:10px; }
.provider-logo {
  /* sizing */
  width: 120px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;

  /* border directly on the image (not the container) */
  box-sizing: border-box;           /* include border in the width/height */
  border: 2px solid rgba(255,255,255,0.10); /* <-- border on the image itself */
  border-radius: 10px;              /* rounded corners applied to image */
  overflow: hidden;                 /* ensure rounding clips the image */

  /* visual polish */
  background-color: rgba(255,255,255,0.01); /* subtle background behind transparent logos */
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}


.best-mark { font-weight:900; color:var(--accent2); background:linear-gradient(90deg, rgba(0,230,200,0.12), rgba(111,76,255,0.05)); padding:6px 8px; border-radius:999px; font-size:12px; }
.show-more { margin-top:8px; display:inline-block; cursor:pointer; color:var(--accent1); font-weight:800; }
.small-muted { font-size:12px; color:var(--muted); }

/* container */
.container{ position:relative; z-index:2; width:100%; max-width:var(--maxw); box-sizing:border-box; padding:18px; }

/* header stays untouched */
.header{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.brand{ display:flex; gap:12px; align-items:center; }
.brand img{ width:96px; height:auto; border-radius:12px; padding:8px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow: 0 12px 36px rgba(111,76,255,0.12); object-fit:contain; display:block; }
.title{ font-weight:900; font-size:20px; color:var(--text); }
.subtitle{ font-size:13px; color:var(--muted); }

/* Motivator */
.motivator { margin: 20px 0 18px 0; text-align:center; color:var(--text); }
.motivator h1{ margin:15px; font-size:45px; line-height:2.02; font-weight:900; letter-spacing:0.6px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 24px rgba(111,76,255,0.12); }
.motivator p{ margin:8px 0 0 0; color:var(--muted); font-size:15px; }

/* layout and cards */
.main-grid{ display:grid; gap:18px; grid-template-columns: 1fr 420px; align-items:start; }
@media (max-width:999px){ .main-grid{ grid-template-columns: 1fr; } .brand img{ width:72px; } }

.card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px; box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: transform .18s, box-shadow .18s; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.78); }

/* PROMPT - upgraded visual treatment */
.hero { display:flex; flex-direction:column; gap:12px; }
.hero .lead { font-size:14px; color:var(--muted); margin-bottom:6px; }
.prompt-wrapper{ position:relative; border-radius:14px; padding:2px; background:linear-gradient(90deg, rgba(111,76,255,0.06), rgba(0,230,200,0.04)); box-shadow: 0 10px 40px rgba(30,20,45,0.45); }
.prompt-inner{ border-radius:12px; overflow:hidden; background: linear-gradient(180deg, rgba(10,12,14,0.6), rgba(6,8,10,0.45)); padding:12px; }
#prompt{ width:100%; min-height:220px; max-height:520px; padding:16px; border-radius:10px; border:0; background:transparent; color:var(--text); font-size:16px; line-height:1.6; outline:none; caret-color:var(--accent2); transition: box-shadow .18s, transform .12s; box-sizing:border-box; resize:vertical; overflow:auto; font-weight:600; font-family:'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }
#prompt::placeholder{ color: rgba(255,255,255,0.38); font-weight:500; }
#prompt:focus{ box-shadow: 0 12px 40px rgba(0,230,200,0.12), 0 0 28px rgba(111,76,255,0.06) inset; transform: translateY(-2px); }
/* subtle shimmer edge (reduced-motion respected) */
@media (prefers-reduced-motion: no-preference){ .prompt-wrapper::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:14px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); mix-blend-mode: screen; } }

/* provider name styling inside cart modal */
.provider-name { font-weight:900; color: var(--accent2); font-size:13px; display:inline-block; direction:ltr; }
.dot-sep { color: var(--muted); margin:0 8px; }


/* chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.chip{ padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); color:var(--text); transition: transform .12s, box-shadow .12s; }
.chip:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(111,76,255,0.08); }

/* controls row + char count display */
.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.small{ min-width:84px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text); font-weight:800; }
.select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text); font-weight:700; }
.char-info{ color:var(--muted); font-size:13px; margin-right:6px; }

/* primary buttons */
.btn{ padding:11px 16px; border-radius:12px; border:0; font-weight:900; cursor:pointer; background: linear-gradient(90deg,var(--accent2),var(--accent1)); color:#07121a; box-shadow: 0 10px 36px rgba(111,76,255,0.12); transition: transform .12s; }
.btn:active{ transform: translateY(1px) scale(.998); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.03); box-shadow:none; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; transform:none; }

/* results: modern cards, improved type and domain prominence */
.results{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-top:12px; }
.tile{ padding:14px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006)); border:1px solid rgba(255,255,255,0.02); display:flex; flex-direction:column; gap:10px; transform: translateY(8px); opacity:0; animation: pop .36s forwards; box-sizing:border-box; }
.tile .name{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.domain-name{ font-weight:900; font-size:20px; letter-spacing:0.6px; background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.domain-sub{ font-size:13px; color:var(--muted); }
.tile .meta{ font-size:13px; color:var(--muted); }
.tile .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* available: stronger visual treatment */
.tile.available{ border:1px solid rgba(0,230,200,0.22); box-shadow: 0 18px 64px rgba(0,230,200,0.06); background: linear-gradient(180deg, rgba(0,230,200,0.03), rgba(255,255,255,0.01)); position:relative; }
.tile.available .domain-name{ background: linear-gradient(90deg, var(--accent2), var(--accent1)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size:22px; }
/* shining glow for available */
@keyframes pulseGlow{ 0%{ box-shadow: 0 0 0 rgba(0,230,200,0.06)} 50%{ box-shadow: 0 8px 48px rgba(0,230,200,0.10)} 100%{ box-shadow: 0 0 0 rgba(0,230,200,0.06)} }
.tile.available::after{ content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; box-shadow: 0 20px 60px rgba(0,230,200,0.02); animation: pulseGlow 3.6s ease-in-out infinite; opacity:0.9; }

/* unavailable */
.tile.unavailable{ border:1px solid rgba(255,95,160,0.14); box-shadow: 0 10px 36px rgba(255,95,160,0.03); background: linear-gradient(180deg, rgba(255,95,160,0.02), rgba(255,255,255,0.01)); }
.tile.unavailable .domain-name{ background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* badges */
.badge{ display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800; font-size:13px; }
.badge.available{ background: linear-gradient(90deg, rgba(0,230,200,0.18), rgba(111,76,255,0.06)); color:#0b2a20; box-shadow: 0 10px 40px rgba(0,230,200,0.06); }
.badge.taken{ background: linear-gradient(90deg, rgba(255,95,160,0.12), rgba(255,95,160,0.04)); color:#2a0b12; box-shadow: 0 8px 30px rgba(255,95,160,0.04); }

/* direct domain panel */
.domain-panel .domain-input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text); font-weight:800; direction:ltr; text-align:left; box-sizing:border-box; width:100%; }

/* TLD multi-select chips (for direct search) */
.tld-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tld-chip{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.03); color:var(--text); cursor:pointer; background:transparent; font-weight:800; }
.tld-chip.selected{ background: linear-gradient(90deg,var(--accent2),var(--accent1)); color:#07121a; box-shadow: 0 8px 24px rgba(111,76,255,0.08); transform: translateY(-3px); }

/* messages & footer */
.msg{ font-size:13px; color:var(--muted); }
.footer{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }

/* elevator */
.elevator{ position:fixed; right:20px; bottom:22px; z-index:6; display:flex; gap:10px; align-items:center; }
.elevator .pill{ padding:10px 12px; border-radius:999px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); color:var(--text); font-weight:800; cursor:pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
@media (max-width:999px){ .elevator{ display:none; } }

/* animations */
@keyframes pop{ to{ transform: translateY(0); opacity:1; } }
:focus{ outline:3px solid rgba(111,76,255,0.12); outline-offset:2px; }

/* mobile tweak for 768 and below (as requested) */
@media (max-width:768px){ body{ padding:12px; } .main-grid{ grid-template-columns: 1fr; } .card{ padding:14px; border-radius:12px; } .motivator h1{ font-size:22px; } .title{ font-size:18px } .results{ grid-template-columns: 1fr; } .tile .name{ font-size:15px } .domain-panel{ order:2 } .hero{ order:1 } }

/* ===== Theme variables ===== */
:root{
  --menu-accent-1: linear-gradient(90deg, #6F4CFF, #00E6C8);
  --menu-accent-2: linear-gradient(180deg, rgba(111,76,255,0.14), rgba(0,230,200,0.12));
  --menu-bg: rgba(8,10,12,0.64);
  --menu-bg-solid: rgba(6,8,10,0.96); /* mobile/overlay solid */
  --menu-glow: 0 18px 64px rgba(111,76,255,0.12);
  --menu-item-radius: 14px;
  --menu-item-pad: 12px 18px;
  --menu-z: 1200;
  --menu-duration: 420ms;
  --text: #E6EEF3;
  --muted: rgba(230,238,243,0.68);
  --accent-border: rgba(111,76,255,0.18);
  --toggle-size: 44px;
  --focus-glow: 0 0 0 6px rgba(111,76,255,0.10);
  --glass-blur: 8px;
}

/* Base resets for anchors in menu */
.menu-items a,
.menu-items a:link,
.menu-items a:visited {
  text-decoration: none;    /* eliminate link line */
  color: inherit;
  display: inline-flex;
  align-items: center;
}

/* Toggle button - now high-contrast for dark sites */
.menu-toggle {
  margin-inline-start: 10px;
  width: var(--toggle-size);
  height: var(--toggle-size);
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 2px 8px rgba(111,76,255,0.06);
  backdrop-filter: blur(6px);
  color: white;
  position: relative;
}

/* visible accent for dark theme: bright outline & tiny neon rim */
.menu-toggle::after{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(111,76,255,0.06), rgba(0,230,200,0.04));
  filter: blur(8px);
  opacity: 1;
}

/* toggle active (open) */
.menu-toggle[aria-expanded="true"]{
  transform: scale(0.98);
  box-shadow: 0 20px 64px rgba(111,76,255,0.12), 0 6px 18px rgba(0,0,0,0.7);
}

/* wrap */
.menu-wrap { position: relative; display:inline-block; z-index: var(--menu-z); }

/* Container for items: OPENS TO THE RIGHT (desktop) */
.menu-items {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 14px);        /* OPEN TO RIGHT */
  display:flex;
  gap:12px;
  align-items:center;
  pointer-events:none;            /* blocked when closed */
  z-index: var(--menu-z);
  will-change: transform, opacity;
  transition: opacity .28s ease, transform .28s ease;
  color: var(--text);
}

/* halo behind items for visibility over canvas */
.menu-items::before{
  content:'';
  position:absolute;
  inset: -20px;
  border-radius: 18px;
  pointer-events:none;
  filter: blur(26px);
  background: radial-gradient(300px 80px at 10% 40%, rgba(111,76,255,0.10), transparent 20%),
              radial-gradient(200px 60px at 80% 60%, rgba(0,230,200,0.08), transparent 18%);
  opacity:0;
  transition: opacity .26s ease;
}

/* Each item: charming chip with neon stripe + particle sheen */
.menu-item {
  --i: 1;
  pointer-events: auto;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: var(--menu-item-pad);
  border-radius: var(--menu-item-radius);
  background: linear-gradient(180deg, rgba(10,12,14,0.84), rgba(16,18,20,0.9));
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
  font-weight:800;
  font-size:14px;
  transform: translateX(-10px) translateY(-4px) scale(.98);
  opacity: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform calc(var(--menu-duration)) cubic-bezier(.18,.9,.22,1),
              opacity calc(var(--menu-duration)) cubic-bezier(.18,.9,.22,1),
              box-shadow .12s;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* left neon stripe */
.menu-item::before{
  content:'';
  display:block;
  width:6px;
  height:86%;
  border-radius:8px;
  margin-inline-end:8px;
  background: linear-gradient(180deg, rgba(111,76,255,0.98), rgba(0,230,200,0.98));
  box-shadow: 0 12px 40px rgba(111,76,255,0.12);
  transform-origin:center;
}

/* soft animated sheen on item */
.menu-item::after{
  content: '';
  position: absolute;
  left: 0;
  top: -30%;
  width: 18%;
  height: 160%;
  transform: translateX(-120%) rotate(12deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.2,.9,.28,1), opacity .5s;
}

/* icon styling */
.menu-item .fa-fw { font-size:16px; width:18px; display:inline-block; text-align:center; opacity:0.98; }

/* hover & focus transforms */
.menu-item:hover,
.menu-item:focus {
  transform: translateX(calc(var(--i) * 6px)) translateY(-2px) scale(1.02);
  box-shadow: 0 26px 72px rgba(111,76,255,0.18);
}
.menu-item:hover::after,
.menu-item:focus::after{
  transform: translateX(260%) rotate(12deg);
  opacity: 1;
}

/* keyboard focus ring */
.menu-item:focus{
  outline: none;
  box-shadow: var(--focus-glow), 0 20px 60px rgba(0,0,0,0.6);
  border-color: var(--accent-border);
}

/* Open state - items become visible and stagger outward to RIGHT */
.menu-open .menu-items { pointer-events: auto; }
.menu-open .menu-items::before { opacity: 1; }
.menu-open .menu-item{
  opacity:1;
  transform: translateX(calc( (var(--i,1) * 22px) )) translateY(0) scale(1);
  transition-delay: calc(var(--i,1) * 42ms);
}

/* text shine */
.menu-item span{
  position: relative;
  z-index: 2;
  letter-spacing: 0.2px;
  color: var(--text);
}
.menu-item span::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.04), rgba(255,255,255,0.0));
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .28s;
}
.menu-item:hover span::after{ opacity:1; }

/* login pill */
.menu-item.badge-login{
  padding-right:14px;
  padding-left:18px;
  border-radius:20px;
  font-weight:900;
  background: linear-gradient(180deg, rgba(111,76,255,0.10), rgba(0,0,0,0.3));
  border: 1px solid rgba(111,76,255,0.12);
}

/* subtle entrance particle glow for icons */
.menu-item .fa-fw{
  position: relative;
}
.menu-item .fa-fw::after{
  content:'';
  position:absolute;
  inset: -6px -6px -6px auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(90deg,#6F4CFF,#00E6C8);
  filter: blur(6px);
  opacity: 0;
  transform: translateX(-6px) translateY(-2px) scale(.8);
  transition: opacity .26s, transform .26s;
}
.menu-item:hover .fa-fw::after{ opacity: .24; transform: translateX(0) translateY(0) scale(1); }

/* add to style.css */
.cart-item[data-type="hosting"] .cart-domain { font-weight: 800; color: #0a66c2; }
.cart-domain-tagline { color: #666; font-size: 13px; margin-top:6px; }

/* --------------------------
   MOBILE: stacked vertically (opaque overlay)
   - items are full-width and placed on a solid backdrop to avoid mixing with page content
   -------------------------- */
@media (max-width:768px){
  .menu-items {
    position: absolute; /* keep inside header flow */
    left: 8px;
    right: 8px;
    top: calc(100% + 12px);
    transform: translateY(0);
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
    padding:12px;
    justify-content:flex-start;
    background: var(--menu-bg-solid); /* solid for mobile so underlying content not visible */
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 6px 20px rgba(111,76,255,0.06);
    pointer-events:none;
    opacity: 0;
  }

/* Motivator */
.motivator { margin: 20px 0 18px 0; text-align:center; color:var(--text); }
.motivator h1{ margin:0px; font-size:30px; line-height:2.02; font-weight:900; letter-spacing:0.6px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 24px rgba(111,76,255,0.12); }
.motivator p{ margin:8px 0 0 0; color:var(--muted); font-size:15px; }

  .menu-items::before{ display:none; }
  .menu-item {
    width: 100%;
    justify-content:flex-start; /* keep icon then text left-to-right visually; for RTL adjust */
    transform: translateY(10px) !important;
    opacity:0;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(18,20,22,1), rgba(14,16,18,1)); /* fully opaque */
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  }
  .menu-open .menu-items {
    pointer-events: auto;
    opacity: 1;
  }
  .menu-open .menu-item {
    opacity:1;
    transform: translateY(0) !important;
    transition-delay: calc(var(--i,1) * 36ms);
  }
  .menu-item::before{ display:none; } /* stripe removed for mobile to keep clean */
}

/* reduced-motion accessibility */
@media (prefers-reduced-motion: reduce){
  .menu-item, .menu-toggle { transition:none !important; animation: none !important; }
  .menu-open .menu-item { transform: none !important; opacity:1 !important; transition-delay:0ms !important; }
}

/* small RTL helper if you need it */
.menu-wrap[dir="rtl"] .menu-item{ direction: rtl; }