/*
 * NAA International Conference Theme  —  Light Mode Only
 * Primary  : Pink   #db2777 / #fe5196
 * Secondary: Purple #6600cc / #7c3aed
 */

/* ─────────────────────────────────────────
   1. CSS Variables (Light Only)
───────────────────────────────────────── */
:root {
  --pink:           #db2777;
  --pink-vivid:     #fe5196;
  --pink-dark:      #9d174d;
  --pink-bg:        #fdf2f8;
  --pink-border:    #fbcfe8;

  --purple:         #6600cc;
  --purple-mid:     #7c3aed;
  --purple-bg:      #faf5ff;
  --purple-border:  #ddd6fe;

  --grad-primary:   linear-gradient(109.6deg, #db2777 11%, #6600cc 91%);
  --grad-vivid:     linear-gradient(97.14deg, #fe5196 7%, #b224ef 97%);
  --grad-purple:    linear-gradient(97.14deg, #7579ff 7%, #b224ef 97%);
  --grad-bar:       linear-gradient(90deg, #db2777 0%, #7c3aed 50%, #fe5196 100%);

  --bg:             #ffffff;
  --surface:        #faf8ff;
  --text:           #1a0a2e;
  --text-muted:     #6b7280;
  --border:         #e9e3f5;
  --card-bg:        #ffffff;
  --card-shadow:    0 2px 20px rgba(107,33,168,.08);
}

/* ─────────────────────────────────────────
   2. Global Base
───────────────────────────────────────── */
body {
  font-family: 'K2D', 'Outfit', sans-serif;
  color: var(--text);
  background-color: var(--bg);
}

/* Remove dark mode toggle — always light */
body.dark-version {
  background-color: #fff !important;
  color: var(--text) !important;
}
.dark-version .body-wrap,
.dark-version section,
.dark-version .brand-sec,
.dark-version .pricing-sec,
.dark-version .faq-sec,
.dark-version .contact-sec,
.dark-version .review-sec,
.dark-version .video-sec,
.dark-version .footer-area  { background-color: #fff !important; color: var(--text) !important; }
.dark-version h1,.dark-version h2,.dark-version h3,.dark-version h4,.dark-version h5,
.dark-version p,.dark-version li,.dark-version span,.dark-version address,.dark-version a:not(.naa-btn-primary):not(.naa-btn-ghost):not(.header-btn):not(.naa-doc-chip) {
  color: var(--text) !important;
}
.dark-version .naa-conf-card,.dark-version .naa-member-card,
.dark-version .naa-countdown-wrap,.dark-version .review-card-item,
.dark-version .accordion-item,.dark-version .accordion-body,
.dark-version .accordion-button { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
.dark-version .naa-contact-panel { background: var(--grad-primary) !important; }
.dark-version .naa-contact-item  { background: rgba(255,255,255,.95) !important; }
.dark-version .naa-stat          { background: var(--surface) !important; }
.dark-version .footer-area       { background-color: var(--surface) !important; }
.dark-version .modal-content     { background: #fff !important; }
.dark-version .offcanvas          { background: #fff !important; }
.dark-version .drop-down .drop-down-wrap { background: #fff !important; }

/* ─────────────────────────────────────────
   3. Navbar — World Class International Style
───────────────────────────────────────── */

/* Animated gradient top accent bar */
.header-area::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-bar); background-size: 200% auto;
  animation: naa-bar-shift 4s linear infinite; z-index: 2000;
  pointer-events: none;
}
@keyframes naa-bar-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Nav shell ── */
.naa-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(219,39,119,.1), 0 4px 32px rgba(107,33,168,.1);
}
.naa-nav.sticky {
  box-shadow: 0 1px 0 rgba(219,39,119,.15), 0 6px 40px rgba(107,33,168,.13);
}

/* ── Nav inner container ── */
.naa-nav-inner {
  display: flex; align-items: center;
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px; height: 72px; gap: 0;
  justify-content: space-between;
}

/* ── Brand ── */
.naa-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; margin-right: 32px;
}
.naa-brand:hover { opacity: .85; text-decoration: none; }
.naa-brand-logo {
  width: 36px; height: 36px; border-radius: 8px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(219,39,119,.35));
  transition: filter .2s;
}
.naa-brand-text {
  font-family: 'K2D', sans-serif; font-size: 1.2rem; font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: .02em;
}

/* ── Desktop link list ── */
.naa-links {
  display: flex; align-items: center; list-style: none;
  margin: 0; padding: 0; flex: 1; justify-content: center; gap: 2px;
}

.naa-has-dd { position: relative; }

/* Single nav link */
.naa-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 9px;
  font-family: 'K2D', sans-serif; font-size: .93rem; font-weight: 600;
  color: var(--text) !important; text-decoration: none;
  letter-spacing: .01em; white-space: nowrap;
  transition: background .18s, color .18s;
}
.naa-link:hover {
  background: rgba(219,39,119,.07); color: var(--pink) !important;
  text-decoration: none;
}

/* Caret icon */
.naa-caret {
  font-size: .58rem; opacity: .7;
  transition: transform .22s ease, opacity .2s;
}
.naa-has-dd:hover .naa-caret { transform: rotate(180deg); opacity: 1; }

/* ── Dropdown panel ── */
.naa-dd {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 240px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(219,39,119,.1);
  box-shadow: 0 20px 60px rgba(107,33,168,.18), 0 6px 16px rgba(0,0,0,.06);
  padding: 10px 8px 8px; /* padding-top เป็น gap แทน ทำให้ mouse ไม่หลุด */
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 1060;
}
/* Show on hover / focus-within */
.naa-has-dd:hover .naa-dd,
.naa-has-dd:focus-within .naa-dd {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

/* Dropdown item */
.naa-dd-item {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 11px;
  font-family: 'K2D', sans-serif; font-size: .95rem; font-weight: 600;
  color: var(--text) !important; text-decoration: none;
  transition: background .15s;
}
.naa-dd-item:hover { background: linear-gradient(135deg,rgba(219,39,119,.07),rgba(107,33,168,.05)); color: var(--pink) !important; }
.naa-dd-item:hover .naa-dd-icon { background: var(--grad-primary) !important; color: #fff !important; }

.naa-dd-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(219,39,119,.09); color: var(--pink);
  font-size: .88rem; transition: background .15s, color .15s;
}

/* ── CTA button ── */
.naa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: 32px;
  background: var(--grad-primary); color: #fff !important;
  font-family: 'K2D', sans-serif; font-weight: 700; font-size: .88rem;
  text-decoration: none; white-space: nowrap; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(219,39,119,.32);
  transition: opacity .2s, transform .1s, box-shadow .2s;
  min-height: 42px; letter-spacing: .01em;
}
.naa-cta:hover {
  opacity: .88; transform: translateY(-1px); color: #fff !important;
  box-shadow: 0 6px 28px rgba(219,39,119,.48); text-decoration: none;
}
.naa-cta--full { width: 100%; margin-bottom: 20px; min-height: 50px; font-size: 1rem; }

/* ── Right side ── */
.naa-nav-right {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; margin-left: 24px;
}

/* ── Hamburger ── */
.naa-burger {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: var(--surface);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  padding: 0; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.naa-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--text); transition: background .2s; pointer-events: none;
}
.naa-burger:hover { background: var(--pink-bg); border-color: var(--pink-border); }

/* ── Mobile Drawer ── */
.naa-drawer {
  width: min(340px, 90vw) !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -12px 0 40px rgba(107,33,168,.1) !important;
}
.naa-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 18px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky; top: 0; z-index: 1;
}
.naa-drawer-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem;
  transition: background .2s, color .2s, border-color .2s;
}
.naa-drawer-close:hover { background: var(--pink-bg); color: var(--pink); border-color: var(--pink-border); }

