/**
 * Custom Styles - DEV HUB
 * Brand CI: Sage Olive & Warm Ivory
 * Primary: #A19D70 (Sage Olive), Secondary: #AA817E (Dusty Rose)
 * Accent: #F2C6A0 (Soft Apricot)
 * Background: #FBF5E9 (Warm Ivory), Text: #504027 (Espresso Brown)
 */

/* ==================== FONTS ==================== */
/* Noto Sans (ละติน) + Noto Sans Thai (ไทย) — variable weight 300-800 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300..800&family=Noto+Sans+Thai:wght@300..800&display=swap');

/* ==================== BRAND CI TOKENS ==================== */
/* แก้สีทั้งระบบได้จากตรงนี้ (ต้องตรงกับ tailwind.config.js) */
:root {
  --brand-primary: #A19D70;        /* Sage Olive */
  --brand-primary-strong: #757144; /* โทนเข้มสำหรับปุ่ม/ตัวหนังสือบนพื้นสว่าง */
  --brand-secondary: #AA817E;      /* Dusty Rose */
  --brand-accent: #F2C6A0;         /* Soft Apricot */
  --brand-bg: #FBF5E9;             /* Warm Ivory */
  --brand-surface: #FFFFFF;
  --brand-text: #504027;           /* Espresso Brown */
  --brand-text-muted: #7F6E56;
  --brand-border: #EBE1CE;
  --brand-border-soft: #F0E5D1;
  --brand-dark: #3A2E1C;           /* พื้นเข้ม เช่น sidebar / overlay */

  /* ฟอนต์: ละตินใช้ Noto Sans, ไทยตกไปที่ Noto Sans Thai (Noto Sans ไม่มีสระ/วรรณยุกต์ไทย) */
  --brand-font: 'Noto Sans', 'Noto Sans Thai', sans-serif;
}

/* Base font */
body {
  font-family: var(--brand-font);
  /* น้ำหนักฐาน 450 (หนากว่า regular เล็กน้อย) ให้ตัวอักษรไทยอ่านชัดขึ้น */
  font-weight: 450;
  /* line-height ฐานอยู่ใน css/tailwind-input.css (@layer base)
     เพราะ preflight ของ Tailwind โหลดทีหลังและจะ override ตรงนี้ */
  color: var(--brand-text);
  background: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--brand-font);
  letter-spacing: -0.01em;
}

/* ==================== BANNER SLIDER ==================== */
.banner-slider {
  position: relative;
  overflow: hidden;
}

.banner-slider .slides {
  position: relative;
  width: 100%;
}

.banner-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.banner-slider .slide.active {
  position: relative;
  opacity: 1;
  pointer-events: all;
}

/* แสดงภาพแบนเนอร์เต็มขนาด: กว้างเต็มความกว้างจอ สูงตามสัดส่วนจริงของภาพ
   (ไม่ล็อก max-height ไม่ครอป และไม่มีแถบว่างข้างภาพ) */
.banner-slider .slide img,
.banner-slider .slide video,
.banner-slider .slide .banner-media {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  display: block;
}

.banner-slider .slide video.banner-media {
  background: var(--brand-dark);
}

/* แบนเนอร์ที่มีลิงก์จะถูกห่อด้วย <a> (inline) — บังคับเป็น block
   กัน gap ใต้ภาพที่เกิดจาก line-height ของ inline element */
.banner-slider .slide a {
  display: block;
  line-height: 0;
}

/* ปุ่มเลื่อนซ้าย/ขวา: ใส่วงกลมโปร่งแสงให้เห็นชัดบนแบนเนอร์โทนสว่าง */
.banner-slider > button {
  background: rgba(58, 46, 28, 0.3);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, color 0.2s ease;
}
.banner-slider > button:hover {
  background: rgba(58, 46, 28, 0.55);
}

@media (max-width: 767px) {
  /* บนมือถือก็แสดงเต็มภาพเช่นกัน (เดิม cover + max-height 60vh ทำให้ภาพถูกครอป) */
  .banner-slider .slide img,
  .banner-slider .slide video,
  .banner-slider .slide .banner-media {
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .banner-slider .slide-content {
    padding: 1.25rem;
  }
}

.banner-slider .slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem;
  background: linear-gradient(transparent, rgba(58,46,28,0.55));
  color: white;
  text-align: center;
}

.banner-slider .slide-content h2 {
  font-family: var(--brand-font);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0;
}

