/* ============================================================
   AI Account Checkout — unified payment page (v2)
   ============================================================ */
.aic-page {
  font-family: inherit;
  direction: rtl;
  color: #0f172a;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: #fff;
}

/* Collapse empty wrapper main from site chrome */
body > main:not(.aic-page) { display: contents; }

/* Neutralize global .container_1 min-height (258px) so the breadcrumb sits
   flush under the header services bar (same approach as wireless-link). */
.container_1:has(+ .aic-page) {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.container_1:has(+ .aic-page) > .services {
  margin-bottom: 0 !important;
}

/* ── Breadcrumb — identical to ai-account detail (.ad-breadcrumb) ── */
.aic-page .ad-breadcrumb {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 0;
  margin: 0;
}
.aic-page .ad-breadcrumb ol {
  list-style: none;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1140px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}
.aic-page .ad-breadcrumb li + li::before { content: '›'; margin-left: 6px; color: #94a3b8; }
.aic-page .ad-breadcrumb a { color: #0284c7; text-decoration: none; }
.aic-page .ad-breadcrumb a:hover { text-decoration: underline; }
.aic-page .ad-breadcrumb li[aria-current="page"] { color: #1a1a2e; font-weight: 600; }

/* ── Hero (light, integrated with site theme) ───────────── */
.aic-hero {
  background: #fff;
  border-bottom: 1px solid #e8edf2;
  padding: 52px 20px 44px;
  position: relative;
  overflow: hidden;
}
.aic-hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -60px;
  top: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(14,165,233,.12), transparent 70%);
  pointer-events: none;
}
.aic-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.aic-hero__visual {
  flex: none;
  display: grid;
  place-items: center;
}
.aic-hero__visual img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(2, 20, 45, .12));
}
.aic-hero__text { flex: 1; min-width: 0; }
.aic-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.aic-hero__eyebrow svg { width: 15px; height: 15px; }
.aic-hero__title {
  font-size: clamp(21px, 3.2vw, 30px);
  font-weight: 900;
  margin: 0;
  line-height: 1.3;
  color: #0f172a;
}
.aic-hero__plan {
  display: inline-block;
  font-size: .6em;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  padding: 3px 13px;
  border-radius: 999px;
  vertical-align: middle;
  margin-inline-start: 6px;
  box-shadow: 0 4px 12px rgba(2,132,199,.28);
}
.aic-hero__sub {
  margin: 9px 0 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.7;
  max-width: 520px;
}

/* ── Layout grid ────────────────────────────────────────── */
.aic-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 0 56px;
  background: #f4f7fb;
}
.aic-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

/* ── Cards ──────────────────────────────────────────────── */
.aic-card {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.aic-card + .aic-card { margin-top: 18px; }
.aic-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #0f172a;
}
.aic-card__title svg { color: #0ea5e9; }

/* ── Fields ─────────────────────────────────────────────── */
.aic-field { margin-bottom: 15px; }
.aic-field:last-child { margin-bottom: 0; }
.aic-label { display: block; font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 7px; }
.aic-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #d5dee8;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.aic-input::placeholder { color: #b4c0ce; }
.aic-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .16);
}

