/* ============================================================
   Arcana Tarot — Main Stylesheet
   Three themes: dark (default), pastel, white
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Dark theme (default) ── */
:root {
  --ink:      #0d0a1a; --ink2: #151228; --ink3: #1e1a35; --ink4: #2a2548;
  --gold:     #c9a96e; --gold-l: #e8c98a; --gold-d: #8a7040;
  --text:     #e8e0f5; --dim: #9d92bc; --hint: #635a85;
  --ok:       #4caf88; --err: #e05c5c; --warn: #d4a027;
  --card-bg:  #1e1a35; --card-br: rgba(201,169,110,0.14);
  --btn-p:    linear-gradient(135deg,#8a7040,#c9a96e); --btn-p-c: #1a0f3c;
  --btn-o-br: rgba(201,169,110,0.32); --btn-o-c: #c9a96e;
  --nav-bg:   rgba(13,10,26,0.95); --nav-br: rgba(201,169,110,0.1);
  --lang-bg:  #1e1a35; --lang-act-bg: #2a2548; --lang-act-c: #c9a96e; --lang-act-br: rgba(201,169,110,0.35);
  --inp-bg:   rgba(255,255,255,0.05);
}
[data-theme="pastel"] {
  --ink:#f0f9f8; --ink2:#e8f5f3; --ink3:#ffffff; --ink4:#cceae6;
  --gold:#00897b; --gold-l:#00695c; --gold-d:#4db6ac;
  --text:#1a3330; --dim:#4a6965; --hint:#80a8a3;
  --card-bg:#ffffff; --card-br:rgba(0,137,123,0.16);
  --btn-p:linear-gradient(135deg,#00796b,#009688); --btn-p-c:#fff;
  --btn-o-br:rgba(0,137,123,0.38); --btn-o-c:#00796b;
  --nav-bg:#ffffff; --nav-br:rgba(0,137,123,0.12);
  --lang-bg:#e8f5f3; --lang-act-bg:#fff; --lang-act-c:#00695c; --lang-act-br:rgba(0,137,123,0.4);
  --inp-bg:rgba(0,0,0,0.03);
}
[data-theme="white"] {
  --ink:#ffffff; --ink2:#fafaf8; --ink3:#f6f3ee; --ink4:#ede8df;
  --gold:#b48c3c; --gold-l:#7a5c1e; --gold-d:#c8a84e;
  --text:#1a1a2e; --dim:#555566; --hint:#999aaa;
  --card-bg:#f6f3ee; --card-br:#e0d8c8;
  --btn-p:#1a1a2e; --btn-p-c:#e8c98a;
  --btn-o-br:#1a1a2e; --btn-o-c:#1a1a2e;
  --nav-bg:#ffffff; --nav-br:#e8e4da;
  --lang-bg:#f6f3ee; --lang-act-bg:#fff; --lang-act-c:#b48c3c; --lang-act-br:rgba(180,140,60,0.45);
  --inp-bg:rgba(0,0,0,0.03);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; }
body { background: var(--ink); color: var(--text); font-family: 'Lora', Georgia, serif; line-height: 1.78; min-height: 100vh; transition: background .3s, color .3s; }
:root body { background-image: radial-gradient(ellipse at 20% 0%, rgba(124,92,191,.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(201,169,110,.07) 0%, transparent 50%); }

/* ── Typography ── */
h1,h2,h3,h4 { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .04em; line-height: 1.25; color: var(--gold-l); }
h1 { font-size: clamp(2rem,4.5vw,3rem); } h2 { font-size: clamp(1.4rem,3vw,2rem); } h3 { font-size: clamp(1.1rem,2vw,1.4rem); }
a { color: var(--gold); text-decoration: none; transition: color .2s; } a:hover { color: var(--gold-l); }
p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; }

/* ── Nav ── */
.site-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 40px; background:var(--nav-bg); border-bottom:1px solid var(--nav-br); position:relative; z-index:10; gap:14px; flex-wrap:wrap; }
.site-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-logo-img { width:40px; height:40px; border-radius:8px; object-fit:contain; border:1px solid var(--card-br); background:var(--ink3); }
.site-logo-fallback { width:40px; height:40px; border-radius:8px; background:var(--ink3); border:1px solid var(--card-br); display:flex; align-items:center; justify-content:center; font-size:20px; }
.site-logo-text { font-family:'Cinzel',serif; font-size:14px; color:var(--gold); letter-spacing:.22em; }
.nav-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Language selector ── */
.lang-sel { display:flex; gap:2px; background:var(--lang-bg); border:1px solid var(--card-br); border-radius:10px; padding:3px; }
.lang-btn { padding:5px 11px; border-radius:7px; font-family:'Cinzel',serif; font-size:11px; font-weight:600; letter-spacing:.08em; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--hint); transition:all .15s; }
.lang-btn.active { background:var(--lang-act-bg); color:var(--lang-act-c); border-color:var(--lang-act-br); }