.banner-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.8);
  /* เงาช่วยให้จุดยังเห็นบนแบนเนอร์พื้นสว่าง */
  box-shadow: 0 1px 4px rgba(58, 46, 28, 0.5);
}

.banner-dots .dot.active {
  background: white;
  width: 10px;
  border-radius: 50%;
}

/* ==================== PRODUCT CARD ==================== */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
  border: none !important;
  box-shadow: none;
  border-radius: 0 !important;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(80,64,39,0.10);
}

.product-card .sold-out-overlay {
  position: absolute;
  inset: 0;
  background: rgba(251,245,233,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card .favorite-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(80,64,39,0.12);
  cursor: pointer;
  transition: transform 0.2s;
}

.product-card .favorite-btn:hover {
  transform: scale(1.1);
}

/* ==================== IMAGE GALLERY ==================== */
.image-gallery {
  position: relative;
}

.image-gallery .main-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: zoom-in;
}

.image-gallery .thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
}

.image-gallery .thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.image-gallery .thumbnail.active {
  border-color: var(--brand-primary-strong);
}
.image-gallery .main-image:focus-visible,
.image-gallery .thumbnail:focus-visible {
  outline: 2px solid var(--brand-primary-strong);
  outline-offset: 2px;
}

/* ป้ายบอกว่ากดที่ภาพเพื่อซูมได้ */
.image-gallery .zoom-hint {
  position: absolute;
  right: 0.75rem;
  bottom: calc(60px + 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  background: rgba(58, 46, 28, 0.62);
  color: #fff;
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.image-gallery:hover .zoom-hint {
  opacity: 1;
}

/* ==================== IMAGE LIGHTBOX ==================== */
body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(36, 28, 17, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox:focus {
  outline: none;
}
.lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  transform-origin: center center;
  transition: transform 0.2s ease;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  background: var(--brand-surface);
}
.lightbox__img.zoomed {
  cursor: grab;
  transition: none;
}
.lightbox__img.dragging {
  cursor: grabbing;
}
/* ปุ่มควบคุมลอยอยู่บนภาพสินค้า ซึ่งส่วนใหญ่พื้นขาว/สว่าง
   จึงต้องใช้พื้นเข้มทึบ + ขอบสว่าง + เงา ให้เห็นชัดบนทุกภาพ */
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(251, 245, 233, 0.45);
  border-radius: 9999px;
  background: rgba(36, 28, 17, 0.68);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(36, 28, 17, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox__btn:hover {
  background: rgba(36, 28, 17, 0.88);
  border-color: var(--brand-accent);
}
/* กดค้าง (มือถือไม่มี hover) ให้เห็นว่ากดติด */
.lightbox__btn:active {
  background: var(--brand-primary-strong);
  border-color: var(--brand-accent);
}
.lightbox__btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.lightbox__close {
  top: 1rem;
  right: 1rem;
}
.lightbox__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__btn.hidden-ctrl {
  display: none;
}
.lightbox__bar {
  position: absolute;
  z-index: 2;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: rgba(36, 28, 17, 0.6);
  color: #fff;
  font-size: 0.85rem;
}
/* ปุ่มย่อ/ขยาย อยู่บนแถบสีเข้มแล้ว จึงใช้พื้นสว่างเพื่อให้ตัดกับแถบ */
.lightbox__bar .lightbox__zoom {
  position: static;
  width: 36px;
  height: 36px;
  background: rgba(251, 245, 233, 0.2);
  border-color: rgba(251, 245, 233, 0.4);
  box-shadow: none;
}
.lightbox__bar .lightbox__zoom:hover {
  background: rgba(251, 245, 233, 0.36);
}
.lightbox__level {
  min-width: 3.2rem;
  text-align: center;
}
.lightbox__count {
  padding-left: 0.5rem;
  border-left: 1px solid rgba(251, 245, 233, 0.28);
  color: #DCCFB6;
}
.lightbox__count:empty {
  display: none;
}
@media (max-width: 767px) {
  /* คงขนาดปุ่มไว้ 44px ตามขนาดพื้นที่กดขั้นต่ำที่นิ้วกดได้สะดวก
     แต่ขยับเข้ามาจากขอบจอ เพื่อไม่ทับพื้นที่ปัดขอบจอของ iOS */
  .lightbox__prev {
    left: 0.5rem;
  }
  .lightbox__next {
    right: 0.5rem;
  }
  .lightbox__close {
    top: 0.75rem;
    right: 0.75rem;
  }
  .lightbox__img {
    max-width: 96vw;
    max-height: 78vh;
  }
}

/* ==================== MODAL ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58,46,28,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background: white;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* ==================== ORDER TIMELINE ==================== */
.order-timeline {
  position: relative;
  padding-left: 2rem;
}

.order-timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-border);
}

.order-timeline .timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.order-timeline .timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-border);
}

