/* ---------- 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;
  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(11,18,32,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(11,18,32,0.04);
  color:var(--text);
  cursor:pointer;
  background: linear-gradient(180deg, rgba(11,18,32,0.01), transparent);
  font-weight:800;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(11,18,32,0.03);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* selected state */
.tld-chip.selected{
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  color:#07121a;
  box-shadow: 0 12px 36px rgba(91,75,255,0.10);
  transform: translateY(-3px);
}

/* focus style for keyboard accessibility */
.tld-chip[tabindex="0"]:focus{
  outline: none;
  box-shadow: var(--focus-glow);
  outline-offset: 2px;
}

/* Pricing block styles */
.pricing-block { margin-top:10px; border-radius:12px; padding:12px; background: linear-gradient(180deg, var(--glass-soft), rgba(11,18,32,0.005)); border:1px solid var(--card-border); }
.our-price { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:8px; border-radius:10px; background: linear-gradient(90deg, rgba(0,169,157,0.03), rgba(91,75,255,0.02)); box-shadow: 0 10px 30px rgba(0,169,157,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: linear-gradient(180deg, rgba(11,18,32,0.008), rgba(11,18,32,0.004)); border:1px solid rgba(11,18,32,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;
  border: 2px solid rgba(11,18,32,0.06);
  border-radius: 10px;
  overflow: hidden;

  /* visual polish */
  background-color: rgba(11,18,32,0.01);
  display: block;
  box-shadow: 0 6px 18px rgba(11,18,32,0.04);
}


.best-mark { font-weight:900; color:var(--accent2); background:linear-gradient(90deg, rgba(0,169,157,0.12), rgba(91,75,255,0.06)); 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); }

.services-block { margin-bottom:12px; border-radius:10px; padding:12px; background: linear-gradient(90deg, rgba(91,75,255,0.04), rgba(0,169,157,0.02)); border:1px solid rgba(11,18,32,0.02); }
.services-title { font-weight:900; margin-bottom:10px; font-size:15px; color:var(--text); }
/* make services appear one per line (stacked) for clear order */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Availability card (friendly + professional) */
.availability-card {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(11,18,32,0.01), rgba(11,18,32,0.006));
  border: 1px solid rgba(11,18,32,0.02);
  box-shadow: 0 10px 34px rgba(11,18,32,0.06);
}
.availability-left { flex:0 0 36px; display:flex; align-items:center; justify-content:center; }
.availability-icon { font-size:26px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:6px; }
.avail-ok { color: #01382f; background: linear-gradient(90deg, rgba(0,169,157,0.12), rgba(91,75,255,0.04)); }
.avail-no { color: #5d1127; background: linear-gradient(90deg, rgba(255,77,158,0.10), rgba(91,75,255,0.02)); }

.availability-right { flex:1 1 auto; min-width:0; }
.availability-title { font-weight:900; font-size:14px; margin-bottom:4px; color: var(--text); background: linear-gradient(90deg, var(--accent2), var(--accent1)); -webkit-background-clip: text; background-clip:text; color:transparent; }
.availability-sub { font-size:13px; color: var(--muted); line-height:1.4; }

/* Slight entrance animation */
.availability-card { transform: translateY(6px); opacity:0; animation: availIn .28s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes availIn { to { transform: translateY(0); opacity:1; } }

/* Smaller/tighter in compact tiles */
.tile .availability-card { padding:8px; border-radius:10px; }

/* Unavailable variant subtle tint for the tile itself */
.tile.unavailable { border: 1px solid rgba(255,77,158,0.12); }

/* Ensure screen-reader only text inside provider areas remains accessible */
.sr-only { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.service-item { display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; background: linear-gradient(90deg, rgba(11,18,32,0.01), rgba(11,18,32,0.004)); border:1px solid rgba(11,18,32,0.03); font-weight:800; color:var(--text); }
.service-icon { width:18px; height:18px; display:inline-block; font-size:16px; color:var(--accent2); margin-inline-start:4px; }
.service-label { font-size:13px; color:var(--text); }

.namifa-block { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px; border-radius:12px; margin-top:12px;
  background: linear-gradient(90deg, rgba(91,75,255,0.08), rgba(0,169,157,0.06));
  box-shadow: 0 18px 48px rgba(91,75,255,0.04), 0 8px 20px rgba(0,169,157,0.02);
  border: 1px solid rgba(91,75,255,0.12);
}
.namifa-left { display:flex; flex-direction:column; gap:8px; min-width:0; }
.namifa-title { font-weight:900; font-size:16px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.namifa-features { display:flex; flex-wrap:wrap; gap:8px; }
.namifa-feature { display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background: rgba(11,18,32,0.01); font-weight:800; color:var(--text); }
.namifa-feat-icon { margin-inline-start:6px; color:var(--accent1); width:16px; }
.namifa-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:140px; }
.namifa-price { font-weight:900; font-size:18px; color:var(--text); background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98)); padding:6px 10px; border-radius:8px; }
.namifa-buy { background: linear-gradient(90deg, var(--accent4), var(--accent1)); color:#07121a; font-weight:900; border-radius:10px; padding:10px 12px; border:none; box-shadow: 0 10px 36px rgba(91,75,255,0.06); }
.providers-title { margin-top:12px; font-weight:900; color:var(--muted); font-size:13px; margin-bottom:8px; }

/* mobile adjustments */
@media (max-width:520px){
  .namifa-block { flex-direction:column; align-items:flex-start; }
  .namifa-right { align-items:flex-start; width:100%; }
}

/* 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.98), rgba(250,250,255,0.98));
  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(11,18,32,0.08); }

/* 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(91,75,255,0.06), rgba(0,169,157,0.04));
  box-shadow: 0 10px 36px rgba(11,18,32,0.04);
}
.prompt-inner{
  border-radius:12px;
  overflow:hidden;
  background: linear-gradient(180deg, #FFFFFF, #FBFDFF);
  padding:12px;
  border: 1px solid rgba(11,18,32,0.03);
}
#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(11,18,32,0.28); font-weight:500; }
#prompt:focus{ box-shadow: 0 12px 40px rgba(0,169,157,0.06), 0 0 28px rgba(91,75,255,0.04) inset; transform: translateY(-2px); }
/* subtle sheen 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.6), rgba(255,255,255,0.2)); mix-blend-mode: screen; opacity:0.06; } }

/* 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(11,18,32,0.01), rgba(11,18,32,0.004));
  border:1px solid rgba(11,18,32,0.02);
  color:var(--text);
  transition: transform .12s, box-shadow .12s;
}
.chip:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(91,75,255,0.06); }

/* 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(11,18,32,0.03); background:transparent; color:var(--text); font-weight:800; }
.select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(11,18,32,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(91,75,255,0.08);
  transition: transform .12s;
}
.btn:active{ transform: translateY(1px) scale(.998); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(11,18,32,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, #FFFFFF, #FBFDFF);
  border:1px solid rgba(11,18,32,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(11,18,32,0.96), rgba(11,18,32,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,169,157,0.14);
  box-shadow: 0 18px 64px rgba(0,169,157,0.03);
  background: linear-gradient(180deg, rgba(0,169,157,0.03), #FFFFFF);
  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,169,157,0.04)} 50%{ box-shadow: 0 8px 48px rgba(0,169,157,0.08)} 100%{ box-shadow: 0 0 0 rgba(0,169,157,0.04)} }
.tile.available::after{ content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; box-shadow: 0 20px 60px rgba(0,169,157,0.02); animation: pulseGlow 3.6s ease-in-out infinite; opacity:0.95; }

/* unavailable */
.tile.unavailable{
  border:1px solid rgba(255,77,158,0.12);
  box-shadow: 0 10px 36px rgba(255,77,158,0.02);
  background: linear-gradient(180deg, rgba(255,77,158,0.02), #FFFFFF);
}
.tile.unavailable .domain-name{
  background: linear-gradient(90deg, rgba(11,18,32,0.9), rgba(11,18,32,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,169,157,0.14), rgba(91,75,255,0.06)); color:#072a20; box-shadow: 0 10px 40px rgba(0,169,157,0.04); }
.badge.taken{ background: linear-gradient(90deg, rgba(255,77,158,0.12), rgba(255,77,158,0.04)); color:#2a0b12; box-shadow: 0 8px 30px rgba(255,77,158,0.03); }

/* direct domain panel */
.domain-panel .domain-input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(11,18,32,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(11,18,32,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 12px 36px rgba(91,75,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(11,18,32,0.01), rgba(11,18,32,0.004));
  border:1px solid rgba(11,18,32,0.03);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 8px 24px rgba(11,18,32,0.04);
}

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

/* mobile tweak for 768 and below */
@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 }
}