/*!
 * Flawless Brand Shop Stylesheet
 * Copyright (c) 2025 RiDERth. All rights reserved.
 * Created by RiDERth — https://flawlessbrand.shop
 */

/* ===== ฟอนต์จาก Google Fonts ===== */
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap");

:root {
  --flws-font: "Prompt", "Noto Sans Thai", sans-serif;
  --flws-bg: #f9f4f0; /* พื้นหลังธีมครีม */
  --flws-text: #3c3c3c; /* ข้อความหลัก */
  --flws-sub: #6e6e6e; /* ข้อความรอง */
  --flws-accent: #d9b48f; /* สีเน้น (ทองอ่อน) */
  --flws-border: #e9e2dc;
  --flws-white: #fff;
  --flws-topbar-speed: 18s; /* ปรับความเร็วได้: น้อย=เร็ว มาก=ช้า */
  --flws-radius: 22px;
  --flws-gap: 24px;
  --flws-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  --flws-hero-h: clamp(300px, 58vw, 560px);
  --flws-card-h: clamp(240px, 42vw, 520px);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  background-color: var(--flws-bg);
  color: var(--flws-text);
  font-family: var(--flws-font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

/* ===== THEME TOKENS (scoped ในคอมโพเนนต์) =============================== */
.preloader-flws {
  --flws-bg: #0b0b0b; /* พื้นหลัง (Noir Luxe) */
  --flws-fg: #fff7ee; /* สีตัวอักษร */
  --flws-gold-1: #e7caa3; /* Gradient gold */
  --flws-gold-2: #c69a6a;
  --flws-gold-3: #f2dec4;
  --flws-size: 64px; /* ความสูงสูงสุดของแท่ง */
  --flws-bars: 7; /* จำนวนแท่ง */
  --flws-gap: 8px; /* ระยะห่างแท่ง */
  --flws-speed: 850ms; /* ความเร็วขึ้นลงของแท่ง */
  --flws-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --flws-min-show: 480ms; /* ให้โชว์ขั้นต่ำกันแวบ */
}

/* ===== SCROLLBAR LUXURY STYLE (Flawless Brand Edition) ===== */
html {
  scrollbar-width: thin;
  scrollbar-color: #d4a373 #fdf8f5; /* สำหรับ Firefox */
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

/* พื้นหลังของราง scrollbar */
::-webkit-scrollbar-track {
  background: #fdf8f5; /* ครีมอ่อน เหมือนพื้นเว็บ */
  border-radius: 10px;
}

/* ตัวแถบ scrollbar */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f7d7b3 0%, #d4a373 50%, #c18e69 100%);
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5),
    0 0 6px rgba(193, 142, 105, 0.4);
  transition: all 0.4s ease;
  animation: scroll-glow 3s ease-in-out infinite;
}

/* hover = เงาเพิ่มขึ้นนิดนึง ดูแพง */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fbe0be 0%, #d8a676 50%, #c18e69 100%);
  box-shadow: 0 0 10px rgba(193, 142, 105, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.6);
}

/* แอนิเมชันแสงทองเคลื่อนไหวเบาๆ */
@keyframes scroll-glow {
  0%,
  100% {
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4),
      0 0 6px rgba(193, 142, 105, 0.3);
  }
  50% {
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(224, 191, 168, 0.6);
  }
}

.flawless-divider-curve {
  height: 3px;
  width: 100%;
  max-width: 1100px;
  margin: 0px auto;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(247, 242, 237, 0),
    #d8a689,
    rgba(247, 242, 237, 0)
  );
  box-shadow: 0 0 6px rgba(216, 166, 137, 0.4);
}