/* ════════════════════════════════════════════════════════════════
   Noodee Booking — noodee.css (skin homepage layer)
   ----------------------------------------------------------------
   โหลด "เพิ่ม" จาก index.html ({% block extra_css %}) — โหลดหลัง
   core public.css + design-system.css จึง override ได้โดยไม่ต้อง
   shadow/มิเรอร์ทั้งไฟล์ (ดู memory: skin-css-shadows-core)
   • ใช้ var(--token) เท่านั้น — ห้าม hardcode hex ใน template
   • navy/text/font ระดับทั้งเว็บ ← TenantConfig (color_background/_text/font)
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── brand system จาก noodee-bootbiz.com (เว็บแม่) ── */
  --brand-navy:       #1a2744;
  --brand-blue:       #2563eb;
  --brand-blue-d:     #1d4ed8;
  --brand-blue-light: #93c5fd;
  --brand-amber:      #fbbf24;
  --brand-green:      #10b981;

  /* ── ทับ token ของ design-system ให้เป็นโทน navy เฉพาะหน้าแรก ── */
  --gold:           #c9a96e;
  --gold-dark:      #b8924f;
  --bg-body:        #0f172a;   /* deepest navy */
  --bg-primary:     #0b1322;   /* section สลับ */
  --bg-card:        #131d33;   /* panel navy */
  --bg-card-hover:  #18243f;
  --border:         #1e2d4a;
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --btn-radius:     12px;

  /* ── Noodee homepage helpers ── */
  --nd-gold-soft:   rgba(201,169,110,.08);
  --nd-gold-line:   rgba(201,169,110,.22);
  --nd-radius-lg:   20px;
  --nd-shadow:      0 18px 48px rgba(0,0,0,.38);

  /* Bootstrap primary = gold ให้ตรงเว็บแม่ */
  --bs-primary:        #c9a96e;
  --bs-primary-rgb:    201, 169, 110;
  --bs-link-color:     #c9a96e;
  --bs-link-hover-color:#b8924f;
}

body {
  font-family: 'Sarabun', 'Inter', system-ui, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════
   NOODEE homepage component layer (demo storefront)
   ════════════════════════════════════════════════════════════════ */

/* ── section rhythm ── */
.nd-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.nd-sec--alt { background: var(--bg-primary); }
.nd-sec--card { background: var(--bg-card); }
.nd-sec-head { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; }
.nd-sec-head .section-sub { margin-left: auto; margin-right: auto; }

/* ══ HERO ══ */
.nd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 12vw, 9rem) 0 clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(1200px 520px at 78% -10%, rgba(201,169,110,.18), transparent 60%),
    radial-gradient(900px 480px at 8% 110%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(160deg, var(--brand-navy) 0%, var(--bg-body) 70%);
}
.nd-hero__bg { position: absolute; inset: 0; z-index: 0; }
.nd-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.nd-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.92));
  opacity: var(--nd-hero-scrim, 1); /* ความเข้ม overlay จากหลังบ้าน (hero_overlay_alpha) */
}
.nd-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.nd-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  background: var(--nd-gold-soft); border: 1px solid var(--nd-gold-line);
  padding: .45rem 1rem; border-radius: 99px; margin-bottom: 1.4rem;
}
.nd-hero__eyebrow .nd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.nd-hero__title {
  font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 6.4vw, 4.4rem); color: var(--text-primary);
  margin-bottom: 1.1rem;
}
.nd-hero__title .nd-accent {
  background: linear-gradient(100deg, var(--gold), var(--brand-amber) 60%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nd-hero__subtitle { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--text-secondary); line-height: 1.7; max-width: 560px; margin-bottom: 2rem; }
.nd-hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.nd-hero__trust { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.4rem; }
.nd-hero__trust-item { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--text-secondary); }
.nd-hero__trust-item i { color: var(--gold); font-size: 1.05rem; }

