:root{ --stroke: rgba(2,6,23,.08); --ring:#2F6FE4; --ring2:#6A85FF }
.shadow-soft{ box-shadow:0 14px 38px -14px rgba(2,6,23,.15) }
.card{ background:#fff; border:1px solid var(--stroke); border-radius:18px; padding:16px; box-shadow:0 12px 30px -14px rgba(2,6,23,.08) }
.hero{ background:linear-gradient(180deg,#F1F5FF 0%,#F6F8FD 100%); border:1px solid var(--stroke); border-radius:18px; padding:18px }
.stat-tile{ background:linear-gradient(180deg,#F7F9FF 0%,#FFFFFF 100%); border:1px solid var(--stroke); border-radius:14px; padding:14px }
.stat-caption{ font-size:12px; color:#64748B }
.stat-value{ font-size:22px; font-weight:800; letter-spacing:.2px }
.info-tile{ background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:12px 14px }
.ghost-tile{ background:#fff; border:1px dashed var(--stroke); border-radius:14px; padding:12px 14px; transition:background-color .2s, box-shadow .2s }
.ghost-tile:hover{ background:#F8FAFF; box-shadow:0 10px 26px -14px rgba(2,6,23,.08) }
.chip-success{ display:inline-flex; align-items:center; gap:.375rem; background:#E8F7ED; color:#1E8E3E; border:1px solid rgba(16,185,129,.25); font-size:12px; font-weight:600; padding:.25rem .5rem; border-radius:999px }
.chip-success::before{ content:""; width:.5rem; height:.5rem; border-radius:999px; background:#10B981 }
.chip-neutral{ display:inline-flex; align-items:center; gap:.375rem; background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; font-size:12px; font-weight:600; padding:.25rem .5rem; border-radius:999px }
.chip-muted{ display:inline-flex; align-items:center; background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; font-size:12px; font-weight:600; padding:.1rem .5rem; border-radius:999px }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; white-space:nowrap }
.section-title{ font-size:1.05rem; font-weight:700; line-height:1 }

.plan-card{ position:relative; background:#fff; border:1.5px solid #C7D7FE; border-radius:18px; padding:16px; box-shadow:0 14px 34px -18px rgba(37,99,235,.25) }
.plan-card.basic{ border-color:#E2E8F0; box-shadow:0 14px 34px -18px rgba(2,6,23,.1) }
.plan-head{ font-weight:700 }
.plan-volume{ font-size:22px; font-weight:800; color:#2563EB }
.plan-days{ display:flex; align-items:center; gap:.375rem; color:#64748B; font-size:.92rem }
.plan-price{ font-size:28px; font-weight:800; background:linear-gradient(90deg,#2563EB,#6A85FF); -webkit-background-clip:text; background-clip:text; color:transparent }
.ul-check{ margin-top:.5rem }
.ul-check li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.95rem; color:#334155 }
.ul-check li svg{ margin-top:.2rem }
.corner-badge{ position:absolute; right:10px; top:-10px; padding:.25rem .6rem; background:linear-gradient(90deg,#2563EB,#6A85FF); color:#fff; font-weight:700; font-size:11px; border-radius:999px; box-shadow:0 10px 26px -14px rgba(37,99,235,.5) }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#2F6FE4 0%, #6A85FF 100%); color:#fff; padding:.8rem 1rem; border-radius:12px; font-weight:700; letter-spacing:.2px; box-shadow:0 14px 32px -12px rgba(47,111,228,.4); transition:transform .08s, filter .2s; width:100% }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-primary:active{ transform:translateY(1px) }

.btn-start{
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    background:#D95046; color:#fff; font-weight:800; letter-spacing:.2px;
    padding:.85rem 1.4rem; border:none; border-radius:26px;
    box-shadow:0 16px 36px -18px rgba(217,80,70,.55);
    min-width:220px; max-width:100%; margin:0 auto;
    transition:transform .08s, filter .2s
}
.btn-start:hover{ filter:brightness(1.03) }
.btn-start:active{ transform:translateY(1px) }
.btn-start svg{ width:18px; height:18px; display:block }

.step{ display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:.9rem 1rem }
.step-num{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; color:#fff; font-weight:800; background:linear-gradient(180deg,#2563EB,#6A85FF) }

.support-card{ background:linear-gradient(180deg,#EFF4FF 0%, #F7F9FF 100%); border:1px solid var(--stroke); border-radius:18px; padding:18px; box-shadow:0 12px 30px -14px rgba(2,6,23,.08) }
.support-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg,#E9F2FF 0%, #EDEBFF 100%); color:#2563EB; box-shadow:inset 0 0 0 1px rgba(37,99,235,.18) }

.hero-center{ text-align:center; background:#EEF3FA; border:1px solid var(--stroke); border-radius:18px; padding:20px 16px 18px; box-shadow:0 12px 30px -16px rgba(2,6,23,.08) }
.hero-title-lg{ font-size:1.35rem; line-height:1.25; font-weight:800; letter-spacing:.2px; margin:0 }
.hero-sub-lg{ margin:.5rem auto 0; max-width:40ch; font-size:.95rem; color:#6B7280 }

.pillv{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; padding:14px 10px; border-radius:16px; background:#fff; border:1px solid #E6ECF6; box-shadow:0 10px 26px -18px rgba(2,6,23,.12) }
.pillv:hover{ transform:translateY(-1px); border-color:#d9e4f7; box-shadow:0 16px 34px -18px rgba(47,111,228,.22) }
.pillv-icon{ line-height:0; color:#2F6FE4 }
.pillv-icon svg{ display:block; stroke:currentColor }
.pillv-full{ width:100% }
.pillv-label{ white-space:normal; text-align:center; line-height:1.2 }

.select-wrap{ position:relative }
.select-wrap::after{ content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #64748b; pointer-events:none }
.select-clean{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:100%; border:1px solid var(--stroke); border-radius:0.75rem; padding:0.5rem 2.25rem 0.5rem 0.75rem; outline:none; background:#fff }
.select-clean:disabled{ background:#f8fafc; color:#94a3b8 }
.select-clean:focus{ box-shadow:0 0 0 6px rgba(47,111,228,.12); border-color:#cfe0ff }

.chips-scroll{ position:relative; display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; scrollbar-width:none }
.chips-scroll::-webkit-scrollbar{ display:none; height:0 }
.country-chip{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:.5rem .9rem; font-weight:700; white-space:nowrap; transition:transform .06s, box-shadow .2s, border-color .2s }
.country-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -18px rgba(2,6,23,.18); border-color:#d9e4f7 }
.country-chip[aria-pressed="true"]{ background:linear-gradient(90deg,#2F6FE4, #6A85FF); color:#fff; border-color:transparent }

.faq-item{ background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px }
.faq-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600 }
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-chevron{ transition:transform .2s ease; opacity:.75 }
.faq-item[open] .faq-chevron{ transform:rotate(180deg); opacity:1 }
.faq-a{ margin-top:.5rem; color:#475569; line-height:1.45 }

.chips-dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; padding:6px 0 }
.chips-dots .dot{ width:8px; height:8px; border-radius:999px; background:#cbd5e1; border:1px solid #94a3b8; opacity:.95; transition:transform .12s ease, background-color .18s ease, border-color .18s ease }
.chips-dots .dot.active{ background:#2F6FE4; border-color:#2F6FE4; transform:scale(1.15) }

.action-btn{
    width:100%;
    min-height:44px;
    padding:.75rem 1rem;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;

    background:#fff;
    border:1px solid var(--stroke);
    border-radius:14px;

    font-weight:700;
    color:#0f172a;

    box-shadow:0 10px 26px -18px rgba(2,6,23,.10);
    transition:transform .08s, filter .2s, background-color .2s;
}

.action-btn:hover{ background:#F8FAFF }
.action-btn:active{ transform:translateY(1px) }

.action-btn__icon{ flex:0 0 auto; line-height:0; color:#2F6FE4 }

.action-btn__text{
    text-align:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.2;
}

.btn-danger-ghost{
    width:100%;
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.75rem 1rem;
    border-radius:14px;

    background:transparent;
    border:1px solid rgba(239,68,68,.28);
    color:#ef4444;

    font-weight:800;
    letter-spacing:.15px;

    transition:transform .08s, background-color .2s, filter .2s, box-shadow .2s, border-color .2s;
}

.btn-danger-ghost:hover{
    background:rgba(239,68,68,.06);
    border-color:rgba(239,68,68,.38);
    box-shadow:0 10px 26px -18px rgba(239,68,68,.25);
}

.btn-danger-ghost:active{ transform:translateY(1px) }

.btn-danger-ghost:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
}

.btn-danger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;

    background:linear-gradient(90deg,#ef4444 0%, #f97316 100%);
    color:#fff;

    padding:.8rem 1rem;
    border-radius:12px;

    font-weight:800;
    letter-spacing:.2px;

    box-shadow:0 14px 32px -12px rgba(239,68,68,.35);
    transition:transform .08s, filter .2s;
}

.btn-danger:hover{ filter:brightness(1.05) }
.btn-danger:active{ transform:translateY(1px) }
.btn-danger:disabled{ opacity:.6; cursor:not-allowed; }

/* ── Multi-package card styles ── */
.country-section{ border-top:1px solid rgba(2,6,23,.06); padding-top:12px; margin-top:12px }
.country-section:first-child{ border-top:none; padding-top:0; margin-top:0 }
.country-label{ font-size:11px; font-weight:700; text-transform:uppercase; color:#64748B; letter-spacing:.5px }

.pkg-card{ background:linear-gradient(135deg,rgba(47,111,228,.06) 0%,rgba(123,44,191,.04) 100%); border:1px solid rgba(47,111,228,.15); border-radius:14px; padding:12px }
.pkg-card-pending{ background:#F8FAFC; border:1px solid #E2E8F0; border-radius:14px; padding:10px; opacity:.85 }

.pkg-header{ display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap }
.pkg-label{ font-size:.875rem; font-weight:700; color:#1E293B }
.pkg-refresh{ background:none; border:none; padding:2px; cursor:pointer; color:#64748B; display:inline-flex }
.pkg-refresh:hover{ color:#2F6FE4 }

.badge-active{ display:inline-flex; align-items:center; gap:4px; background:#ECFDF5; color:#047857; border:1px solid rgba(16,185,129,.25); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-active::before{ content:""; width:6px; height:6px; border-radius:999px; background:#10B981 }
.badge-pending{ display:inline-flex; align-items:center; gap:4px; background:#FFFBEB; color:#B45309; border:1px solid rgba(251,191,36,.3); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-awaiting{ display:inline-flex; align-items:center; gap:4px; background:#EFF6FF; color:#1D4ED8; border:1px solid rgba(59,130,246,.3); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-upcoming{ display:inline-flex; align-items:center; gap:4px; background:#ECFDF5; color:#047857; border:1px solid rgba(16,185,129,.25); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }

.progress-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#64748B; margin-top:8px }
.progress-value{ font-weight:600; color:#1E293B }
.progress-track{ width:100%; height:10px; background:#E2E8F0; border-radius:999px; overflow:hidden; margin-top:3px }
.progress-fill-green{ height:100%; background:#10B981; border-radius:999px; transition:width .4s ease }
.progress-fill-amber{ height:100%; background:#FBBF24; border-radius:999px; transition:width .4s ease }
.progress-fill-rose{ height:100%; background:#F43F5E; border-radius:999px; transition:width .4s ease }
.progress-track-sm{ height:8px }

.btn-activate{ display:inline-flex; align-items:center; justify-content:center; gap:4px; background:#EF4444; color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border:none; border-radius:999px; cursor:pointer; transition:filter .15s }
.btn-activate:hover{ filter:brightness(1.1) }
.btn-add-pkg{ display:inline-flex; align-items:center; gap:4px; background:rgba(47,111,228,.08); color:#2F6FE4; font-size:12px; font-weight:600; padding:6px 12px; border:none; border-radius:999px; cursor:pointer; transition:background .15s }
.btn-add-pkg:hover{ background:rgba(47,111,228,.15) }