/* Modern Responsive CSS for MotoPress Appointment Booking (mpa-*) */

/* --- GLOBAL WRAPPER --- */
.mpa-shortcode {
--mpa-primary: #2B5F77; /* lightened primary */ /* Primary */
--mpa-primary-dark: #004B6B; /* soft dark variant */ /* darker shade */
--mpa-primary-hover: #5b8293;
--mpa-border: #D5D9C3; /* lighter neutral border */ /* neutral border */
--mpa-bg: #FAF7F0; /* lighter accent background */ /* Accent background */
--mpa-radius: 12px;
--mpa-transition: .25s ease;
}

/* --- INPUTS & SELECTS --- */
.mpa-shortcode input,
.mpa-shortcode select,
.mpa-shortcode textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-radius);
  background: white;
  font-size: 15px;
  transition: var(--mpa-transition);
  box-sizing: border-box;
}

.mpa-shortcode input:focus,
.mpa-shortcode select:focus,
.mpa-shortcode textarea:focus {
  border-color: var(--mpa-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  outline: none;
}

/* --- BUTTONS --- */
.mpa-shortcode .mpa-actions {
    display: flex;
    gap: .5rem;
    justify-content: right;
}

.mpa-shortcode .mpa-actions button {
}

.mpa-shortcode button,
.mpa-shortcode .button {
  padding: 12px 20px;
  border-radius: var(--mpa-radius);
  border: none;
  background: var(--mpa-primary);
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: var(--mpa-transition);
}

.mpa-shortcode button:hover,
.mpa-shortcode .button:hover {
  background: var(--mpa-primary-hover);
}

/* Disabled buttons */
.mpa-shortcode button[disabled],
.mpa-shortcode .button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* --- CALENDAR WRAPPER --- */
.flatpickr-calendar {
  border-radius: var(--mpa-radius) !important;
  border: 1px solid var(--mpa-border) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.08) !important;
  padding: 10px !important;
}

/* Month nav */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Calendar days */
.flatpickr-day {
  border-radius: var(--mpa-radius) !important;
  transition: var(--mpa-transition) !important;
}

.flatpickr-day:hover {
  background: var(--mpa-primary) !important;
  color: white !important;
}

.flatpickr-day.today {
  border-color: var(--mpa-primary) !important;
}

.flatpickr-day.selected {
  background: var(--mpa-primary) !important;
  border-color: var(--mpa-primary) !important;
  color: white !important;
}

/* --- TIME SLOTS (IF ANY) --- */
.mpa-slot,
.mpa-booking-slot {
  padding: 12px 16px;
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-radius);
  background: white;
  cursor: pointer;
  transition: var(--mpa-transition);
}

.mpa-slot:hover,
.mpa-booking-slot:hover {
  border-color: var(--mpa-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.mpa-slot.selected,
.mpa-booking-slot.selected {
  background: var(--mpa-primary);
  color: white;
  border-color: var(--mpa-primary);
}

button.button-secondary.mpa-time-period {
    background: var(--mpa-bg);
    color: var(--mpa-primary-dark);
    border: solid 2px;
    border-color: var(--mpa-primary);
}


button.button-secondary.mpa-time-period.mpa-time-period-selected,
button.button-secondary.mpa-time-period:hover{
    background: var(--mpa-primary);
    color: #fcfcfc;
    border: solid 2px;
    border-color: var(--mpa-primary);
}
/* --- STEPS / SECTION SPACING --- */
.mpa-booking-step {
  margin-bottom: 25px;
  padding: 20px;
  background: var(--mpa-bg);
  border-radius: var(--mpa-radius);
}

/* Hidden steps */
.mpa-hide { display: none !important; }

/* --- LOADING --- */
.mpa-loading {
  opacity: .5;
  pointer-events: none;
}

/* --- SUMMARY / REVIEW --- */
.mpa-summary,
.mpa-step-booking-summary {
  background: white;
  padding: 20px;
  border-radius: var(--mpa-radius);
  border: 1px solid var(--mpa-border);
}

/* Make checkbox + label text inline and aligned */
.mpa-terms-and-conditions-accept .mpa-input-wrapper label {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    cursor: pointer;
}

/* Style the checkbox */
.mpa-terms-and-conditions-accept .mpa-accept-terms {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mpa-primary); /* uses your color palette */
}

/* Ensure the link inherits styling */
.mpa-terms-and-conditions-accept a.mpa-terms-and-conditions-link {
    text-decoration: underline;
    color: #E95339; /* your brand secondary CTA */
}

/* Keep the required (*) aligned properly */
.mpa-terms-and-conditions-accept strong {
    font-weight: 600;
}

/* Hide cart prices for now */
.mpa-checkout-section.mpa-order-details,
.mpa-cart-total {
    display: none;
}

/* Reservation cancellation page */
.mpa-booking-details .mpa-booking-details-section.booking-info .booking-total-price,
.mpa-booking-details .mpa-booking-details-section.booking-info .booking-total-paid {
    display: none !important;
}

.mpa-booking-details-section.booking-invoice {
    display: none !important;
}

.mpa-shortcode.mpa-direct-link-booking-cancellation-link-shortcode.mpa-direct-link-action-shortcode > p {
    text-align: end !important;
}

.mpa-booking-details {
    background-color: #FAF7F0;
    border-radius: 10px;
    padding: 1rem;
}

abbr[title] {
    text-decoration: none;
    color: #E95339;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 100% !important;
  }
  .mpa-actions button {
    width: 100%;
    margin-top: 10px;
  }
}