/**
 * DATA eSIM — Homepage CSS
 * --------------------------------------------------------------------
 * Stiluri specifice homepage: hero, stats, selector cu country picker.
 * Restul (.section, .pillar, .feature etc.) vine din esim-base.css.
 * --------------------------------------------------------------------
 */


/* ============ HERO ============
 * Aliniat 1:1 cu designul original esim-ro.html:
 *  - Background solid var(--primary) — IDENTIC cu nav, fără seam
 *  - Overlay decorativ ::before cu 2 radial-gradients (glow)
 *  - Toate textele cu !important ca să bată Blocksy
 */
.hero {
    position: relative;
    padding: 70px 24px 80px;
    background: var(--primary);
    color: white;
    overflow: hidden;
    margin-top: 0 !important;
    border-top: none !important;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 90% 30%, rgba(26,140,255,0.18), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(26,140,255,0.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Textele hero — toate albe, cu specificitate care bate Blocksy */
.hero,
.hero h1,
.hero h1.hero-title,
.hero .hero-title,
.hero p,
.hero .hero-sub,
.hero span,
.hero .hero-trust {
    color: white !important;
}
.hero .hero-sub {
    color: rgba(255,255,255,0.8) !important;
}
.hero .hero-trust,
.hero .hero-trust span {
    color: rgba(255,255,255,0.75) !important;
}
.hero h1.hero-title .accent,
.hero .accent {
    color: var(--accent-2) !important;
}

/* Tipografie hero */
.hero h1,
.hero .hero-title,
h1.hero-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(38px, 5.6vw, 68px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin: 14px 0 20px !important;
}
.hero p,
.hero .hero-sub {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    max-width: 480px;
    margin-bottom: 32px;
}
.hero .hero-trust {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13px;
}
.hero .hero-trust span {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero .hero-trust span::before {
    content: "✓";
    color: var(--accent-2) !important;
    font-weight: 700;
}


/* ============ STATS ============ */
.stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.stat-num,
.section.dark .stat-num,
.section.dark .stat .stat-num {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(36px, 4vw, 50px) !important;
    color: var(--accent-2) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
.stat-num small,
.section.dark .stat-num small {
    font-size: 0.5em !important;
    color: rgba(255,255,255,0.5) !important;
    margin-left: 4px !important;
    font-weight: 700 !important;
}
.stat-label,
.section.dark .stat-label,
.section.dark .stat .stat-label {
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}


/* ============ SELECTOR — fix global pentru text color în interior ============
 * Selectorul e pe homepage în .hero (fundal navy), iar Blocksy aplică
 * color: white pe link-uri și span-uri din interior. Re-forțăm culorile
 * default-template pentru toate textele din .selector.
 */
.hero .selector,
.hero .selector *,
.selector,
.selector h1,
.selector h2,
.selector h3,
.selector h4,
.selector p,
.selector span,
.selector div,
.selector input,
.selector label,
.selector a {
    color: var(--primary);
}
.hero .selector a {
    text-decoration: none !important;
}
.selector .selector-head .title { color: var(--primary); }
.selector .selector-head .status,
.selector .selector-head .status::before { color: var(--accent); background: var(--accent); }
.selector .selector-head .status { background: transparent; color: var(--accent); }
.selector .selector-label,
.selector .selector-label span:not(.num) { color: var(--text-on-light-muted) !important; }
.selector .selector-label .num { color: white !important; }
.selector .selector-foot { color: var(--text-on-light-muted) !important; }
.selector .package-pill .days { color: var(--text-on-light-muted) !important; }
.selector .package-pill .data { color: var(--primary) !important; }
.selector .package-pill .price { color: var(--accent) !important; }
.selector .selector-cta,
.selector .selector-cta span { color: white !important; }


/* ============ SELECTOR — country picker (homepage) ============ */
.selector-input,
.hero .selector-input,
.selector-input span,
.selector-input .selector-flag-row span {
    color: var(--primary) !important;
}
.selector-input {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s;
}
.selector-input:hover { border-color: var(--accent); }
.selector-input.selected { border-color: var(--accent); background: white; }
.selector-input .arrow {
    color: var(--text-on-light-muted) !important;
    font-size: 12px;
    transition: transform 0.2s;
}
.selector-input.open .arrow { transform: rotate(180deg); }

.selector-flag-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--border-light);
    overflow: hidden;
    position: relative;
}

.picker-dropdown {
    background: white;
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin-top: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, box-shadow 0.3s;
}
.picker-dropdown.open {
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 16px 40px -16px rgba(14,42,74,0.18);
}
.picker-search {
    width: 100%;
    padding: 12px 16px;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    outline: none !important;
    color: var(--primary) !important;
    background: var(--bg-soft) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.picker-search::placeholder {
    color: var(--text-on-light-muted) !important;
    opacity: 1 !important;
}
.picker-search:focus {
    background: white !important;
    color: var(--primary) !important;
}

/* Force text color on picker items — bate Blocksy color: white pe .hero a */
.hero .picker-item,
.picker-item,
.picker-dropdown .picker-item,
.picker-dropdown .picker-item span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    color: var(--primary) !important;
    text-decoration: none !important;
}
.picker-item span {
    display: inline !important;
    padding: 0 !important;
}
.picker-item:hover { background: var(--bg-soft); }
.hero .picker-item.selected,
.picker-item.selected {
    background: rgba(26,140,255,0.06);
    color: var(--accent) !important;
    font-weight: 600;
}
.hero .picker-item.selected span,
.picker-item.selected span {
    color: var(--accent) !important;
}
.picker-item .price-inline {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-on-light-muted) !important;
    font-weight: 500;
}
.picker-item.selected .price-inline {
    color: var(--accent) !important;
    font-weight: 600;
}


/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .stats-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .hero { padding: 50px 20px 70px; }
}

@media (max-width: 640px) {
    .stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .hero-trust { gap: 16px; }
    .hero-trust span { font-size: 12px; }
}