/* ── Choice (existing vs new) ───────────────────────────── */
.aic-fieldset { border: 0; margin: 0 0 4px; padding: 0; }
.aic-legend { font-size: 14px; font-weight: 800; margin-bottom: 12px; color: #0f172a; padding: 0; }
.aic-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aic-choice__item { position: relative; cursor: pointer; }
.aic-choice__item input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.aic-choice__box {
  display: block;
  height: 100%;
  border: 1.5px solid #d5dee8;
  border-radius: 14px;
  padding: 14px;
  background: #f8fafc;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.aic-choice__item:hover .aic-choice__box { border-color: #94c9ec; transform: translateY(-1px); }
.aic-choice__item input:checked + .aic-choice__box {
  border-color: #0ea5e9;
  background: #f0f9ff;
  box-shadow: 0 6px 18px rgba(14, 165, 233, .16);
}
.aic-choice__item input:focus-visible + .aic-choice__box { box-shadow: 0 0 0 3px rgba(14,165,233,.25); }
.aic-choice__title {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  padding-inline-start: 26px;
  position: relative;
}
.aic-choice__title::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  transition: border-color .15s;
}
.aic-choice__item input:checked + .aic-choice__box .aic-choice__title::before {
  border-color: #0ea5e9;
  background: radial-gradient(circle, #0ea5e9 0 5px, #fff 6px);
}
.aic-choice__desc { display: block; font-size: 12px; color: #64748b; margin-top: 6px; line-height: 1.6; padding-inline-start: 26px; }

/* ── Panels ─────────────────────────────────────────────── */
.aic-panel { margin-top: 18px; }
.aic-panel[hidden] { display: none; }

/* ── Segmented login-type ───────────────────────────────── */
.aic-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.aic-seg__item {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #d5dee8;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  background: #f8fafc;
  transition: border-color .15s, background .15s;
  position: relative;
}
.aic-seg__item input { position: absolute; opacity: 0; }
.aic-seg__ico { display: inline-flex; }
.aic-seg__ico--key { color: #64748b; }
.aic-seg__item:hover { border-color: #94c9ec; }
.aic-seg__item:has(input:checked) {
  border-color: #0ea5e9;
  background: #eff9ff;
  color: #0b3f66;
  box-shadow: 0 4px 12px rgba(14,165,233,.14);
}
.aic-seg__item:has(input:checked) .aic-seg__ico--key { color: #0ea5e9; }

/* ── New account info card ──────────────────────────────── */
.aic-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px;
  color: #166534;
}
.aic-info__ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #dcfce7;
  color: #15803d;
  display: grid;
  place-items: center;
}
.aic-info strong { display: block; font-size: 14px; margin-bottom: 4px; }
.aic-info p { margin: 0; font-size: 13px; line-height: 1.7; }

/* ── Summary (sidebar) ──────────────────────────────────── */
.aic-summary { position: sticky; top: 90px; }
.aic-summary__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 14px;
}
.aic-summary__logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
}
.aic-summary__logo img { width: 34px; height: 34px; object-fit: contain; }
.aic-summary__account { display: block; font-size: 15px; font-weight: 800; color: #0f172a; }
.aic-summary__plan { display: block; font-size: 12px; color: #64748b; margin-top: 3px; }

.aic-prices { display: grid; gap: 11px; }
.aic-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #475569;
}
.aic-price-usd { color: #0284c7; font-size: 17px; font-weight: 800; }
.aic-price-dual {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  direction: ltr;
}
.aic-price-usd--before {
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: line-through;
}
.aic-price-usd--after { color: #ea580c; font-size: 17px; font-weight: 800; }
.aic-rial-dual {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.aic-rial-before {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  text-decoration: line-through;
}
.aic-rial-after { color: #0f766e; font-size: 17px; font-weight: 800; }
.aic-price-row--total {
  padding-top: 11px;
  border-top: 1px solid #eef2f6;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.aic-price-rial { color: #0f766e; font-size: 17px; font-weight: 800; }
.aic-billing-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.7;
  background: #f8fafc;
  border-radius: 10px;
  padding: 9px 12px;
}

/* ── Buttons ────────────────────────────────────────────── */
.aic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  padding: 14px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
  box-sizing: border-box;
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.aic-summary .aic-btn { margin-top: 16px; }
.aic-btn--primary {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
  box-shadow: 0 12px 26px rgba(2, 132, 199, .28);
}
.aic-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2, 132, 199, .34); }
.aic-btn--primary:active { transform: translateY(0); }
.aic-btn--primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.aic-btn--ghost {
  background: #fff;
  color: #475569;
  border: 1.5px solid #d5dee8;
  box-shadow: none;
}
.aic-btn--ghost:hover { border-color: #94a3b8; background: #f8fafc; }

.aic-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12px;
  color: #64748b;
}
.aic-secure svg { color: #16a34a; }

.aic-auth-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: #0f766e;
  font-weight: 700;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.6;
}
.aic-auth-hint[hidden] { display: none; }
.aic-auth-hint--err { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* ============================================================
   Auth modal
   ============================================================ */
.aic-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, .6);
  backdrop-filter: blur(3px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: aic-fade .2s ease;
}
.aic-modal-backdrop[hidden] { display: none !important; }
@keyframes aic-fade { from { opacity: 0; } to { opacity: 1; } }

.aic-modal {
  width: min(100%, 430px);
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 30px 70px rgba(8, 20, 40, .4);
  max-height: 92vh;
  overflow: auto;
  animation: aic-pop .25s cubic-bezier(.16,1,.3,1);
}
@keyframes aic-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.aic-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(2,132,199,.3);
}
.aic-modal__icon svg { width: 26px; height: 26px; }
.aic-modal__title { font-size: 19px; font-weight: 800; margin: 0 0 6px; color: #0f172a; }
.aic-modal__sub { margin: 0 0 18px; font-size: 13px; color: #64748b; line-height: 1.7; }
.aic-modal__steps { display: flex; gap: 6px; margin-bottom: 18px; }
.aic-step-dot { flex: 1; height: 5px; border-radius: 99px; background: #e2e8f0; transition: background .2s; }
.aic-step-dot.is-active { background: #0ea5e9; }
.aic-step-dot.is-done { background: #14b8a6; }

.aic-msg {
  font-size: 13px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  line-height: 1.6;
}
.aic-msg[hidden] { display: none; }
.aic-msg--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.aic-msg--ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.aic-captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.aic-captcha-img {
  height: 52px;
  width: 150px;
  border-radius: 11px;
  border: 1px solid #d5dee8;
  background: #fff;
  object-fit: cover;
}
.aic-captcha-refresh {
  border: 1.5px solid #d5dee8;
  background: #f8fafc;
  border-radius: 11px;
  padding: 9px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aic-captcha-refresh:hover { border-color: #94a3b8; background: #f1f5f9; }

.aic-modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.aic-modal-actions .aic-btn { flex: 1; margin-top: 0; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .aic-grid { grid-template-columns: 1fr; }
  .aic-summary { position: static; }
}
@media (max-width: 640px) {
  .aic-page { margin-top: -24px; }
  .aic-hero { padding: 28px 16px 34px; }
  .aic-hero__inner { flex-wrap: wrap; gap: 16px; }
  .aic-hero__visual img { width: 96px; height: 96px; }
  .aic-choice { grid-template-columns: 1fr; }
  .aic-card { padding: 18px; }
}