/* =====================================================================
   Razex – Premium Layer (โหลดเป็นไฟล์สุดท้ายของหน้าร้าน)
   ปรับความสวยของ: พื้นหลัง, การ์ด, ปุ่ม, ฟอร์ม, ตาราง, ฟุตเตอร์,
   แอนิเมชันเข้าหน้า, ปุ่มกลับขึ้นบนสุด และปุ่มสลับโหมดสว่าง/มืด
   ===================================================================== */

:root {
    --pm-radius: 22px;
    --pm-radius-sm: 14px;
    --pm-glass: rgba(255, 255, 255, 0.72);
    --pm-glass-border: rgba(255, 255, 255, 0.6);
    --pm-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --pm-shadow-hover: 0 22px 48px rgba(15, 23, 42, 0.14);
    --pm-bg: #f4f7fb;
    --pm-surface: #ffffff;
    --pm-text: #0f172a;
    --pm-text-soft: #475569;
    --pm-border: rgba(15, 23, 42, 0.08);
}

/* ---------- 1. พื้นหลังและตัวอักษร ---------- */
html { scroll-padding-top: 90px; }
body {
    background-color: var(--pm-bg);
    color: var(--pm-text);
    letter-spacing: 0.1px;
}
h1, h2, h3, h4, .section-title, .card-title {
    letter-spacing: -0.2px;
    font-weight: 700;
}
::selection { background: var(--main); color: #fff; }

/* สกรอลบาร์ให้เข้ากับธีม */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--pm-bg); }
html::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--main), var(--sub));
    border-radius: 999px;
    border: 2px solid var(--pm-bg);
}

/* ---------- 2. การ์ดและกล่องต่าง ๆ ---------- */
.card,
.bento-card,
.card-item,
.stat-card,
.stats-card,
.section-card {
    border-radius: var(--pm-radius) !important;
    border: 1px solid var(--pm-border);
    box-shadow: var(--pm-shadow);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
    overflow: hidden;
}
.card:hover,
.bento-card:hover,
.card-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--pm-shadow-hover);
    border-color: var(--main-30);
}
.card-img,
.card-img img {
    transition: transform .6s var(--ease);
}
.card:hover .card-img img,
.card-item:hover .card-img img {
    transform: scale(1.06);
}

/* ---------- 3. ปุ่ม ---------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .2s var(--ease), box-shadow .25s, background .25s, filter .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary,
.nav-btn-primary,
.btn-main {
    background: linear-gradient(135deg, var(--main) 0%, var(--sub) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--main-rgb), .35);
}
.btn-primary:hover,
.nav-btn-primary:hover,
.btn-main:hover {
    box-shadow: 0 12px 28px rgba(var(--main-rgb), .45);
    filter: brightness(1.05);
    color: #fff;
}
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(var(--main-rgb), .45);
    outline-offset: 2px;
}

/* ---------- 4. ฟอร์มและช่องกรอก ---------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    border-radius: var(--pm-radius-sm);
    border: 1.5px solid var(--pm-border);
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--main);
    box-shadow: 0 0 0 4px rgba(var(--main-rgb), .15);
}

/* ---------- 5. ตารางและป้ายสถานะ ---------- */
.table {
    border-radius: var(--pm-radius-sm);
    overflow: hidden;
}
.table thead th {
    background: rgba(var(--main-rgb), .08);
    color: var(--pm-text);
    font-weight: 600;
    border-bottom: none;
}
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(var(--main-rgb), .04); }

.badge {
    border-radius: 999px;
    padding: .45em .85em;
    font-weight: 600;
}

/* ---------- 6. แถบนำทาง (กระจกฝ้า) ---------- */
.nav-wrap,
.site-nav,
.navbar {
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav-wrap,
.site-nav {
    border-bottom: 1px solid var(--pm-border);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .06);
}
.nav-link-item { transition: color .2s, background .2s; border-radius: 999px; }
.nav-link-item:hover { background: rgba(var(--main-rgb), .08); }

/* ---------- 7. ฟุตเตอร์ ---------- */
.site-footer,
footer {
    background: linear-gradient(180deg, transparent, rgba(var(--main-rgb), .08));
    border-top: 1px solid var(--pm-border);
}

/* ---------- 8. แอนิเมชันเข้าหน้า (เฉพาะองค์ประกอบที่มีคลาส .reveal) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 9. ปุ่มกลับขึ้นบนสุด ---------- */
.pm-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--main), var(--sub));
    box-shadow: 0 10px 26px rgba(var(--main-rgb), .45);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease);
    z-index: 1040;
}
.pm-to-top.is-show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.pm-to-top:hover { transform: translateY(-3px) scale(1.05); }

/* ---------- 10. ตัวแสดงความคืบหน้าการเลื่อนอ่าน ---------- */
.pm-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--main), var(--sub));
    z-index: 1100;
    transition: width .1s linear;
}

/* ---------- 11. ปุ่มสลับโหมดสว่าง / มืด ---------- */
.pm-theme-toggle {
    position: fixed;
    right: 22px;
    bottom: 80px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--pm-border);
    background: var(--pm-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--pm-shadow);
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    z-index: 1040;
    transition: transform .25s var(--ease);
}
.pm-theme-toggle:hover { transform: rotate(18deg) scale(1.06); }

/* ---------- 12. โหมดมืด (ใช้ได้กับส่วนที่ใช้ตัวแปรสี) ---------- */
[data-theme="dark"] {
    --pm-bg: #0b1220;
    --pm-surface: #111a2e;
    --pm-text: #e6edf7;
    --pm-text-soft: #9fb0c8;
    --pm-border: rgba(255, 255, 255, 0.08);
    --pm-glass: rgba(17, 26, 46, 0.78);
    --pm-glass-border: rgba(255, 255, 255, 0.08);
    --pm-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --pm-shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.5);
    --text: #e6edf7;
    --text-soft: #9fb0c8;
    --text-mute: #6b7a92;
    --line: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] body { background-color: var(--pm-bg); color: var(--pm-text); }
