/* ======================================================================
   vn.css — Virtual Number section styles
   Used by: generic-index, generic-service, generic-country
   ====================================================================== */

/* ── Generic VN Index (All Services) ──────────────────────────────────── */
.gvn-hero { padding: 120px 0 40px; text-align: center; }
.gvn-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.75rem; }
.gvn-hero p { color: var(--text-muted); max-width: 600px; margin: 0 auto 2rem; }

/* Search bar */
.gvn-search-bar { display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto 2.5rem; }

/* Hero search bar — larger version placed right under hero text */
.gvn-search-hero {
    max-width: 680px;
    margin: 1.5rem auto 0;
}
.gvn-search-hero input {
    flex: 1; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 0.875rem; padding: 1rem 1.5rem; color: var(--text);
    font-size: 1.05rem; outline: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.gvn-search-hero input:focus { border-color: var(--primary); box-shadow: 0 4px 28px rgba(74,222,128,0.15); }
.gvn-search-hero button {
    background: var(--primary); color: #000; font-weight: 700;
    border: none; padding: 1rem 2rem; border-radius: 0.875rem;
    cursor: pointer; font-size: 1rem; white-space: nowrap;
    box-shadow: 0 4px 18px rgba(74,222,128,0.3);
    transition: opacity 0.2s, transform 0.15s;
}
.gvn-search-hero button:hover { opacity: 0.88; transform: scale(1.02); }

.gvn-search-bar input {
    flex: 1; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 0.75rem; padding: 0.75rem 1.25rem; color: var(--text);
    font-size: 0.95rem; outline: none;
}
.gvn-search-bar input:focus { border-color: var(--primary); }
.gvn-search-bar button {
    background: var(--primary); color: #000; font-weight: 700;
    border: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem;
    cursor: pointer; font-size: 0.9rem;
}

/* Category tabs */
.gvn-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
.gvn-cat-btn {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.4rem 1.1rem; font-size: 0.82rem;
    font-weight: 600; color: var(--text-muted); cursor: pointer;
    text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.gvn-cat-btn:hover,
.gvn-cat-btn.active { border-color: var(--primary); color: var(--primary); }
.gvn-cat-emoji { margin-inline-end: 0.3rem; }

/* Service grid */
.gvn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 4rem;
}
.gvn-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 1rem; padding: 1.25rem 1rem; text-align: center;
    text-decoration: none; transition: border-color 0.2s, transform 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.gvn-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.gvn-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 2rem;
    line-height: 1;
    margin: 0 auto;
}
.gvn-card-icon .services { transform: scale(1.4); transform-origin: center; }
.gvn-card-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.gvn-card-price { font-size: 0.78rem; color: var(--text-muted); }
.gvn-card-price span { color: var(--primary); font-weight: 700; }

/* Empty state */
.gvn-empty { text-align: center; padding: 4rem 0; color: var(--text-muted); }
.gvn-empty .gvn-empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* AI featured banner */
.gvn-ai-banner {
    background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(34,197,94,0.05));
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 1rem; padding: 1rem 1.25rem;
    margin-bottom: 1.5rem; display: flex;
    align-items: center; gap: 1rem; flex-wrap: wrap;
}
.gvn-ai-banner h3 { font-size: 0.9rem; font-weight: 800; margin-bottom: 0.15rem; }
.gvn-ai-banner p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.gvn-ai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.gvn-ai-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3);
    border-radius: 999px; padding: 0.2rem 0.6rem;
    font-size: 0.72rem; font-weight: 600; color: var(--primary);
    text-decoration: none; transition: background 0.2s;
}
.gvn-ai-chip:hover { background: rgba(74,222,128,0.22); }

/* Social Media featured banner */
.gvn-sm-banner {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.06));
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 1rem; padding: 1rem 1.25rem;
    margin-bottom: 2rem; display: flex;
    align-items: center; gap: 1rem; flex-wrap: wrap;
}
.gvn-sm-banner h3 { font-size: 0.9rem; font-weight: 800; margin-bottom: 0.15rem; }
.gvn-sm-banner p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.gvn-sm-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3);
    border-radius: 999px; padding: 0.2rem 0.6rem;
    font-size: 0.72rem; font-weight: 600; color: #a78bfa;
    text-decoration: none; transition: background 0.2s;
}
.gvn-sm-chip:hover { background: rgba(139,92,246,0.22); }


/* ── Generic Service (Country Grid) ───────────────────────────────────── */
.gsvc-hero { padding: 120px 0 50px; text-align: center; }
.gsvc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    font-size: 3rem;
    line-height: 1;
}
.gsvc-icon .services { transform: scale(2.2); transform-origin: center; }
.gsvc-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.75rem; }
.gsvc-hero p { max-width: 580px; margin: 0 auto 2rem; color: var(--text-muted); }

.country-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 3rem;
}
.country-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 1rem; padding: 1.25rem 1rem; text-align: center;
    text-decoration: none; transition: border-color 0.2s, transform 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.country-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.country-flag {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.country-name { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.country-price { font-size: 0.78rem; color: var(--text-muted); }
.country-price strong { color: var(--primary); }

/* ── Generic Country (Provider Table) ─────────────────────────────────── */
.gcn-hero { padding: 120px 0 50px; text-align: center; }
.gcn-flag {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    line-height: 1;
}
.gcn-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.75rem; }
.gcn-hero p { max-width: 560px; margin: 0 auto 1.5rem; color: var(--text-muted); }

.provider-table-wrap { overflow-x: auto; margin-bottom: 3rem; border-radius: 1rem; border: 1px solid var(--border); }
.provider-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.provider-table th {
    background: var(--card-bg); color: var(--text-muted); font-weight: 700;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.9rem 1.25rem; text-align: start; border-bottom: 1px solid var(--border);
}
.provider-table td { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.provider-table tr:last-child td { border-bottom: none; }
.provider-table tr:hover td { background: rgba(74,222,128,0.03); }
.provider-name { font-weight: 600; color: var(--text); text-transform: capitalize; }
.provider-price { font-weight: 800; color: var(--primary); font-size: 1rem; }
.count-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); animation: pulse 2s infinite; margin-inline-end: 0.35rem;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.badge-cheap {
    background: rgba(74,222,128,0.15); color: var(--primary);
    font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem;
    border-radius: 999px; text-transform: uppercase; margin-inline-start: 0.4rem;
}
.btn-buy {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--primary); color: #000; font-weight: 700; font-size: 0.82rem;
    padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;
    transition: opacity 0.2s, transform 0.15s; white-space: nowrap;
}
.btn-buy:hover { opacity: 0.85; transform: scale(1.02); }

/* Pagination Styles */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination li {
    display: inline-block;
}

.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    color: var(--text-color);
    background: var(--surface-light);
    border-radius: 8px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.pagination li a:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
}

.pagination li.active span {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
    font-weight: 700;
}

.pagination li.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface);
}