/* ============================================================
   AI1Host — Domain List (CSV)
   Module: mod_ai1host_domainlist
   Namespace: ai1dl-*
   Notes:
   - Self-contained styling (no template overrides required)
   - Scrollable table (sticky header)
   - Hero, centred search input + pop-out results badge
============================================================ */


/* ============================================================
   1) MODULE CONTAINER (GLASS + ACCENT STRIPE)
============================================================ */

.ai1dl{
  margin: 0;
  position: relative;
  padding: 18px 18px 16px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  overflow: hidden;
}

/* Accent stripe */
.ai1dl::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(to bottom, rgba(0,200,120,.85), rgba(0,140,255,.75));
  opacity: .9;
}

/* Soft glow backdrop */
.ai1dl::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 260px;
  left: -120px;
  top: -130px;
  background: radial-gradient(circle at 30% 30%,
    rgba(0,200,120,.25),
    rgba(0,140,255,.16),
    rgba(0,0,0,0));
  filter: blur(10px);
  pointer-events: none;
}


/* ============================================================
   2) HEADER (TITLE + SUBTITLE)
============================================================ */

.ai1dl-head{
  position: relative;
  margin-bottom: 14px;
  padding: 14px 14px 12px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.ai1dl-title{
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .2px;
}

.ai1dl-sub{
  margin: 0;
  opacity: .82;
  font-size: 1.02rem;
  line-height: 1.35;
}


/* ============================================================
   3) HERO SEARCH (CENTRED + WIDE + RESPONSIVE)
============================================================ */

.ai1dl-search{
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 26px 22px 28px;
  margin-top: 12px;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(0,0,0,.28), rgba(0,0,0,.18));

  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Big glowing backdrop so the input pops */
.ai1dl-search::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 70% 50%,
      rgba(0,220,160,.28),
      rgba(0,140,255,.22),
      transparent 65%);
  filter: blur(28px);
  opacity: .9;
  pointer-events: none;
}

.ai1dl-search__label{
  display: block;
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .35px;
  opacity: .98;
}

/* Pulse animation (desktop only; disabled on mobile below) */
@keyframes ai1dl-pulse{
  0%   { box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 6px rgba(0,200,120,.16), inset 0 1px 0 rgba(255,255,255,.16); }
  50%  { box-shadow: 0 22px 54px rgba(0,0,0,.65), 0 0 0 10px rgba(0,200,120,.26), inset 0 1px 0 rgba(255,255,255,.16); }
  100% { box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 6px rgba(0,200,120,.16), inset 0 1px 0 rgba(255,255,255,.16); }
}

.ai1dl-search__input{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;

  padding: 20px 26px;
  font-size: 1.18rem;
  font-weight: 700;

  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.45);

  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  background-image: radial-gradient(circle at 12% 50%, rgba(0,200,120,.12), transparent 45%);
  background-repeat: no-repeat;

  color: inherit;
  outline: none;

  animation: ai1dl-pulse 3s ease-in-out infinite;

  transition:
    transform .15s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.ai1dl-search__input::placeholder{
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

/* Hover */
.ai1dl-search__input:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.65);
}

/* Focus */
.ai1dl-search__input:focus{
  animation: none;
  transform: translateY(-2px) scale(1.02);

  border-color: rgba(0,220,160,.95);
  background: linear-gradient(135deg, rgba(0,0,0,.65), rgba(0,0,0,.45));

  box-shadow:
    0 0 0 10px rgba(0,220,160,.35),
    0 30px 80px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* ============================================================
   4) RESULTS COUNT BADGE (POP-OUT PILL)
============================================================ */

.ai1dl-search__meta{
  position: relative;
  margin-top: 14px;
  align-self: center;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: .25px;

  background: linear-gradient(135deg, rgba(0,200,120,.38), rgba(0,140,255,.26));
  border: 1px solid rgba(0,200,120,.35);

  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 5px rgba(0,200,120,.14),
    inset 0 1px 0 rgba(255,255,255,.18);

  transform: translateY(8px);
}

/* Badge sparkle */
.ai1dl-search__meta::before{
  content:"";
  position:absolute;
  inset:-10px -18px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%);
  filter: blur(8px);
  opacity: .7;
  pointer-events: none;
}

/* Number slightly larger */
.ai1dl-search__meta span{
  font-size: 1.05rem;
}

/* Badge reacts when typing */
.ai1dl-search__input:focus ~ .ai1dl-search__meta{
  transform: translateY(6px) scale(1.04);
  box-shadow:
    0 22px 54px rgba(0,0,0,.60),
    0 0 0 6px rgba(0,200,120,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}


/* ============================================================
   5) SCROLL WINDOW (WITH STICKY HEADER)
============================================================ */

.ai1dl-scroll{
  max-height: var(--ai1dl-maxh, 1120px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Scrollbar polish */
.ai1dl-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.08);
}
.ai1dl-scroll::-webkit-scrollbar{ width: 10px; }
.ai1dl-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.ai1dl-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 10px;
}
.ai1dl-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.32);
}


/* ============================================================
   6) TABLE
============================================================ */

.ai1dl-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ai1dl-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;

  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);

  padding: 16px 14px;

  font-weight: 800;
  letter-spacing: .3px;

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ai1dl-table tbody td{
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .92;
}

.ai1dl-table tbody tr:hover{
  background: rgba(255,255,255,.045);
}


/* ============================================================
   7) CTA BUTTONS
============================================================ */

.ai1dl-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ai1dl-btn{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration:none;

  font-weight: 700;
  letter-spacing: .2px;
}

.ai1dl-btn--primary{
  background: linear-gradient(135deg, rgba(0,200,120,.32), rgba(0,140,255,.22));
  outline: 1px solid rgba(0,200,120,.22);
  outline-offset: -1px;
}

.ai1dl-btn--primary:hover{
  background: linear-gradient(135deg, rgba(0,200,120,.40), rgba(0,140,255,.28));
}

.ai1dl-btn--ghost{
  background: transparent;
  outline: 1px solid rgba(255,255,255,.18);
  outline-offset: -1px;
}

.ai1dl-btn--ghost:hover{
  background: rgba(255,255,255,.06);
}


/* ============================================================
   8) RESPONSIVE TUNING
============================================================ */

@media (max-width: 1024px){
  .ai1dl-search__input{ max-width: 640px; }
}

@media (max-width: 768px){
  .ai1dl{
    padding: 14px 14px 12px;
  }

  .ai1dl-head{
    padding: 12px 12px 10px;
  }

  .ai1dl-title{ font-size: 1.18rem; }

  .ai1dl-search{
    padding: 22px 16px 24px;
  }

  .ai1dl-search__label{
    font-size: 1.05rem;
  }

  .ai1dl-search__input{
    max-width: 100%;
    font-size: 1.08rem;
    padding: 18px 22px;
    animation: none; /* calm mobile */
  }

  .ai1dl-search__meta{
    transform: translateY(0); /* avoid awkward float on small screens */
  }
}

@media (max-width: 480px){
  .ai1dl-search__label{ font-size: 1rem; }
  .ai1dl-search__input{
    font-size: 1.02rem;
    padding: 16px 18px;
  }
}