/* Callinico Winery: SimplyBook booking page, "Hugo" theme.
   Matches the new website: cellar-book palette, Alegreya headings, Source Sans 3 text, one wine-red accent. */

@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  --cw-bg: #eef0e9;
  --cw-surface: #f7f8f3;
  --cw-ink: #1d2719;
  --cw-muted: #586353;
  --cw-line: #cdd3c1;
  --cw-field: #76806e;
  --cw-accent: #821229;
  --cw-gold: #7a6128;
  --cw-display: "Alegreya", Georgia, "Times New Roman", serif;
  --cw-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Base */
body {
  background: var(--cw-bg) !important;
  color: var(--cw-ink) !important;
  font-family: var(--cw-body) !important;
}
/* Keep the theme photo on the home page; booking steps sit on the plain page colour. */
#main, #main-content, #sb_content { background: transparent !important; }
#sb-timeline { background: var(--cw-bg) !important; }
#sb-main-container:has(#sb-timeline), #sb-main-container:has(#sb-timeline) #main { background-image: none !important; background-color: var(--cw-bg) !important; }
#main_buttons_book_btn, a.main_btn {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: #ffffff !important;
  font-family: var(--cw-body) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}
body p, body li, body label, body input, body select, body textarea, body .tab-pd { font-family: var(--cw-body) !important; }
a { color: var(--cw-accent) !important; }

/* Headings */
h1, h2, h3, h4, .title-main, .title, .service-item .title, .modal-title {
  font-family: var(--cw-display) !important;
  font-weight: 500 !important;
  color: var(--cw-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.title-main { font-size: 2.2rem !important; margin-bottom: 18px !important; }
#main #main-content #sb_content .title-main, #sb_booking_content .title-main, #sb_booking_header, #sb_booking_header * { color: var(--cw-ink) !important; }
#time-settings, #time-settings *, .sb_timeline_tow_wrap, .sb_timeline_tow_wrap * { color: var(--cw-muted) !important; }

/* Header */
#header, #header .header_nav_wrap, #header .nav_top {
  background: var(--cw-bg) !important;
  border-bottom: 1px solid var(--cw-line) !important;
  box-shadow: none !important;
}
#header .nav a, #sb_menu_list_items_container a {
  color: var(--cw-muted) !important;
  font-family: var(--cw-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
#header .nav a:hover, #sb_menu_list_items_container .active a { color: var(--cw-ink) !important; }

/* Step bar */
#steps-nav, #sb_booking_info, .booking-info { background: var(--cw-bg) !important; border: 0 !important; }
.step_info_item .title-small { font-family: var(--cw-body) !important; font-weight: 600 !important; color: var(--cw-muted) !important; text-transform: none !important; }
.step_info_item.active .title-small { color: var(--cw-ink) !important; }
.step_info_item.active { border-bottom: 2px solid var(--cw-accent) !important; }
.step_info_item .title-sub { color: var(--cw-gold) !important; }

/* Tasting cards */
.service-item .tab, .service-item .tab-col {
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.service-item .tab:hover { border-color: var(--cw-ink) !important; }
.service-item .tab-pd { color: var(--cw-ink) !important; line-height: 1.55 !important; }

/* Prices and deposits */
.badge.price {
  background: transparent !important;
  color: var(--cw-accent) !important;
  font-family: var(--cw-display) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  border: 0 !important;
}
.badge-deposit, .price-deposit {
  background: transparent !important;
  color: var(--cw-gold) !important;
  font-family: var(--cw-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

/* Buttons */
.btn, .btn.select, button.btn, .sb-btn {
  background: var(--cw-accent) !important;
  border: 1px solid var(--cw-accent) !important;
  color: #ffffff !important;
  font-family: var(--cw-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  min-height: 44px;
  box-shadow: none !important;
}
.btn:hover, .btn.select:hover { background: #6c0f22 !important; border-color: #6c0f22 !important; }
#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .item .btn-bar .select,
.tab.tab-col .excerpt-info .btn-bar .btn {
  background: var(--cw-accent) !important;
  border: 1px solid var(--cw-accent) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}
.btn-bar .btn.select a, .btn-bar .btn a { color: #ffffff !important; font-family: var(--cw-body) !important; font-weight: 700 !important; text-transform: none !important; }
.btn-bar .btn.select:hover { background: #6c0f22 !important; border-color: #6c0f22 !important; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cw-accent) !important;
  outline-offset: 2px !important;
}

/* Calendar and time slots */
.ui-datepicker, .calendar, #sb_date_container { background: var(--cw-surface) !important; color: var(--cw-ink) !important; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight,
.slot.selected, .timeslot.selected, .sb-time-slot.selected {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: #ffffff !important;
}

/* Form fields */
input, select, textarea, .form-control {
  background: #ffffff !important;
  color: var(--cw-ink) !important;
  border: 1px solid var(--cw-field) !important;
  border-radius: 4px !important;
  min-height: 44px;
  box-shadow: none !important;
}

/* Footer */
#footer { background: var(--cw-bg) !important; color: var(--cw-muted) !important; border-top: 1px solid var(--cw-line) !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Home page title sits on the cellar photo: light text with a soft shadow. */
#main #main-content #sb_content #main_description .title-main, #main_description h1, #main_description h2 { color: #ffffff !important; text-shadow: 0 2px 16px rgba(0,0,0,.55) !important; }