/* ===== NAVBAR 2025 – Flawless Edition (full, refined) ===== */
:root{
  --flws-border: #e8e3dc;
  --flws-accent: #d9b48f;

  --flws-dd-bg: #0f0f0f;
  --flws-dd-border: #232323;
  --flws-dd-hover: rgba(255,255,255,.06);

  /* Contact CTA */
  --flws-cta-from: #c18e69;
  --flws-cta-to:   #f2c9a4;
  --flws-cta-text: #1b1b1b;
  --flws-cta-glow: rgba(210,173,130,.38);
}

/* =========================
   CONTACT CTA (Wallet-style)
   ========================= */
.flws-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px; border:0;
  background:linear-gradient(135deg,var(--flws-cta-from) 0%,var(--flws-cta-to) 100%);
  color:var(--flws-cta-text); text-decoration:none; font-weight:800; letter-spacing:.2px;
  position:relative; isolation:isolate; overflow:hidden;
  box-shadow:0 8px 24px var(--flws-cta-glow);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.flws-cta::before{
  content:""; position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.25), rgba(255,255,255,0));
  transform:skewX(-25deg);
  transition:left .6s ease;
}
.flws-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 12px 28px rgba(210,173,130,.55); filter:brightness(1.08); }
.flws-cta:hover::before{ left:125%; }
.flws-cta:active{ transform:translateY(0) scale(.99); }

.flws-cta-icon{
  width:26px; height:26px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:rgba(255,255,255,.35); color:var(--flws-cta-text);
  transition:transform .3s ease, background .3s ease;
}
.flws-cta:hover .flws-cta-icon{ transform:rotate(15deg) scale(1.1); background:rgba(255,255,255,.45); }
.flws-cta-label{ line-height:1; }

/* โชว์/ซ่อนตามอุปกรณ์ */
.is-desktop{ margin-left:18px; }
.is-mobile{ display:none; margin:12px 18px 0; }
@media (max-width:992px){
  .flws-cta.is-desktop{ display:none; }
  .flws-cta.is-mobile{ display:flex; }
}

/* ===================== NAVBAR ===================== */
.navbar-flws{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--flws-border);
  transition:all .35s ease;
}
.navbar-wrap-flws{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px min(6vw,90px);
}
.nav-logo-flws img{ height:36px; transition:transform .3s ease; width: auto;}
.nav-logo-flws:hover img{ transform:scale(1.05); }

