body {
  padding-top: 120px; /* ปรับให้เท่ากับความสูงของ Navbar */
}


.about-section {
  width: 100%;
  background-color: #fff; /* พื้นหลังสีขาว */
  padding: 100px 20px; /* เว้นระยะรอบๆ */
  text-align: center;
  color: #4b1f0d; /* น้ำตาลเข้มแบบโลโก้ */
  background-color: rgb(238, 228, 216);
}

.about-content {
  max-width: 900px;
  margin: 0 auto;
}

.about-subtitle {
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: #3c1d0a;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.about-subtitle::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background-color: #3c1d0a;
  margin: 5px auto 0;
}

.about-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 10px 0;
  color: #4b1f0d;
}

.about-text {
  font-size: 0.9rem;
  color: #3c1d0a;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .about-section {
    padding: 60px 15px;
  }

  .about-title {
    font-size: 1.6rem;
  }

  .about-text {
    font-size: 0.85rem;
  }
}
.booking-section { padding: 40px 6%; background:#f7f5f3; font-family: Inter, system-ui, sans-serif; }
.booking-inner { display:flex; gap:28px; align-items:flex-start; max-width:1200px; margin:0 auto; }

/* Left column */
.booking-left { flex:1.2; background:#fff; border-radius:12px; padding:20px; box-shadow:0 6px 20px rgba(0,0,0,0.06); }
.booking-left h3 { margin:0 0 14px; color:#3a1a16; font-size:1.1rem; letter-spacing:0.8px; font-weight:600; }
.form-group { margin-bottom:14px; }
.label { display:block; font-size:0.9rem; margin-bottom:8px; color:#6b5b57; font-weight:600; }

/* date & time lists */
.date-list { display:flex; gap:8px; flex-wrap:wrap; }
.date-item { padding:10px 12px; border-radius:8px; background:#fafafa; border:1px solid #e8e6e3; cursor:pointer; color:#3a1a16; font-weight:600; }
.date-item.active { background:#0b66ff; color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(11,102,255,0.15); }
.time-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.time-slot { padding:10px 12px; border-radius:8px; background:#fafafa; border:1px solid #e8e6e3; cursor:pointer; color:#3a1a16; font-weight:600; }
.time-slot.active { background:#0b66ff; color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(11,102,255,0.15); }

/* inputs */
.booking-form { margin-top:8px; }
.form-row { margin-bottom:12px; }
.form-row label { display:block; font-size:0.9rem; margin-bottom:6px; color:#5f4d4a; }
.form-row input, .form-row textarea, .booking-form select {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid #ddd; font-size:0.95rem; color:#222;
}

/* buttons */
.btn-confirm { width:100%; background:#a00000; color:#fff; padding:12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:1rem; margin-top:8px; }
.btn-confirm:hover { background:#7b0000; }
.btn-confirm-ghost { width:100%; background:transparent; color:#3a1a16; padding:12px; border-radius:8px; border:1px solid #ddd; cursor:pointer; font-weight:700; }

/* Right column */
.booking-right { flex:0.6; background:#fff; border-radius:12px; padding:18px; box-shadow:0 6px 20px rgba(0,0,0,0.06); height:fit-content; }
.booking-right h4 { margin:0 0 12px; color:#3a1a16; font-weight:700; }
.summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #eee; font-size:0.95rem; color:#4a3f3c; }
.label-strong { color:#6b5b57; font-weight:600; }
.summary-total { display:flex; justify-content:space-between; margin-top:16px; padding:12px; background:#fbf7f5; border-radius:8px; font-weight:800; color:#3a1a16; }

/* help */
.help-box { margin-top:14px; font-size:0.9rem; color:#6b5b57; }

/* popup */
.popup { position:fixed; top:24px; left:50%; transform:translateX(-50%); display:none; z-index:9999; }
.popup-inner { background:#fff; padding:12px 18px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.18); display:flex; align-items:center; gap:12px; }
.popup-close { border:none; background:transparent; font-size:18px; cursor:pointer; color:#a00000; }

.input-field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  color: #222;
  background-color: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  appearance: none; /* ลบลูกศร default ของ browser */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23a00000' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.input-field:focus {
  border-color: #a00000;
  box-shadow: 0 0 0 2px rgba(160, 0, 0, 0.1);
  outline: none;
}

/* ปรับ wrapper เพื่อให้ควบคุม icon ได้ */
.select-wrapper {
  position: relative;
  width: 100%;
}
.gender-wrapper{
  margin-top: 10px;
}

/* สไตล์ของ select ให้เหมือน input */
.select-wrapper select.input-field {
  width: 100%;
  padding: 10px 40px 10px 12px; /* เผื่อที่ให้ icon ทางขวา */
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  color: #222;
  background-color: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  appearance: none; /* ซ่อน style เดิมของ browser */
  cursor: pointer;
}

/* ลูกศร dropdown สวย ๆ */
.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a00000; /* สีแดงของ Siam Spa */
  font-size: 0.9rem;
  pointer-events: none;
}

/* Focus effect */
.select-wrapper select:focus {
  border-color: #a00000;
  box-shadow: 0 0 0 2px rgba(160, 0, 0, 0.1);
  outline: none;
}

.input-field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  color: #222;
  background-color: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
  border-color: #a00000;
  box-shadow: 0 0 0 2px rgba(160, 0, 0, 0.1);
  outline: none;
}

.input-field[readonly] {
  background-color: #f8f8f8;
  cursor: not-allowed;
  color: #555;
}
.duration-select {
    margin: 10px 0;
}

/* responsive */
@media (max-width: 980px) {
  .booking-inner { flex-direction:column; }
  .booking-left, .booking-right { width:100%; }
  .booking-right { order:2; }
  .booking-left { order:1; }
}

 .time-pair {
    display: flex;
    gap: 10px;
  }

  .input-field {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
  }

  .input-field[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
  }

  .responsive-btn {
  margin-top: 1rem;
  text-align: center;
}

.btn-confirm {
  width: 100%;
  background-color: #590000;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.btn-confirm:hover {
  background-color: #7a0000;
}


.service-summary-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}
.service-summary-list li {
  margin-bottom: 4px;
}


.popup-success, .popup-fail {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.popup-success {
  background-color: #4CAF50; /* สีเขียว */
}

.popup-fail {
  background-color: #f44336; /* สีแดง */
}

.popup-success.show, .popup-fail.show {
  opacity: 1;
}

/* highlight field invalid */
.invalid {
  border-color: red;
  background-color: #ffe5e5;
}


input[type="date"]::before {
  content: attr(placeholder);
  color: #aaa; /* Customize color */
  /* Add other styling as needed */
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
  content: ""; /* Hide the pseudo-element when focused or a date is selected */
}