/* เลื่อนหน้าแบบลื่นด้วย CSS ล้วน (native) แทน Lenis (ไลบรารี JS ที่ต้องจำลองการเลื่อนทุกเฟรม หนักกว่ามาก) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ล็อกสกอลล์พื้นหลังตอนเปิดเมนูมือถือ/modal กันแถบเลื่อน 2 อันซ้อนกัน */
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* ตัวหนังสือชื่อเว็บขนาดยักษ์ที่ footer (.footer-big) ต้นฉบับสูงได้ถึง 260px ใหญ่เกินไป ลดลง */
.footer-big { font-size: clamp(40px, 9vw, 130px); }

/* กันเมนูบนสุด (fixed, สูงตาม --header-h) บังหัวข้อเซคชันตอนกดลิงก์เมนูแล้วเลื่อนลงมา
   (เดิมพึ่ง Lenis's offset:-80 ชดเชยให้ ตอนนี้ตัด Lenis ออกแล้วต้องใช้ scroll-margin-top แทน)
   (#contact ย้ายออกจากหน้าแรกไปอยู่หน้า /contact เดี่ยวแล้ว ไม่มี section นี้ในหน้าแรกอีกต่อไป) */
#home, #events, #artists, #news, #gallery, #how {
  scroll-margin-top: var(--header-h, 76px);
}

/* การ์ดอีเวนต์ใน carousel (Swiper) กระพริบ/ขยายใหญ่ก่อนแล้วค่อยหดเล็กลงตอนโหลดหน้าแรก —
   เพราะก่อน Swiper JS (defer) จะ init เสร็จ .swiper-slide ยังไม่มีความกว้างที่ถูกต้อง (คำนวณจาก
   slidesPerView แบบ responsive ด้วย JS ล้วน ไม่มี CSS fallback) เลยเรนเดอร์เต็มความกว้างคอนเทนเนอร์
   ก่อนชั่วขณะ ซ่อนไว้ด้วย opacity จนกว่า Swiper จะเติม class .swiper-initialized ให้ (มาตรฐานของ
   Swiper เอง) แล้วค่อย fade เข้า — พื้นที่ layout ไม่เปลี่ยน ไม่กระทบ CLS เพิ่ม มีแต่ลดปัญหาเดิม */
.carousel .swiper:not(.swiper-initialized) .swiper-wrapper { opacity: 0; }
.carousel .swiper.swiper-initialized .swiper-wrapper { opacity: 1; transition: opacity 0.25s ease; }

/* ปุ่มดูรหัสผ่าน (ไอคอนตา) ใน .field — ต้นฉบับ vcon เองก็ไม่ได้สไตล์ปุ่มนี้ไว้เลย
   เลยโผล่มาเป็นปุ่ม <button> เปล่าๆ พื้นเทาแบบ browser default ทำให้มุมฟอร์มดูหลุดธีม */