.naa-drawer-body {
  padding: 20px 16px 32px; overflow-y: auto; background: #fff;
  display: flex; flex-direction: column; height: 100%;
}
.naa-drawer-nav { display: flex; flex-direction: column; gap: 2px; }

.naa-drawer-section { margin: 8px 0 0; }
.naa-drawer-section-title {
  font-family: 'K2D', sans-serif; font-size: .7rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em;
  padding: 14px 12px 4px; margin: 0;
}
.naa-drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px; border-radius: 10px;
  color: var(--text) !important; text-decoration: none;
  font-family: 'K2D', sans-serif; font-size: 1rem; font-weight: 600;
  transition: background .15s;
}
.naa-drawer-link:hover { background: var(--pink-bg); color: var(--pink) !important; text-decoration: none; }
.naa-drawer-link--sub {
  padding-left: 20px; font-size: .93rem; font-weight: 500; color: var(--text-muted) !important;
}
.naa-drawer-link--sub:hover { color: var(--pink) !important; }
.naa-drawer-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(219,39,119,.08); color: var(--pink); font-size: .85rem;
}
.naa-drawer-link:hover .naa-drawer-icon { background: rgba(219,39,119,.15); }

/* ── Override leftover old-nav CSS so it doesn't interfere ── */
.header-area .header-nav, .header-area .nav-item, .header-area .nav-item a,
.drop-down, .drop-down .drop-down-wrap { all: unset; }
.header-area .header-nav { display: none !important; }

