/*! WormGPT — Account & Subscription redesign (additive layer).
   Loaded last on index.html so it overrides the settings modal defaults.
   Scope: the "الحساب" (account) and "الاشتراك" (subscription) tabs only. */

/* ------------------------------------------------------------------ *
 * Shared: give the main cards a consistent, softer surface
 * ------------------------------------------------------------------ */
.settings-plan-card,
.settings-claude-hero,
.settings-membership,
.settings-payee,
.settings-models {
  border-radius: 16px;
  border: 1px solid rgba(var(--zy-veil), 0.12);
  background: linear-gradient(180deg, rgba(var(--zy-veil), 0.045), rgba(var(--zy-veil), 0.012));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* ------------------------------------------------------------------ *
 * Membership / plan hero
 * ------------------------------------------------------------------ */
.settings-membership,
.settings-claude-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(77, 144, 254, 0.30);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(77, 144, 254, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(11, 87, 208, 0.16), rgba(11, 87, 208, 0.03));
}
.settings-membership::after,
.settings-claude-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -45%;
  inset-inline-end: -8%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 144, 254, 0.30), transparent 66%);
  filter: blur(4px);
  pointer-events: none;
}
.settings-hero-head,
.settings-membership-body,
.settings-membership-info { position: relative; z-index: 1; }
.settings-hero-head h3 { font-size: 17px; letter-spacing: -0.2px; }
.settings-membership-info h3 { font-size: 18px; }

/* active / free badges */
.settings-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: #cfe2ff;
  background: rgba(77, 144, 254, 0.18);
  border: 1px solid rgba(77, 144, 254, 0.40);
}
.settings-active::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ee7a8;
  box-shadow: 0 0 8px rgba(110, 231, 168, 0.9);
}
.settings-active-free {
  color: var(--zy-text2);
  background: rgba(var(--zy-veil), 0.06);
  border-color: rgba(var(--zy-veil), 0.16);
}
.settings-active-free::before { background: #9a9a99; box-shadow: none; }

/* the big usage number inside the membership hero */
.settings-membership-stat {
  border-radius: 14px;
  border: 1px solid rgba(77, 144, 254, 0.26);
  background: rgba(11, 87, 208, 0.12);
  padding: 12px 20px;
}
.settings-membership-stat strong { color: #dbe8ff; font-size: 26px; letter-spacing: -0.5px; }

/* ------------------------------------------------------------------ *
 * Account tab: plan pills + usage bars
 * ------------------------------------------------------------------ */
.settings-pills { gap: 6px; }
.settings-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid rgba(var(--zy-veil), 0.16);
  background: rgba(var(--zy-veil), 0.03);
  color: var(--zy-text2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.settings-pill:hover { border-color: rgba(77, 144, 254, 0.42); color: var(--zy-text); }
.settings-pill.active {
  background: linear-gradient(135deg, #0b57d0, #4d90fe);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(11, 87, 208, 0.35);
}

.settings-bar {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--zy-veil), 0.10);
  overflow: hidden;
}
.settings-bar::after { content: none; }
.settings-bar-head strong { font-size: 13px; }

/* ------------------------------------------------------------------ *
 * Subscription tab: plan tiles
 * ------------------------------------------------------------------ */
.settings-plans-grid { gap: 12px; }
.settings-plan-tile {
  border-radius: 16px;
  border: 1px solid rgba(var(--zy-veil), 0.12);
  background: linear-gradient(180deg, rgba(var(--zy-veil), 0.035), rgba(var(--zy-veil), 0.012));
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.settings-plan-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 144, 254, 0.42);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
}
.settings-plan-tile h3 { font-size: 19px; letter-spacing: -0.3px; }
.settings-plan-tile-price { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.settings-plan-tile-price small { font-size: 12px; font-weight: 500; color: var(--zy-text2); }
.settings-plan-tile-head small { letter-spacing: 0.2px; text-transform: uppercase; font-size: 10px; }
.settings-plan-tile-meta span {
  border-radius: 8px;
  padding: 4px 9px;
  background: rgba(var(--zy-veil), 0.05);
  border: 1px solid rgba(var(--zy-veil), 0.10);
  font-size: 11px;
}
.settings-plan-current {
  border-color: rgba(77, 144, 254, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(77, 144, 254, 0.35), 0 10px 30px rgba(11, 87, 208, 0.22);
}
/* premium tier keeps a refined gold accent */
.settings-plan-x5 {
  border-color: rgba(233, 176, 104, 0.36) !important;
  background: linear-gradient(180deg, rgba(233, 176, 104, 0.10), rgba(233, 176, 104, 0.02)) !important;
}
.settings-plan-x5 .settings-plan-tile-price { color: #f0c78c; }

/* ------------------------------------------------------------------ *
 * Payee chooser + model chips
 * ------------------------------------------------------------------ */
.settings-payee-opt { border-radius: 999px; transition: background 0.15s ease, border-color 0.15s ease; }
.settings-payee-opt.active {
  background: linear-gradient(135deg, #0b57d0, #4d90fe);
  border-color: transparent;
  color: #ffffff;
}
.settings-model-chip {
  border-radius: 999px;
  border: 1px solid rgba(var(--zy-veil), 0.14);
  background: rgba(var(--zy-veil), 0.045);
  color: var(--zy-text2);
}

/* ------------------------------------------------------------------ *
 * Mobile: comfortable spacing inside the modal
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .settings-membership,
  .settings-claude-hero { border-radius: 14px; }
  .settings-membership-stat { padding: 10px 16px; }
  .settings-membership-stat strong { font-size: 22px; }
  .settings-plan-tile h3 { font-size: 17px; }
  .settings-plan-tile-price { font-size: 26px; }
  .settings-plans-grid { gap: 10px; }
}