.booking-public-body { --booking-bg: #eee8f5; --booking-card: #fff; --booking-primary: #60428c; --booking-primary-2: #33244f; --booking-accent: #c9a85c; --booking-text: #30283a; background: var(--booking-bg); color: var(--booking-text); }
.booking-theme-natural { --booking-bg: #f1f3e9; --booking-card: #fffef9; --booking-primary: #60765a; --booking-primary-2: #364b39; --booking-accent: #c9a978; --booking-text: #344036; }
.booking-theme-trust { --booking-bg: #edf2f7; --booking-card: #fff; --booking-primary: #245078; --booking-primary-2: #16354f; --booking-accent: #75a7c9; --booking-text: #203344; }
.booking-theme-festival { --booking-bg: #fff0e7; --booking-card: #fffdfb; --booking-primary: #d45c4d; --booking-primary-2: #9b3f53; --booking-accent: #f0ad4e; --booking-text: #523333; }
.booking-public-shell { min-height: 100vh; padding: 32px 16px; display: grid; place-items: start center; }
.booking-public-card { width: min(100%, 760px); overflow: hidden; background: var(--booking-card); border: 1px solid color-mix(in srgb, var(--booking-primary) 18%, white); border-radius: 28px; padding: 0; box-shadow: 0 24px 70px color-mix(in srgb, var(--booking-primary) 18%, transparent); }
.booking-public-content { padding: clamp(24px, 5vw, 48px); }
.booking-public-body .button { background: linear-gradient(135deg, var(--booking-primary-2), var(--booking-primary)); border-color: var(--booking-primary); }
.booking-public-body .button:hover { filter: brightness(1.08); }
.booking-header-image { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.booking-theme-hero { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 28px; color: var(--booking-accent); background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--booking-accent) 30%, transparent), transparent 34%), linear-gradient(135deg, var(--booking-primary-2), var(--booking-primary)); font-size: 34px; letter-spacing: .2em; }
.booking-public-card h1 { margin: 4px 0 16px; }
.booking-introduction { white-space: pre-line; line-height: 1.8; color: #51473e; }
.booking-form { display: grid; gap: 20px; margin-top: 24px; }
.booking-form [hidden] { display: none !important; }
.booking-form label, .booking-form fieldset { display: grid; gap: 8px; font-weight: 700; }
.booking-form small { color: #746b63; font-weight: 400; line-height: 1.5; }
.booking-form input, .booking-form select, .booking-form textarea { width: 100%; }
.booking-service-select { padding: 18px; border: 2px solid var(--booking-primary); border-radius: 16px; background: color-mix(in srgb, var(--booking-primary) 7%, white); color: var(--booking-primary-2); font-size: 18px; box-shadow: 0 8px 20px color-mix(in srgb, var(--booking-primary) 13%, transparent); }
.booking-service-select select { min-height: 62px; padding: 14px 48px 14px 16px; border: 2px solid color-mix(in srgb, var(--booking-primary) 48%, white); border-radius: 12px; background-color: #fff; color: var(--booking-text); font-size: 18px; font-weight: 800; cursor: pointer; }
.booking-service-select select:focus { outline: 3px solid color-mix(in srgb, var(--booking-primary) 24%, transparent); outline-offset: 2px; border-color: var(--booking-primary); }
.booking-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-calendar-field { padding: clamp(16px, 3vw, 26px); border: 1px solid color-mix(in srgb, var(--booking-primary) 28%, white); border-radius: 20px; background: color-mix(in srgb, var(--booking-primary) 4%, white); }
.booking-calendar { display: grid; gap: 12px; }
.booking-calendar-header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; }
.booking-calendar-header strong { text-align: center; font-size: clamp(20px, 4vw, 28px); }
.booking-calendar-header button { width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--booking-primary) 30%, white); border-radius: 50%; background: #fff; color: var(--booking-primary); font-size: 30px; cursor: pointer; }
.booking-calendar-header button:disabled { opacity: .28; cursor: default; }
.booking-calendar-week, .booking-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.booking-calendar-week span { padding: 6px 0; text-align: center; color: #746b63; font-size: 13px; }
.booking-calendar-week span:first-child { color: #b24b55; }
.booking-calendar-week span:last-child { color: #3e6c9b; }
.booking-calendar-day { min-height: 70px; padding: 8px 4px; display: grid; place-content: center; gap: 3px; border: 1px solid #e3ddd7; border-radius: 12px; background: #f1efed; color: #a09a94; cursor: not-allowed; }
.booking-calendar-day span { font-size: clamp(17px, 3vw, 22px); font-weight: 800; }
.booking-calendar-day small { font-size: 10px; color: inherit; }
.booking-calendar-day.available { border-color: color-mix(in srgb, var(--booking-primary) 42%, white); background: #fff; color: var(--booking-primary-2); cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--booking-primary) 10%, transparent); }
.booking-calendar-day.available:hover { transform: translateY(-1px); border-color: var(--booking-primary); }
.booking-calendar-day.selected { background: var(--booking-primary); border-color: var(--booking-primary); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--booking-primary) 30%, transparent); }
.booking-calendar-blank { min-height: 70px; }
.booking-slot { display: inline-flex !important; cursor: pointer; }
.booking-slot input { position: absolute; opacity: 0; width: 1px; }
.booking-slot span { min-width: 74px; padding: 10px 14px; border: 1px solid #cab9aa; border-radius: 999px; text-align: center; background: #fff; }
.booking-slot input:checked + span { color: #fff; background: var(--booking-primary); border-color: var(--booking-primary); }
.booking-consent { display: flex !important; grid-template-columns: none; flex-direction: row; align-items: flex-start; font-weight: 400 !important; line-height: 1.6; }
.booking-consent input { width: auto; margin-top: 5px; }
.booking-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking-success { min-height: 320px; padding: 40px 24px; margin-top: 24px; border: 3px solid #4d8753; border-radius: 20px; background: #eef8ee; display: grid; place-content: center; text-align: center; box-shadow: 0 16px 36px rgba(50, 105, 57, .16); }
.booking-success h2 { margin: 8px 0 16px; color: #275d2d; font-size: clamp(28px, 6vw, 40px); }
.booking-success p { margin: 5px 0; line-height: 1.7; }
.booking-success-mark { width: 64px; height: 64px; margin: 0 auto 8px !important; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #4d8753; font-size: 38px; font-weight: 800; line-height: 1; }
.booking-success-note { margin-top: 18px !important; padding-top: 18px; border-top: 1px solid #b8d5bb; font-weight: 700; color: #275d2d; }
.booking-settings-card { margin-bottom: 24px; }
.booking-type-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.booking-type-tab { min-height: 52px; padding: 10px; border: 1px solid #cab9aa; border-radius: 12px; background: #fff; color: #51473e; font-weight: 800; cursor: pointer; }
.booking-type-tab.active { color: #fff; background: linear-gradient(135deg, var(--booking-primary-2), var(--booking-primary)); border-color: var(--booking-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--booking-primary) 25%, transparent); }
.booking-location-guide { display: grid; gap: 14px; }
.booking-location-card { padding: 18px; border: 1px solid #dfd2c5; border-radius: 16px; background: #fbf8f4; }
.booking-location-card h3 { margin: 0 0 6px; }
.booking-location-card p { margin: 0 0 12px; color: #62584f; }
.booking-location-dates { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-dated-slot span { min-width: 170px; border-radius: 12px; }
.booking-service-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(130px, 1fr) repeat(3, minmax(110px, 1fr)) auto; gap: 12px; align-items: end; padding: 16px; margin-bottom: 12px; border: 1px solid #e5ddd5; border-radius: 14px; }
.booking-location-row { display: grid; grid-template-columns: 140px minmax(170px, 1.2fr) minmax(200px, 1.5fr) 150px 110px 110px auto; gap: 10px; align-items: end; padding: 16px; margin-bottom: 12px; border: 1px solid #e5ddd5; border-radius: 14px; }
.booking-theme-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.booking-manager-type-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.booking-manager-type-tab { min-height: 56px; padding: 12px; border: 1px solid #cfc4ba; border-radius: 14px; background: #fff; color: #4c423a; font-size: 15px; font-weight: 800; cursor: pointer; }
.booking-manager-type-tab.active { color: #fff; background: #60428c; border-color: #60428c; box-shadow: 0 8px 20px rgba(96, 66, 140, .2); }
.booking-email-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.booking-email-tab { min-height: 52px; padding: 10px 14px; border: 1px solid #cfc4ba; border-radius: 12px; background: #fff; color: #4c423a; font-weight: 800; cursor: pointer; }
.booking-email-tab.active { color: #fff; background: #60428c; border-color: #60428c; }
.booking-email-template { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 16px; padding: 18px; border: 1px solid #ddd3ca; border-radius: 16px; background: #faf8f6; }
.booking-email-template > label:first-child { grid-column: 1 / -1; }
.booking-email-preview { padding: 18px; border: 1px solid #d8cec5; border-radius: 14px; background: #fff; overflow-wrap: anywhere; }
.booking-email-preview strong { display: block; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #e8e1db; }
.booking-email-preview [data-email-preview-body] { line-height: 1.7; font-weight: 400; }
.booking-email-placeholders { padding: 12px; border-radius: 10px; background: #f1edf6; color: #4f3b70; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.booking-theme-option { position: relative; cursor: pointer; }
.booking-theme-option input { position: absolute; opacity: 0; }
.booking-theme-option span { min-height: 105px; padding: 48px 12px 12px; display: grid; align-content: end; border: 3px solid transparent; border-radius: 16px; color: #fff; box-shadow: inset 0 -55px 45px rgba(0,0,0,.28); }
.booking-theme-option small { color: inherit; opacity: .9; }
.booking-theme-option input:checked + span { border-color: #111; outline: 3px solid #fff; outline-offset: -6px; }
.booking-theme-option.theme-mystic span { background: linear-gradient(135deg, #33244f, #7653a5); }
.booking-theme-option.theme-natural span { background: linear-gradient(135deg, #405445, #91a57b); }
.booking-theme-option.theme-trust span { background: linear-gradient(135deg, #173952, #4f83aa); }
.booking-theme-option.theme-festival span { background: linear-gradient(135deg, #b54155, #ef9b4d); }
.booking-header-setting { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, .8fr); gap: 18px; align-items: center; }
.booking-header-setting img, .booking-header-placeholder { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border: 1px solid #ded5cc; border-radius: 14px; }
.booking-header-placeholder { display: grid; place-items: center; background: #f5f2ef; color: #756d66; font-weight: 400; }
.booking-week-grid { display: grid; gap: 10px; }
.booking-day-row { display: grid; grid-template-columns: 110px 130px auto 130px; gap: 10px; align-items: center; }
.booking-day-row label { display: flex; grid-template-columns: none; flex-direction: row; align-items: center; }
.booking-day-row label input { width: auto; }
@media (max-width: 760px) {
  .booking-type-tabs { grid-template-columns: 1fr; }
  .booking-theme-options { grid-template-columns: 1fr 1fr; }
  .booking-manager-type-tabs { grid-template-columns: 1fr; }
  .booking-email-tabs, .booking-email-template { grid-template-columns: 1fr; }
  .booking-header-setting { grid-template-columns: 1fr; }
  .booking-service-row { grid-template-columns: 1fr 1fr; }
  .booking-service-row label:first-of-type { grid-column: 1 / -1; }
  .booking-location-row { grid-template-columns: 1fr 1fr; }
  .booking-location-row label:nth-of-type(2), .booking-location-row label:nth-of-type(3) { grid-column: 1 / -1; }
  .booking-day-row { grid-template-columns: 86px 1fr auto 1fr; }
  .booking-calendar-week, .booking-calendar-grid { gap: 4px; }
  .booking-calendar-day { min-height: 56px; border-radius: 9px; }
  .booking-calendar-blank { min-height: 56px; }
}
.booking-contact-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.booking-contact-tabs button{min-height:52px;border:2px solid #d7d7df;border-radius:12px;background:#fff;font-weight:700;font-size:16px}.booking-contact-tabs button.active{border-color:var(--booking-accent,#7554a3);background:var(--booking-soft,#f2ecfa);color:var(--booking-accent,#7554a3)}