/* ─────────────────────────────────────────
   4. Skip Link
───────────────────────────────────────── */
.naa-skip-link {
  position: absolute; top: -60px; left: 8px;
  background: var(--grad-primary);
  color: #fff !important; padding: 12px 20px;
  font-size: 1.05rem; font-weight: 700;
  text-decoration: none; border-radius: 0 0 10px 10px;
  z-index: 99999; transition: top .15s;
  font-family: 'K2D', sans-serif;
  box-shadow: 0 4px 16px rgba(219,39,119,.35);
}
.naa-skip-link:focus { top: 3px; }

/* ─────────────────────────────────────────
   5. Focus Ring
───────────────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pink-vivid) !important;
  outline-offset: 3px !important; border-radius: 4px;
}

/* ─────────────────────────────────────────
   6. Buttons (Global override)
───────────────────────────────────────── */
.custom-btn  { border-color: var(--pink) !important; color: var(--pink) !important; min-height: 52px !important; font-size: 1rem !important; font-weight: 600 !important; }
.custom-btn:hover { background-image: var(--grad-primary) !important; border-color: transparent !important; color: #fff !important; }
.custom-btn1, .custom-btn2 { background: var(--grad-vivid) !important; min-height: 52px !important; font-size: 1rem !important; font-weight: 600 !important; }
.custom-btn3 { background: var(--grad-primary) !important; min-height: 52px !important; font-size: 1rem !important; font-weight: 600 !important; }
.naa-btn-primary  { background: var(--grad-primary) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 18px rgba(219,39,119,.28); }
.naa-btn-primary:hover,.naa-btn-primary:focus  { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(219,39,119,.42); color: #fff !important; }
.naa-btn-secondary { background: #fff !important; color: var(--pink) !important; border-color: var(--pink) !important; }
.naa-btn-secondary:hover,.naa-btn-secondary:focus { background: var(--pink-bg) !important; color: var(--pink-dark) !important; }
.naa-btn-success  { background: var(--grad-purple) !important; border-color: transparent !important; color: #fff !important; }

/* ─────────────────────────────────────────
   6b. Misc overrides
───────────────────────────────────────── */
.brand-sec { padding: 20px 0 !important; }

/* Shape SVGs must never affect document flow */
.shape {
  position: absolute !important;
  pointer-events: none;
  overflow: hidden;
}
/* Conference section needs relative so shape is contained */
#conference { position: relative; overflow: hidden; }

/* Hero height — fit content, not fixed 900px */
.hero-sec .hero-slider-item { min-height: unset !important; height: auto !important; }
.hero-sec .slick-slide,
.hero-sec .slick-track,
.hero-sec .slick-list      { height: auto !important; }

/* ─────────────────────────────────────────
   7. Section Labels
───────────────────────────────────────── */
.label {
  display: inline-block;
  background: var(--pink-bg); color: var(--pink) !important;
  border: 1px solid var(--pink-border); border-radius: 100px;
  padding: 4px 16px; font-weight: 700; font-size: .875rem !important; letter-spacing: .03em;
}
.section-head .title, .sec-head .title { color: var(--text) !important; }
.section-head .desc,  .sec-head .desc  { color: var(--text-muted) !important; }
.naa-sec-divider { background: var(--grad-primary) !important; }

/* ─────────────────────────────────────────
   8. Countdown
───────────────────────────────────────── */
.naa-countdown-wrap   { background: var(--card-bg) !important; border: 1px solid var(--purple-border); }
.naa-countdown-head   { color: var(--purple) !important; }
.counter-box strong   { color: var(--pink) !important; }
.counter-box span     { color: var(--text-muted) !important; }

/* ─────────────────────────────────────────
   9. Conference Cards
───────────────────────────────────────── */
.naa-conf-card          { background: var(--card-bg) !important; border-color: var(--border) !important; box-shadow: var(--card-shadow) !important; }
.naa-conf-card.is-upcoming { border-left-color: var(--pink) !important; background: linear-gradient(135deg, var(--pink-bg) 0%, #fff 60%) !important; }
.naa-conf-badge.upcoming   { background: var(--pink-bg) !important; color: var(--pink) !important; border-color: var(--pink-border) !important; }
.naa-conf-title  { color: var(--text) !important; }
.naa-conf-theme  { color: var(--text-muted) !important; border-left-color: var(--purple) !important; }
.naa-conf-meta-item i { color: var(--purple) !important; }

/* ─────────────────────────────────────────
   10. Stats
───────────────────────────────────────── */
.naa-stat       { background: var(--surface) !important; border-color: var(--purple-border) !important; }
.naa-stat-num   { color: var(--pink) !important; }
.naa-stat-label { color: var(--text-muted) !important; }

/* ─────────────────────────────────────────
   11. FAQ Accordion
───────────────────────────────────────── */
.naa-faq .accordion-item   { background: var(--card-bg) !important; border-color: var(--purple-border) !important; }
.naa-faq .accordion-button { background: var(--surface) !important; color: var(--text) !important; }
.naa-faq .accordion-button:not(.collapsed) { background: var(--grad-primary) !important; color: #fff !important; }
.naa-faq .accordion-body   { background: var(--card-bg) !important; color: var(--text) !important; }

/* ─────────────────────────────────────────
   12. Membership
───────────────────────────────────────── */
.naa-member-card  { background: var(--card-bg) !important; border-color: var(--pink) !important; box-shadow: 0 8px 40px rgba(219,39,119,.14) !important; }
.naa-member-price { color: var(--pink) !important; }
.naa-member-features li i { color: var(--purple) !important; }

/* ─────────────────────────────────────────
   13. Contact
───────────────────────────────────────── */
.naa-contact-panel {
  background: var(--grad-primary) !important;
}
.naa-contact-icon   { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.naa-contact-item   { background: rgba(255,255,255,.97) !important; }
.naa-contact-value a { color: var(--purple) !important; }

/* ─────────────────────────────────────────
   14. Reviews — equal height cards
───────────────────────────────────────── */

/* Make slick track a flex row so slides can stretch */
.review-card-items-wrap .slick-track {
  display: flex !important;
  align-items: stretch;
}
.review-card-items-wrap .slick-slide {
  display: flex !important;
  height: auto !important;
}
.review-card-items-wrap .slick-slide > div {
  display: flex; flex: 1;
}

.review-card-item {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  background: var(--card-bg) !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px !important;
  box-shadow: var(--card-shadow);
}
/* Push profile to bottom so cards align at bottom too */
.review-card-item .card-desc {
  color: var(--text) !important;
  flex: 1;
}
.review-card-item .profile   { margin-top: auto; padding-top: 16px; }
.review-card-item .name      { color: var(--text) !important; }
.review-card-item span       { color: var(--text-muted) !important; }

/* ─────────────────────────────────────────
   15. Footer
───────────────────────────────────────── */
.footer-area { background-color: var(--surface) !important; }
.footer-area .footer-desc              { color: #374151 !important; }
.footer-area .custom-item a            { color: #374151 !important; }
.footer-area .footer-copyright-area span { color: #374151 !important; }
.footer-area h3, .footer-area h5      { color: var(--text) !important; }
.footer-area p, .footer-area address,
.footer-area span                      { color: #374151 !important; }
.footer-area a:hover                   { color: var(--pink) !important; }
.footer-area hr { color: var(--border) !important; opacity: 1; }

/* ─────────────────────────────────────────
   16. Responsive
───────────────────────────────────────── */
@media (max-width: 991px) {
  .header-btn, a.header-btn { font-size: .84rem !important; padding: 8px 16px !important; min-height: 40px; }

  /* ซ่อน desktop links และ dropdown บน mobile — ใช้ drawer แทน */
  .naa-links { display: none !important; }
  .naa-dd    { display: none !important; }
}
@media (max-width: 767px) {
  .naa-btn-primary,.naa-btn-secondary,.naa-btn-success { width: 100% !important; justify-content: center; }
  .naa-conf-actions { flex-direction: column !important; }
  .naa-conf-actions a { width: 100% !important; justify-content: center; }
}