/* Fine-tuning for the booking form. Kept separate so it safely overrides theme defaults. */
.hp-public-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 9px;
  border: 1px solid rgba(7,100,169,.18);
  border-radius: 7px;
  color: #0764A9;
  background: #fff;
  font: inherit;
  font-weight: 400;
}

.hp-public-form select:focus,
.hp-public-form input:focus,
.hp-public-form textarea:focus {
  outline: 2px solid rgba(7,100,169,.22);
  outline-offset: 1px;
  border-color: #0764A9;
}

.hp-public-option-info {
  margin: -5px 0 1px;
  padding: 10px 12px;
  border-left: 4px solid #0764A9;
  border-radius: 0 7px 7px 0;
  color: #0764A9;
  background: rgba(7,100,169,.07);
  font-size: 12px;
  line-height: 1.45;
}

.hp-public-option-info strong,
.hp-public-option-info span {
  display: block;
}

.hp-public-option-info span {
  margin-top: 3px;
}

.hp-public-form [data-dietary][hidden] {
  display: none;
}

.hp-public-private-note {
  margin-top: 9px !important;
  font-size: 14px !important;
}

.hp-public-private-note a {
  color: inherit;
  font-weight: 800;
}

.hp-public-price {
  margin: -6px 0 18px;
  color: #0764A9;
  font-size: 14px;
  font-weight: 800;
}

/* Keep the booking page focused on the available dates rather than a large hero. */
body.hp-booking-plugin-page .hp-public-hero {
  min-height: 150px;
  gap: 26px;
  padding-top: 24px;
  padding-bottom: 24px;
}

body.hp-booking-plugin-page .hp-public-hero h1 {
  margin-bottom: 5px !important;
  font-size: clamp(36px, 4vw, 50px);
  letter-spacing: -1px;
}

body.hp-booking-plugin-page .hp-public-hero p {
  font-size: 16px;
  line-height: 1.35;
}

body.hp-booking-plugin-page .hp-public-main {
  padding-top: 16px;
}

