/* =============================================================
   create-chart.css — "إنشاء خريطتي" page + My Charts library
   Signature glass cards, birth-data form, timezone/city selects.
   ============================================================= */

.cc-wrap { padding: 0 24px 28px; display: flex; flex-direction: column; gap: 16px; }

/* signature glass card */
.card-glass {
  position: relative;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(184,116,255,0.42);
  background:
    linear-gradient(180deg, rgba(7,11,30,0.80), rgba(3,5,15,0.90)),
    radial-gradient(circle at 50% -8%, rgba(151,87,255,0.16), transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(118,75,255,0.16),
    0 0 28px rgba(137,80,255,0.12),
    0 22px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(22px) saturate(120%);
}

.cc-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 16px; align-items: stretch; }

/* ── hero / explainer ── */
.cc-hero { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.cc-hero-art {
  position: relative; flex: 1; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xl);
  border: 1px solid rgba(150,130,255,0.16);
  background:
    radial-gradient(circle at 50% 38%, rgba(120,80,220,0.18), transparent 60%),
    linear-gradient(180deg, rgba(8,10,26,0.6), rgba(4,5,16,0.7));
  overflow: hidden;
}
.cc-hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 40%, rgba(3,4,12,0.5));
  pointer-events: none;
}
.cc-hero-bg { width: auto; height: 88%; max-width: 100%; filter: drop-shadow(0 0 18px rgba(124,91,227,0.3)); }

.cc-how { display: flex; flex-direction: column; gap: 10px; }
.cc-how-head { display: flex; align-items: center; gap: 8px; color: var(--text); }
.cc-how-head strong { font-family: var(--font-display, inherit); font-size: 15px; font-weight: 700; }
.cc-how-i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  color: var(--cyan); border: 1px solid rgba(98,221,255,0.3); background: rgba(98,221,255,0.06);
}
.cc-how p { color: var(--text-muted); font-size: 13px; line-height: 1.9; margin: 0; }
.cc-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.cc-feat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 14px 8px; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.cc-feat span { color: var(--violet); }
.cc-feat em { font-style: normal; color: var(--text-soft); font-size: 12px; line-height: 1.5; }

/* ── form ── */
.cc-form { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 15px; }
.cc-form-head { display: flex; align-items: center; gap: 10px; color: var(--gold); padding-bottom: 4px; }
.cc-form-head h2 { font-family: var(--font-display, inherit); color: var(--text); font-size: 17px; font-weight: 700; margin: 0; }

.cc-field { display: flex; flex-direction: column; gap: 7px; }
.cc-label { color: var(--text-soft); font-size: 12.5px; font-weight: 600; }

.cc-input-wrap {
  display: flex; align-items: center; gap: 9px;
  border-radius: var(--r-md); border: 1px solid rgba(171,192,255,0.16);
  background: rgba(7,10,22,0.6); padding: 0 12px; height: 46px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.cc-input-wrap:focus-within { border-color: rgba(172,132,255,0.55); box-shadow: 0 0 0 3px rgba(157,102,255,0.14); }
.cc-ic { color: var(--text-muted); display: grid; place-items: center; }
.cc-input-wrap input, .cc-input-wrap select.cc-sel {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-family: inherit; font-size: 14px; height: 100%;
}
.cc-input-wrap input::placeholder { color: var(--text-dim); }

/* select rows */
.cc-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cc-row3.disabled { opacity: 0.4; pointer-events: none; }
.cc-field select, .cc-input-wrap select {
  appearance: none; -webkit-appearance: none;
  background:
    rgba(7,10,22,0.6)
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%) calc(100% - 16px) calc(50% - 2px) / 6px 6px no-repeat;
  border: 1px solid rgba(171,192,255,0.16); border-radius: var(--r-md);
  color: var(--text); font-family: inherit; font-size: 14px; height: 46px; padding: 0 14px;
  cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease;
}
:root[dir="rtl"] .cc-field select, :root[dir="rtl"] .cc-input-wrap select,
.rtl .cc-field select { background-position: 16px calc(50% - 2px); }
.cc-input-wrap select.cc-sel { background-image: none; border: none; height: 100%; padding: 0; }
.cc-field select:focus { outline: none; border-color: rgba(172,132,255,0.55); box-shadow: 0 0 0 3px rgba(157,102,255,0.14); }
.cc-field select.ph, .cc-input-wrap select.ph { color: var(--text-dim); }
.cc-field select option, .cc-input-wrap select option { background: #0a0e1c; color: var(--text); }

/* time-of-birth toggle */
.cc-tob-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: 12.5px;
}
.cc-toggle-knob {
  position: relative; width: 38px; height: 21px; border-radius: 999px; flex: none;
  background: rgba(120,110,160,0.28); border: 1px solid rgba(255,255,255,0.1); transition: background 200ms ease;
}
.cc-toggle-knob::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 15px; height: 15px; border-radius: 999px;
  background: #cfd2ee; transition: inset-inline-start 200ms cubic-bezier(0.16,1,0.3,1);
}
.cc-toggle.on .cc-toggle-knob { background: linear-gradient(180deg, var(--purple-3), var(--purple-2)); border-color: rgba(172,132,255,0.6); }
.cc-toggle.on .cc-toggle-knob::after { inset-inline-start: 19px; background: #fff; }
.cc-toggle.on { color: var(--text-soft); }

.cc-hint { color: var(--text-dim); font-size: 11.5px; line-height: 1.7; margin: 2px 0 0; }
.cc-name-hint { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.07); }

