/* ==========================================================================
   forms.css — chuẩn hoá MỌI form khách (FE, 10/10/2026, theo design/FORM_UI_AUDIT_20261010.md §2)
   Nạp SAU CÙNG trên index.html, foods.html, don-hang.html để thắng styles.css / redesign.css / mobile-checkout.css.
   Form trong phạm vi: #spa-form #hotel-form #spa-cancel-form #checkout-form #customer-login-form
   #customer-register-form #lookup-form + các hộp kết quả .booking-result-dialog.
   ========================================================================== */
:root{
  --field-line:#a8865f;          /* FORM-17: Darius chọn 10/10/2026 (3,3:1, đạt WCAG) */
  --field-bg:var(--paper,#fffdf8);
  --danger:#b4442f;
  --danger-text:#9c3417;
  --dlg-bg:#fffaf1;
  --dlg-pad:24px;
}
@media(max-width:520px){:root{--dlg-pad:20px}}

/* ---------- Bố cục form: 1 lưới, khoảng cách đều 16px (FORM-03) ---------- */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form){display:grid;gap:16px;margin:0}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form)>*{margin:0}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) label:not(.pay-option):not(.spa-addon-option):not(.pickup-option){display:grid;gap:6px;margin:0;color:var(--ink);font-size:13px;font-weight:700;line-height:1.35}
:is(#spa-form,#hotel-form) .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;align-items:start;margin:0}
@media(max-width:520px){:is(#spa-form,#hotel-form) .form-row{grid-template-columns:1fr}}
/* Nhóm (gói / dịch vụ thêm / thanh toán): cách 20px = gap 16 + 4 */
:is(#spa-form,#checkout-form) :is(.spa-service-field,.spa-addon-field,.pay-choice){margin:4px 0!important}
:is(#hotel-form,#spa-cancel-form) :is(.hotel-form-note,.cancel-note){margin:0!important}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form) :is(.form-note,.form-link,.auth-switch){margin:0}

/* ---------- Ô nhập: một kiểu duy nhất, 16px để iOS không tự phóng to (FORM-01/04/05) ---------- */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea){
  box-sizing:border-box;display:block;width:100%;min-width:0;min-height:48px;margin:0;padding:0 14px;
  border:1px solid var(--field-line);border-radius:12px;background-color:var(--field-bg);color:var(--ink);
  font:500 16px/1.4 'Be Vietnam Pro',sans-serif;letter-spacing:0;text-transform:none;
  -webkit-appearance:none;appearance:none;outline:none;transition:border-color .15s,box-shadow .15s}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) textarea{min-height:96px!important;padding:12px 14px!important;resize:vertical}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) ::placeholder{color:var(--muted);font-weight:400;opacity:1}
/* Select: mũi tên riêng, chữ cùng cỡ/độ đậm; đang ở option gợi ý (rỗng) thì chữ xám như placeholder */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form) select{
  padding-right:40px!important;text-overflow:ellipsis;cursor:pointer;/* !important: quy tắc chung ô nhập có độ ưu tiên cao hơn (1,3,1) nên trước đây padding này không ăn */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2382624e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
:is(#spa-form,#hotel-form) select:invalid{color:var(--muted)!important;font-weight:400!important}
:is(#spa-form,#hotel-form) select option{color:var(--ink);font-weight:500}
/* Date: canh trái, cao bằng ô khác, có icon lịch (iOS để trống không còn là ô trắng trơn) */
:is(#spa-form,#hotel-form) input[type=date]{
  height:48px;padding:11px 44px 11px 14px!important;line-height:24px!important;text-align:left;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2382624e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px}
/* QA-01: iOS Safari đặt ngày sát mép trên → cho phần giá trị cao đúng 24px, padding 11px trên/dưới + viền 2px = đúng 48px, chữ nằm giữa */
:is(#spa-form,#hotel-form) input[type=date]::-webkit-date-and-time-value{min-height:24px;line-height:24px;margin:0;padding:0;text-align:left}
:is(#spa-form,#hotel-form) input[type=date]::-webkit-datetime-edit{padding:0}
:is(#spa-form,#hotel-form) input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:8px;top:calc(50% - 16px);width:32px;height:32px;margin:0;padding:0;opacity:0;cursor:pointer}
:is(#spa-form,#hotel-form) input[type=date]{position:relative}
:is(#spa-form,#hotel-form) input[type=date]:invalid{color:var(--muted)!important;font-weight:400!important}
/* Focus: viền cam + vòng sáng */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) :is(input:not([type=radio]):not([type=checkbox]),select,textarea):focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,155,61,.25)}
/* Lỗi tại ô (FORM-09) */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) [aria-invalid="true"],
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) [aria-invalid="true"]:focus{
  border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(180,68,47,.18)!important}
fieldset[aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(180,68,47,.15)}
.field-error{display:block;margin:0;color:var(--danger-text);font-size:13px;font-weight:700;line-height:1.4}
fieldset>.field-error,.spa-service-field>p.field-error,.spa-addon-field>p.field-error{margin:10px 0 0;color:var(--danger-text);font-size:13px;font-weight:700}
.form-error{margin:0}
#spa-slot-hint{color:var(--muted);font-size:13px;font-weight:600;opacity:1!important;margin-top:0!important}
#spa-slot-hint:empty{display:none!important}

/* ---------- Mã giảm giá (FORM-06) ---------- */
#checkout-form .voucher-field{display:grid;gap:6px}
#checkout-form .voucher-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
#checkout-form input[name=voucher_code]:not(:placeholder-shown){text-transform:uppercase!important;letter-spacing:.04em!important}
#checkout-form .voucher-row .button{min-height:48px;margin:0;padding:0 18px;white-space:nowrap;font-size:14px;font-weight:800;border:1px solid #bb9065;background:#fffdf8;color:#542819}
#checkout-form .voucher-row .button:hover{background:#fff2dc}
#checkout-summary{display:grid;gap:4px;font-size:14px;color:var(--ink)}
#checkout-summary:empty{display:none}

/* ---------- Nút gửi thống nhất 48px / 15px 800 (FORM-10) ---------- */
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form,#lookup-form) [type=submit]{
  width:100%;min-height:48px;margin:0;padding:0 22px;border:0;border-radius:99px;font:800 15px/1.2 'Be Vietnam Pro',sans-serif}
:is(#spa-form,#hotel-form,#spa-cancel-form,#checkout-form,#customer-login-form,#customer-register-form) [type=submit]:disabled{opacity:.72;cursor:progress;transform:none}

/* ---------- Dialog: header dính trên, footer dính dưới, nút × 44×44 (FORM-07/08) ---------- */
dialog:not([open]){display:none}
:is(#spa-dialog,#hotel-dialog,#spa-cancel-dialog,#checkout-dialog,#customer-login,#customer-register)>form{padding:0 var(--dlg-pad) var(--dlg-pad)!important}
.booking-result-dialog{padding:0 var(--dlg-pad) var(--dlg-pad)!important;max-height:calc(100dvh - 32px);overflow-y:auto}
:is(#spa-dialog,#hotel-dialog,#spa-cancel-dialog,#checkout-dialog,#customer-login,#customer-register,.booking-result-dialog) .dialog-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin:0 calc(-1 * var(--dlg-pad))!important;padding:20px var(--dlg-pad) 14px;background:var(--dlg-bg);border-bottom:1px solid var(--line)}
.booking-result-dialog .dialog-head{margin-bottom:14px!important}
:is(#spa-dialog,#hotel-dialog,#spa-cancel-dialog,#checkout-dialog,#customer-login,#customer-register,.booking-result-dialog) .dialog-head h2{margin:0}
:is(#spa-dialog,#hotel-dialog,#spa-cancel-dialog,#checkout-dialog,#customer-login,#customer-register,.booking-result-dialog) .dialog-head .eyebrow{margin:0 0 4px}
dialog .dialog-head .close{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px 0 0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:30px;line-height:1;cursor:pointer}
dialog .dialog-head .close:hover{background:#f6e7cf;color:var(--ink)}
dialog .dialog-head .close:focus-visible{outline:3px solid rgba(217,155,61,.45);outline-offset:0}
.dialog-foot{position:sticky;bottom:0;z-index:3;display:grid;gap:10px;margin:0 calc(-1 * var(--dlg-pad))!important;padding:12px var(--dlg-pad) calc(12px + env(safe-area-inset-bottom,0px));background:var(--dlg-bg);border-top:1px solid var(--line);box-shadow:0 -10px 18px -16px rgba(70,35,24,.45)}
.dialog-foot:last-child{margin-bottom:calc(-1 * var(--dlg-pad))!important}
.checkout-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--ink);font-size:14px;font-weight:700}
.checkout-total strong{font-size:18px;font-weight:900;color:var(--orange-dark)}
.checkout-total[hidden]{display:none}
/* Thanh toán QR (FORM-14) */
#order-success-content>p{font-size:14px;line-height:1.5;color:#79573f}
.pay-copy{min-width:56px;min-height:44px;padding:0 12px;font-size:13px;border-radius:10px}
#order-success-dialog .booking-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:sticky;bottom:calc(-1 * var(--dlg-pad));z-index:3;margin:16px calc(-1 * var(--dlg-pad)) calc(-1 * var(--dlg-pad));padding:12px var(--dlg-pad) calc(12px + env(safe-area-inset-bottom,0px));background:var(--dlg-bg);border-top:1px solid var(--line)}
.booking-result-actions .button{min-height:48px;font-size:15px;font-weight:800}
#order-success-dialog .booking-result-actions .button{width:100%;padding:0 10px;white-space:nowrap}

/* Bàn phím iOS mở (form-ui.js gắn html.kb-open + --vvh/--vvt): kéo dialog lên vùng còn thấy */
html.kb-open :is(dialog,#checkout-dialog)[open]{top:calc(var(--vvt,0px) + 8px);bottom:auto;margin:0 auto;max-height:calc(var(--vvh,100dvh) - 16px)}

/* Trình duyệt không mở được dialog dạng modal (WebView cũ, lỗi showModal) → canh giữa + lớp nền (FORM-11) */
:is(dialog,#checkout-dialog).is-dialog-fallback{display:block;position:fixed;z-index:1000;top:50%;left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);width:calc(100% - 32px);max-width:480px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}
.dialog-fallback-backdrop{position:fixed;z-index:999;inset:0;background:rgba(35,28,20,.48)}
.dialog-fallback-backdrop[hidden]{display:none}

/* ---------- Modal sản phẩm: nút chạm ≥44px (FORM-16) ---------- */
.variant-quantity{grid-template-columns:44px minmax(32px,auto) 44px;min-height:44px}
.variant-quantity button{height:44px;font-size:20px}
.variant-quantity output{font-size:14px}
.variant-choice .variant-option,.variant-option{min-height:44px}

/* ---------- Tra cứu đơn don-hang.html (FORM-15) ---------- */
.lookup #lookup-form{margin:22px 0}
#lookup-form label{display:grid;gap:6px}
#lookup-form input[name=code]:not(:placeholder-shown){text-transform:uppercase!important}
.lookup .form-error{margin:0 0 12px}

/* ---------- Trang chi tiết /products/<id>: chọn phân loại (BUG-01, 11/10/2026) ----------
   Dùng lại .variant-block/.variant-choice của modal sản phẩm (redesign.css) + nút chạm ≥44px ở trên. */
.detail-page .detail-meta{grid-template-columns:1fr;margin-bottom:0}
.detail-description{margin:14px 0 0;color:#6f5644;font-size:15px;line-height:1.6;white-space:pre-line}
.detail-price .sale-badge{align-self:center;font-size:12px}
.detail-variants{margin:20px 0 22px}
.detail-variants>span em{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;color:#9b7d66}
.detail-variants .variant-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-variants .variant-option{width:100%;cursor:pointer;line-height:1.3}
.detail-variants .variant-option:focus-visible{outline:3px solid rgba(217,155,61,.55);outline-offset:-3px}
.detail-variants{scroll-margin-top:96px}
.detail-variants.has-error>span{color:var(--danger-text)}
.detail-variants .field-error{margin-top:8px}
.detail-page .quantity{min-height:48px}
.detail-page .quantity button{width:44px;min-height:44px;align-self:stretch}
.detail-page .quantity button:disabled{color:#cbbcac;cursor:not-allowed}
.detail-page .quantity button:disabled:hover{background:transparent}
.detail-page .detail-actions .button.primary{min-height:48px;font-size:15px;font-weight:800}
.detail-selected{margin:0 0 10px;color:#6f5644;font-size:14px;font-weight:600}
.detail-selected b{color:#4a2518}
.detail-cart-note{min-height:20px;margin:10px 0 0;color:#8c4c25;font-size:13px;font-weight:700}
.detail-cart-note a{color:inherit}
@media(max-width:380px){.detail-variants .variant-option{padding:10px 11px;font-size:12.5px}}
/* Danh sách phân loại dài (vd. 28 vị): máy tính giữ ảnh đứng yên bên trái khi cuộn danh sách. */
@media(min-width:761px){.detail-page .detail-layout{align-items:start}.detail-page .detail-image{position:sticky;top:96px}}

/* ---------- Đưa đón bé (DTW, FE 16/10/2026) — khối do app.js vẽ vào fieldset[data-pickup-field] ----------
   4 lựa chọn 2×2, khi có đón/trả mới hiện địa chỉ + nút vị trí + xe máy/ô tô. Cùng kiểu ô gói spa (redesign.css .spa-addon-option). */
.pickup-field{margin:4px 0!important;padding:15px;border:1px solid #e4c797;border-radius:15px;background:#fffaf2;min-width:0}
.pickup-field legend{padding:0 5px;color:#68351f;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.pickup-field legend small{color:#966d50;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none}
.pickup-modes,.pickup-vehicles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickup-option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:center;min-height:48px;margin:0;padding:10px 12px;border:1px solid var(--field-line);border-radius:12px;background:#fffdf8;color:#542819;font-size:13px;font-weight:800;line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s}
.pickup-option:hover{border-color:#a95127;background:#fff4e2}
.pickup-option:has(input:checked){border:2px solid #a95127;padding:9px 11px;background:#fff0dc}
.pickup-option input{width:18px;height:18px;margin:0;accent-color:#a95127}
.pickup-option input:focus-visible{outline:3px solid rgba(217,155,61,.45);outline-offset:2px}
.pickup-option span{display:grid;gap:2px;min-width:0}
.pickup-option small{color:#88664f;font-size:11px;font-weight:600;line-height:1.3}
.pickup-extra{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed #e0c49b}
.pickup-extra[hidden]{display:none}
.pickup-extra>label{display:grid;gap:6px;margin:0;color:var(--ink);font-size:13px;font-weight:700}
.pickup-extra>label em{color:var(--danger-text);font-style:normal}
.pickup-sub{margin:0 0 6px;color:var(--ink);font-size:13px;font-weight:700}
.pickup-geo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pickup-geo-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--field-line);border-radius:99px;background:#fffdf8;color:#7a3d1e;font:800 13px/1.2 'Be Vietnam Pro',sans-serif;cursor:pointer}
.pickup-geo-btn:hover{background:#fff2dc;border-color:#a95127}
.pickup-geo-btn:disabled{opacity:.7;cursor:progress}
.pickup-geo-btn svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pickup-geo-msg{flex:1 1 180px;margin:0;color:#79573f;font-size:12px;font-weight:600;line-height:1.4}
.pickup-geo-msg.is-ok{color:#2f5a2a}
.pickup-geo-msg.is-warn{color:#8a4a15}
.pickup-geo-msg a{color:inherit;font-weight:800}
.pickup-geo-msg button{margin:0 0 0 4px;padding:0;border:0;background:none;color:#91401f;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.pickup-veh-hint{margin:6px 0 0;color:#79573f;font-size:12px;font-weight:600;line-height:1.4}
.pickup-veh-hint.is-strong{color:#8a4a15;font-weight:800}
.pickup-free{margin:0;padding:9px 12px;border-radius:10px;background:#f1f6ec;color:#2f5a2a;font-size:12.5px;font-weight:700;line-height:1.45}
.pickup-time-note{margin:0;color:#79573f;font-size:12px;font-weight:600;line-height:1.4}
.pickup-time-note[hidden],.pickup-veh-hint[hidden],.pickup-geo-msg[hidden]{display:none}
@media(max-width:520px){.pickup-field{padding:13px}.pickup-option{padding:9px 10px;gap:8px;font-size:12.5px}.pickup-option:has(input:checked){padding:8px 9px}}
@media(max-width:340px){.pickup-modes{grid-template-columns:1fr}}
/* Hộp xác nhận + tra cứu lịch: dòng đưa đón */
.booking-pickup{display:grid;gap:4px;margin:12px 0 0;padding:12px 14px;border:1px solid #e4c797;border-radius:12px;background:#fffaf2;color:#542819;font-size:13px;line-height:1.45;text-align:left}
.booking-pickup[hidden]{display:none}
.booking-pickup b{font-size:14px}
.booking-pickup small{color:#79573f;font-size:12px;font-weight:600}
.booking-pickup a{color:#91401f;font-weight:800}
.booking-lookup-link{display:inline-block;margin-top:10px}