/* ==========================================================================
   PlanariaShop UI — design system กลางของหน้าบ้าน
   - สีหลักมาจากธีมในหลังบ้าน (--clr-neon = webconfig sec_color) ผ่าน --ui-accent
   - ทุกคลาสขึ้นต้นด้วย ui- และตัวแปรขึ้นต้นด้วย --ui- เพื่อไม่ชนกับ CSS เดิมของแต่ละหน้า
   - CSS หลักใน index.php บังคับสี span/p/a/h* เป็น font_color จึงต้องใส่ !important กับข้อความที่มีสีเฉพาะ
   ========================================================================== */

:root {
    --ui-accent: var(--clr-neon, #ffa66b);
    --ui-accent-ink: #1a1206;                     /* ตัวหนังสือบนพื้นสีหลัก */
    --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 14%, transparent);
    --ui-accent-line: color-mix(in srgb, var(--ui-accent) 42%, transparent);
    --ui-accent-glow: color-mix(in srgb, var(--ui-accent) 32%, transparent);

    --ui-surface: rgba(14, 18, 32, 0.78);         /* การ์ดหลัก (โปร่งให้เห็นพื้นหลังเว็บ) */
    --ui-surface-2: rgba(255, 255, 255, 0.04);    /* ช่องย่อยในการ์ด */
    --ui-line: rgba(255, 255, 255, 0.09);
    --ui-line-strong: rgba(255, 255, 255, 0.16);

    --ui-text: #ffffff;
    --ui-muted: rgba(255, 255, 255, 0.66);
    --ui-dim: rgba(255, 255, 255, 0.42);

    --ui-ok: #34d399;
    --ui-warn: #fbbf24;
    --ui-danger: #f87171;
    --ui-info: #60a5fa;

    --ui-radius: 22px;
    --ui-radius-md: 16px;
    --ui-radius-sm: 12px;
    --ui-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    --ui-blur: blur(16px);
}

/* ---------- ตัวเลข ---------- */
.ui-num { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- การ์ด ---------- */
.ui-card {
    position: relative;
    background: var(--ui-surface);
    -webkit-backdrop-filter: var(--ui-blur);
    backdrop-filter: var(--ui-blur);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.ui-card-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ui-card-hover:hover { transform: translateY(-4px); border-color: var(--ui-accent-line); box-shadow: var(--ui-shadow), 0 0 0 1px var(--ui-accent-soft); }

/* ---------- หัวข้อ section ---------- */
.ui-section { margin-top: clamp(2.2rem, 5vw, 3.5rem); }
.ui-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.ui-section-head h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; color: var(--ui-text) !important; letter-spacing: -0.01em; display: flex; align-items: center; gap: .6rem; }
.ui-section-head h2 .ui-icon-tile { width: 36px; height: 36px; font-size: 1rem; border-radius: 11px; }
.ui-section-head p { margin: .3rem 0 0; font-size: .9rem; color: var(--ui-muted) !important; }
.ui-link-more {
    flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 50px;
    font-size: .85rem; font-weight: 600; color: var(--ui-text) !important; text-decoration: none;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line-strong); transition: background .2s, border-color .2s, color .2s;
}
.ui-link-more:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent) !important; }
.ui-link-more i { color: inherit !important; transition: transform .2s; }
.ui-link-more:hover i { transform: translateX(3px); }

/* ---------- ไอคอนในกล่อง ---------- */
.ui-icon-tile {
    width: 46px; height: 46px; flex: none; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
    color: var(--ui-accent) !important; background: var(--ui-accent-soft); border: 1px solid var(--ui-accent-line);
}
.ui-icon-tile i { color: inherit !important; }

/* ---------- ปุ่ม ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.25rem; border-radius: 14px; border: 1px solid transparent;
    font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease, border-color .2s ease;
}
.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:disabled, .ui-btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ui-btn i { color: inherit !important; }
.ui-btn-accent { background: var(--ui-accent); color: var(--ui-accent-ink) !important; box-shadow: 0 10px 26px var(--ui-accent-glow); }
.ui-btn-accent:hover { filter: brightness(1.07); box-shadow: 0 14px 32px var(--ui-accent-glow); }
.ui-btn-ghost { background: var(--ui-surface-2); border-color: var(--ui-line-strong); color: var(--ui-text) !important; }
.ui-btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); }
.ui-btn-outline { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent) !important; }
.ui-btn-outline:hover { background: color-mix(in srgb, var(--ui-accent) 24%, transparent); }
.ui-btn-block { width: 100%; }

/* ---------- ป้าย ---------- */
.ui-badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 50px;
    font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line-strong); color: var(--ui-text) !important;
}
.ui-badge i { color: inherit !important; }
.ui-badge-accent { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent) !important; }
.ui-badge-ok { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .38); color: var(--ui-ok) !important; }
.ui-badge-warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .4); color: var(--ui-warn) !important; }
.ui-badge-danger { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .4); color: var(--ui-danger) !important; }

/* ---------- ป้ายนำหน้าหัวข้อ (มีจุดกระพริบ) ---------- */
.ui-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; padding: .32rem .85rem; border-radius: 50px;
    font-size: .78rem; font-weight: 600; color: var(--ui-text) !important;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line-strong);
}
.ui-eyebrow .ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok); animation: uiPulse 1.9s infinite; }
@keyframes uiPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ---------- ข้อความไล่สีด้วยสีหลัก ---------- */
.ui-gradient-text {
    background: linear-gradient(100deg, var(--ui-accent) 0%, color-mix(in srgb, var(--ui-accent) 55%, #ffffff) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.ui-gradient-text * { color: transparent !important; }

/* ---------- ช่องกรอก ---------- */
.ui-input {
    width: 100%; height: 50px; padding: 0 1rem; border-radius: var(--ui-radius-sm);
    background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--ui-line-strong) !important; color: #fff !important;
    font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.ui-input::placeholder { color: var(--ui-dim) !important; }
.ui-input:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; }

/* ---------- การเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
    .ui-card-hover, .ui-btn, .ui-link-more i { transition: none; }
    .ui-card-hover:hover, .ui-btn:hover { transform: none; }
    .ui-eyebrow .ui-dot { animation: none; }
}