.order-timeline .timeline-item.active::before {
  background: var(--brand-primary-strong);
}

.order-timeline .timeline-item.completed::before {
  background: var(--brand-primary-strong);
}

/* ==================== ADMIN TABLE ==================== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background: var(--brand-bg);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--brand-text);
  border-bottom: 1px solid var(--brand-border);
}

.admin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--brand-border-soft);
}

.admin-table tr:hover td {
  background: var(--brand-bg);
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton {
  animation: pulse 1.5s infinite;
  background: var(--brand-border);
}

/* ==================== SORTABLE LIST (ลากจัดลำดับ) ==================== */
/* ปุ่มลาก: touch-action: none จำเป็นบนมือถือ ไม่งั้นการลากจะกลายเป็นการเลื่อนหน้าจอ */
.drag-handle {
  touch-action: none;
  cursor: grab;
  border-radius: 0.5rem;
  padding: 0.35rem;
  color: var(--brand-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.drag-handle:hover {
  background: var(--brand-bg);
  color: var(--brand-text);
}
.drag-handle:active {
  cursor: grabbing;
}
.drag-handle:focus-visible {
  outline: 2px solid var(--brand-primary-strong);
  outline-offset: 2px;
}
.sortable-list.is-sorting {
  cursor: grabbing;
}
/* การ์ดที่กำลังลาก */
.sortable-dragging {
  opacity: 0.9;
  box-shadow: 0 12px 28px rgba(80, 64, 39, 0.28);
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  position: relative;
  z-index: 5;
}
/* ระหว่างลาก ปิด transition ของการ์ดอื่นเพื่อไม่ให้กระตุก */
.sortable-list.is-sorting * {
  user-select: none;
}

/* ==================== SCROLL AREA (ในกล่อง/modal) ==================== */
/* สกรอลบาร์ของหน้าเว็บตั้งไว้บางมาก (4px) ซึ่งในกล่องที่เลื่อนได้จะแทบมองไม่เห็น
   จนผู้ใช้ไม่รู้ว่าเลื่อนดูต่อได้ กล่องพวกนี้จึงใช้สกรอลบาร์ที่เห็นชัดกว่า */
.scroll-area {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--brand-primary) transparent;
  overscroll-behavior: contain;                           /* เลื่อนสุดแล้วไม่ไปดึงหน้าเว็บด้านหลัง */
  -webkit-overflow-scrolling: touch;                      /* เลื่อนลื่นบน iOS */
}
.scroll-area::-webkit-scrollbar {
  width: 8px;
}
.scroll-area::-webkit-scrollbar-track {
  background: var(--brand-border-soft);
  border-radius: 9999px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 9999px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary-strong);
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #DCCFB6;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B9A98D;
}

/* ==================== LUCIDE ICONS ==================== */
/* ให้ไอคอน Lucide inherit สีจาก parent */
[data-lucide] {
  stroke: currentColor;
}

/* หัวใจถูกใจ - แดงทั้งดวง (fill + stroke) */
.heart-fav {
  fill: #ef4444 !important;
  color: #ef4444 !important;
  stroke: #ef4444 !important;
}

/* ==================== HORIZONTAL SCROLL PRODUCTS ==================== */
#product-scroll .product-card {
  min-width: 220px;
  max-width: 260px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  #product-scroll .product-card {
    min-width: 260px;
    max-width: 300px;
  }
}

/* Hide scrollbar but keep scroll */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ==================== TOGGLE SWITCH ==================== */
.translate-x-4\.5 {
  transform: translateX(1.1rem);
}
.translate-x-0\.5 {
  transform: translateX(0.15rem);
}

/* ==================== ADMIN CONTENT SPACING ==================== */
/* เว้นที่ให้กระดิ่ง notification มุมขวาบน */
#admin-content > div:first-child {
  padding-right: 3rem;
}

/* ==================== GOOGLE TRANSLATE HIDE ==================== */
.goog-te-banner-frame, .goog-te-gadget, #goog-gt-tt { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-te-balloon-frame { display: none !important; }
.goog-tooltip { display: none !important; }
.skiptranslate { display: none !important; }
iframe.goog-te-banner-frame { display: none !important; }
#google_translate_element { display: none !important; }