.es-booking-hero { padding-top: clamp(60px, 8vw, 110px); padding-bottom: clamp(54px, 7vw, 90px); }
.es-booking-hero__inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: end; gap: clamp(36px, 8vw, 120px); }
.es-booking-hero h1 { max-width: 850px; margin-bottom: 22px; }
.es-booking-lead { max-width: 720px; margin: 0; color: var(--es-muted); font-size: clamp(17px, 1.6vw, 21px); }
.es-booking-hero__meta { border-left: 1px solid var(--es-line); padding-left: 28px; display: grid; gap: 5px; }
.es-booking-hero__meta strong { font-family: var(--es-serif); font-size: 21px; font-weight: 500; }
.es-booking-hero__meta span { color: var(--es-muted); font-size: 12px; }
.es-booking-page { background: #fff; }
.es-booking-notice { padding: 16px 18px; border: 1px solid var(--es-line); margin-bottom: 28px; }
.es-booking-notice.is-success, .es-booking-result.is-success { border-color: #9eb29d; background: #f4f8f3; }
.es-booking-login-card { max-width: 780px; margin: 0 auto; text-align: center; border: 1px solid var(--es-line); padding: clamp(40px, 7vw, 80px); background: var(--es-paper); }
.es-booking-login-card__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 20px; border: 1px solid var(--es-line); font-size: 24px; }
.es-booking-login-card h2 { margin-bottom: 18px; }
.es-booking-login-card p:not(.es-eyebrow) { color: var(--es-muted); max-width: 560px; margin-inline: auto; }
.es-booking-memberbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border: 1px solid var(--es-line); margin-bottom: 42px; }
.es-booking-memberbar div { display: flex; gap: 8px; align-items: baseline; }
.es-booking-memberbar span { color: var(--es-muted); font-size: 12px; }
.es-booking-memberbar a { font-size: 12px; font-weight: 600; }
.es-booking-app { display: grid; gap: 26px; }
.es-booking-step { border-top: 1px solid var(--es-line); padding-top: 34px; }
.es-booking-step__head { display: grid; grid-template-columns: 54px 1fr; gap: 24px; align-items: start; margin-bottom: 30px; }
.es-booking-step__head > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--es-line); border-radius: 50%; color: var(--es-accent); font-size: 11px; font-weight: 600; }
.es-booking-step__head .es-eyebrow { margin-bottom: 8px; }
.es-booking-step__head h2 { font-size: clamp(29px, 3vw, 46px); margin: 0; }
.es-booking-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.es-booking-service { position: relative; text-align: left; min-height: 148px; border: 1px solid var(--es-line); background: #fff; padding: 24px 22px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.es-booking-service:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(20,18,15,.07); }
.es-booking-service.is-selected { border-color: var(--service-color); box-shadow: inset 0 0 0 1px var(--service-color); }
.es-booking-service__tag { width: 9px; height: 9px; border-radius: 50%; background: var(--service-color); position: absolute; top: 20px; right: 20px; }
.es-booking-service strong { display: block; font-family: var(--es-serif); font-weight: 500; font-size: 24px; margin-bottom: 8px; }
.es-booking-service small { display: block; color: var(--es-accent); font-weight: 600; margin-bottom: 14px; }
.es-booking-service em { display: block; color: var(--es-muted); font-style: normal; font-size: 12px; line-height: 1.45; }
.es-booking-calendar { max-width: 900px; border: 1px solid var(--es-line); padding: clamp(16px, 3vw, 30px); background: #fff; }
.es-booking-calendar__toolbar { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 22px; }
.es-booking-calendar__toolbar strong { text-align: center; font-family: var(--es-serif); font-size: 26px; font-weight: 500; text-transform: capitalize; }
.es-booking-calendar__toolbar button { border: 1px solid var(--es-line); background: #fff; width: 44px; height: 44px; cursor: pointer; }
.es-booking-calendar__toolbar button:disabled { opacity: .25; cursor: default; }
.es-booking-calendar__weekdays, .es-booking-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.es-booking-calendar__weekdays { margin-bottom: 6px; }
.es-booking-calendar__weekdays span { text-align: center; padding: 8px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--es-muted); }
.es-booking-day { min-height: 84px; border: 1px solid rgba(23,23,21,.08); background: #faf9f7; padding: 10px 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; cursor: default; }
.es-booking-day > span { font-weight: 600; font-size: 13px; }
.es-booking-day small { font-size: 9px; line-height: 1.2; color: var(--es-muted); }
.es-booking-day:disabled { opacity: .42; }
.es-booking-day.has-slots { cursor: pointer; background: #fff; border-color: color-mix(in srgb, var(--es-accent) 42%, transparent); }
.es-booking-day.has-slots:hover, .es-booking-day.is-selected { background: var(--es-paper); border-color: var(--es-accent); }
.es-booking-day.is-today > span { color: var(--es-accent); }
.es-booking-day.is-empty { border: 0; background: transparent; min-height: 84px; }
.es-booking-calendar__grid.is-loading { opacity: .45; pointer-events: none; }
.es-booking-calendar__status { margin: 18px 0 0; color: var(--es-muted); font-size: 12px; }
.es-booking-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 78px; }
.es-booking-slot { min-width: 130px; border: 1px solid var(--es-line); background: #fff; padding: 14px 18px; cursor: pointer; text-align: left; }
.es-booking-slot strong { display: block; font-size: 17px; }
.es-booking-slot span { display: block; color: var(--es-muted); font-size: 10px; }
.es-booking-slot:hover, .es-booking-slot.is-selected { border-color: var(--es-accent); background: var(--es-paper); }
.es-booking-details { margin: 24px 0 0 78px; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; padding: 24px; background: var(--es-paper); }
.es-booking-details[hidden] { display: none; }
.es-booking-details label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.es-booking-details input, .es-booking-details textarea { width: 100%; border: 1px solid var(--es-line); background: #fff; padding: 12px 13px; min-height: 46px; }
.es-booking-details > div:nth-child(2) { grid-column: 1 / -1; }
.es-booking-result { margin: 16px 0 0 78px; max-width: 760px; padding: 0; font-size: 13px; }
.es-booking-result.is-success, .es-booking-result.is-error { padding: 14px 16px; border: 1px solid; }
.es-booking-result.is-error { border-color: #c99; background: #fff6f6; }
.es-booking-my { margin-top: clamp(70px, 10vw, 120px); padding-top: 50px; border-top: 1px solid var(--es-line); }
.es-booking-my__head { margin-bottom: 28px; }
.es-booking-my__head h2 { margin-bottom: 0; }
.es-booking-my__list { display: grid; gap: 10px; }
.es-booking-my-card { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(250px,1.4fr) minmax(110px,.6fr) auto; align-items: center; gap: 20px; border: 1px solid var(--es-line); padding: 18px 20px; }
.es-booking-my-card > div { display: grid; }
.es-booking-my-card > div span { color: var(--es-muted); font-size: 12px; }
.es-service-pill { display: inline-flex; width: fit-content; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.es-service-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--service-color); }
.es-booking-status { display: inline-flex; width: fit-content; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 600; background: #f0efed; }
.es-booking-status.is-confirmed { background: #edf5ec; color: #476146; }
.es-booking-status.is-pending { background: #fff4df; color: #8a6421; }
.es-booking-status.is-cancelled { background: #f3eded; color: #7a4d4d; }
.es-booking-cancel { border: 0; background: transparent; color: #8a4747; text-decoration: underline; cursor: pointer; font-size: 11px; }
.es-booking-empty { color: var(--es-muted); }

@media (max-width: 900px) {
    .es-booking-hero__inner { grid-template-columns: 1fr; }
    .es-booking-hero__meta { border-left: 0; border-top: 1px solid var(--es-line); padding: 20px 0 0; }
    .es-booking-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .es-booking-my-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .es-booking-memberbar, .es-booking-memberbar div { align-items: flex-start; flex-direction: column; }
    .es-booking-memberbar { gap: 12px; }
    .es-booking-services { grid-template-columns: 1fr; }
    .es-booking-step__head { grid-template-columns: 42px 1fr; gap: 14px; }
    .es-booking-calendar { padding: 12px 8px; }
    .es-booking-calendar__weekdays, .es-booking-calendar__grid { gap: 3px; }
    .es-booking-day, .es-booking-day.is-empty { min-height: 58px; padding: 7px 5px; }
    .es-booking-day small { display: none; }
    .es-booking-calendar__toolbar strong { font-size: 20px; }
    .es-booking-slots, .es-booking-details, .es-booking-result { margin-left: 0; }
    .es-booking-details { grid-template-columns: 1fr; }
    .es-booking-details > div:nth-child(2) { grid-column: auto; }
    .es-booking-my-card { grid-template-columns: 1fr; gap: 10px; }
}

/* v0.4.11 — WooCommerce booking payment */
.es-booking-payment-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 18px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--es-line);
    background: #fff;
}
.es-booking-payment-summary[hidden] { display: none; }
.es-booking-payment-summary span { color: var(--es-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.es-booking-payment-summary strong { font-family: var(--es-serif); font-size: 24px; font-weight: 500; }
.es-booking-payment-summary small { grid-column: 1 / -1; color: var(--es-muted); font-size: 10px; }
.es-booking-service small b { font-weight: 700; color: var(--es-ink); }
.es-booking-status.is-awaiting_payment { background: #eef3fa; color: #3f5e7e; }
.es-booking-my-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.es-button--small { min-height: 34px; padding: 8px 12px; font-size: 10px; }
.es-booking-paid { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #edf5ec; color: #476146; font-weight: 700; }
.es-booking-payment-success { margin-top: 18px; }
@media (max-width: 620px) {
    .es-booking-payment-summary { grid-template-columns: 1fr; }
    .es-booking-payment-summary strong { font-size: 21px; }
}