/* ══════════════════════════════════════════════════════════════
   VIRTUAL NUMBERS, buy flow styles for the dashboard
   ══════════════════════════════════════════════════════════════ */

/* Local theme aliases, blue accent for the numbers/provider flow */
:root{
  --indigo: #0ea5e9;
  --indigo-h: #38bdf8;
  --indigo-dim: rgba(14,165,233,.14);
  --indigo-light: rgba(14,165,233,.10);
  --indigo-border: rgba(14,165,233,.35);
  --yellow: #f5b942;
  --radius-sm: 9px;
}

/* ── Buy Layout ──────────────────────────────────────────── */
.buy-section { margin-bottom:20px; }

/* Unified panel */
.sel-panel { background:#15171c; border:1px solid rgba(244,243,238,0.08); border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.5); overflow:hidden; margin-bottom:14px; }
.sel-panel-head { padding:15px 18px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(244,243,238,0.06); background:#15171c; }
.sel-panel-title { font-size:13px; font-weight:700; color:rgba(244,243,238,.45); text-transform:uppercase; letter-spacing:.06em; }
.indigo-text { color:var(--indigo); font-style:normal; text-transform:none; letter-spacing:0; font-size:14px; }
.panel-link { font-size:12px; color:var(--indigo); text-decoration:none; font-weight:600; display:flex; align-items:center; gap:3px; opacity:.85; }
.panel-link:hover { opacity:1; }

/* Service chip grid */
.svc-chip-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:8px; padding:14px 16px; }
.svc-chip { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; border-radius:12px; padding:10px 8px 8px; border:2px solid transparent; transition:border-color .14s, background .14s; background:rgba(244,243,238,0.03); width:100%; }
.svc-chip:hover { background:rgba(244,243,238,0.07); border-color:rgba(244,243,238,0.12); }
.svc-chip.active { border-color:var(--indigo); background:var(--indigo-dim); box-shadow:0 0 0 3px rgba(14,165,233,.10); }
.svc-chip-icon { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-chip-icon img { width:22px; height:22px; object-fit:contain; }
.svc-chip-label { font-size:10.5px; font-weight:600; color:rgba(244,243,238,.6); text-align:center; line-height:1.2; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svc-chip.active .svc-chip-label { color:#fff; }

/* Provider selector strip */
.prov-strip { display:flex; gap:8px; padding:10px 14px 12px; border-bottom:1px solid rgba(244,243,238,0.06); }
.prov-pill { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 8px 8px; border-radius:10px; border:1.5px solid rgba(244,243,238,0.08); background:rgba(244,243,238,0.03); cursor:pointer; transition:all .15s; text-align:center; }
.prov-pill:hover { border-color:rgba(244,243,238,0.18); background:rgba(244,243,238,0.07); }
.prov-pill.active { border-color:var(--indigo); background:var(--indigo-dim); box-shadow:0 0 0 3px rgba(14,165,233,.10); }
.prov-pill-icon { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.prov-pill-icon--auto { background:rgba(99,102,241,0.18); color:var(--indigo); }
.prov-pill-icon--grizzly { background:rgba(249,115,22,0.18); color:#f97316; }
.prov-pill-icon--fivesim { background:rgba(14,165,233,0.18); color:var(--indigo); }
.prov-pill-icon--onlinesim { background:rgba(16,185,129,0.18); color:#10b981; }
.prov-pill-name { font-size:11px; font-weight:700; color:rgba(244,243,238,.55); line-height:1; }
.prov-pill-sub  { font-size:10px; color:rgba(244,243,238,.28); line-height:1; }
.prov-pill.active .prov-pill-name { color:#fff; }
.prov-pill.active .prov-pill-sub  { color:rgba(244,243,238,.55); }

/* Search bar */
.buy-search-wrap { padding:12px 14px; border-bottom:1px solid rgba(244,243,238,0.06); }
.buy-search-inner { display:flex; align-items:center; gap:10px; background:rgba(244,243,238,0.05); border:1px solid rgba(244,243,238,0.09); border-radius:9px; padding:8px 12px; transition:border-color .15s; }
.buy-search-inner:focus-within { border-color:var(--indigo); background:rgba(14,165,233,0.07); }
.buy-search-inner i { color:var(--indigo); font-size:13px; flex-shrink:0; }
.buy-search-inner input { border:none; outline:none; background:transparent; font-size:13.5px; font-family:'Inter',sans-serif; color:#f4f3ee; width:100%; }
.buy-search-inner input::placeholder { color:rgba(244,243,238,.3); }

/* Column headers */
.list-col-head { display:flex; align-items:center; padding:7px 18px; background:rgba(0,0,0,0.20); border-bottom:1px solid rgba(244,243,238,0.06); }
.list-col-head-label { font-size:11.5px; font-weight:600; color:rgba(244,243,238,.4); text-transform:uppercase; letter-spacing:.04em; flex:1; }
.list-col-head-right { display:flex; gap:28px; }
.list-col-head-right span { font-size:11.5px; font-weight:600; color:rgba(244,243,238,.4); text-transform:uppercase; letter-spacing:.04em; }

/* Country buy list */
.sel-empty   { padding:44px 20px; text-align:center; color:rgba(244,243,238,.3); font-size:13.5px; }
.sel-loading { padding:40px 20px; text-align:center; color:rgba(244,243,238,.3); font-size:13px; }
.country-buy-list { overflow-y:auto; max-height:none; }
.country-buy-wrap { border-bottom:1px solid rgba(244,243,238,0.05); }
.country-buy-wrap:last-child { border-bottom:none; }
.country-buy-item { display:flex; align-items:center; padding:12px 18px; gap:12px; cursor:pointer; user-select:none; transition:background .15s; min-height:48px; }
.country-buy-item:hover { background:rgba(14,165,233,0.06); }
.country-buy-item:active { background:rgba(14,165,233,0.14); }
.country-buy-item.open { background:rgba(14,165,233,0.10); }
.c-flag-img { width:26px; height:18px; border-radius:3px; object-fit:cover; flex-shrink:0; display:block; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.c-info { flex:1; min-width:0; }
.c-name { font-size:13.5px; font-weight:500; color:#f4f3ee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.country-qty { font-size:12px; color:rgba(244,243,238,.3); font-weight:500; width:58px; text-align:right; white-space:nowrap; flex-shrink:0; }
.c-from-price { font-size:12.5px; color:var(--indigo); font-weight:700; width:72px; text-align:right; white-space:nowrap; flex-shrink:0; }
.c-chevron { font-size:9px; color:rgba(244,243,238,.25); transition:transform .22s cubic-bezier(.4,0,.2,1), color .15s; flex-shrink:0; margin-left:2px; }
.country-buy-item.open .c-chevron { transform:rotate(90deg); color:var(--indigo); }

/* Tier panel, smooth slide open via max-height */
.cty-tiers { overflow:hidden; max-height:0; transition:max-height .28s cubic-bezier(.4,0,.2,1); background:rgba(0,0,0,0.20); }
.cty-tiers.open { max-height:800px; }
.cty-tier-head { display:flex; align-items:center; padding:6px 18px 6px 62px; border-bottom:1px solid rgba(244,243,238,0.06); background:rgba(0,0,0,0.10); }
.cty-tier-head span { font-size:10.5px; font-weight:700; color:rgba(244,243,238,.28); text-transform:uppercase; letter-spacing:.05em; flex:1; }
.cty-tier-head span:last-child { flex:none; width:80px; text-align:right; }
.cty-tier-row { display:flex; align-items:center; padding:10px 18px 10px 62px; gap:12px; border-bottom:1px solid rgba(244,243,238,0.04); transition:background .12s; }
.cty-tier-row:last-child { border-bottom:none; }
.cty-tier-row:hover { background:rgba(14,165,233,0.05); }
.cty-tier-qty { flex:1; font-size:13px; color:rgba(244,243,238,.55); }
.cty-tier-loading { padding:14px 20px 14px 62px; font-size:12.5px; color:rgba(244,243,238,.3); }

/* Refund info strip */
.refund-strip { display:flex; align-items:center; gap:8px; padding:9px 18px; border-top:1px solid rgba(244,243,238,0.05); background:rgba(16,185,129,0.05); }
.refund-strip i { color:var(--green); font-size:12px; }
.refund-strip span { font-size:12px; color:rgba(244,243,238,.5); font-weight:500; }

/* Buy button */
.c-buy-btn { background:var(--indigo); color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; font-family:'Inter',sans-serif; transition:background .12s, transform .1s; white-space:nowrap; min-width:74px; min-height:38px; text-align:center; letter-spacing:.01em; }
.c-buy-btn:hover { background:var(--indigo-h); transform:translateY(-1px); }
.c-buy-btn:active { transform:translateY(0); }
.c-buy-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-danger-sm:disabled { opacity:.40; cursor:not-allowed; }

/* Small buttons used inside act-modal */
.btn-sm { padding:9px 14px; border-radius:8px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; }
.btn-ghost-sm { background:rgba(244,243,238,0.07); color:#f4f3ee; border-color:rgba(244,243,238,0.12); }
.btn-ghost-sm:hover { background:rgba(244,243,238,0.12); }
.btn-danger-sm { background:rgba(255,77,94,.13); color:#ff4d5e; border-color:rgba(255,77,94,.35); }
.btn-danger-sm:hover { background:rgba(255,77,94,.20); }

/* Inline alert */
.alert { padding:10px 14px; border-radius:8px; font-size:13px; }
.alert.error { background:rgba(255,77,94,.10); border:1px solid rgba(255,77,94,.30); color:#ffb4bb; }

/* ── Activation Detail Modal ─────────────────────────────── */
.act-modal-box { max-width: 520px; padding: 0; overflow: hidden; }
.act-modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px; border-bottom:1px solid rgba(244,243,238,0.07); }
.act-svc-wrap { display:flex; align-items:center; gap:14px; }
.act-svc-icon { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.act-svc-icon img { width:26px; height:26px; object-fit:contain; }
.act-svc-name-text { font-family:var(--head); font-size:16px; font-weight:700; color:#fff; }
.act-country-text { font-size:12px; color:rgba(244,243,238,.4); margin-top:3px; letter-spacing:.03em; }
.act-phone-section { padding:22px 22px 0; text-align:center; }
.act-phone-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:rgba(244,243,238,.3); margin-bottom:9px; }
.act-phone-row { display:flex; align-items:center; justify-content:center; gap:10px; }
.act-phone-num { font-family:var(--head); font-size:28px; font-weight:700; color:var(--indigo); letter-spacing:-.5px; cursor:pointer; }
.act-copy-phone { background:none; border:1px solid rgba(14,165,233,.3); color:var(--indigo); border-radius:7px; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; transition:all .15s; flex-shrink:0; }
.act-copy-phone:hover { background:rgba(14,165,233,.1); border-color:var(--indigo); }
.act-status-section { padding:26px 22px 20px; text-align:center; }
.act-anim-wrap { position:relative; width:72px; height:72px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
.act-pulse-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(14,165,233,.5); animation:act-pulse 2s ease-out infinite; }
.act-pulse-ring-2 { animation-delay:1s; }
@keyframes act-pulse { 0%{transform:scale(.8);opacity:.7;} 70%{transform:scale(1.55);opacity:0;} 100%{transform:scale(1.55);opacity:0;} }
.act-wait-icon-wrap { width:54px; height:54px; border-radius:50%; background:rgba(14,165,233,.12); border:1.5px solid rgba(14,165,233,.25); display:flex; align-items:center; justify-content:center; z-index:1; }
.act-wait-icon-wrap i { font-size:21px; color:var(--indigo); }
.act-status-text { font-size:15px; font-weight:700; color:#f4f3ee; margin-bottom:4px; }
.act-status-sub { font-size:12.5px; color:rgba(244,243,238,.38); }
.act-otp-section { padding:22px 22px 6px; text-align:center; }
.act-otp-label { font-size:11.5px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:7px; }
.act-otp-code-wrap { background:rgba(16,185,129,.07); border:2px solid rgba(16,185,129,.28); border-radius:14px; padding:18px 20px 12px; cursor:pointer; transition:all .2s; margin-bottom:10px; }
.act-otp-code-wrap:hover { background:rgba(16,185,129,.13); border-color:rgba(16,185,129,.4); }
.act-otp-digits { font-family:var(--head); font-size:42px; font-weight:800; letter-spacing:8px; color:#fff; line-height:1; }
.act-otp-copy-hint { font-size:11px; color:rgba(16,185,129,.55); margin-top:8px; }
.act-otp-fulltext { font-size:11.5px; color:rgba(244,243,238,.32); line-height:1.55; padding:0 4px; word-break:break-word; }
.act-meta { display:flex; border-top:1px solid rgba(244,243,238,0.06); margin-top:18px; }
.act-meta-item { flex:1; padding:12px 10px; text-align:center; border-right:1px solid rgba(244,243,238,0.06); }
.act-meta-item:last-child { border-right:none; }
.act-meta-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(244,243,238,.28); margin-bottom:4px; }
.act-meta-val { font-size:13px; font-weight:700; color:#f4f3ee; }
.act-actions { display:flex; gap:10px; padding:14px 22px 22px; }
.act-actions .btn-ghost-sm,.act-actions .btn-danger-sm { flex:1; padding:11px 8px; font-size:13px; display:flex; align-items:center; justify-content:center; }
.act-done-btn { width:100%; padding:12px; background:var(--green); color:#fff; border:none; border-radius:9px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.act-done-btn:hover { background:#0da271; transform:translateY(-1px); }
.act-close-only-btn { width:100%; padding:12px; background:rgba(244,243,238,0.07); color:#f4f3ee; border:1px solid rgba(244,243,238,0.12); border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.act-close-only-btn:hover { background:rgba(244,243,238,0.12); }

/* My Numbers list items (consistent with VO) */
.number-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid rgba(244,243,238,0.05); flex-wrap:wrap; }
.number-item:last-child { border-bottom:none; }
.num-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.svc-icon { width:36px; height:36px; border-radius:9px; background:rgba(244,243,238,0.06); border:1px solid rgba(244,243,238,0.10); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#c9c8c2; }
.svc-icon img { width:20px; height:20px; object-fit:contain; }
.num-phone { font-family:var(--head); font-size:15px; font-weight:700; color:#fff; }
.num-meta { font-size:12px; color:var(--text2); margin-top:2px; }
.price-tag { color:var(--indigo); font-weight:700; }
.otp-code { font-family:var(--head); font-size:18px; font-weight:800; letter-spacing:4px; color:#fff; background:rgba(16,185,129,.12); border:1.5px solid rgba(16,185,129,.4); border-radius:8px; padding:6px 12px; cursor:pointer; }
.badge { font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.04em; }
.badge.waiting { background:rgba(245,185,66,.13); color:var(--yellow); }
.badge.waiting .waiting-dot { width:6px; height:6px; border-radius:50%; background:var(--yellow); animation:pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.badge.done { background:rgba(16,217,126,.14); color:var(--green); }
.badge.neutral { background:rgba(244,243,238,.06); color:var(--text2); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .buy-section { margin-bottom:16px; }
}
@media (max-width: 960px) {
  .svc-chip-grid { grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); gap:6px; padding:10px 12px; }
  .svc-chip { padding:8px 6px 6px; }
  .svc-chip-icon { width:40px; height:40px; border-radius:10px; }
  .svc-chip-icon img { width:20px; height:20px; }
  .country-qty { display:none; }
  .list-col-head-right span:first-child { display:none; }
  .cty-tier-head { padding-left:54px; }
  .cty-tier-row { padding-left:54px; }
  .cty-tier-loading { padding-left:54px; }
}
@media (max-width: 640px) {
  .svc-chip-grid { grid-template-columns:repeat(5, 1fr); gap:5px; padding:8px 10px; }
  .svc-chip { padding:7px 4px 6px; }
  .svc-chip-icon { width:38px; height:38px; border-radius:10px; }
  .svc-chip-icon img { width:19px; height:19px; }
  .c-from-price { width:60px; font-size:12px; }
  .c-buy-btn { min-width:62px; padding:8px 12px; font-size:12.5px; }
  .cty-tier-head { padding-left:46px; }
  .cty-tier-row { padding-left:46px; }
  .cty-tier-loading { padding-left:46px; }
  .number-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .number-item > div:last-child { width: 100%; }
  .otp-code { font-size: 16px; letter-spacing: 4px; }
  .act-modal-box { border-radius:18px 18px 0 0; position:fixed; bottom:0; left:0; right:0; max-width:100%; margin:0; transform:translateY(40px) !important; }
  .modal-overlay.open .act-modal-box { transform:translateY(0) !important; }
  .act-phone-num { font-size:24px; }
  .act-otp-digits { font-size:34px; letter-spacing:6px; }
  .act-meta { flex-wrap:wrap; }
  .act-meta-item { min-width:50%; }
}