.field button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex: none;
  color: var(--muted, #a39d97);
  cursor: pointer;
  transition: color .2s;
}
.field button:hover { color: var(--text, #f6f1ea); }
.field button svg { width: 20px; height: 20px; }

/* เปลี่ยนหน้าแบบ fade จางๆ สั้นๆ ด้วย CSS ล้วน กันความรู้สึก "รีเฟรชห้วนๆ" ตอนคลิกลิงก์เปลี่ยนหน้า
   (ดู .pt-fade-out ใน vcon-main.js — ไม่ใช้ GSAP/ม่านดำแบบของเดิมที่เคยมีบั๊กกระพริบ) */
html { transition: opacity .15s ease; }
html.pt-fade-out { opacity: 0; }

/* ส่วนเสริมเฉพาะของ virgin (ไม่แก้ theme-vcon.css ต้นฉบับ เพื่อให้ยังอัปเดตจาก vcon ได้ตรงๆ)
   แก้ปัญหา: Bootstrap modal จริงในหน้าจอง (class="modal fade") กับ .modal ของธีม vcon
   ใช้ชื่อคลาส .modal ชนกัน ทำให้ modal ของ Bootstrap แสดงผลผิด
   .modal.fade คือ signature เฉพาะของ Bootstrap modal เท่านั้น ธีม vcon เองไม่ใช้ .fade */
.modal.fade {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  visibility: visible;
  padding: 0;
  place-items: initial;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal.fade.show { display: block; }

/* ---------- ลิงก์ที่เคยกด (:visited) ไม่ให้เบราว์เซอร์ดึงสีน้ำเงิน/ม่วง default มาทับ
   ลิงก์ใดก็ตามที่ผู้ใช้เคยคลิกไปแล้ว (เช่น #promotions, #artists) เบราว์เซอร์จะจำไว้ว่า "เคยไปมาแล้ว"
   แล้วใช้สี :visited ของตัวเอง ต้องกำหนดสีให้ครบทุกสถานะ (link/visited/hover/active) ไม่ให้หลุดโทนธีม */
.nav-link, .nav-link:visited { color: #e9e3dc; }
.nav-link:hover, .nav-link:visited:hover, .nav-link.is-active, .nav-link.is-active:visited { color: var(--neon); }
.link-arrow, .link-arrow:visited { color: var(--neon); }
.drawer__link, .drawer__link:visited { color: inherit; }
.breadcrumb a, .breadcrumb a:visited { color: inherit; }
.footer-links a, .footer-links a:visited { color: var(--muted, #a39d97); }
.footer-links a:hover, .footer-links a:visited:hover { color: var(--neon); }
.pager a, .pager a:visited { color: inherit; }
.side-menu a, .side-menu a:visited { color: #d8d1ca; }
.chip, .chip:visited { color: #ddd6cf; }
.event-card__title a, .event-card__title a:visited,
.news-card__body h3 a, .news-card__body h3 a:visited { color: inherit; }
a.event-card__media, a.event-card__media:visited,
a.news-card, a.news-card:visited,
a.promo-card, a.promo-card:visited,
a.artist-card, a.artist-card:visited,
a.gallery-item, a.gallery-item:visited,
a.panel, a.panel:visited { color: inherit; }

/* ---------- Bootstrap component ที่หน้าจอง/ฟอร์มต่างๆ ยังใช้ markup เดิมอยู่ (ไม่แตะ JS/HTML structure) ----------
   Bootstrap ปกติออกแบบมาสำหรับพื้นหลังสว่าง พอมาอยู่บนพื้นดำของธีม vcon จะดูเป็นกล่องสว่างแปลกปลอม
   ปรับสีให้เข้ากับโทน vcon โดยไม่ต้องรื้อ markup/JS ที่ผูกกับ class เหล่านี้อยู่ */

.alert {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 12px);
  color: var(--text, #f6f1ea);
}
.alert-danger { border-color: rgba(255, 45, 45, 0.4); background: rgba(255, 45, 45, 0.1); color: #ffb3b3; }
.alert-warning { border-color: rgba(255, 181, 71, 0.4); background: rgba(255, 181, 71, 0.1); color: var(--amber, #ffb547); }
.alert-success { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); color: #86efac; }
.alert-info { border-color: rgba(255, 122, 26, 0.4); background: rgba(255, 122, 26, 0.1); color: var(--neon, #ff7a1a); }
.alert .btn-close { filter: invert(1); }

.badge.bg-success { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
.badge.bg-warning { background: rgba(250, 204, 21, 0.15) !important; color: var(--warn, #facc15) !important; }
.badge.bg-danger { background: rgba(255, 45, 45, 0.15) !important; color: #ff8080 !important; }
.badge.bg-info { background: rgba(255, 122, 26, 0.15) !important; color: var(--neon, #ff7a1a) !important; }
.badge.bg-secondary { background: rgba(255, 255, 255, 0.1) !important; color: var(--muted, #a39d97) !important; }

.dropdown-menu {
  background: var(--coal-2, #151519);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  box-shadow: var(--shadow, 0 20px 50px -20px rgba(0, 0, 0, 0.8));
}
.dropdown-item { color: var(--text, #f6f1ea); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 90, 31, 0.12); color: #fff; }
.dropdown-divider { border-color: var(--line, rgba(255, 255, 255, 0.08)); }

.form-control, .form-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  color: var(--text, #f6f1ea);
}
.form-control:focus, .form-select:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--fire, #ff5a1f);
  color: var(--text, #f6f1ea);
  box-shadow: 0 0 0 0.2rem rgba(255, 90, 31, 0.18);
}
.form-control::placeholder { color: var(--muted, #a39d97); }
.form-select option { background: var(--coal-2, #151519); }
.form-label { color: var(--text, #f6f1ea); }
.input-group-text { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line, rgba(255, 255, 255, 0.14)); color: var(--muted, #a39d97); }

/* .card ที่ยังไม่ได้แปะ .panel (ของที่หลุดจากการไล่แก้ทีละไฟล์) ให้ยังดูกลืนกับธีมไว้ก่อน */
.card:not(.panel) {
  background: var(--coal-2, #151519);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  color: var(--text, #f6f1ea);
}
/* Bootstrap's .card { color: var(--bs-body-color) } (เกือบดำ) เป็น class selector specificity (0,1,0)
   ชนะ body { color: var(--text) } ของ vcon (element selector 0,0,1) ไม่ว่าไฟล์ไหนโหลดทีหลัง
   .card:not(.panel) ด้านบนแก้กรณีไม่มี .panel ไปแล้ว แต่ .card.panel (มีทั้งสองคลาสพร้อมกัน ใช้เยอะมาก
   ในหน้าจอง/ชำระเงิน) ยังหลุดอยู่ ทำให้ตัวหนังสือในการ์ด (ไม่ใช่แค่ card-header) จางจนอ่านไม่ออก */
.card.panel, .panel { color: var(--text, #f6f1ea); }
/* .card-header เอง Bootstrap ตั้ง --bs-card-cap-color ว่างเปล่า (สืบทอดสีตัวอักษร body ปกติที่เกือบดำ)
   และพื้นหลังจางมาก (rgba(body-color,.03)) ปัญหานี้เกิดกับ .card-header ทุกกรณี ไม่ใช่แค่ตอนไม่มี .panel
   (เดิมกฎข้างบนกันไว้แค่ :not(.panel) ทำให้ .card.panel .card-header หลุดไปใช้สี Bootstrap เกือบดำบนพื้นเข้ม
   อ่านไม่ออก) เอา :not(.panel) ออก ให้ครอบคลุมทุก .card-header */
.card-header { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08)); color: var(--text, #f6f1ea); }
.card-header.bg-primary,
.card-header.bg-success { background: var(--grad-fire, linear-gradient(100deg, #ff2d2d, #ff5a1f)) !important; border-bottom: none; color: #fff; }

.table { color: var(--text, #f6f1ea); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-bottom-color: var(--line, rgba(255, 255, 255, 0.08)); }
.table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.04); }

.btn-close { filter: invert(1); opacity: 0.8; }
.btn-close:hover { opacity: 1; }

/* ---------- ปุ่ม Bootstrap สี default (btn-primary ฯลฯ) ที่ markup เดิมยังใช้อยู่หลายจุด
   ปุ่มฐาน (.btn) ได้ทรงพิลล์ของ vcon อยู่แล้วเพราะโหลดทีหลัง Bootstrap แต่สี btn-primary/btn-success ฯลฯ
   ยังเป็นสี default ของ Bootstrap (น้ำเงิน/เขียว) ต้องคัดลอกโทนสีของ vcon มาทับด้วย ---------- */
.btn-primary, .btn-success, .btn-info, .btn-dark {
  background: var(--grad-fire, linear-gradient(100deg, #ff2d2d, #ff5a1f));
  border-color: transparent;
  box-shadow: 0 8px 30px -8px rgba(255, 70, 20, 0.7);
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-dark:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus {
  background: var(--grad-fire, linear-gradient(100deg, #ff2d2d, #ff5a1f));
  border-color: transparent;
  box-shadow: var(--glow, 0 0 24px rgba(255, 90, 31, 0.55));
  color: #fff;
}
.btn-danger {
  background: var(--ember, #ff2d2d);
  border-color: transparent;
}
.btn-danger:hover, .btn-danger:focus { background: #e02424; border-color: transparent; color: #fff; }
.btn-warning {
  background: var(--amber, #ffb547);
  border-color: transparent;
  color: #1a1a1a;
}
.btn-warning:hover, .btn-warning:focus { background: var(--gold, #ffd28a); color: #1a1a1a; }
.btn-secondary, .btn-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text, #f6f1ea);
}
.btn-secondary:hover, .btn-light:hover,
.btn-secondary:focus, .btn-light:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-outline-light, .btn-outline-dark {
  background: rgba(255, 90, 31, 0.06);
  border-color: var(--fire, #ff5a1f);
  color: var(--text, #f6f1ea);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
.btn-outline-light:hover, .btn-outline-dark:hover {
  background: rgba(255, 90, 31, 0.16);
  border-color: var(--fire, #ff5a1f);
  box-shadow: var(--glow-sm, 0 0 12px rgba(255, 90, 31, 0.45));
  color: #fff;
}
.btn:disabled, .btn.disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}
/* input-group ปุ่มไอคอนหน้ากล่อง input (btn ที่อยู่ใน input-group เดิมมันสี่เหลี่ยมชิดกับกล่อง) */
.input-group .btn { border-radius: 0 999px 999px 0; }
.input-group-text + .form-control,
.input-group > .form-control:not(:first-child) { border-radius: 999px; }

.text-muted { color: var(--muted, #a39d97) !important; }
/* Bootstrap's .text-primary ใช้ --bs-primary-rgb (น้ำเงิน default #0d6efd) ยังไม่เคยถูกปรับโทนให้เข้า vcon มาก่อน
   เห็นได้ชัดบนราคาบัตร/ยอดเงินหลายหน้า (ticket_booking.php, payment.php, customer_info.php, check_booking.php, success.php) */
.text-primary { color: var(--fire, #ff5a1f) !important; }

.accordion-item, .accordion-button {
  background: var(--coal-2, #151519);
  color: var(--text, #f6f1ea);
  border-color: var(--line, rgba(255, 255, 255, 0.08));
}
.accordion-button:not(.collapsed) { background: rgba(255, 90, 31, 0.1); color: #fff; }
.accordion-button::after { filter: invert(1); }