/* =========================================================
  Brand Tokens
========================================================= */
:root {
  --brand-maroon: #6a141c;
  --brand-maroon-dark: #5b0f16;
  --brand-cream: #F6F1E2;

  --brand-line: rgba(106, 20, 28, .35);
  --brand-shadow: rgba(255, 255, 255, .55);

  --bg: #ffffff;

  --font-title: "Melanzane", serif;
  --font-body: "Boston-Regular", sans-serif;
}

/* =========================================================
  Base
========================================================= */
html,
body {
  background: var(--bg);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
}

a {
  text-underline-offset: 3px;
}

/* Helpers (เดิมของคุณ) */
.mt-x-small {
  font-size: .6875em;
}

.mt-ls-25 {
  letter-spacing: .25em;
}

.mt-ls-35 {
  letter-spacing: .35em;
}

.mt-ls-45 {
  letter-spacing: .45em;
}

.mt-ls-55 {
  letter-spacing: .55em;
}

.mt-ls-65 {
  letter-spacing: .65em;
}

/* =========================================================
  Z-INDEX LAYERING (สำคัญมาก)
  - header ต้องอยู่เหนือ content
  - offcanvas/backdrop ต้องอยู่เหนือ header เสมอ
========================================================= */
header[data-header] {
  z-index: 1030;
}

/* สูงกว่า content */
.offcanvas {
  z-index: 1055 !important;
}

/* สูงกว่า header */
.offcanvas-backdrop {
  z-index: 1050 !important;
}

/* สูงกว่า header */

/* =========================================================
  Header (overlay -> scroll white bg)
========================================================= */
header[data-header] {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* scroll แล้วพื้นขาวกันกลืน */
header[data-header][data-scrolled="1"] {
  background-color: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* spacing ของ wrapper ใน header (override p-4 ได้) */
header[data-header] .container-fluid>.d-flex {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* ปุ่ม/ลิงก์ */
header[data-header] a,
header[data-header] button {
  color: var(--brand-maroon) !important;
}

/* ตอนอยู่บน hero ให้มีเงาขาวอ่านง่าย */
header[data-header][data-scrolled="0"] a,
header[data-header][data-scrolled="0"] button {
  text-shadow: 0 1px 12px var(--brand-shadow);
}

/* ตอนพื้นขาวไม่ต้องเงา */
header[data-header][data-scrolled="1"] a,
header[data-header][data-scrolled="1"] button {
  text-shadow: none;
}

header[data-header] svg {
  color: var(--brand-maroon);
}

/* =========================================================
  Offcanvas (Menu)
========================================================= */
.offcanvas {
  background: var(--bg);
}

.offcanvas a {
  color: var(--brand-maroon);
  letter-spacing: .25em;
  text-transform: uppercase;
}

/* backdrop สีดำแบบนุ่ม (ไม่เทาแข็ง) */
.offcanvas-backdrop {
  background-color: #000;
  opacity: .35;
}

/* =========================================================
  HERO
========================================================= */
main>section:first-of-type {
  color: var(--brand-maroon);
}

/* CTA fixed button style (จับจาก href เพื่อไม่เพิ่ม class) */
a.btn.btn-light.rounded-pill[href="#register"] {
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .75);
  color: var(--brand-maroon);

  letter-spacing: .22em;
  text-transform: uppercase;

  padding: 14px 34px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

a.btn.btn-light.rounded-pill[href="#register"]:hover {
  background: rgba(255, 255, 255, .95);
  color: var(--brand-maroon);
}

@media (max-width:576px) {
  a.btn.btn-light.rounded-pill[href="#register"] {
    padding: 12px 20px;
    letter-spacing: .14em;
    font-size: 12px;
  }
}

/* =========================================================
  Concept (Maroon section)
========================================================= */
section#concept {
  background: var(--brand-maroon-dark);
  color: var(--brand-cream);
}

section#concept .text-uppercase {
  font-family: var(--font-body);
}

/* card shadow */
section#concept .ratio>div {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* text overlay on cards */
section#concept .ratio>div>div {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* =========================================================
  MEMBERSHIP PACKAGE (Background image + divider)
========================================================= */
section#package {
  position: relative;
  color: var(--brand-cream);

  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .55) 100%),
    url("/images/img-bg-section-3.webp");
  background-size: cover;
  background-position: center;
}

section#package .text-uppercase {
  font-family: var(--font-body);
}

@media (min-width:768px) {
  section#package .row>div:nth-child(2) {
    border-left: 1px solid rgba(246, 241, 226, .25);
  }
}

/* =========================================================
  REGISTER (Maroon + underline inputs)
========================================================= */
section#register {
  background: var(--brand-maroon-dark);
  color: var(--brand-cream);
}

section#register .form-label {
  color: rgba(246, 241, 226, .75);
  letter-spacing: .25em;
  text-transform: uppercase;
}

section#register .form-control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(246, 241, 226, .35);
  border-radius: 0;

  color: var(--brand-cream);
  padding-left: 0;
  padding-right: 0;

  box-shadow: none !important;
}

section#register .form-control:focus {
  border-bottom-color: rgba(246, 241, 226, .75);
}

section#register .btn.btn-outline-light {
  border-color: rgba(246, 241, 226, .45);
  color: var(--brand-cream);
  letter-spacing: .30em;
  text-transform: uppercase;
}

section#register .btn.btn-outline-light:hover {
  background: rgba(246, 241, 226, .12);
}

/* =========================================================
  Footer
========================================================= */
footer {
  background: var(--brand-maroon-dark);
  color: var(--brand-cream);
}

footer .border-top {
  border-color: rgba(246, 241, 226, .35) !important;
}

footer a {
  color: var(--brand-cream);
  opacity: .9;
}

footer a:hover {
  opacity: 1;
}

#register iframe {
  height: 1100px;
}

@media (min-width: 768px) {
  #register iframe {
    height: 1000px;
  }
}

@media (min-width: 992px) {
  #register iframe {
    height: 800px;
  }
}