[data-theme="dark"] .card,
[data-theme="dark"] .bento-card,
[data-theme="dark"] .card-item,
[data-theme="dark"] .section-card {
    background: var(--pm-surface);
    color: var(--pm-text);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #0f1729;
    color: var(--pm-text);
}
[data-theme="dark"] .table thead th { color: var(--pm-text); }
[data-theme="dark"] .site-footer,
[data-theme="dark"] footer { color: var(--pm-text-soft); }

/* ---------- 13. รองรับผู้ใช้ที่ปิดแอนิเมชัน ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- 14. มือถือ ---------- */
@media (max-width: 576px) {
    .pm-to-top { right: 14px; bottom: 16px; width: 44px; height: 44px; }
    .pm-theme-toggle { right: 14px; bottom: 70px; width: 44px; height: 44px; }
}

/* ---------- รีวิวสินค้า ---------- */
.rv-wrap { margin: 28px auto; max-width: 1180px; padding: 22px; background: var(--pm-glass); border: 1px solid var(--pm-border); border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rv-head h3 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.rv-head h3 i { color: #ffb547; }
.rv-summary { display: flex; align-items: center; gap: 10px; }
.rv-avg { font-size: 2rem; font-weight: 800; color: var(--main); }
.rv-stars-lg { color: #ffb547; font-size: 1.2rem; letter-spacing: 2px; }
.rv-stars { color: #ffb547; letter-spacing: 1px; }
.rv-off { opacity: .25; }
.rv-flash { padding: 10px 14px; border-radius: 12px; background: rgba(var(--main-rgb), .12); margin-bottom: 14px; font-weight: 600; }
.rv-note { color: var(--pm-text-soft); margin: 8px 0 14px; }
.rv-form { margin-bottom: 18px; }
.rv-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 2rem; margin-bottom: 8px; }
.rv-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rv-pick label { color: var(--pm-border); cursor: pointer; padding: 0 3px; transition: transform .15s, color .15s; }
.rv-pick label:hover, .rv-pick label:hover ~ label, .rv-pick input:checked ~ label { color: #ffb547; }
.rv-pick label:hover { transform: scale(1.15); }
.rv-list { display: grid; gap: 12px; }
.rv-item { padding: 14px 16px; border-radius: var(--pm-radius-sm); background: var(--pm-surface); border: 1px solid var(--pm-border); }
.rv-item p { margin: 6px 0; }
.rv-item small { color: var(--pm-text-soft); }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-top i { color: var(--main); }

/* ---------- ปุ่มรายการโปรด (หน้าสินค้า) ---------- */
.wish-form { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin: 10px 0; }
.wish-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:1.5px solid rgba(244,63,94,.35); background:transparent; color:#e11d48; font-weight:600; cursor:pointer; transition: transform .2s var(--ease), background .2s; }
.wish-btn:hover { transform: translateY(-2px); background: rgba(244,63,94,.08); }
.wish-btn.on { background: linear-gradient(135deg,#fb7185,#e11d48); color:#fff; border-color:transparent; box-shadow: 0 8px 20px rgba(225,29,72,.3); }
.wish-btn.on i { animation: wishPop .45s var(--ease); }
@keyframes wishPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.wish-msg { font-size:.85rem; color: var(--pm-text-soft); }

/* Account balance status, shown on all storefront pages for signed-in customers */
.pm-balance-status{position:fixed;right:18px;bottom:18px;z-index:999990;display:flex;flex-direction:column;gap:2px;max-width:min(300px,calc(100vw - 36px));padding:12px 16px;border:1px solid rgba(30,120,90,.2);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 32px rgba(15,23,42,.16);backdrop-filter:blur(12px);color:#14251f;font-family:Kanit,sans-serif}
.pm-balance-label{font-size:12px;color:#66756f}.pm-balance-value{font-size:17px;font-weight:700;color:#11734d}@media(max-width:600px){.pm-balance-status{right:12px;bottom:12px;padding:9px 12px}.pm-balance-value{font-size:15px}}




/* Standalone wallet pill beside account controls; no extra tab/row and no floating overlay */
.site-wallet-pill{position:static;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 13px;margin:0 9px 0 0;border:1px solid rgba(14,165,233,.2);border-radius:999px;background:linear-gradient(180deg,#fff,#f3fbfe);box-shadow:0 3px 12px rgba(15,23,42,.08);color:#168fb9;text-decoration:none;white-space:nowrap;vertical-align:middle;transition:transform .18s ease,box-shadow .18s ease}.site-wallet-pill:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.12);color:#087fa8}.site-wallet-icon{width:18px;height:18px;fill:#20b7e8;flex:0 0 auto}.site-wallet-amount{font-size:14px;font-weight:700;color:#138db8}.site-wallet-fallback{margin:12px 16px 0 auto;width:max-content}@media(max-width:600px){.site-wallet-pill{height:36px;padding:0 9px;gap:5px;margin-right:6px}.site-wallet-amount{font-size:13px}.site-wallet-icon{width:16px;height:16px}}

.site-wallet-nav-item{display:flex;align-items:center;margin:0 4px}.site-wallet-nav-item .site-wallet-pill{margin:0 8px 0 0}

.site-wallet-fallback{position:fixed!important;top:8px;right:10px;z-index:1100;margin:0!important;width:auto!important;pointer-events:auto}