/* ==========================================================================
   assets/css/account.css
   Sign up, sign in, OTP, checkout and account pages (ica-*). Built on the
   shell tokens (ic-shell.css); form fields reuse contact-form.css (icf-*).
   ========================================================================== */

.ica-page {
  position: relative;
  margin-top: calc(-1 * var(--ic-nav-space)); /* slides under the header, like the page heroes */
  padding: calc(var(--ic-nav-space) + 48px) 0 80px;
  overflow: hidden;
  isolation: isolate;
}
.ica-wrap { max-width: 520px; margin: 0 auto; }
.ica-wrap--wide { max-width: 1040px; }

.ica-card {
  padding: 36px 32px;
  border-radius: var(--ic-r-xl);
  background: #fff;
  border: 1px solid var(--ic-line);
  box-shadow: var(--ic-sh-md);
  min-width: 0;
}

/* Heading ---------------------------------------------------------------- */
.ica-head { margin-bottom: 24px; text-align: center; }
.ica-head--left { text-align: left; }
.ica-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ica-head__icon { display: inline-flex; margin-bottom: 14px; }
.ica-title {
  font: 800 clamp(26px, 3.4vw, 34px)/1.15 var(--ic-font-display);
  letter-spacing: -0.02em;
  color: var(--ic-ink);
}
.ica-lead { margin-top: 8px !important; font: 500 15.5px/1.5 var(--ic-font-body); color: var(--ic-muted); }
.ica-lead strong { color: var(--ic-ink); white-space: nowrap; }
.ica-subtitle { margin-bottom: 16px !important; font: 700 17px/1.3 var(--ic-font-display); color: var(--ic-ink); }

/* Selected plan strip ----------------------------------------------------- */
.ica-planstrip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px 14px;
  border: 1px solid var(--ic-blue-100);
  border-radius: var(--ic-r-md);
  background: var(--ic-blue-50);
}
.ica-planstrip__text { display: flex; flex-direction: column; min-width: 0; }
.ica-planstrip__text small { font: 600 11.5px/1.2 var(--ic-font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ic-muted); }
.ica-planstrip__text strong { font: 700 15px/1.3 var(--ic-font-display); color: var(--ic-ink); }
.ica-planstrip__price { margin-left: auto; font: 700 14.5px/1.2 var(--ic-font-body); color: var(--ic-blue-700); white-space: nowrap; }
.ica-planstrip__change { font: 600 13px/1 var(--ic-font-body); color: var(--ic-blue-600) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Form extras ------------------------------------------------------------- */
.ica-hint { font: 500 13px/1.35 var(--ic-font-body); color: var(--ic-muted); }
input[name="otp"] { font-size: 22px; font-weight: 700; letter-spacing: 0.5em; text-align: center; }
.ica-submit { margin-top: 4px; border-radius: 999px; font-family: var(--ic-font-body); }
.ica-submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }

.ica-switch { margin-top: 22px !important; text-align: center; font: 500 14.5px/1.4 var(--ic-font-body); color: var(--ic-muted); }
.ica-switch a, .ica-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ic-blue-600) !important;
  text-decoration: none;
  cursor: pointer;
}
.ica-switch a:hover, .ica-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.ica-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px !important;
  padding: 12px 14px;
  border-radius: var(--ic-r-md);
  background: #FFF8EB;
  border: 1px solid #FCE2B3;
  font: 500 14px/1.45 var(--ic-font-body);
  color: #7A4A06;
}
.ica-note .ai-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.icf-alert--info { color: var(--ic-blue-700); background: var(--ic-blue-50); border: 1px solid var(--ic-blue-100); }

