/* choose.css — หน้าเลือกรอบ Forward, March!
   การ์ดวันปรับตามขนาดจอ + ปุ่มถัดไปติดล่างจอ
   สีตามโหมดของเครื่องอัตโนมัติ */

:root {
  color-scheme: light dark;
  --page-gradient: linear-gradient(145deg, #fffefd 0%, #fff6fb 48%, #f8fcf5 100%);
  --bg: #fffafc;
  --text: #29112d;
  --muted: #665d69;
  --line: #d5cdd6;
  --surface: #fff;
  --pink: #ff66c4;
  --pink-hover: #ff8fd4;
  --on-pink: #260e20;
  --selected: #97145e;
  --danger: #b3261e;
  --radius: 12px;
  --gap: 10px;
  --page-w: 1040px;
  --page-pad: 20px;
}

@media(prefers-color-scheme:dark) {
  :root {
    --page-gradient: linear-gradient(145deg, #100f12 0%, #171216 50%, #101713 100%);
    --bg: #090909;
    --text: #fff7fd;
    --muted: #aaa3ad;
    --line: #514b54;
    --surface: #19171b;
    --selected: #ff66c4;
    --danger: #ff9b94;
  }
}

@media(min-width:761px) {
  :root {
    --page-pad: 32px;
    --gap: 14px
  }
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--page-gradient) fixed;
  min-height: 100svh;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden
}

a,
button {
  touch-action: manipulation
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer
}

:focus-visible {
  outline: 3px solid var(--selected);
  outline-offset: 4px
}

[hidden] {
  display: none !important
}

/* ---------- โครงหน้า ---------- */
header,
main {
  width: min(var(--page-w), calc(100% - var(--page-pad)*2));
  margin-inline: auto
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px
}

header>a {
  padding: 12px 0;
  font-size: 15px
}

.logo {
  width: 90px;
  height: 72px;
  object-fit: contain
}

main {
  padding-bottom: 112px
}

/* กันแถบล่างทับเนื้อหา */

/* ---------- ขั้นตอน ---------- */
.progress {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted)
}

.progress span {
  padding: 0 0 14px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  white-space: nowrap
}

.progress [aria-current] {
  color: var(--selected);
  border-bottom-color: var(--pink);
  font-weight: 500
}

@media(min-width:761px) {
  .progress {
    gap: 28px;
    font-size: 15px
  }
}

/* ---------- หัวข้อ + ดาว ---------- */
.layout {
  padding: 25px 0 0
}

.heading {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 8px
}

h1 {
  margin: 0;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance
}

@media(min-width:761px) {
  h1 {
    font-size: 44px
  }
}

h2 {
  margin: 0
}

.heading-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate
}

.heading-star {
  position: absolute;
  width: 150%;
  height: 190%;
  max-width: none;
  left: -25%;
  top: -45%;
  z-index: -1;
  pointer-events: none;
  opacity: .3
}


/* ---------- รอบการแสดง: ปุ่มเวลาอยู่ภายใต้วันที่เสมอ ---------- */
h2 {
  margin: 0
}

.time-button {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  font: inherit;
  cursor: pointer
}

.time-button small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted)
}

.time-button:disabled {
  opacity: .6;
  border-style: dashed;
  cursor: not-allowed;
  color: var(--muted)
}

.time-button[aria-pressed=true] {
  border: 2px solid var(--pink)
}

.time-button[aria-pressed=true]::after {
  content: '✓';
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  line-height: 1;
  color: var(--on-pink)
}

@media(hover:hover) {
  .time-button:not(:disabled):hover {
    border-color: var(--pink)
  }
}

/* ---------- แถบล่าง: ปุ่มถัดไป ---------- */
.booking-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line)
}

/* ข้อความสรุปรอบ: ซ่อนจากสายตา แต่ยังอยู่ให้โปรแกรมอ่านหน้าจอ (JS เขียนค่าลงในนี้) */
.selection {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--page-w), calc(100% - var(--page-pad)*2));
  margin-inline: auto;
  min-height: 44px;
  padding: 6px 24px;
  border: 0;
  border-radius: 99px;
  background: var(--pink);
  color: var(--on-pink);
  font-size: 17px;
  font-weight: 500;
  transition: background .2s, transform .2s
}

