/* =====================================================
   THEME DEFINITIONS
   Each theme changes layout structure (not just color): cover
   shape, avatar shape, link-list layout (single column / grid /
   plain list), card style, typography, tab style, spacing.
   Applied via body.theme-<name> on public/profile.php.
   Uses only font stacks already safe without extra CDN loads.
   ===================================================== */

/* ---------- Classic (default) — rounded cards, centered, balanced ---------- */
.theme-classic .cover { height: 200px; }
.theme-classic .profile-avatar { border-radius: 50%; }
.theme-classic .link-item { border-radius: var(--radius-md); }
.theme-classic .tab-nav-item { border-radius: 999px; }

/* ---------- Modern — bold, asymmetric, sharp shadows, sans-serif ---------- */
.theme-modern .cover { height: 220px; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.theme-modern .profile-avatar { border-radius: 24px; width: 104px; height: 104px; }
.theme-modern .profile-name { font-size: 25px; font-weight: 800; letter-spacing: -0.5px; }
.theme-modern .link-item { border-radius: 18px; border: none; background: #f8fafc; box-shadow: var(--shadow-sm); }
.theme-modern .qa-btn { border-radius: 14px; }
.theme-modern .service-card { border-radius: 18px; border: none; box-shadow: var(--shadow-md); }
.theme-modern .tab-nav-item { border-radius: 12px; }
.theme-modern .tab-nav-item.active { box-shadow: var(--shadow-md); }

/* ---------- Elegant — serif type, thin lines, plain numbered-style list ---------- */
.theme-elegant { font-family: Georgia, 'Times New Roman', serif; }
.theme-elegant .cover { height: 240px; background-color: #1e293b; }
.theme-elegant .profile-avatar { border-radius: 50%; border-width: 6px; }
.theme-elegant .profile-name { font-weight: 400; font-size: 27px; letter-spacing: 1px; }
.theme-elegant .profile-tagline { font-style: italic; }
.theme-elegant .section-title { font-weight: 400; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.theme-elegant .link-item { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: 16px 4px; }
.theme-elegant .link-item:hover { transform: none; background: #faf9f7; }
.theme-elegant .qa-btn { border-radius: 0; background: transparent; color: var(--p-text, #0f172a); border: 1px solid var(--p-text, #0f172a); }
.theme-elegant .qa-whatsapp { background: transparent; color: #16a34a; border: 1px solid #16a34a; }
.theme-elegant .tab-nav-item { border-radius: 0; background: transparent; border-bottom: 2px solid transparent; }
.theme-elegant .tab-nav-item.active { background: transparent; color: var(--p-text, #0f172a); border-bottom-color: var(--p-primary, #2563eb); }
.theme-elegant .service-card { border-radius: 0; border: none; border-top: 1px solid var(--color-border); }

/* ---------- Minimal — no cover, borderless, tiny caps, ultra flat ---------- */
.theme-minimal .cover { display: none; }
.theme-minimal .profile-header { margin-top: 40px; }
.theme-minimal .profile-avatar { border: none; box-shadow: none; width: 76px; height: 76px; }
.theme-minimal .profile-name { font-weight: 700; font-size: 19px; }
.theme-minimal .section-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-muted); }
.theme-minimal .link-item { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; padding: 12px 4px; background: transparent; }
.theme-minimal .section { padding: 14px 20px; }
.theme-minimal .qa-btn { background: transparent; color: var(--p-primary, #2563eb); border: 1.5px solid var(--p-primary, #2563eb); border-radius: 6px; }
.theme-minimal .tab-nav-item { background: transparent; border-radius: 0; border-bottom: 1px solid var(--color-border); padding: 10px 12px; }
.theme-minimal .tab-nav-item.active { background: transparent; color: var(--p-primary, #2563eb); border-bottom: 2px solid var(--p-primary, #2563eb); }
.theme-minimal .service-card { border-radius: 4px; box-shadow: none; }

/* ---------- Business — square corners, navy header bar, 2-col link grid ---------- */
.theme-business { font-family: 'Segoe UI', Arial, sans-serif; }
.theme-business .cover { height: 150px; background-color: #0f172a; }
.theme-business .profile-avatar { border-radius: 8px; width: 88px; height: 88px; }
.theme-business .profile-name { font-weight: 800; }
.theme-business .link-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-business .link-item { border-radius: 4px; flex-direction: column; text-align: center; gap: 6px; padding: 16px 10px; }
.theme-business .link-item .link-arrow { display: none; }
.theme-business .service-card { border-radius: 4px; }
.theme-business .qa-btn { border-radius: 4px; }
.theme-business .tab-nav-item { border-radius: 4px; }
.theme-business .section-title { border-inline-start: 4px solid var(--p-primary, #2563eb); padding-inline-start: 10px; }

/* ---------- Restaurant — warm, large rounded cards, decorative accents ---------- */
.theme-restaurant { font-family: 'Cairo', 'Segoe UI', sans-serif; }
.theme-restaurant .cover { height: 220px; background-color: #7c2d12; }
.theme-restaurant .profile-avatar { border-radius: 50%; border-color: #fef3c7; border-width: 5px; }
.theme-restaurant .profile-name { font-size: 24px; }
.theme-restaurant .qa-whatsapp { background: #16a34a; }
.theme-restaurant .qa-btn { border-radius: 999px; }
.theme-restaurant .link-item { border-radius: 20px; border-color: #fde68a; }
.theme-restaurant .service-card { border-radius: 20px; border: 2px solid #fde68a; }
.theme-restaurant .service-price { color: #b45309; font-weight: 800; }
.theme-restaurant .section-title { color: #7c2d12; font-size: 19px; }
.theme-restaurant .tab-nav-item { border-radius: 999px; }
.theme-restaurant .tab-nav-item.active { background: #b45309; }

/* ---------- Fashion — high-contrast, wide tracking, magazine layout ---------- */
.theme-fashion { font-family: 'Helvetica Neue', Arial, sans-serif; }
.theme-fashion .cover { height: 260px; }
.theme-fashion .profile-avatar { border-radius: 50%; width: 110px; height: 110px; }
.theme-fashion .profile-name { font-size: 27px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; }
.theme-fashion .profile-tagline { letter-spacing: 2px; text-transform: uppercase; font-size: 11px; }
.theme-fashion .section-title { font-weight: 300; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; text-align: center; }
.theme-fashion .link-item { border: none; border-top: 1px solid var(--p-text, #0f172a); border-radius: 0; background: transparent; justify-content: center; }
.theme-fashion .link-item .link-arrow { display: none; }
.theme-fashion .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-fashion .service-card { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.theme-fashion .qa-btn { border-radius: 0; letter-spacing: 1px; }
.theme-fashion .tab-nav-item { border-radius: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }

/* ---------- Personal — playful, pill-everything, soft & colorful ---------- */
.theme-personal .cover { height: 180px; border-radius: 0 0 32px 32px; }
.theme-personal .profile-avatar { border-radius: 50%; margin-top: -8px; width: 100px; height: 100px; }
.theme-personal .link-item { border-radius: 999px; padding: 12px 20px; }
.theme-personal .qa-btn { border-radius: 999px; }
.theme-personal .section-title { display: flex; align-items: center; gap: 6px; }
.theme-personal .service-card { border-radius: 24px; }
.theme-personal .tab-nav-item { border-radius: 999px; }
.theme-personal .gallery-item { border-radius: 16px; }

/* ---------- Dark Mode (applied via body.dark-mode, works with any theme) ---------- */
body.dark-mode {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-muted: #94a3b8;
  --color-border: #334155;
  --p-bg: #0f172a;
  --p-text: #f1f5f9;
}
body.dark-mode .link-item,
body.dark-mode .service-card,
body.dark-mode .contact-box { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .top-bar { background: rgba(15,23,42,0.85); border-color: var(--color-border); }
body.dark-mode .top-bar-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
body.dark-mode .lang-popup { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .lang-popup-item:hover { background: #334155; }
body.dark-mode .tab-nav-item { background: #1e293b; color: var(--color-muted); }
body.dark-mode .theme-elegant .link-item,
body.dark-mode .theme-minimal .link-item,
body.dark-mode .theme-fashion .link-item { background: transparent; }