/* Checkout / account ------------------------------------------------------ */
.ica-checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.ica-plan { display: flex; align-items: center; gap: 14px; }
.ica-plan__name { font: 800 22px/1.2 var(--ic-font-display); color: var(--ic-ink); }
.ica-plan__tag { margin-top: 2px !important; font: 600 13.5px/1.3 var(--ic-font-body); color: var(--ic-muted); }
.ica-plan__change { margin-left: auto; font: 600 14px/1 var(--ic-font-body); color: var(--ic-blue-600) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ica-plan__note { margin: 16px 0 24px !important; padding-bottom: 20px; border-bottom: 1px solid var(--ic-line-soft); font: 500 14.5px/1.5 var(--ic-font-body); color: var(--ic-text); }

.ica-feats { display: grid; gap: 12px; }
.ica-feats li { display: flex; align-items: flex-start; gap: 10px; }
.ica-feats .ic-check { flex: none; margin-top: 1px; }
.ica-feats strong { display: block; font: 600 14.5px/1.35 var(--ic-font-body); color: var(--ic-ink); }
.ica-feats small { display: block; font: 500 13px/1.4 var(--ic-font-body); color: var(--ic-muted); }

.ica-lines { display: grid; gap: 12px; }
.ica-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 14.5px/1.4 var(--ic-font-body); }
.ica-lines dt { color: var(--ic-muted); }
.ica-lines dd { margin: 0; color: var(--ic-ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ica-lines s { color: var(--ic-muted); font-weight: 500; }
.ica-lines .is-saving dd { color: var(--ic-green); }
.ica-lines .is-total { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--ic-line); }
.ica-lines .is-total dt { color: var(--ic-ink); font-weight: 700; }
.ica-lines .is-total dd { font: 800 24px/1.1 var(--ic-font-display); }
.ica-lines .is-total small { font: 600 13px/1 var(--ic-font-body); color: var(--ic-muted); }

.ica-account-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 22px 0;
  padding: 14px 16px;
  border-radius: var(--ic-r-md);
  background: var(--ic-bg-soft);
  font: 500 13.5px/1.4 var(--ic-font-body);
  color: var(--ic-muted);
  overflow-wrap: anywhere;
}
.ica-account-line small { font: 600 11.5px/1.2 var(--ic-font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.ica-account-line strong { font: 700 15px/1.3 var(--ic-font-body); color: var(--ic-ink); }

.ica-paynow { border-radius: 999px; font-family: var(--ic-font-body); }
.ica-paynow[disabled] {
  cursor: not-allowed;
  opacity: 1;
  color: #8A94AA;
  background: #E9EDF5;
  box-shadow: none;
  transform: none;
}
.ica-soon {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px !important;
  font: 600 13.5px/1.45 var(--ic-font-body);
  color: #9A5B05;
}
.ica-soon .ai-icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }

.ica-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #EAF8EE;
  font: 700 11.5px/1.2 var(--ic-font-body);
  color: #0B6B1E;
  vertical-align: middle;
}
.ica-empty { font: 500 15px/1.5 var(--ic-font-body); color: var(--ic-text); }
.ica-actions { margin-top: 22px !important; }
.ica-pending {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--ic-r-md);
  background: var(--ic-blue-50);
  border: 1px solid var(--ic-blue-100);
  font: 500 14.5px/1.5 var(--ic-font-body);
  color: var(--ic-text);
}
.ica-pending strong { color: var(--ic-ink); }

@media (max-width: 900px) {
  .ica-checkout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ica-page { padding: calc(var(--ic-nav-space) + 28px) 0 56px; }
  .ica-card { padding: 26px 20px; border-radius: var(--ic-r-lg); }
  .ica-planstrip { flex-wrap: wrap; }
  .ica-planstrip__price { margin-left: 0; }
  .ica-plan { flex-wrap: wrap; }
  .ica-plan__change { margin-left: 0; }
  .ica-pending .ic-btn { width: 100%; }
}

/* Plan popup (homepage, includes/home/plan-modal.php) -------------------- */
.ica-modal {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ic-r-xl);
  background: #fff;
  box-shadow: var(--ic-sh-lg);
  color: var(--ic-text);
  overflow: auto;
  overscroll-behavior: contain;
}
.ica-modal::backdrop { background: rgba(10, 27, 77, 0.5); backdrop-filter: blur(3px); }
.ica-modal[open] { animation: ica-pop 0.22s var(--ic-ease); }
@keyframes ica-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
html.ica-modal-open { overflow: hidden; }
.ica-modal__box { position: relative; padding: 36px 32px 30px; }
.ica-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--ic-bg-soft);
  font: 400 26px/1 var(--ic-font-body);
  color: var(--ic-muted);
  cursor: pointer;
}
.ica-modal__close:hover { background: var(--ic-blue-50); color: var(--ic-ink); }
.ica-modal .ica-head { padding: 0 24px; }
.ica-modal .ica-title { font-size: clamp(24px, 3vw, 28px); }
.ica-modal :where(h2, p) { margin: 0; }
.ica-modal .ica-switch { margin-bottom: 0 !important; }
@media (max-width: 640px) {
  .ica-modal { width: calc(100vw - 24px); border-radius: var(--ic-r-lg); }
  .ica-modal__box { padding: 30px 20px 24px; }
  .ica-modal .ica-planstrip { flex-wrap: wrap; }
  .ica-modal .ica-planstrip__price { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ica-modal[open] { animation: none; } }