.ticket-arrow {
  display: block;
  flex: none;
  width: 30px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media(hover:hover) {
  .next:not(:disabled):hover {
    background: var(--pink-hover);
    transform: translateY(-2px)
  }
}

.next:disabled {
  opacity: .4;
  cursor: not-allowed
}

/* ---------- โหลด / ผิดพลาด ---------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--page-gradient);
  font-size: 15px;
  color: var(--muted)
}

.notes {
  display: flex;
  gap: 12px;
  height: 52px;
  align-items: center
}

.notes span {
  font-size: 32px;
  color: var(--selected);
  animation: bounce 1s infinite
}

.notes span:nth-child(2) {
  animation-delay: .2s
}

.notes span:nth-child(3) {
  animation-delay: .4s
}

@keyframes bounce {
  20% {
    transform: translateY(-8px)
  }

  40% {
    transform: translateY(4px)
  }

  60%,
  100% {
    transform: translateY(0)
  }
}

#error {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--danger)
}

#retry {
  min-height: 44px;
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px
}

@media(prefers-reduced-motion:reduce) {
  .notes span {
    animation: none
  }

  .next {
    transition: none
  }

  .next:hover {
    transform: none
  }
}

/* ตารางรวม: เห็นทุกรอบพร้อมกัน ไม่ต้องกดวันเพื่อค้นหาเวลา */
.layout {
  display: block
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.month {
  position: relative;
  margin-top: 32px
}

.month h2 {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 28px;
  padding: 4px 16px;
  background: #aeff8580;
  border-radius: 5px;
  transform: rotate(-2deg);
  color: var(--text)
}

.month:nth-child(2) h2 {
  background: #ff66c43d;
  transform: rotate(1deg)
}

.day-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 3px 4px 0 var(--line)
}

.day-card h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500
}

.day-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.day-slots .time-button {
  min-height: 64px;
  font-size: 19px;
  padding: 8px 6px;
  border-radius: 12px
}

.time-button strong {
  font-weight: 500
}

.time-button[aria-pressed=true] {
  background: var(--pink);
  color: var(--on-pink)
}

.time-button[aria-pressed=true] small {
  color: var(--on-pink)
}

.month:after {
  content: '';
  position: absolute;
  right: -15px;
  top: -18px;
  width: 60px;
  height: 60px;
  background: url('/assets/decor/brush-burst.png') center/contain no-repeat;
  pointer-events: none
}

@media(max-width:1050px) {
  .date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:600px) {
  .date-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .day-card {
    padding: 15px
  }

  .day-card h3 {
    font-size: 17px;
    margin-bottom: 12px
  }

  .day-slots .time-button {
    min-height: 60px;
    font-size: 19px
  }

  .month:after {
    width: 44px;
    height: 44px;
    right: 0
  }

  .month h2 {
    font-size: 25px
  }
}

@media(max-width:400px) {
  .progress {
    gap: 10px;
    font-size: 12px
  }

  h1 {
    font-size: 27px
  }

  .heading {
    gap: 8px
  }
}

/* เงาหัวข้อ */
body {
  background-image: var(--page-gradient)
}

h1 {
  text-shadow: 2px 3px 0 #ff66c460
}

/* ระยะจากหัวข้อถึงเดือนแรก */
.month:first-child {
  margin-top: 25px
}

.month:after {
  top: -7px
}

/* วงแดงจาก Elements (18): วางหลังหัวข้อ ไม่รับการคลิก */
h1 {
  position: relative;
  isolation: isolate
}

h1::before {
  content: "";
  position: absolute;
  inset: -9px -12px;
  z-index: -1;
  background: url("/assets/decor/decor-17.png") center/100% 100% no-repeat;
  opacity: .12;
  pointer-events: none
}

/* ของตกแต่งที่เก็บไว้: เส้นขีดแดง, วงกลม, ดาว, burst (ลบชิ้นขนาด 0 แล้ว) */
body {
  isolation: isolate
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/decor/decor-18.png"), url("/assets/decor/decor-17.png"), url('/assets/decor/brush-star.png'), url('/assets/decor/brush-burst.png');
  background-position: left -60px bottom 15%, right -55px bottom 5%, left 18% bottom -65px, right 25% bottom -80px;
  background-size: 130px, 160px, 135px, 165px;
  background-repeat: no-repeat;
  opacity: .4
}

/* จอคอม: ไม่แสดงวงกลมพื้นหลัง และยกดาวกับ burst ขึ้นเหนือแถบปุ่ม */
@media(min-width:900px) {
  body::before {
    background-image: url("/assets/decor/decor-18.png"), url('/assets/decor/brush-star.png'), url('/assets/decor/brush-burst.png');
    background-position: left -60px bottom 20%, left 24% bottom 85px, right 28% bottom 10px;
    background-size: 130px, 135px, 165px
  }
}

/* สี่ขั้นตอนบนมือถือไม่ล้นจอ */
.progress {
  flex-wrap: wrap;
  row-gap: 8px
}