/*
 * Stage 13.5 — Frontend Raw Theme Polish
 * Put this file at: custom-panel/frontend-ui-polish.css
 * This file only improves visual appearance.
 */

:root {
    --ui-bg: #f6f8fc;
    --ui-surface: rgba(255, 255, 255, .94);
    --ui-border: #e2e8f0;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-primary: #4f46e5;
    --ui-primary-2: #2563eb;
    --ui-gold: #f59e0b;
    --ui-shadow: 0 18px 54px rgba(15, 23, 42, .10);
    --ui-shadow-soft: 0 10px 28px rgba(15, 23, 42, .06);
    --ui-radius: 28px;
    --ui-radius-lg: 36px;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 70, 229, .14), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(245, 158, 11, .10), transparent 32%),
        linear-gradient(180deg, #ffffff, var(--ui-bg)) !important;
    color: var(--ui-text);
}

.if-topbar,
.top {
    background: rgba(255, 255, 255, .82) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .88) !important;
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}

.if-header,
.top-inner {
    min-height: 84px !important;
}

.if-brand,
.brand {
    transition: transform .18s ease;
}

.if-brand:hover,
.brand:hover {
    transform: translateY(-1px);
}

.if-logo,
.logo {
    border-radius: 20px !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .20);
}

.if-menu a,
.menu a,
.archive-tabs a,
.page-links a {
    border: 1px solid transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.if-menu a:hover,
.menu a:hover,
.archive-tabs a:hover,
.page-links a:hover {
    transform: translateY(-1px);
    border-color: #c7d2fe;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .10);
}

.if-hero-card,
.hero-card,
.hero {
    border-radius: var(--ui-radius-lg) !important;
}

.if-hero-card,
.hero-card {
    background:
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(245,158,11,.14), transparent 26%),
        linear-gradient(135deg, #0f172a 0%, #312e81 56%, #1d4ed8 100%) !important;
    box-shadow: 0 26px 86px rgba(15, 23, 42, .22) !important;
    border: 1px solid rgba(255,255,255,.12);
}

.if-hero h1,
.hero h1,
h1 {
    letter-spacing: -0.7px;
}

.if-kicker,
.kicker {
    border: 1px solid rgba(199, 210, 254, .44);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.if-section,
.box,
.quick-box {
    background: var(--ui-surface) !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-soft) !important;
    backdrop-filter: blur(10px);
}

.if-section-head h2,
.box h2,
.quick-box h2 {
    letter-spacing: -0.35px;
}

.if-card,
.card,
.info-item,
.quick-list a {
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.if-card:hover,
.card:hover,
.info-item:hover,
.quick-list a:hover {
    transform: translateY(-4px);
    border-color: #c7d2fe !important;
    box-shadow: var(--ui-shadow) !important;
}

.if-card-image,
.card-image,
.hero-image,
.hero-img,
.if-hero-media {
    background:
        linear-gradient(135deg, #eef2ff, #f8fafc) !important;
}

.if-card-image img,
.card-image img,
.hero-image img,
.hero-img img,
.if-hero-media img {
    transition: transform .35s ease, filter .35s ease;
}

.if-card:hover .if-card-image img,
.card:hover .card-image img {
    transform: scale(1.035);
    filter: saturate(1.05) contrast(1.02);
}

.if-card-link,
.more,
.if-card-body a,
.card-body a {
    font-weight: 900 !important;
}

.if-btn,
.btn,
.btn-primary,
.contact-submit,
button[type="submit"] {
    border-radius: 999px !important;
    box-shadow: 0 12px 28px rgba(79, 70, 229, .14);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.if-btn:hover,
.btn:hover,
.btn-primary:hover,
.contact-submit:hover,
button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(79, 70, 229, .20);
}

input,
textarea,
select {
    border-radius: 17px !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(79, 70, 229, .70) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .10) !important;
    outline: none !important;
}

.meta,
.if-count {
    border-color: #c7d2fe !important;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-weight: 800;
}

.if-footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(99, 102, 241, .20), transparent 26%),
        linear-gradient(135deg, #020617, #0f172a) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.notfound,
.if-empty,
.empty,
.notice,
.form-success,
.form-error {
    border-radius: 22px !important;
}

.archive-tabs a.active {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(79, 70, 229, .18);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #e2e8f0;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

@media (max-width: 850px) {
    .if-header,
    .top-inner {
        min-height: unset !important;
    }

    .if-hero-card,
    .hero-card {
        border-radius: 28px !important;
    }
}

@media (max-width: 560px) {
    .if-section,
    .box,
    .quick-box,
    .if-card,
    .card {
        border-radius: 22px !important;
    }
}


/* =========================================================
   Stage 13.6 — Frontend Theme Presets
   8 reusable color themes for different websites.
   Theme is controlled by site_options.site_theme.
   ========================================================= */

body.theme-festival { --ui-primary:#4f46e5; --ui-primary-2:#2563eb; --ui-gold:#f59e0b; --ui-bg:#f6f8fc; --ui-surface:rgba(255,255,255,.94); --primary:#4f46e5; --if-primary:#4f46e5; }
body.theme-news { --ui-primary:#dc2626; --ui-primary-2:#111827; --ui-gold:#f97316; --ui-bg:#f8fafc; --ui-surface:rgba(255,255,255,.96); --primary:#dc2626; --if-primary:#dc2626; }
body.theme-corporate { --ui-primary:#2563eb; --ui-primary-2:#334155; --ui-gold:#0ea5e9; --ui-bg:#f4f7fb; --ui-surface:rgba(255,255,255,.95); --primary:#2563eb; --if-primary:#2563eb; }
body.theme-luxury { --ui-primary:#d97706; --ui-primary-2:#020617; --ui-gold:#fbbf24; --ui-bg:#f7f2e8; --ui-surface:rgba(255,252,245,.95); --ui-text:#1c1917; --primary:#d97706; --if-primary:#d97706; }
body.theme-kids { --ui-primary:#ec4899; --ui-primary-2:#06b6d4; --ui-gold:#facc15; --ui-bg:#fff7ed; --ui-surface:rgba(255,255,255,.95); --primary:#ec4899; --if-primary:#ec4899; }
body.theme-nature { --ui-primary:#16a34a; --ui-primary-2:#0f766e; --ui-gold:#84cc16; --ui-bg:#f0fdf4; --ui-surface:rgba(255,255,255,.95); --primary:#16a34a; --if-primary:#16a34a; }
body.theme-minimal { --ui-primary:#0f172a; --ui-primary-2:#64748b; --ui-gold:#94a3b8; --ui-bg:#f8fafc; --ui-surface:rgba(255,255,255,.96); --primary:#0f172a; --if-primary:#0f172a; }
body.theme-dark { --ui-primary:#8b5cf6; --ui-primary-2:#0f172a; --ui-gold:#22d3ee; --ui-bg:#0f172a; --ui-surface:rgba(15,23,42,.88); --ui-border:#334155; --ui-text:#e5e7eb; --ui-muted:#94a3b8; --primary:#8b5cf6; --if-primary:#8b5cf6; }

body.theme-news .if-hero-card, body.theme-news .hero-card { background:radial-gradient(circle at 16% 20%, rgba(255,255,255,.12), transparent 24%),linear-gradient(135deg,#111827 0%,#7f1d1d 58%,#dc2626 100%) !important; }
body.theme-corporate .if-hero-card, body.theme-corporate .hero-card { background:radial-gradient(circle at 16% 20%, rgba(255,255,255,.14), transparent 24%),linear-gradient(135deg,#0f172a 0%,#1d4ed8 58%,#38bdf8 100%) !important; }
body.theme-luxury .if-hero-card, body.theme-luxury .hero-card { background:radial-gradient(circle at 16% 20%, rgba(251,191,36,.20), transparent 24%),linear-gradient(135deg,#020617 0%,#1c1917 55%,#92400e 100%) !important; }
body.theme-kids .if-hero-card, body.theme-kids .hero-card { background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 25%),linear-gradient(135deg,#ec4899 0%,#8b5cf6 45%,#06b6d4 100%) !important; }
body.theme-nature .if-hero-card, body.theme-nature .hero-card { background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 25%),linear-gradient(135deg,#052e16 0%,#15803d 55%,#0f766e 100%) !important; }
body.theme-minimal .if-hero-card, body.theme-minimal .hero-card { background:radial-gradient(circle at 16% 20%, rgba(255,255,255,.12), transparent 24%),linear-gradient(135deg,#020617 0%,#334155 62%,#64748b 100%) !important; }

body.theme-dark {
    background:radial-gradient(circle at 100% 0%, rgba(139,92,246,.20), transparent 34%),radial-gradient(circle at 0% 100%, rgba(34,211,238,.11), transparent 32%),linear-gradient(180deg,#020617,#0f172a) !important;
    color:var(--ui-text);
}
body.theme-dark .if-topbar, body.theme-dark .top { background:rgba(15,23,42,.82) !important; border-bottom-color:#334155 !important; }
body.theme-dark .if-section, body.theme-dark .box, body.theme-dark .quick-box, body.theme-dark .if-card, body.theme-dark .card, body.theme-dark .info-item, body.theme-dark .quick-list a { background:rgba(15,23,42,.88) !important; border-color:#334155 !important; color:var(--ui-text); }
body.theme-dark .if-card p, body.theme-dark .card p, body.theme-dark .info-item span, body.theme-dark .quick-list a, body.theme-dark .content p { color:var(--ui-muted) !important; }
body.theme-dark input, body.theme-dark textarea, body.theme-dark select { background:#020617 !important; border-color:#334155 !important; color:var(--ui-text) !important; }
body.theme-dark .if-footer { background:linear-gradient(135deg,#020617,#111827) !important; }

body.theme-luxury .if-card:hover, body.theme-luxury .card:hover { border-color:rgba(217,119,6,.35) !important; }
body.theme-kids .if-card, body.theme-kids .card { border-radius:30px !important; }
body.theme-minimal .if-card, body.theme-minimal .card, body.theme-minimal .if-section, body.theme-minimal .box { box-shadow:0 8px 22px rgba(15,23,42,.035) !important; }


/* =========================================================
   Stage 13.6b — Strong Visible Frontend Theme Effects
   This makes theme changes much more obvious on the real site.
   ========================================================= */

body.theme-festival { --theme-a:#4f46e5; --theme-b:#2563eb; --theme-c:#f59e0b; }
body.theme-news { --theme-a:#dc2626; --theme-b:#111827; --theme-c:#f97316; }
body.theme-corporate { --theme-a:#2563eb; --theme-b:#334155; --theme-c:#0ea5e9; }
body.theme-luxury { --theme-a:#d97706; --theme-b:#020617; --theme-c:#fbbf24; }
body.theme-kids { --theme-a:#ec4899; --theme-b:#06b6d4; --theme-c:#facc15; }
body.theme-nature { --theme-a:#16a34a; --theme-b:#0f766e; --theme-c:#84cc16; }
body.theme-minimal { --theme-a:#0f172a; --theme-b:#64748b; --theme-c:#94a3b8; }
body.theme-dark { --theme-a:#8b5cf6; --theme-b:#0f172a; --theme-c:#22d3ee; }

body[class*="theme-"] .if-logo,
body[class*="theme-"] .logo,
body[class*="theme-"] .contact-submit,
body[class*="theme-"] .archive-tabs a.active,
body[class*="theme-"] .btn-primary,
body[class*="theme-"] button[type="submit"] {
    background: linear-gradient(135deg, var(--theme-a), var(--theme-b)) !important;
    color: #fff !important;
}

body[class*="theme-"] .if-hero-card,
body[class*="theme-"] .hero-card {
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-c) 24%, transparent), transparent 26%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--theme-a) 22%, transparent), transparent 28%),
        linear-gradient(135deg, var(--theme-b), var(--theme-a)) !important;
}

body[class*="theme-"] .if-kicker,
body[class*="theme-"] .kicker,
body[class*="theme-"] .if-count,
body[class*="theme-"] .meta,
body[class*="theme-"] .page-links a {
    background: color-mix(in srgb, var(--theme-a) 12%, #ffffff) !important;
    color: var(--theme-a) !important;
    border-color: color-mix(in srgb, var(--theme-a) 28%, #e5e7eb) !important;
}

body[class*="theme-"] .if-card-link,
body[class*="theme-"] .more,
body[class*="theme-"] .if-card-body a,
body[class*="theme-"] .card-body a,
body[class*="theme-"] .quick-list a:hover {
    color: var(--theme-a) !important;
}

body[class*="theme-"] .if-card:hover,
body[class*="theme-"] .card:hover,
body[class*="theme-"] .info-item:hover,
body[class*="theme-"] .quick-list a:hover {
    border-color: color-mix(in srgb, var(--theme-a) 40%, #e5e7eb) !important;
    box-shadow: 0 20px 58px color-mix(in srgb, var(--theme-a) 18%, transparent) !important;
}

body[class*="theme-"] input:focus,
body[class*="theme-"] textarea:focus,
body[class*="theme-"] select:focus {
    border-color: var(--theme-a) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-a) 14%, transparent) !important;
}

body.theme-news .if-footer { background: linear-gradient(135deg, #111827, #7f1d1d) !important; }
body.theme-corporate .if-footer { background: linear-gradient(135deg, #0f172a, #1e3a8a) !important; }
body.theme-luxury .if-footer { background: linear-gradient(135deg, #020617, #78350f) !important; }
body.theme-kids .if-footer { background: linear-gradient(135deg, #831843, #164e63) !important; }
body.theme-nature .if-footer { background: linear-gradient(135deg, #052e16, #134e4a) !important; }
body.theme-minimal .if-footer { background: linear-gradient(135deg, #020617, #334155) !important; }
body.theme-dark .if-footer { background: linear-gradient(135deg, #020617, #111827) !important; }

body.theme-dark .if-menu a,
body.theme-dark .menu a,
body.theme-dark .brand,
body.theme-dark .if-brand {
    color: #e5e7eb !important;
}