/* ==========================================================================
   JAX AUTO DETAILING — SimplyBook booking page
   Paste into Custom CSS > "Booking pages CSS", then Save CSS.

   Palette (identical to jaxautodetailing.com):
     ink        #0C0E12     amber        #F59E0B
     carbon     #1D222B     amber dark   #D97706
     paper      #FAF8F4     ink text     #171C23
     line       #E7E2D9     body text    #47505B

   Selectors were read off your live booking page, not guessed. If any rule
   does nothing, that section of the theme uses a different class: say which
   part did not change and it is a one-line fix.
   ========================================================================== */

:root {
  --jax-ink: #0c0e12;
  --jax-carbon: #1d222b;
  --jax-amber: #f59e0b;
  --jax-amber-dark: #d97706;
  --jax-paper: #faf8f4;
  --jax-ink-text: #171c23;
  --jax-body: #47505b;
  --jax-line: #e7e2d9;
}

/* --------------------------------------------------------------------------
   1. HEADER LOGO
   The default renders it small. Give it real presence.
   -------------------------------------------------------------------------- */
.brand img,
.company-name img {
  max-height: 56px !important;
  width: auto !important;
}

/* --------------------------------------------------------------------------
   2. BANNER OVERLAY
   Your company name and the two buttons sit on top of the banner image.
   Make the text legible over the photo and stop the buttons colliding
   with the line above them.
   -------------------------------------------------------------------------- */
.company-name,
.company-name a {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.company-location,
.company-location--caption {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* breathing room so the buttons never sit on the tagline */
.company-location--row,
.book-btn-container,
.booking-btns {
  margin-top: 18px !important;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   Amber fill with INK text, which is how every button on the website looks.
   Dark text on amber is also the only combination that passes contrast.
   -------------------------------------------------------------------------- */
.btn,
.btn.book,
#book-btn,
.btn.custom,
.btn-primary,
.btn--primary,
#events input.reserve_time_btn {
  background-color: var(--jax-amber) !important;
  border-color: var(--jax-amber) !important;
  color: var(--jax-ink) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn:hover,
.btn.book:hover,
#book-btn:hover,
.btn.custom:hover,
.btn-primary:hover,
.btn--primary:hover,
#events input.reserve_time_btn:hover {
  background-color: var(--jax-amber-dark) !important;
  border-color: var(--jax-amber-dark) !important;
  color: var(--jax-ink) !important;
  transform: translateY(-1px);
}

/* secondary / outline buttons stay quiet */
.btn-default,
.btn--primary-outline,
.btn.btn-link,
.back-button,
.back-to-services {
  background-color: transparent !important;
  border: 1px solid var(--jax-line) !important;
  color: var(--jax-ink-text) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.btn-default:hover,
.btn--primary-outline:hover,
.back-button:hover,
.back-to-services:hover {
  border-color: var(--jax-amber-dark) !important;
  color: var(--jax-amber-dark) !important;
}

/* destructive actions must not be amber */
.btn-danger {
  background-color: #b3261e !important;
  border-color: #b3261e !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. CARDS: services, categories, providers
   White card, hairline border, 16px radius, no shadow. Lift on hover.
   Matches the service cards on the website exactly.
   -------------------------------------------------------------------------- */
.item.panel,
.provider-item,
.provider-item.item,
#events .item,
.items-wrapper .item {
  background-color: #ffffff !important;
  border: 1px solid var(--jax-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.item.panel:hover,
.provider-item:hover,
#events .item:hover,
.items-wrapper .item:hover {
  border-color: var(--jax-amber) !important;
  transform: translateY(-2px);
}

/* the chosen service */
#events .selectedEvent,
.item.panel.selected,
.provider-item.selected {
  border: 2px solid var(--jax-amber) !important;
  background-color: #fdf3e3 !important;
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   Heavier headings with tighter tracking, the way the website reads.
   -------------------------------------------------------------------------- */
h1, h2, h3,
.header-title,
#events h3 {
  color: var(--jax-ink-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

/* service duration: quiet supporting detail */
#events p.duration,
#events div.duration,
.provider-time {
  color: var(--jax-body) !important;
  font-size: 0.9375rem !important;
}

/* price: the number should carry weight */
.price,
.bar-flex-item.price,
.service-deposit,
#events .price {
  color: var(--jax-ink-text) !important;
  font-weight: 800 !important;
}

#events p.description,
#events div.description {
  color: var(--jax-body) !important;
  line-height: 1.6 !important;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION
   Amber underline on the active tab instead of the theme default.
   -------------------------------------------------------------------------- */
.nav-item.active,
.nav-item.active a {
  color: var(--jax-ink-text) !important;
  border-bottom: 2px solid var(--jax-amber) !important;
}

.nav-item a:hover {
  color: var(--jax-amber-dark) !important;
}

/* --------------------------------------------------------------------------
   7. PAGE SURFACES
   Warm paper instead of the cold default grey.
   -------------------------------------------------------------------------- */
body,
.section {
  background-color: var(--jax-paper);
}

#about-us,
#contacts,
#hours,
#index_about_us_part,
#index_contacts_part {
  background-color: #ffffff !important;
  border: 1px solid var(--jax-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   8. TIME SLOTS
   Open time glows faintly amber, taken time recedes.
   -------------------------------------------------------------------------- */
.available,
.grid-weekly-available-slots {
  background-color: #fdf3e3 !important;
  color: var(--jax-ink-text) !important;
}

.available:hover {
  background-color: var(--jax-amber) !important;
  color: var(--jax-ink) !important;
}

/* --------------------------------------------------------------------------
   9. FOCUS STATES
   Keyboard users get an amber ring, never a browser-blue one.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--jax-amber) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   10. MOBILE
   Most of your bookings will happen on a phone in a driveway.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .btn,
  .btn.book,
  #book-btn {
    width: 100%;
    min-height: 48px;
  }

  .company-name {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .item.panel,
  .provider-item {
    transition: none !important;
    transform: none !important;
  }
}