body.hp-booking-plugin-page #masthead,
body.hp-booking-plugin-page .site-header {
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.hp-booking-plugin-page #masthead img,
body.hp-booking-plugin-page .site-header img {
  max-height: 100px;
  width: auto;
}

.hp-public-booking-details {
  margin-top: -6px;
}

/* Compact month overview; keep event content visible when a day is busy. */
body.hp-booking-plugin-page .hp-public-hero{min-height:0;gap:24px;padding-top:14px;padding-bottom:14px}
body.hp-booking-plugin-page .hp-public-hero h1{font-size:30px;letter-spacing:-.5px;margin-bottom:4px!important}
body.hp-booking-plugin-page .hp-public-hero p{font-size:13px;margin:3px 0;line-height:1.35}
body.hp-booking-plugin-page .hp-public-hero-actions button{font-size:12px;padding:12px 16px;letter-spacing:.3px}
body.hp-booking-plugin-page .hp-public-main{padding:12px 16px 24px}
body.hp-booking-plugin-page .hp-public-planning{padding:12px 16px;max-width:1450px}
.hp-public-course-filter{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:13px;font-weight:600;margin:0 0 10px}
.hp-public-course-filter select{width:auto;max-width:260px;min-height:34px;padding:5px 30px 5px 10px;font-size:13px;border:1px solid rgba(7,100,169,.07);border-radius:6px;background:#fff;color:#0764A9}
body.hp-booking-plugin-page .hp-public-month{padding:7px 12px}
body.hp-booking-plugin-page .hp-public-month h2{font-size:21px;margin:0!important;line-height:1.3}
body.hp-booking-plugin-page .hp-public-month button{display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0!important;line-height:1;border:0;border-radius:50%}
.hp-public-month button svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.hp-booking-plugin-page .hp-public-week b{padding:7px 2px;font-size:11px}
body.hp-booking-plugin-page .hp-public-day{min-height:clamp(62px,8vh,82px);padding:5px}
body.hp-booking-plugin-page .hp-public-day time{font-size:12px}
body.hp-booking-plugin-page .hp-public-event.is-mini{padding:5px;margin-top:3px;font-size:11px;line-height:1.2}
body.hp-booking-plugin-page .hp-public-event.is-mini b{font-size:11px}
@media(max-width:650px){
 body.hp-booking-plugin-page .hp-public-hero{padding:12px 16px;gap:10px;flex-wrap:wrap}
 body.hp-booking-plugin-page .hp-public-hero h1{font-size:25px}
 body.hp-booking-plugin-page .hp-public-main{padding:8px 4px 20px}
 body.hp-booking-plugin-page .hp-public-planning{padding:8px 4px}
 .hp-public-course-filter{justify-content:flex-start;flex-wrap:wrap;gap:5px;padding:0 5px;font-size:12px}
 .hp-public-course-filter select{max-width:100%;font-size:12px}
 body.hp-booking-plugin-page .hp-public-day{padding:3px;min-height:65px;min-width:0}
 body.hp-booking-plugin-page .hp-public-event.is-mini{padding:3px;font-size:10px;overflow-wrap:anywhere}
 body.hp-booking-plugin-page .hp-public-event.is-mini b{font-size:10px}
}

/* Consistent action spacing, including wrapped and stacked controls. */
.hp-row-actions,.hp-form-actions,.hp-toolbar,.hp-modal-actions,.hp-customer-actions,.hp-certificate-actions,.hp-instructor-actions,.hp-detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px!important}
.hp-row-actions>a,.hp-row-actions>button,.hp-form-actions>a,.hp-form-actions>button{margin:0!important}
.hp-customer-nav,.hp-planning-nav{gap:10px!important}
.hp-portal-auth form+p{margin-top:18px!important;margin-bottom:0!important}
.hp-portal-auth form+p a{display:inline-block;margin:0!important}
.hp-portal-auth form>button{margin-top:16px!important}
.hp-customer-login form+ p{margin-top:18px!important}
.hp-customer-section button+button,.hp-customer-section button+a,.hp-customer-section a+button,.hp-participant-card button+a{margin-left:10px}
.hp-public-participants-head{gap:12px;flex-wrap:wrap}

.hp-public-hero,.hp-customer-hero{background:linear-gradient(110deg,#0764A9,#0764A9)!important}
.hp-customer-hero h1,.hp-customer-hero h2,.hp-customer-hero p,.hp-customer-hero a{color:#fff!important}
.hp-event-actions,.hp-signature-actions{display:flex;flex-wrap:wrap;gap:12px!important}
.hp-attendance-actions{gap:12px!important}

/* Align the banner copy with the calendar content, rather than centring the group. */
body.hp-booking-plugin-page .hp-public-hero{justify-content:space-between;max-width:none;padding-left:max(32px,calc((100% - 1450px)/2 + 16px));padding-right:max(32px,calc((100% - 1450px)/2 + 16px));background:#0764A9!important}
body.hp-booking-plugin-page .hp-public-hero>div:first-child{text-align:left;max-width:735px}
body.hp-booking-plugin-page .hp-public-hero-actions{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0}
body.hp-booking-plugin-page .hp-public-hero .hp-public-incompany-note{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-style:italic;font-size:16px;font-weight:400;line-height:1.3;color:#fff!important;margin:0}
@media(max-width:900px){body.hp-booking-plugin-page .hp-public-hero{padding-left:32px;padding-right:32px}body.hp-booking-plugin-page .hp-public-hero-actions{align-items:flex-start}}
@media(max-width:650px){body.hp-booking-plugin-page .hp-public-hero{padding-left:16px;padding-right:16px}body.hp-booking-plugin-page .hp-public-hero .hp-public-incompany-note{font-size:14px}}

/* Course colour is a planner setting, independent of the theme's button colour. */
#hp-course-booking.hp-course-booking button.hp-public-event,
#hp-course-booking.hp-course-booking button.hp-public-event:hover,
#hp-course-booking.hp-course-booking button.hp-public-event:focus{background:var(--course,#0764A9)!important;background-image:none!important;color:var(--course-ink,#fff)!important;border-color:var(--course,#0764A9)!important}
#hp-course-booking.hp-course-booking button.hp-public-event span,
#hp-course-booking.hp-course-booking button.hp-public-event b,
#hp-course-booking.hp-course-booking button.hp-public-event i,
#hp-course-booking.hp-course-booking button.hp-public-event small,
#hp-course-booking.hp-course-booking button.hp-public-event em{color:var(--course-ink,#fff)!important;background:transparent!important}

/* Keep month and weekday labels together while the page scrolls through the calendar. */
#hp-course-booking .hp-public-calendar{overflow:visible}
#hp-course-booking .hp-public-calendar-head{position:sticky;top:var(--hp-booking-sticky-top,0px);z-index:30;background:#fff;border-radius:9px 9px 0 0;box-shadow:0 2px 3px #00000012}
#hp-course-booking .hp-public-month{background:#fff;border-radius:9px 9px 0 0}
#hp-course-booking .hp-public-week{background:#0764A9}
#hp-course-booking.hp-course-booking [data-incompany],#hp-course-booking.hp-course-booking [data-incompany]:hover,#hp-course-booking.hp-course-booking [data-incompany]:focus{background:#ffff00!important;background-image:none!important;color:#000!important;-webkit-text-fill-color:#000!important;border:1px solid #ffff00!important;box-shadow:none!important}

/* Readable course cards on phones; the desktop month grid stays intact. */
.hp-day-mobile-label,.hp-mobile-month-empty{display:none}
@media(max-width:650px){
 #hp-course-booking .hp-public-week{display:none}
 #hp-course-booking .hp-public-days{display:block;padding:0 10px 10px}
 #hp-course-booking .hp-public-day{display:none}
 #hp-course-booking .hp-public-day.has-courses:not(.is-muted){display:block;min-height:0;padding:14px 0 4px;border:0;background:#fff}
 #hp-course-booking .hp-day-number{display:none}
 #hp-course-booking .hp-day-mobile-label{display:inline;text-transform:capitalize}
 #hp-course-booking .hp-public-day time{font-size:14px;margin:0 0 8px;line-height:1.4}
 #hp-course-booking button.hp-public-event.is-mini{padding:12px;margin:0 0 10px;gap:5px;border-radius:8px;min-height:80px;overflow-wrap:normal;word-break:normal;text-transform:none;letter-spacing:normal}
 #hp-course-booking button.hp-public-event.is-mini span{font-size:13px;line-height:1.4;white-space:nowrap;letter-spacing:normal}
 #hp-course-booking button.hp-public-event.is-mini b{font-size:15px;line-height:1.4;letter-spacing:normal}
 #hp-course-booking button.hp-public-event.is-mini i{font-size:11px!important;line-height:1.4;letter-spacing:normal}
 #hp-course-booking .hp-mobile-month-empty{display:block;margin:14px;padding:12px;font-size:14px}
}