/* ================= MAIN NAV (desktop) ================= */
.nav-main-flws{ position:relative; margin-left:auto; }
.nav-links-flws{
  display:flex; align-items:center; gap:26px;
  list-style:none; margin:0; padding:0;
}
.nav-item-flws{ position:relative; }
.nav-link-flws{
  display:inline-flex; align-items:center; gap:6px; padding:12px 2px;
  font-weight:600; letter-spacing:.2px; text-decoration:none;
  color:#222; transition:color .25s ease; position:relative;
}
.nav-link-flws::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:linear-gradient(90deg,#dcb78b,#b58a63); transition:width .25s ease; border-radius:2px;
}
.nav-link-flws:hover{ color:#b58a63; }
.nav-link-flws:hover::after{ width:100%; }

/* caret ลง */
.nav-caret-flws{
  width:7px; height:7px; margin-left:4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease;
}

/* =========== DROPDOWN 1st =========== */
.nav-dd-flws{
  position:absolute; top:calc(100% + 8px); left:-12px; min-width:240px;
  background:var(--flws-dd-bg); border:1px solid var(--flws-dd-border); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:10px 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:200;
  overflow:visible;               /* ปล่อยให้ sub เมนูโผล่ */
}
.nav-dd-flws > li{ position:relative; }
.nav-dd-flws > li > a{
  display:block; padding:12px 18px; color:#eaeaea; text-decoration:none;
  font-weight:500; transition:background .2s ease, color .2s ease;
}
.nav-dd-flws > li > a:hover{ background:var(--flws-dd-hover); color:#fff; }

/* =========== SUB-DROPDOWN =========== */
.nav-dd-flws > li.has-sub > .sub-toggle{ padding-right:40px; position:relative; }
.nav-arrow-right{
  position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(-45deg);
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transition:transform .2s ease;
}
.nav-dd-flws > li.has-sub:hover > .sub-toggle .nav-arrow-right{
  transform:translateY(-50%) rotate(-225deg);
}
.nav-sub-flws{
  position:absolute; top:0; left:calc(100% + 8px);
  min-width:220px;
  background:var(--flws-dd-bg); border:1px solid var(--flws-dd-border); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:10px 0; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:210;                    /* ให้อยู่เหนือ dropdown แม่ */
}

/* เปิดด้วย hover เฉพาะ desktop */
@media (hover:hover){
  .nav-item-flws.has-dd:hover > .nav-dd-flws{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  }
  .nav-item-flws.has-dd:hover > .nav-link-flws > .nav-caret-flws{ transform:rotate(-135deg); }

  /* ยืนยันว่า sub ยังแสดงต่อแม้ลากไปกล่องลูก/ขอบ */
  .nav-dd-flws > li.has-sub:hover > .nav-sub-flws,
  .nav-sub-flws:hover{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  }
}

/* ข้อความใน sub ให้ชัด */
.nav-sub-flws a{
  color:#eaeaea; display:block; padding:12px 18px; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.nav-sub-flws a:hover{ background:var(--flws-dd-hover); color:#fff; }

/* ========= ACTIVE ========= */
.nav-link-flws.is-active,
.nav-dd-flws a.is-active,
.nav-sub-flws a.is-active{ color:var(--flws-accent); }
.nav-link-flws.is-active::after{
  content:""; display:block; height:2px; width:100%;
  background:var(--flws-accent); border-radius:2px; position:absolute; left:0; bottom:-5px;
}

/* ====== HOVER BRIDGES – กันเมนูหายระหว่างเลื่อน ====== */
.nav-item-flws.has-dd{ position:relative; }
.nav-item-flws.has-dd::after{
  content:""; position:absolute; left:-6px; right:-6px; top:100%; height:10px;
}
.nav-dd-flws > li.has-sub{ position:relative; }
.nav-dd-flws > li.has-sub::after{
  content:""; position:absolute; top:0; right:-12px; width:12px; height:100%;
}

/* ====== BURGER ====== */
.nav-toggle-flws{
  display:none; flex-direction:column; justify-content:space-between;
  width:28px; height:20px; border:0; background:none; cursor:pointer; position:relative;
  transition:transform .3s ease;
}
.nav-toggle-flws span{
  display:block; width:100%; height:3px; border-radius:2px; background:#2c2c2c; transition:all .35s ease;
}
.nav-toggle-flws.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-toggle-flws.active span:nth-child(2){ opacity:0; }
.nav-toggle-flws.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* ================= DRAWER (mobile) ================= */
.drawer-flws{
  position:fixed; inset:0 0 0 auto; width:min(88vw,360px); height:100dvh; z-index:70;
  background:#fff; border-left:2px solid var(--flws-accent);
  box-shadow:-24px 0 48px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  transform:translateX(100%); opacity:0;
  transition:transform .4s cubic-bezier(.19,1,.22,1), opacity .25s ease;
}
.drawer-flws.is-open{ transform:translateX(0); opacity:1; }

.drawer-head-flws{
  display:flex; align-items:center; justify-content:space-between; padding:18px;
  border-bottom:1px solid var(--flws-border);
}
.drawer-head-flws img{ height:30px;width: auto; }
.drawer-close-flws{ font-size:26px; border:none; background:none; cursor:pointer; }

.drawer-nav-flws{ display:flex; flex-direction:column; gap:10px; padding:18px; }

/* ลิงก์เดี่ยวใน Drawer */
.drawer-link{
  display:block; padding:12px 14px; border:1px solid var(--flws-border); border-radius:10px; font-weight:600;
  color:#222; text-decoration:none; transition:all .25s ease;
}
.drawer-link:hover{
  border-color:#b58a63; color:#fff; transform:translateX(6px);
  background:linear-gradient(135deg,#c18e69 0%,#f2c9a4 100%);
}

/* Accordion กลุ่มเมนูย่อยใน Drawer */
.drawer-group{ border:1px solid var(--flws-border); border-radius:12px; overflow:hidden; }
.drawer-acc-btn{
  width:100%; text-align:left; font-weight:700; padding:14px 14px; border:0; background:#fff; cursor:pointer;
  position:relative; transition:background .2s ease;
}
.drawer-acc-btn::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transition:transform .25s ease;
}
.drawer-acc-btn[aria-expanded="true"]::after{ transform:translateY(-50%) rotate(-135deg); }
.drawer-acc-panel{ display:none; padding:10px 12px 12px; }
.drawer-acc-panel a{
  display:block; padding:10px 12px; color:#222; text-decoration:none; border-radius:8px;
}
.drawer-acc-panel a:hover{ background:#f7efe6; color:#000; }
.drawer-subgroup{ margin-top:6px; border-top:1px dashed #e6ded6; padding-top:8px; }
.drawer-acc-btn.sm{ font-weight:600; padding:10px 10px; }
.drawer-acc-panel.sm{ padding:8px 10px 10px; }

/* Social / Backdrop */
.drawer-social-flws{ margin-top:auto; padding:18px; border-top:1px solid var(--flws-border); }



.drawer-backdrop-flws{
  position:fixed; 
  inset:0; 
  background: rgba(0,0,0,0.45);          /* เงาดำโปร่ง ๆ */
  backdrop-filter: blur(8px);            /* ★ เอฟเฟกต์เบลอหลัก */
  -webkit-backdrop-filter: blur(8px); 
  z-index:65;
  opacity:0; 
  pointer-events:none; 
  transition: opacity .35s ease, backdrop-filter .35s ease;
}
.drawer-backdrop-flws.is-show{ opacity:1; pointer-events:auto; }

/* =============== RESPONSIVE RULES =============== */
@media (max-width:992px){
  .nav-main-flws{ display:none; }
  .nav-toggle-flws{ display:flex; }
}

/* ====================== ACCESSIBILITY & MOTION ====================== */
.nav-link-flws:focus-visible,
.nav-dd-flws a:focus-visible,
.nav-sub-flws a:focus-visible,
.drawer-link:focus-visible,
.drawer-acc-btn:focus-visible,
.flws-cta:focus-visible{
  outline:2px solid var(--flws-accent);
  outline-offset:2px;
  border-radius:8px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}


/* ========== DROPDOWN 1st ========== */
.nav-dd-flws{
  position:absolute; top:calc(100% + 8px); left:-12px; min-width:240px;
  background:var(--flws-dd-bg); border:1px solid var(--flws-dd-border); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:10px 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:200;
}
.nav-dd-flws > li > a{
  display:block; padding:12px 18px; color:#eaeaea; text-decoration:none;
  font-weight:500; transition:background .2s ease, color .2s ease;
}
.nav-dd-flws > li > a:hover{ background:var(--flws-dd-hover); color:#fff; }

/* ========== SUB-DROPDOWN ========== */
.nav-dd-flws > li.has-sub > .sub-toggle{ padding-right:40px; position:relative; }
.nav-arrow-right{
  position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(-45deg);
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transition:transform .2s ease;
}
.nav-dd-flws > li.has-sub:hover > .sub-toggle .nav-arrow-right{
  transform:translateY(-50%) rotate(-225deg);
}
.nav-sub-flws{
  position:absolute; top:0; left:calc(100% + 8px); min-width:220px;
  background:var(--flws-dd-bg); border:1px solid var(--flws-dd-border); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:10px 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:210;
}

/* hover rules */
@media (hover:hover){
  .nav-item-flws.has-dd:hover > .nav-dd-flws{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  }
  .nav-item-flws.has-dd:hover > .nav-link-flws > .nav-caret-flws{ transform:rotate(-135deg); }
  .nav-dd-flws > li.has-sub:hover > .nav-sub-flws,
  .nav-sub-flws:hover{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  }
}




/* ===== iOS/Safari Link States Fix ===== */
.drawer-flws .drawer-acc-btn,
.drawer-flws .drawer-acc-btn:focus,
.drawer-flws .drawer-acc-btn:active {
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
  background: transparent !important;
}

/* ===== FIX: Drawer Close Button (iOS/Safari) ===== */
.drawer-flws .drawer-close-flws {
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
  background: none !important;
  border: none;
  cursor: pointer;
  transition: color .25s ease;
}

.drawer-flws .drawer-close-flws:hover,
.drawer-flws .drawer-close-flws:focus {
  color: #b58a63 !important; /* สีเดียวกับ accent */
  -webkit-text-fill-color: #b58a63 !important;
  outline: none;
}




/* ===== Social section: mobile-first safe spacing ===== */
.drawer-social-flws {
  padding: 18px 20px max(26px, env(safe-area-inset-bottom)); /* ✅ กันชนขอบจอ iPhone */
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff; /* ถ้าเมนูเป็นพื้นขาวคงไว้ได้เลย */
}

/* หัวข้อ Social Media */
.drawer-social-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 14px 2px; /* ✅ ดันออกจากขอบนิดให้บาลานซ์กับไอคอน */
  letter-spacing: .4px;
}

/* แถวไอคอน: เว้นจากขอบซ้ายขวา + จัดให้อยู่กลางเล็กน้อย */
.drawer-social-row-flws{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;                    /* ระยะระหว่างไอคอน */
  justify-content:flex-start;
  align-items:center;
}

/* ปุ่มไอคอน: tap target ≥ 44px ตาม Apple HIG */
.social-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition: transform .28s cubic-bezier(.25,.8,.25,1), filter .28s;
  cursor:pointer;
}
.social-btn img{
  width: 100%; height: 100%;
  object-fit: contain; display:block; pointer-events:none;
}

/* Hover / active (จะมีผลบน desktop และแอนดรอยด์บางรุ่น; มือถือ iOS เน้น active) */
.social-btn:hover{ transform: scale(1.08); filter: brightness(1.06); }
.social-btn:active{ transform: scale(1.03); filter: brightness(.95); }

/* ===== Very small devices: 360px ลงไป ให้ไม่รู้สึกอึดอัด ===== */
@media (max-width: 360px){
  .drawer-social-flws{ padding: 12px 14px max(20px, env(safe-area-inset-bottom)); }
  .drawer-social-row-flws{ gap: 10px; }
  .social-btn{ width: 40px; height: 40px; }
}

/* ===== ใหญ่ขึ้นนิด (≥ 430px) ขยายพื้นที่หายใจ ===== */
@media (min-width: 430px){
  .drawer-social-flws{ padding: 16px 18px max(26px, env(safe-area-inset-bottom)); }
  .social-btn{ width: 43px; height: 43px; }
}