/* ══ STATS bar ══ */
.nd-stats { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.nd-stat { text-align: center; padding: 1.8rem .5rem; }
.nd-stat + .nd-stat { border-left: 1px solid var(--border); }
.nd-stat__icon { font-size: 1.5rem; color: var(--gold); display: block; margin-bottom: .5rem; opacity: .9; }
.nd-stat__num { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; color: var(--text-primary); line-height: 1; }
.nd-stat__num sup, .nd-stat__num i { color: var(--gold); font-size: .55em; }
.nd-stat__label { font-size: .82rem; color: var(--text-secondary); margin-top: .4rem; letter-spacing: .02em; }
@media (max-width: 575.98px){ .nd-stat:nth-child(odd){ border-left: 0; } }

/* ══ feature cards (why-us + pitch share) ══ */
.nd-card {
  height: 100%; padding: 1.6rem 1.5rem; border-radius: var(--nd-radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.nd-card:hover { transform: translateY(-4px); border-color: var(--nd-gold-line); box-shadow: var(--nd-shadow); }
.nd-chip {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--gold);
  background: var(--nd-gold-soft); border: 1px solid var(--nd-gold-line); margin-bottom: 1.1rem;
}
.nd-card__title { font-size: 1.08rem; font-weight: 700; color: var(--text-primary); margin-bottom: .45rem; }
.nd-card__desc { font-size: .92rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* ══ PITCH (sell the platform) ══ */
.nd-pitch {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background:
    radial-gradient(800px 420px at 85% 0%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(201,169,110,.14), transparent 60%),
    linear-gradient(165deg, #0c1730, var(--bg-body));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.nd-pitch__badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-amber);
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.28); padding: .4rem .9rem; border-radius: 99px;
}
.nd-pitch__title { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: 1rem; }
.nd-pitch__sub { font-size: 1.05rem; color: rgba(226,232,240,.78); line-height: 1.7; }
.nd-pitch .nd-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); backdrop-filter: blur(4px); }
.nd-pitch .nd-card:hover { border-color: var(--nd-gold-line); }
.nd-pitch__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.4rem; }

/* ══ TEAM (graceful avatars) ══ */
.nd-team-card { text-align: center; padding: 1.4rem 1rem 1.6rem; border-radius: var(--nd-radius-lg); background: var(--bg-card); border: 1px solid var(--border); height: 100%; transition: transform .2s, border-color .2s; }
.nd-team-card:hover { transform: translateY(-4px); border-color: var(--nd-gold-line); }
.nd-team-photo, .nd-team-initials {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .9rem;
  object-fit: cover; border: 2px solid var(--nd-gold-line);
  display: flex; align-items: center; justify-content: center;
}
.nd-team-initials { background: linear-gradient(150deg, var(--brand-navy), #25324f); color: var(--gold); font-size: 2rem; font-weight: 700; }
.nd-team-name { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.nd-team-role { font-size: .82rem; color: var(--text-secondary); margin-top: .15rem; }
.nd-team-rating { font-size: .82rem; color: var(--gold); margin-top: .4rem; }

/* ══ LOYALTY band ══ */
.nd-loyalty {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background:
    radial-gradient(700px 360px at 90% 10%, rgba(201,169,110,.16), transparent 60%),
    linear-gradient(160deg, var(--brand-navy), var(--bg-body));
  border-top: 1px solid var(--border);
}
.nd-loyalty__panel { background: var(--bg-card); border: 1px solid var(--nd-gold-line); border-radius: var(--nd-radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); }
.nd-loyalty__pts { display: flex; align-items: baseline; gap: .5rem; color: var(--gold); }
.nd-loyalty__pts b { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.nd-loyalty-item { display: flex; gap: .9rem; align-items: flex-start; }
.nd-loyalty-item i { color: var(--gold); font-size: 1.25rem; margin-top: .1rem; }
.nd-loyalty-item .t { font-weight: 700; color: var(--text-primary); }
.nd-loyalty-item .d { font-size: .9rem; color: var(--text-secondary); }

/* ══ BLOG cards ══ */
.nd-blog-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--nd-radius-lg); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.nd-blog-card:hover { transform: translateY(-4px); border-color: var(--nd-gold-line); box-shadow: var(--nd-shadow); }
.nd-blog-card__img { height: 180px; background: linear-gradient(150deg, var(--brand-navy), #25324f); display: flex; align-items: center; justify-content: center; }
.nd-blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.nd-blog-card__img i { font-size: 2.4rem; color: var(--gold); opacity: .4; }
.nd-blog-card__body { padding: 1.2rem 1.3rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.nd-blog-card__date { font-size: .78rem; color: var(--gold); letter-spacing: .04em; margin-bottom: .4rem; }
.nd-blog-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.nd-blog-card__more { margin-top: auto; padding-top: .8rem; font-size: .85rem; color: var(--gold); }

/* ══ EMPTY state ══ */
.nd-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.nd-empty i { font-size: 2.4rem; color: var(--gold); opacity: .5; display: block; margin-bottom: .7rem; }

/* ══ FINAL CTA band ══ */
.nd-final {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(4rem, 10vw, 7rem) 0;
  background:
    radial-gradient(700px 380px at 50% -20%, rgba(201,169,110,.22), transparent 65%),
    linear-gradient(160deg, var(--brand-navy), #0a1120);
}
.nd-final__title { font-size: clamp(2rem, 5.4vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: .9rem; }
.nd-final__sub { font-size: 1.1rem; color: rgba(226,232,240,.78); max-width: 540px; margin: 0 auto 2rem; line-height: 1.7; }

/* ══ MAP ══ */
.nd-map-wrap { border-radius: var(--nd-radius-lg); overflow: hidden; border: 1px solid var(--border); }
.nd-map-wrap iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.2) contrast(1.05); }