/**
 * Stylist business theme overrides.
 * Variables are set on :root by StylistThemeProvider from shopify-customer-connect API.
 */
:root {
  --stylist-primary: #dbedeb;
  --stylist-secondary: #0d5a61;
  --stylist-tertiary: #0d5a61;
}

/* CTA / solid actions — secondary (enabled only) */
.booking-wrapper .continue-btn:not(.disabled):not(.no):not(.re-sch),
.booking-wrapper .common_btn:not(.disabled):not(.rebook-btn):not(.re-sch),
.booking-wrapper .step_3 .timings .morning ul li.active,
.booking-wrapper .step_3 .Calender-picker .CalendarDay__selected,
.booking-wrapper .step_3 .Calender-picker .CalendarDay__selected:active,
.booking-wrapper .step_3 .Calender-picker .CalendarDay__selected:hover,
.Bookings .thanks-bottom .view-detail,
.Bookings .order-status-wrapper .outer-history ul li.active,
.cancel-popup .cancel-buttons span + span,
.pay-popup-outer .pay-popup .close-btn:not(.close-btn-1) {
  background: var(--stylist-secondary) !important;
  background-color: var(--stylist-secondary) !important;
  border-color: var(--stylist-secondary) !important;
  color: #fff !important;
}

.booking-wrapper .continue-btn:not(.disabled):not(.no):not(.re-sch) {
  color: #fef8f8 !important;
}

/* Disabled CTA (e.g. no services selected) — primary surface, secondary label */
.booking-wrapper .continue-btn.disabled,
.booking-wrapper button.common_btn.disabled {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: var(--stylist-secondary) !important;
  cursor: not-allowed;
  opacity: 0.95;
}

/* Payment modes — add new card */
.booking-wrapper.payment_modes .add-new-card {
  color: var(--stylist-secondary) !important;
}

/* Re-book past appointment — text link (matches pre-theme layout) */
.booking-wrapper .common_btn.rebook-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--stylist-secondary) !important;
}

/* Soft surfaces — primary */
.booking-wrapper .address.active,
.sign_up_screen .country-list-outer .country-list > div:hover,
.sign_up_screen .country-list-outer .country-list .active {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
}

/* Cancel booking / reschedule — secondary label on primary surface */
.thankyou .buttons .continue-btn.re-sch,
.thankyou .buttons .common_btn.re-sch,
.thankyou .buttons a.continue-btn.re-sch {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: var(--stylist-secondary) !important;
}

/* Add card popup — No */
.pay-popup-outer .payment-method .buttons .no,
.booking-wrapper .payment-method .buttons .no {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: var(--stylist-secondary) !important;
}

/* Add card popup — Yes */
.pay-popup-outer .payment-method .buttons .yes,
.booking-wrapper .payment-method .buttons .yes {
  background: var(--stylist-secondary) !important;
  background-color: var(--stylist-secondary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: #fff !important;
}

/* Delete card popup — Yes */
.pay-popup-outer .pay-popup .close-btn-delete .close-btn.close-btn-1 {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: var(--stylist-secondary) !important;
}

/* Cancel booking confirmation popup — Yes */
.cancel-popup .cancel-buttons > span:first-child {
  background: var(--stylist-primary) !important;
  background-color: var(--stylist-primary) !important;
  border: 1px solid var(--stylist-secondary) !important;
  color: var(--stylist-secondary) !important;
}

/* Booking confirmation header — full-bleed banner, centered content */
.thankyou .thankyou-inner .thanks-top .msg-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0 -20px !important;
  width: calc(100% + 40px);
  max-width: none;
  background: var(--stylist-primary) !important;
  background-image: none !important;
}

.booking-wrapper .thankyou .thankyou-inner .thanks-top .msg-box span,
.thankyou .thankyou-inner .thanks-top .msg-box span {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  text-align: center !important;
  color: var(--stylist-secondary) !important;
}

.thankyou .thankyou-inner .thanks-top .msg-box b {
  width: 100%;
  max-width: 100%;
  text-align: center !important;
  color: var(--stylist-secondary) !important;
}

.booking-wrapper .thankyou .thankyou-inner .thanks-top .msg-box img {
  display: block;
  text-align: center;
  max-width: 52px;
  width: 100%;
}

.thankyou .thankyou-inner .thanks-top .msg-box img {
  display: block;
  width: auto;
  max-width: 52px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.booking-wrapper .thankyou .thankyou-inner .thanks-top .msg-box img[src*="cancell-icon"],
.thankyou .thankyou-inner .thanks-top .msg-box img[src*="cancell-icon"] {
  width: auto;
  max-width: 52px;
  margin: 0 !important;
  padding: 0 !important;
}

.thankyou .confirm-booking-icon {
  display: block;
  flex-shrink: 0;
  width: 52px;
  height: 64px;
  margin: 45px 0 29px;
  background-color: var(--stylist-secondary);
  -webkit-mask-image: url(/assets/images/confirm-icon.svg);
  mask-image: url(/assets/images/confirm-icon.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Cancelled / other status banners — primary fill, centered copy */
.thankyou.cancelled-booking .thankyou-inner .thanks-top .msg-box,
.thankyou.reshd-booking .thankyou-inner .thanks-top .msg-box {
  background-image: none !important;
  background-color: var(--stylist-primary) !important;
}

/* Accents / secondary actions — tertiary */
.booking-wrapper .step_1 .fetched-booking-data .pop-address b,
.booking-wrapper .step_1 .pop-address b,
.appointment-summery ul li a,
.service-summery ul li a,
.otp_screen .otp_number p.resend_msg b,
.transction_history_list li b,
.mbl-booking-box p {
  color: var(--stylist-tertiary) !important;
}

.Toastify .Toastify__toast-container .Toastify__toast--success {
  background-color: var(--stylist-secondary) !important;
}

/* Location step — active radio (replaces green-color-radio.svg) */
.booking-wrapper .address.active .radio-btn-img {
  background: none !important;
  background-color: transparent !important;
  border: 2px solid var(--stylist-secondary);
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
}

.booking-wrapper .address.active .radio-btn-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stylist-secondary);
  transform: translate(-50%, -50%);
}

/* Services step — active checkbox-style control (replaces green-color-checkbox.svg) */
.booking-wrapper .step_2 .address.active .radio-btn-img {
  background: var(--stylist-secondary) !important;
  background-image: none !important;
  border: none;
  border-radius: 50%;
  position: relative;
}

.booking-wrapper .step_2 .address.active .radio-btn-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  background: transparent;
  border-radius: 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Payment saved-card radios */
.booking-wrapper .custom_checkbox input:checked ~ .checkmark:before {
  border-color: var(--stylist-secondary) !important;
}

.booking-wrapper .custom_checkbox input:checked ~ .checkmark:after {
  background: var(--stylist-secondary) !important;
}

/* Signup T&C and email opt-in checkboxes */
.booking-wrapper .terms_agree input:checked ~ .checkmark:before,
.booking-wrapper .send_email input:checked ~ .checkmark:before {
  background: var(--stylist-secondary) !important;
}

/* Country picker active row (replaces green-tick.svg) */
.booking-wrapper .sign_up_screen .country-list-outer .country-list .active {
  background-image: none !important;
  position: relative;
}

.booking-wrapper .sign_up_screen .country-list-outer .country-list .active::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 6px;
  height: 10px;
  border: solid var(--stylist-secondary);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
}

/* Generic radio-item pattern */
.booking-wrapper .radio-item input[type="radio"]:checked + label:after {
  background: var(--stylist-secondary) !important;
}