/* ── Theme switcher ── */
.theme-sw { display:flex; gap:6px; align-items:center; }
.theme-dot { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color .2s; }
.theme-dot.active { border-color:var(--gold); }
.theme-dot-dark { background:#0d0a1a; border:1px solid #333; }
.theme-dot-pastel { background:linear-gradient(135deg,#e0f2f1,#b2dfdb); }
.theme-dot-white { background:#fff; border:1px solid #ddd; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 26px; border-radius:10px; font-family:'Cinzel',serif; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .2s; border:none; text-decoration:none; }
.btn-p { background:var(--btn-p); color:var(--btn-p-c); box-shadow:0 4px 18px rgba(0,0,0,.2); }
.btn-p:hover { transform:translateY(-1px); color:var(--btn-p-c); opacity:.92; }
.btn-o { background:transparent; border:1px solid var(--btn-o-br); color:var(--btn-o-c); }
.btn-o:hover { background:rgba(128,128,128,.07); color:var(--btn-o-c); }
.btn-g { background:transparent; color:var(--dim); padding:8px 14px; font-family:'Lora',serif; text-transform:none; letter-spacing:0; font-size:.95rem; }
.btn-g:hover { background:rgba(128,128,128,.07); color:var(--text); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-full { width:100%; }

/* ── Cards ── */
.card { background:var(--card-bg); border:1px solid var(--card-br); border-radius:16px; padding:30px; }
.card-sm { padding:18px; }

/* ── Form ── */
.field { margin-bottom:18px; }
.label { display:block; font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
.input { width:100%; background:var(--inp-bg); border:1px solid var(--card-br); border-radius:10px; padding:12px 15px; color:var(--text); font-family:'Lora',serif; font-size:1rem; transition:border-color .2s,box-shadow .2s; outline:none; }
.input::placeholder { color:var(--hint); }
.input:focus { border-color:var(--gold-d); box-shadow:0 0 0 3px rgba(201,169,110,.1); }
.input.err { border-color:var(--err); }
textarea.input { resize:vertical; line-height:1.7; }
select.input { cursor:pointer; }
.field-hint { font-size:.82rem; color:var(--hint); margin-top:5px; }
.field-err  { font-size:.82rem; color:var(--err); margin-top:5px; }
.divider-text { display:flex; align-items:center; gap:12px; color:var(--hint); font-size:.82rem; margin:20px 0; }
.divider-text::before,.divider-text::after { content:''; flex:1; height:1px; background:var(--card-br); }

/* ── Alerts ── */
.alert { padding:12px 16px; border-radius:10px; font-size:.9rem; border:1px solid transparent; margin-bottom:16px; }
.alert-err  { background:rgba(224,92,92,.09); border-color:rgba(224,92,92,.28); color:#d06060; }
.alert-ok   { background:rgba(76,175,136,.09); border-color:rgba(76,175,136,.28); color:#3a8a64; }
.alert-info { background:rgba(201,169,110,.07); border-color:rgba(201,169,110,.22); color:var(--gold); }

/* ── Ornament ── */
.ornament { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.3em; color:var(--gold-d); display:flex; align-items:center; justify-content:center; gap:12px; }
.ornament::before,.ornament::after { content:'✦'; font-size:.6rem; }

/* ── Spinner ── */
.spinner { width:20px; height:20px; border:2px solid rgba(128,128,128,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation:fadeIn .4s ease forwards; }

/* ── Tarot card flip ── */
.tarot-card-wrap { perspective:1000px; }
.tarot-card-inner { width:100%; height:100%; position:relative; transition:transform .7s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.tarot-card-wrap.flipped .tarot-card-inner { transform:rotateY(180deg); }
.tarot-card-front,.tarot-card-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; overflow:hidden; border:2px solid rgba(201,169,110,.4); }
.tarot-card-back { transform:rotateY(180deg); }

/* ── Utilities ── */
.text-center{text-align:center} .text-gold{color:var(--gold)} .text-dim{color:var(--dim)} .text-hint{color:var(--hint)}
.text-sm{font-size:.9rem} .text-xs{font-size:.82rem}
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px} .mb-4{margin-bottom:32px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-1{gap:8px} .gap-2{gap:16px}
.w-full{width:100%} .hidden{display:none}

/* ── Admin sidebar ── */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar { width:210px; flex-shrink:0; background:var(--ink2); border-right:1px solid var(--card-br); display:flex; flex-direction:column; padding:20px 0; }
.admin-sidebar-logo { padding:0 18px 18px; border-bottom:1px solid var(--card-br); margin-bottom:12px; }
.admin-sidebar-logo .name { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); letter-spacing:.2em; margin-bottom:3px; }
.admin-sidebar-logo .role { font-size:10px; color:var(--hint); letter-spacing:.12em; text-transform:uppercase; }
.admin-nav-item { display:flex; align-items:center; gap:9px; padding:9px 14px; margin:2px 8px; border-radius:8px; font-size:13px; text-decoration:none; transition:all .15s; border-left:2px solid transparent; color:var(--dim); }
.admin-nav-item:hover { background:rgba(128,128,128,.07); color:var(--text); }
.admin-nav-item.active { background:rgba(201,169,110,.1); color:var(--gold); border-left-color:var(--gold-d); }
.admin-nav-item .icon { font-size:15px; width:20px; text-align:center; }
.admin-main { flex:1; padding:28px; overflow:auto; }
.admin-sidebar-footer { margin-top:auto; padding:14px 18px; border-top:1px solid var(--card-br); font-size:11px; color:var(--hint); }

/* ── Pricing cards ── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; max-width:880px; margin:0 auto; }
.plan-card { background:var(--card-bg); border:1px solid var(--card-br); border-radius:16px; padding:28px; display:flex; flex-direction:column; position:relative; }
.plan-card.featured { border:1.5px solid var(--gold); box-shadow:0 0 32px rgba(201,169,110,.1); }
.plan-pop { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--btn-p); color:var(--btn-p-c); padding:3px 16px; border-radius:20px; font-family:'Cinzel',serif; font-size:10px; font-weight:600; letter-spacing:.1em; white-space:nowrap; }

/* ── Reading page ── */
.reading-limit-bar { background:var(--ink3); border:1px solid var(--card-br); border-radius:9px; padding:10px 18px; margin-bottom:28px; display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.example-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; justify-content:center; }
.example-tag { background:rgba(201,169,110,.06); border:1px solid rgba(201,169,110,.15); border-radius:20px; padding:5px 13px; color:var(--hint); font-size:.82rem; cursor:pointer; transition:all .2s; }
.example-tag:hover { color:var(--gold); border-color:rgba(201,169,110,.35); }

/* ── Footer ── */
.site-footer { border-top:1px solid var(--card-br); padding:20px 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:var(--hint); font-size:.82rem; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .site-nav { padding:14px 20px; }
  .admin-layout { flex-direction:column; }
  .admin-sidebar { width:100%; flex-direction:row; flex-wrap:wrap; padding:10px; }
  .pricing-grid { grid-template-columns:1fr; }
}