/* ─────────────────────────────────────────
   eSIM Compatibility Checker — Styles
   Theme: Dark tech / refined
───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
    --esim-bg:          #0b0e17;
    --esim-surface:     #111520;
    --esim-border:      rgba(255,255,255,.08);
    --esim-accent:      #00d4aa;
    --esim-accent-dim:  rgba(0,212,170,.12);
    --esim-red:         #ff4d6a;
    --esim-red-dim:     rgba(255,77,106,.10);
    --esim-text:        #e8eaf2;
    --esim-muted:       #6b7280;
    --esim-radius:      16px;
    --esim-font-head:   'Syne', sans-serif;
    --esim-font-body:   'DM Sans', sans-serif;
}

/* ── Trigger Button ── */
.esim-trigger-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        13px 26px;
    background:     #279965;
    color:          #fff;
    border:         none;
    border-radius:  15px;
    font-family:    var(--esim-font-head);
    font-size:      15px;
    font-weight:    600;
    letter-spacing: .02em;
    cursor:         pointer;
    transition:     transform .15s, box-shadow .15s, background .15s;
    box-shadow:     0 0 0 0 rgba(0,212,170,0);
}
.esim-trigger-btn:hover {
    transform:   translateY(-2px);
    box-shadow:  0 6px 24px rgba(0,212,170,.35);
}
.esim-trigger-btn:active { transform: translateY(0); }
.esim-trigger-btn__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* ── Overlay ── */
.esim-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         99999;
    padding:         20px;
    animation:       esimFadeIn .2s ease;
}
.esim-overlay[hidden] { display: none; }

@keyframes esimFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal Card ── */
.esim-modal {
    position:      relative;
    background:    var(--esim-surface);
    border:        1px solid var(--esim-border);
    border-radius: var(--esim-radius);
    padding:       40px 36px 36px;
    width:         100%;
    max-width:     520px;
    max-height:    88vh;
    overflow-y:    auto;
    box-shadow:    0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,170,.06);
    animation:     esimSlideUp .25s cubic-bezier(.22,1,.36,1);
    font-family:   var(--esim-font-body);
    color:         var(--esim-text);
    scrollbar-width: thin;
    scrollbar-color: var(--esim-border) transparent;
}
@keyframes esimSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Close Button ── */
.esim-modal__close {
    position:    absolute;
    top:         16px;
    right:       16px;
    width:       50px;
    height:      50px;
    background:  transparent;
    border:      1px solid var(--esim-border);
    border-radius: 50%;
    color:       var(--esim-muted);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background .15s, color .15s;
    flex-shrink: 0;
}
.esim-modal__close svg { width: 25px; height:25px; }
.esim-modal__close:hover { background: var(--esim-border); color: var(--esim-text); }

/* ── Chip SVG ── */
.esim-modal__chip {
    color:       var(--esim-accent);
    width:       60px;
    margin-bottom: 20px;
}
.esim-modal__chip svg { width: 100%; height: auto; }

/* ── Header Text ── */
.esim-modal__eyebrow {
    font-family:    var(--esim-font-head);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--esim-accent);
    margin:         0 0 8px;
}
.esim-modal__title {
    font-family:  var(--esim-font-head);
    font-size:    26px;
    font-weight:  700;
    color:        var(--esim-text);
    margin:       0 0 10px;
    line-height:  1.2;
}
.esim-modal__desc {
    font-size:   14px;
    color:       var(--esim-muted);
    margin:      0 0 28px;
    line-height: 1.55;
}

/* ── Search Input ── */
.esim-search-wrap {
    position:      relative;
    margin-bottom: 20px;
}
.esim-search-wrap__icon {
    position:  absolute;
    left:      16px;
    top:       50%;
    transform: translateY(-50%);
    width:     18px; height: 18px;
    color:     var(--esim-muted);
    pointer-events: none;
}
.esim-search-input {
    width:         100%;
    box-sizing:    border-box;
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--esim-border);
    border-radius: 12px;
    padding:       14px 48px 14px 48px;
    font-family:   var(--esim-font-body);
    font-size:     15px;
    color:         var(--esim-text);
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.esim-search-input::placeholder { color: var(--esim-muted); }
.esim-search-input:focus {
    border-color: var(--esim-accent);
    box-shadow:   0 0 0 3px rgba(0,212,170,.12);
}
.esim-search-clear {
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    background:  transparent;
    border:      none;
    color:       var(--esim-muted);
    cursor:      pointer;
    padding:     4px;
    display:     flex;
    align-items: center;
    transition:  color .15s;
}
.esim-search-clear svg { width: 14px; height: 14px; }
.esim-search-clear:hover { color: var(--esim-text); }
.esim-search-clear[hidden] { display: none; }

/* ── Hint ── */
.esim-modal__hint {
    text-align: center;
    font-size:  13px;
    color:      var(--esim-muted);
    margin:     8px 0 0;
}

/* ── Result Card ── */
.esim-result-card {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    padding:       16px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    border:        1px solid transparent;
}
.esim-result-card--yes {
    background:   var(--esim-accent-dim);
    border-color: rgba(0,212,170,.2);
}
.esim-result-card--no {
    background:   var(--esim-red-dim);
    border-color: rgba(255,77,106,.2);
}
.esim-result-card__icon {
    font-size:   20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top:  2px;
}
.esim-result-card--yes .esim-result-card__icon { color: var(--esim-accent); }
.esim-result-card--no  .esim-result-card__icon { color: var(--esim-red); }
.esim-result-card__text { display: flex; flex-direction: column; gap: 4px; }
.esim-result-card__text strong { font-size: 15px; font-weight: 600; }
.esim-result-card__text span   { font-size: 13px; color: var(--esim-muted); }

/* ── Brand Group ── */
.esim-brand-group { margin-bottom: 14px; }
.esim-brand-group__name {
    font-family:    var(--esim-font-head);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--esim-muted);
    margin:         0 0 8px;
}
.esim-brand-group__list {
    list-style:    none;
    margin:        0;
    padding:       0;
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
}
.esim-brand-group__list li {
    background:    rgba(255,255,255,.05);
    border:        1px solid var(--esim-border);
    border-radius: 6px;
    padding:       5px 10px;
    font-size:     13px;
    color:         var(--esim-text);
    line-height:   1.4;
}
.esim-brand-group__list li mark {
    background:    transparent;
    color:         var(--esim-accent);
    font-weight:   600;
}

/* ── Suggestion line ── */
.esim-results__suggestion {
    font-size:  13px;
    color:      var(--esim-muted);
    margin:     0;
    text-align: center;
}
.esim-link { color: var(--esim-accent); text-decoration: none; }
.esim-link:hover { text-decoration: underline; }

/* ── Scrollbar (webkit) ── */
.esim-modal::-webkit-scrollbar       { width: 4px; }
.esim-modal::-webkit-scrollbar-thumb { background: var(--esim-border); border-radius: 2px; }

/* ── Responsive ── */
@media (max-width: 540px) {
    .esim-modal       { padding: 32px 20px 24px; }
    .esim-modal__title { font-size: 22px; }
}