/* Extracted from an inline <style> in: application/views/esim/components/style.php
   Edit here; every view listed links this file. */
                        .esim-th-install-warning {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            margin: 0 0 16px;
                            padding: 12px 14px;
                            border: 1px solid #fed7aa;
                            border-left: 4px solid #f97316;
                            border-radius: 10px;
                            background: #fff7ed;
                            color: #7c2d12;
                            font-size: 13px;
                            line-height: 1.6;
                        }

                        .esim-th-install-warning strong {
                            color: #9a3412;
                            font-size: 14px;
                        }

                        .esim-th-install-warning.compact {
                            margin: 10px 0;
                            font-size: 12px;
                        }

                        .hero h1 {
                            font-family: 'Syne', sans-serif;
                            font-size: clamp(2rem, 5vw, 3.4rem);
                            font-weight: 800;
                            line-height: 1.1;
                            letter-spacing: -0.02em;
                            margin-bottom: 0.8rem;
                        }

                        .hero h1 em {
                            color: var(--accent);
                            font-style: normal;
                        }

                        .hero-sub {
                            color: var(--muted);
                            font-size: 0.95rem;
                            max-width: 480px;
                            margin: 0 auto 2rem;
                        }

                        .hero-stats {
                            display: flex;
                            justify-content: center;
                            gap: 2.5rem;
                        }

                        .stat-num {
                            font-family: 'Syne', sans-serif;
                            font-size: 1.8rem;
                            font-weight: 800;
                            color: var(--text);
                            line-height: 1;
                        }

                        .stat-num sup {
                            font-size: 0.5em;
                            color: var(--accent);
                        }

                        .stat-lbl {
                            font-size: 11px;
                            color: var(--muted);
                            text-transform: uppercase;
                            letter-spacing: 0.08em;
                            margin-top: 3px;
                        }

                        /* ---- API ERROR BOX ---- */
                        .api-error-box {
                            background: rgba(255, 71, 87, 0.07);
                            border: 1px solid rgba(255, 71, 87, 0.25);
                            border-radius: var(--radius);
                            padding: 1.4rem 1.6rem;
                            margin-bottom: 2rem;
                        }

                        .api-error-box h3 {
                            color: #ff4757;
                            font-family: 'Syne', sans-serif;
                            font-size: 1rem;
                            margin-bottom: 6px;
                        }

                        .api-error-box p {
                            color: var(--muted);
                            font-size: 13px;
                            margin-bottom: 10px;
                        }

                        .api-error-box code {
                            background: rgba(255, 255, 255, 0.05);
                            padding: 2px 8px;
                            border-radius: 4px;
                            font-family: var(--font-mono);
                            font-size: 12px;
                            color: #ff8a95;
                        }

                        .api-error-detail {
                            margin-top: 10px;
                            background: #0a0a0f;
                            border: 1px solid var(--border);
                            border-radius: var(--radius-sm);
                            padding: 10px 14px;
                            font-family: var(--font-mono);
                            font-size: 12px;
                            color: #a0ffb0;
                            max-height: 200px;
                            overflow: auto;
                            white-space: pre-wrap;
                            word-break: break-all;
                            display: none;
                        }

                        .api-error-toggle {
                            font-size: 12px;
                            color: var(--muted);
                            cursor: pointer;
                            text-decoration: underline;
                        }

                        /* ---- FILTERS ---- */
                        .filters {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 10px;
                            margin-bottom: 2rem;
                            align-items: center;
                        }

                        .filter-search {
                            flex: 1;
                            min-width: 200px;
                            background: var(--surface);
                            border: 1px solid var(--border);
                            border-radius: var(--radius-sm);
                            padding: 9px 16px;
                            color: var(--text);
                            font-family: inherit;
                            font-size: 14px;
                            outline: none;
                            transition: border-color 0.2s;
                        }

                        .filter-search:focus {
                            border-color: var(--accent);
                        }

                        .filter-search::placeholder {
                            color: var(--muted);
                        }

                        .pill-wrap {
                            display: flex;
                            gap: 6px;
                            flex-wrap: wrap;
                        }

                        .pill {
                            padding: 6px 14px;
                            border-radius: 100px;
                            font-size: 13px;
                            font-weight: 500;
                            cursor: pointer;
                            border: 1px solid var(--border);
                            background: var(--surface);
                            color: var(--muted);
                            text-decoration: none;
                            transition: all 0.18s;
                            white-space: nowrap;
                        }

                        .pill:hover {
                            color: var(--text);
                            border-color: rgba(255, 255, 255, 0.2);
                        }

                        .pill.active {
                            background: var(--accent);
                            color: #fff;
                            border-color: var(--accent);
                            box-shadow: 0 0 14px rgba(108, 99, 255, 0.3);
                        }

                        /* ---- REGION ---- */
                        .region-section {
                            margin-bottom: 0.5rem;
                        }

                        .region-header {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            margin: 2.5rem 0 1.2rem;
                        }

                        .region-title {
                            font-family: 'Syne', sans-serif;
                            font-size: 1rem;
                            font-weight: 700;
                        }

                        .region-line {
                            flex: 1;
                            height: 1px;
                            background: var(--border);
                        }

                        .region-count {
                            font-size: 11px;
                            color: var(--muted);
                            background: var(--surface2);
                            padding: 3px 10px;
                            border-radius: 100px;
                        }

                        /* ---- COUNTRY GRID ---- */
                        .country-grid {
                            display: grid;
                            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                            gap: 12px;
                        }

                        .country-card {
                            position: relative;
                            overflow: hidden;
                            border-radius: var(--radius);
                            border: 1px solid var(--border);
                            background: var(--surface);
                            padding: 1.3rem 1.2rem;
                            text-decoration: none;
                            display: flex;
                            gap: 8px;
                            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
                            animation: fadeUp 0.35s ease both;
                        }

                        @keyframes fadeUp {
                            from {
                                opacity: 0;
                                transform: translateY(10px);
                            }

                            to {
                                opacity: 1;
                                transform: translateY(0);
                            }
                        }

                        .country-card::after {
                            content: '';
                            position: absolute;
                            inset: 0;
                            background: var(--c-accent, #6c63ff);
                            opacity: 0;
                            transition: opacity 0.22s;
                        }

                        .country-card:hover {
                            border-color: var(--c-accent, rgba(255, 255, 255, 0.15));
                            transform: translateY(-3px);
                            box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
                        }

                        .country-card:hover::after {
                            opacity: 0.05;
                        }

                        .card-flag {
                            font-size: 2.2rem;
                            line-height: 1;
                            transition: transform 0.22s;
                        }

                        .country-card:hover .card-flag {
                            transform: scale(1.1);
                        }

                        .card-name {
                            font-family: 'Syne', sans-serif;
                            font-size: 0.95rem;
                            font-weight: 700;
                            color: var(--text);
                            line-height: 1.2;
                        }

                        .card-code {
                            font-size: 10px;
                            color: var(--muted);
                            letter-spacing: 0.06em;
                            text-transform: uppercase;
                            margin-top: -5px;
                        }

                        .card-bottom {
                            margin-top: auto;
                        }

                        .card-price {
                            font-family: 'Syne', sans-serif;
                            font-size: 1.05rem;
                            font-weight: 700;
                            color: var(--text);
                        }

                        .card-price small {
                            font-size: 0.6em;
                            font-weight: 400;
                            color: var(--muted);
                        }

                        .card-pkgs {
                            font-size: 11px;
                            color: var(--muted);
                            margin-top: 2px;
                        }

                        /* accent per region */
                        .r-global {
                            --c-accent: #e94560;
                        }

                        .r-asia {
                            --c-accent: #00b4d8;
                        }

                        .r-oceania {
                            --c-accent: #52b788;
                        }

                        .r-americas {
                            --c-accent: #9b59b6;
                        }

                        .r-europe {
                            --c-accent: #f4a261;
                        }

                        .r-mideast {
                            --c-accent: #e9c46a;
                        }

                        .r-africa {
                            --c-accent: #e76f51;
                        }

                        /* ---- EMPTY ---- */
                        .empty {
                            text-align: center;
                            padding: 5rem 1rem;
                            color: var(--muted);
                        }

                        .empty-icon {
                            font-size: 3rem;
                            margin-bottom: 1rem;
                        }

                        .empty h3 {
                            font-family: 'Syne', sans-serif;
                            font-size: 1.2rem;
                            color: var(--text);
                            margin-bottom: .4rem;
                        }