.cc-err {
  color: #ffd0d8; font-size: 12.5px; padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(255,108,136,0.4); background: rgba(255,108,136,0.08);
}

.cc-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; margin-top: 6px; }
.cc-import, .cc-submit { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14.5px; }
.cc-submit { font-weight: 700; }

/* privacy strip */
.cc-privacy { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.cc-privacy-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: var(--cyan); border: 1px solid rgba(98,221,255,0.28); background: rgba(98,221,255,0.06); }
.cc-privacy strong { color: var(--text); font-size: 13.5px; display: block; margin-bottom: 3px; }
.cc-privacy p { color: var(--text-muted); font-size: 12px; line-height: 1.7; margin: 0; }

@media (max-width: 1080px) {
  .cc-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   My Charts library (page-22)
   ============================================================= */
.mc-wrap { padding: 0 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mc-card { position: relative; padding: 18px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: transform 180ms ease; }
.mc-card:hover { transform: translateY(-2px); }
.mc-card.active { border-color: rgba(248,198,72,0.5); }
.mc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-name { font-family: var(--font-display, inherit); font-size: 16px; font-weight: 700; color: var(--text); }
.mc-active-tag { font-size: 10.5px; color: var(--gold); border: 1px solid rgba(248,198,72,0.4); border-radius: 999px; padding: 2px 9px; }
.mc-mini { display: flex; align-items: center; justify-content: center; height: 150px; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-chip { font-size: 11.5px; color: var(--text-soft); border: 1px solid rgba(171,192,255,0.16); border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,0.02); }

/* ── Place search (Open-Meteo geocoding) ── */
.cc-place-field { position: relative; }
.cc-place-spin { position: absolute; inset-inline-end: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(162,141,254,0.3); border-top-color: #A28DFE; animation: ccspin 0.7s linear infinite; }
@keyframes ccspin { to { transform: rotate(360deg); } }
.cc-place-list {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px);
  background: #14122e; border: 1px solid rgba(162,141,254,0.4); border-radius: 13px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55); overflow: hidden; max-height: 290px; overflow-y: auto;
}
.cc-place-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
  padding: 11px 14px; min-height: 44px; background: transparent; border: none; cursor: pointer;
  color: var(--text-soft, #D5D7F2); font-family: inherit; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cc-place-opt:last-child { border-bottom: none; }
.cc-place-opt:hover { background: rgba(162,141,254,0.14); }
.cc-place-opt svg { color: #A28DFE; flex-shrink: 0; }
.cc-place-opt strong { color: #fff; font-weight: 600; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-dim); font-size: 11px; }
.mc-foot-actions { display: flex; align-items: center; gap: 4px; }
.mc-edit { background: transparent; border: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.mc-edit:hover { color: #C4B5FF; background: rgba(162,141,254,0.1); }
.mc-del { background: transparent; border: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.mc-del:hover { color: var(--danger); background: rgba(255,108,136,0.08); }
.mc-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 230px;
  border-style: dashed; border-color: rgba(172,132,255,0.4); cursor: pointer; color: var(--text-soft); text-align: center;
}
.mc-new:hover { transform: translateY(-2px); }
.mc-new-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: var(--violet); border: 1px solid rgba(172,132,255,0.4); background: rgba(124,91,227,0.1); }
.mc-empty { padding: 60px 24px; text-align: center; color: var(--text-muted); }

/* =============================================================
   Home image-slot figures (hero meditator, compass, sun)
   Blended into the cosmic void: `screen` blend melts each image's
   dark cosmic background (and the meditator's dark silhouette) into
   the page, leaving only the luminous subject; a soft radial mask
   feathers the rectangular/circular edge so nothing reads as a hard
   cut. Tuned in _check/blend-test.html.
   ============================================================= */
.hero-figure { position: relative; width: 100%; height: 210px; display: grid; place-items: center; }
.hero-figure-glow {
  position: absolute; inset: -6%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(124,91,227,0.38), transparent 72%);
  filter: blur(14px); opacity: 0.7;
}
.hero-figure image-slot {
  position: relative; z-index: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 50%, rgba(0,0,0,0.5) 70%, transparent 88%);
  mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 50%, rgba(0,0,0,0.5) 70%, transparent 88%);
}

.compass-card .fc-figure, .today-card .fc-figure { width: auto; position: relative; }
.fc-figure { position: relative; }
.fc-figure-glow { position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(10px); opacity: 0.6; }
.compass-glow { background: radial-gradient(circle, rgba(192,132,255,0.42), transparent 66%); }
.today-glow { background: radial-gradient(circle, rgba(248,198,72,0.42), transparent 66%); }
.fc-figure image-slot {
  position: relative; z-index: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 54%, rgba(0,0,0,0.4) 72%, transparent 90%);
  mask-image: radial-gradient(circle at 50% 50%, #000 54%, rgba(0,0,0,0.4) 72%, transparent 90%);
}

.dc-figure {
  width: 58px; height: 58px; flex: none; border-radius: 14px;
  border: 1px solid rgba(172,132,255,0.32); background: rgba(124,91,227,0.1);
}