/* ═══════════════════════════════════════════════════════════════════
   INNOVA HOST — registro-de-dominio.css
   Page-specific styles for /registro-de-dominio
   Registro de Domínio — TLD table, domain search box, extension filter

   Depends on: style.css (load FIRST)
   ═══════════════════════════════════════════════════════════════════ */

.domain-search-box {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius-lg);
      padding: 28px;
      backdrop-filter: blur(12px);
    }

.dsb-label {
      color: rgba(255,255,255,.55);
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 14px;
    }

.dsb-form {
      display: flex;
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 14px;
    }

.dsb-input {
      flex: 1;
      padding: 14px 18px;
      font-size: .95rem;
      border: none;
      outline: none;
      color: var(--text);
      font-family: var(--font-body);
      background: transparent;
      min-width: 0;
    }

.dsb-select {
      padding: 14px 12px;
      border: none;
      border-left: 1px solid var(--border);
      font-size: .85rem;
      color: var(--gray);
      outline: none;
      cursor: pointer;
      background: var(--white);
      font-family: var(--font-body);
    }

.dsb-btn {
      background: var(--teal);
      color: var(--navy);
      font-weight: 800;
      font-size: .9rem;
      padding: 14px 22px;
      border: none;
      cursor: pointer;
      transition: filter .2s;
      white-space: nowrap;
      font-family: var(--font-display);
    }

.dsb-btn:hover { filter: brightness(1.08); }

.dsb-popular {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

.dsb-ext-pill {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.7);
      font-size: .75rem;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: .2s;
    }

.dsb-ext-pill:hover {
      background: rgba(0,212,170,.15);
      border-color: rgba(0,212,170,.3);
      color: var(--teal);
    }

.trust-bar {
      background: var(--off);
      border-bottom: 1px solid var(--border);
      padding: 20px 0;
    }

.trust-bar-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }

.trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .85rem;
      color: var(--gray);
      font-weight: 500;
    }

.trust-item-icon {
      width: 30px; height: 30px;
      background: linear-gradient(135deg, var(--blue), var(--blue-lt));
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: .9rem;
      flex-shrink: 0;
    }

.ext-filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

.ext-filter-btn {
      padding: 8px 18px;
      border-radius: 999px;
      font-size: .83rem;
      font-weight: 600;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--gray);
      cursor: pointer;
      transition: .2s;
      font-family: var(--font-body);
    }

.ext-filter-btn.active,
    .ext-filter-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
    }

.ext-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }

.ext-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: .22s;
    }

.ext-card:hover {
      border-color: var(--blue);
      box-shadow: 0 4px 16px rgba(26,107,245,.1);
      transform: translateY(-2px);
    }

.ext-card.hidden { display: none; }

.ext-name {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
    }

.ext-badge {
      font-size: .68rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      margin-top: 3px;
      display: inline-block;
    }

.ext-badge-popular { background: rgba(26,107,245,.1); color: var(--blue); }

.ext-badge-promo   { background: rgba(0,212,170,.12); color: var(--teal); }

.ext-badge-new     { background: rgba(245,166,35,.12); color: #b87c00; }

.ext-price-block { text-align: right; }

.ext-from { font-size: .7rem; color: var(--gray); }

.ext-price {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text);
    }

.ext-price span { font-size: .75rem; font-weight: 500; color: var(--gray); }

.ext-btn {
      margin-top: 14px;
      display: block;
      text-align: center;
      background: var(--blue);
      color: #fff;
      font-size: .78rem;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 8px;
      transition: filter .2s;
    }

.ext-btn:hover { filter: brightness(1.1); }

.steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      position: relative;
    }

.steps-grid::before {
      content: '';
      position: absolute;
      top: 28px;
      left: calc(12.5% + 20px);
      right: calc(12.5% + 20px);
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--teal));
      opacity: .25;
    }

.step-card {
      text-align: center;
      position: relative;
    }

.step-num {
      width: 56px; height: 56px;
      background: linear-gradient(135deg, var(--blue), var(--blue-lt));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.2rem;
      color: #fff;
      margin: 0 auto 18px;
      position: relative;
      z-index: 1;
    }

.step-card h3 {
      font-family: var(--font-display);
      font-size: .95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

.step-card p { font-size: .84rem; color: var(--gray); line-height: 1.6; }

.features-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

.feat-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      display: flex;
      gap: 18px;
      transition: .22s;
    }

.feat-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(26,107,245,.08); }

.feat-icon {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, var(--blue), var(--blue-lt));
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
    }

.feat-body { min-width: 0; }

.feat-body h3 {
      font-family: var(--font-display);
      font-size: .97rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }

.feat-body p { font-size: .86rem; color: var(--gray); line-height: 1.65; }

.tld-search-bar { margin-bottom: 20px; }

.tld-search-input {
      width: 100%; max-width: 420px;
      padding: 11px 16px; border: 1.5px solid var(--border);
      border-radius: var(--radius); font-size: .9rem;
      color: var(--text); font-family: var(--font-body);
      outline: none; transition: border-color .2s, box-shadow .2s;
      background: var(--white);
    }

.tld-search-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(26,107,245,.1);
    }

.tld-table-wrap {
      overflow-x: auto;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

.tld-table {
      width: 100%; border-collapse: collapse; font-size: .87rem;
    }

.tld-table thead tr {
      background: var(--navy);
    }

.tld-table th {
      padding: 13px 18px; text-align: left;
      font-family: var(--font-display); font-weight: 700;
      font-size: .8rem; color: rgba(255,255,255,.85);
      white-space: nowrap;
    }

.tld-table tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .15s;
    }

.tld-table tbody tr:last-child { border-bottom: none; }

.tld-table tbody tr:nth-child(even) { background: var(--off); }

.tld-table tbody tr:hover { background: rgba(26,107,245,.04); }

.tld-table td {
      padding: 11px 18px; color: var(--text); vertical-align: middle;
    }

.tld-table td:first-child { font-weight: 600; }

.tld-table td:nth-child(2),
    .tld-table td:nth-child(3),
    .tld-table td:nth-child(4) { color: var(--gray); }


/* ── RESPONSIVE (mobile) ── */
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .features-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-hero { padding: 48px 0 40px; }
  .page-hero h1 { font-size: clamp(1.7rem, 6vw, 2.1rem); line-height: 1.2; }
  .page-hero-sub { font-size: .95rem; }
  .trust-bar-inner { gap: 14px 18px; justify-content: flex-start; }
  .trust-item { font-size: .82rem; }
  .features-grid-2 { grid-template-columns: 1fr; }
  .feat-card { padding: 20px 18px; gap: 14px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
  .tld-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tld-table { min-width: 460px; }
  .dsb-form { flex-wrap: wrap; }
  .dsb-form input { width: 100%; }
  .dsb-btn { width: 100%; }
  .dsb-popular { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .page-hero h1 { font-size: 1.6rem; }
  .feat-card { flex-direction: column; }
}