/* ==========================================================================
   SJOLIE BRAND DESIGN SYSTEM — Booking Page Override
   MySunless.com CRM — Option A: Classic Salon

   This file overrides the default Book-now.php styles with the Sjolie brand
   design language. Loaded AFTER all existing stylesheets.

   Last updated: 2026-03-22
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
  --sjolie-espresso: #3a2d27;
  --sjolie-deep: #4e3629;
  --sjolie-mocha: #6b5a50;
  --sjolie-caramel: #b4926e;
  --sjolie-sand: #dcbfa6;
  --sjolie-pearl: #f3ece3;
  --sjolie-cream: #fbfbf8;
  --sjolie-white: #ffffff;
  --sjolie-border: #e8ddd4;
  --sjolie-terracotta: #c47a5a;
  --sjolie-serif: "Playfair Display", Georgia, serif;
  --sjolie-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ==========================================================================
   1. BASE / BODY / PAGE BACKGROUND
   ========================================================================== */

body.mysunlessD,
body.skin-default.fixed-layout.mysunlessD {
  background-color: var(--sjolie-cream) !important;
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide preloader label — branding should not show on public booking pages */
.preloader .loader__label {
  display: none !important;
}

.preloader .loader__figure {
  border-top-color: var(--sjolie-caramel) !important;
}


/* ==========================================================================
   2. MAIN WRAPPER / REGISTER BOX
   ========================================================================== */

#wrapper,
#wrapper.step-register {
  width: 100% !important;
  background: transparent !important;
}

.register-box {
  max-width: 720px !important;
  margin: 0 auto !important;
  background: transparent !important;
  padding-top: 48px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}


/* ==========================================================================
   3. COMPANY HEADER / LOGO / NAME
   ========================================================================== */

.CompanyImage {
  text-align: center !important;
  padding: 0 25px 32px !important;
}

/* Logo: elegant circle with subtle border */
.CompanyImage .newlogo {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sjolie-border) !important;
  padding: 0 !important;
  object-fit: cover !important;
  transition: border-color 0.3s ease !important;
}

.CompanyImage .newlogo:hover {
  border-color: var(--sjolie-caramel) !important;
}

/* Hide broken logo when no image uploaded */
.CompanyImage .newlogo[src=""],
.CompanyImage .newlogo[src*="mylog.png"] {
  display: none !important;
}

/* Company name */
.companyNamediv {
  font-family: var(--sjolie-serif) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--sjolie-espresso) !important;
  margin: 16px 0 8px !important;
  line-height: 1.15 !important;
}


/* ==========================================================================
   4. TABS (About / Schedule Appointment)
   ========================================================================== */

.tab {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 40px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
}

.tab button.tablinks {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

.tab button.tablinks:hover {
  background: none !important;
  color: var(--sjolie-espresso) !important;
}

.tab button.tablinks.active {
  background: none !important;
  color: var(--sjolie-espresso) !important;
}

.tab button.tablinks.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--sjolie-caramel) !important;
}


/* ==========================================================================
   5. PROGRESS STEPS (#eliteregister)
   ========================================================================== */

#eliteregister {
  max-width: 600px !important;
  margin: 0 auto 40px !important;
  padding: 0 !important;
  counter-reset: step !important;
  display: flex !important;
  overflow: visible !important;
}

#eliteregister li {
  list-style-type: none !important;
  color: var(--sjolie-sand) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  width: 33.33% !important;
  float: left !important;
  position: relative !important;
  text-align: center !important;
}

#eliteregister li::before {
  content: counter(step) !important;
  counter-increment: step !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sjolie-mocha) !important;
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 50% !important;
  margin: 0 auto 8px !important;
  position: relative !important;
  z-index: 2 !important;
}

#eliteregister li::after {
  content: '' !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--sjolie-border) !important;
  position: absolute !important;
  left: -50% !important;
  top: 18px !important;
  z-index: 1 !important;
}

#eliteregister li:first-child::after {
  content: none !important;
}

/* Active step */
#eliteregister li.active {
  color: var(--sjolie-espresso) !important;
}

#eliteregister li.active::before {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border-color: var(--sjolie-espresso) !important;
}

#eliteregister li.active::after {
  background: var(--sjolie-caramel) !important;
}


/* ==========================================================================
   6. FORM / FIELDSETS
   ========================================================================== */

#NewEvent {
  max-width: 720px !important;
  margin: 0 auto !important;
}

#NewEvent fieldset {
  background: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 48px 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 32px !important;
  box-sizing: border-box !important;
}

/* Titles */
.fs-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--sjolie-espresso) !important;
  text-transform: none !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.fs-subtitle {
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
  margin-bottom: 32px !important;
}

/* Decorative divider after title */
.fs-title::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: var(--sjolie-caramel) !important;
  margin: 16px auto 0 !important;
}


/* ==========================================================================
   7. FORM INPUTS / SELECTS / TEXTAREAS
   ========================================================================== */

#NewEvent input[type="text"],
#NewEvent input[type="email"],
#NewEvent input[type="tel"],
#NewEvent input[type="number"],
#NewEvent input[type="date"],
#NewEvent input[type="time"],
#NewEvent select,
#NewEvent textarea,
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="tel"],
.modal-content select,
.modal-content textarea {
  border: 1px solid var(--sjolie-border) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  color: var(--sjolie-espresso) !important;
  background: var(--sjolie-white) !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  transition: border-color 0.3s ease !important;
  font-weight: 300 !important;
  box-shadow: none !important;
  height: auto !important;
}

#NewEvent input:focus,
#NewEvent select:focus,
#NewEvent textarea:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--sjolie-espresso) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Placeholder text — darker per user request */
#NewEvent input::placeholder,
.modal-content input::placeholder {
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
  opacity: 0.7 !important;
}

/* Form hints and helper text — darker per user request */
.form-text.text-muted,
small.form-text,
small#emailHelp,
.form-hint {
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  opacity: 0.8 !important;
}

/* Labels */
#NewEvent label,
.modal-content label,
#NewEvent .form-group label {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Label spans (help text inside labels) */
#NewEvent label span.help,
.modal-content label span.help {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 500 !important;
}

/* Form control override (bootstrap) */
.form-control {
  background-color: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}

/* Input group prepend (dollar sign, duration label) */
.input-group-prepend span,
.input-group-text {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
}

/* Read-only fields */
input#CostOfService,
input#duration {
  background-color: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  color: var(--sjolie-espresso) !important;
}

/* Select2 overrides */
.select2-container .select2-selection--single {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  height: 46px !important;
  background: var(--sjolie-white) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 46px !important;
  padding: 0 16px !important;
}

.select2-container .select2-selection__arrow {
  top: 10px !important;
  right: 12px !important;
}

.select2-dropdown {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(58, 45, 39, 0.08) !important;
}

.select2-results__option {
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  color: var(--sjolie-mocha) !important;
  padding: 10px 16px !important;
}

.select2-results__option--highlighted {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
}

.select2-search__field {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  background-color: var(--sjolie-white) !important;
}

/* Validation states */
#NewEvent input.fieldinvalid,
#NewEvent textarea.fieldinvalid {
  background-color: rgba(196, 122, 90, 0.1) !important;
  border-color: var(--sjolie-terracotta) !important;
}

label.fieldinvalid {
  color: var(--sjolie-terracotta) !important;
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

/* Primary action buttons */
#NewEvent .action-button,
#NewEvent input.action-button,
input#ConfirmAppointment,
#NewEvent input[type="button"].btn-info,
.btn.btn-info {
  background-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  box-shadow: none !important;
  width: auto !important;
}

#NewEvent .action-button:hover,
#NewEvent input.action-button:hover,
input#ConfirmAppointment:hover,
.btn.btn-info:hover {
  background-color: var(--sjolie-caramel) !important;
  box-shadow: none !important;
  color: var(--sjolie-cream) !important;
}

#NewEvent .action-button:focus,
#NewEvent input.action-button:focus {
  box-shadow: none !important;
}

/* Login/Continue button */
input#btnCProfile {
  background-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  font-weight: 400 !important;
  width: 100% !important;
  margin: 16px 0 !important;
  transition: background-color 0.3s ease !important;
}

input#btnCProfile:hover {
  background-color: var(--sjolie-caramel) !important;
}

/* Create Profile / Secondary button */
#create_profile,
.btn-outline-warning,
.btn.btn-outline-warning {
  background: transparent !important;
  color: var(--sjolie-espresso) !important;
  border: 1.5px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  font-weight: 400 !important;
  transition: all 0.3s ease !important;
}

#create_profile:hover,
.btn-outline-warning:hover {
  border-color: var(--sjolie-espresso) !important;
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
}

/* Back / Previous button */
.btn.btn-warning.previous,
span.btn.btn-warning {
  background: transparent !important;
  color: var(--sjolie-espresso) !important;
  border: 1.5px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  font-weight: 400 !important;
  transition: all 0.3s ease !important;
}

.btn.btn-warning.previous:hover {
  border-color: var(--sjolie-espresso) !important;
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
}

/* Edit customer button */
#editcustomer,
.btn.btn-warning.btn-sm {
  background: transparent !important;
  color: var(--sjolie-espresso) !important;
  border: 1px solid var(--sjolie-caramel) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

#editcustomer:hover {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border-color: var(--sjolie-espresso) !important;
}

/* Disabled state */
.disabled,
.btn.disabled {
  background-color: var(--sjolie-sand) !important;
  color: var(--sjolie-white) !important;
  cursor: not-allowed !important;
}

/* Outline Primary (Login button) */
.btn-outline-primary {
  background: transparent !important;
  color: var(--sjolie-espresso) !important;
  border: 1.5px solid var(--sjolie-espresso) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}

.btn-outline-primary:hover {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
}


/* ==========================================================================
   9. CLIENT PROFILE CARD (Step 2)
   ========================================================================== */

#clinetdetails {
  display: block !important;
  padding: 16px !important;
  background: transparent !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
}

#clinetdetails .col-md-3 {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
}

#clinetdetails .col-md-5 {
  flex: 1 !important;
  width: auto !important;
  padding: 0 !important;
  text-align: left !important;
}

#clientimage,
.clientimage {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sjolie-border) !important;
  padding: 0 !important;
  object-fit: cover !important;
}

#clinetdetails label {
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 2px !important;
}

#clinetdetails #newname {
  font-family: var(--sjolie-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--sjolie-espresso) !important;
}


/* ==========================================================================
   10. WORKING HOURS / APPOINTMENT TIME
   ========================================================================== */

.appointment_time {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  background: var(--sjolie-white) !important;
}

.appointment_time h5 {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-caramel) !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
}

.appointment_time hr {
  border-color: var(--sjolie-border) !important;
  opacity: 0.5 !important;
}

.appointment_time ul li {
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--sjolie-pearl) !important;
  font-size: 13px !important;
}

.appointment_time ul li b {
  font-weight: 500 !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}

.appointment_time ul li p {
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-weight: 300 !important;
}


/* ==========================================================================
   11. TIME SLOTS
   ========================================================================== */

#time_slot {
  background: var(--sjolie-white) !important;
  padding: 20px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

#time_slot .time_slot_box {
  background: var(--sjolie-white) !important;
  color: var(--sjolie-mocha) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
  box-shadow: none !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

#time_slot .time_slot_box:hover {
  border-color: var(--sjolie-espresso) !important;
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
  box-shadow: none !important;
}

/* Selected time slot — override via JS class or inline style */
#time_slot .time_slot_box.active,
#time_slot .time_slot_box[style*="background"] {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border-color: var(--sjolie-espresso) !important;
}

.show_time_slot {
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  padding: 16px !important;
}

.time_slot_loader {
  border: 4px solid var(--sjolie-pearl) !important;
  border-top: 4px solid var(--sjolie-caramel) !important;
}


/* ==========================================================================
   12. CALENDAR FRAME
   ========================================================================== */

#calendar_frame {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  margin: 16px 0 !important;
}

#calendar_frame::-webkit-scrollbar-thumb {
  background: var(--sjolie-sand) !important;
  border-radius: 3px !important;
}

/* --- Calendar Widget (materialize calendar) --- */
.calendar-wrapper {
  border-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(58,45,39,0.08) !important;
  overflow: hidden !important;
}

.calendar-wrapper .header-background {
  background-color: var(--sjolie-espresso) !important;
}

.calendar-wrapper .calendar-header {
  background-color: var(--sjolie-espresso) !important;
}

.calendar-wrapper .calendar-header .header-title,
.calendar-wrapper .calendar-header .header-text,
.calendar-wrapper .calendar-header .header-text h3,
.calendar-wrapper .calendar-header .header-text h5,
.calendar-wrapper .calendar-header #month-name,
.calendar-wrapper .calendar-header #todayDayName,
.calendar-wrapper .header-background h3,
.calendar-wrapper .header-background h5 {
  color: var(--sjolie-white) !important;
  font-family: var(--sjolie-serif) !important;
}

.calendar-wrapper .prev-button,
.calendar-wrapper .next-button {
  color: var(--sjolie-sand) !important;
}

.calendar-wrapper .prev-button:hover,
.calendar-wrapper .next-button:hover {
  color: var(--sjolie-white) !important;
}

/* Day of week headers row */
.calendar-wrapper .calendar-content .row:first-child .col {
  color: var(--sjolie-white) !important;
  background-color: var(--sjolie-deep) !important;
  font-family: var(--sjolie-sans) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* Calendar day cells */
.calendar-wrapper .calendar-cells .col {
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-border) !important;
  transition: background-color 0.2s ease !important;
}

/* Empty / unavailable days — clearly marked as blocked */
.calendar-wrapper .calendar-cells .col.empty-day {
  background-color: #e8e0d8 !important;
  color: #b0a090 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  position: relative !important;
  text-decoration: line-through !important;
}
.calendar-wrapper .calendar-cells .col.empty-day::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #c0a898 !important;
  transform: translateY(-50%) !important;
}
}

/* Available days */
.calendar-wrapper .calendar-cells .col:not(.empty-day) {
  background-color: var(--sjolie-white) !important;
  cursor: pointer !important;
}

.calendar-wrapper .calendar-cells .col:not(.empty-day):hover {
  background-color: var(--sjolie-sand) !important;
  color: var(--sjolie-espresso) !important;
}

/* Selected/active day */
.calendar-wrapper .calendar-cells .col.active,
.calendar-wrapper .calendar-cells .col.selected,
.calendar-wrapper .calendar-cells .col:not(.empty-day).active {
  background-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
  font-weight: 700 !important;
}

/* Calendar footer */
.calendar-wrapper .calendar-footer,
.calendar-footer,
#emptyForm,
.emptyForm,
.sidebar-wrapper,
.sidebar-events,
.sidebar-title {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Calendar "Add Event" form area */
.calendar-wrapper .addForm,
.calendar-wrapper .addEvent {
  background-color: var(--sjolie-cream) !important;
}

.calendar-wrapper .addForm .btn,
.calendar-wrapper .addEvent .btn {
  background-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: var(--sjolie-sans) !important;
}

.calendar-wrapper .addForm .btn.grey,
.calendar-wrapper .addEvent .btn.grey {
  background-color: var(--sjolie-pearl) !important;
  color: var(--sjolie-mocha) !important;
}

/* Override materialize blue/lighten classes inside calendar */
.calendar-wrapper .btn.blue,
.calendar-wrapper .btn.blue.lighten-2 {
  background-color: var(--sjolie-caramel) !important;
}


/* --- Client Profile Card (#clinetdetails) --- */
#clinetdetails {
  background-color: transparent !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  padding: 16px !important;
}

#clinetdetails label {
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-espresso) !important;
  font-size: 13px !important;
}

#clinetdetails b,
#clinetdetails strong {
  color: var(--sjolie-espresso) !important;
  font-weight: 600 !important;
}

#clinetdetails #editcustomer {
  background-color: transparent !important;
  color: var(--sjolie-espresso) !important;
  border: 1px solid var(--sjolie-espresso) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 500 !important;
  padding: 4px 16px !important;
  box-shadow: none !important;
}

#clinetdetails #editcustomer:hover {
  background-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
}

/* Client avatar placeholder */
#clinetdetails .clientimage,
#clinetdetails img[alt="No Image"] {
  border-radius: 50% !important;
  border: 2px solid var(--sjolie-border) !important;
  opacity: 0.5 !important;
}


/* --- Location Pill Buttons --- */
.sjolie-location-pills {
  text-align: center !important;
  margin: 12px 0 8px !important;
  display: block !important;
}

.sjolie-location-header {
  display: block !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--sjolie-mocha) !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.sjolie-pill-group {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

.sjolie-location-pills label.sjolie-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 14px 28px !important;
  border: 1.5px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  background-color: var(--sjolie-white) !important;
  transition: all 0.25s ease !important;
  min-width: 160px !important;
  width: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.sjolie-location-pills label.sjolie-pill:hover {
  border-color: var(--sjolie-caramel) !important;
  background-color: var(--sjolie-pearl) !important;
}

/* Hide the actual radio input */
.sjolie-pill input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Selected pill state */
.sjolie-pill input[type="radio"]:checked ~ .sjolie-pill-label,
.sjolie-pill input[type="radio"]:checked ~ .sjolie-pill-desc {
  color: var(--sjolie-white) !important;
}

.sjolie-location-pills label.sjolie-pill:has(input[type="radio"]:checked) {
  background-color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
}

.sjolie-pill-label {
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--sjolie-espresso) !important;
  transition: color 0.25s ease !important;
  line-height: 1.3 !important;
}

.sjolie-pill-desc {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--sjolie-mocha) !important;
  margin-top: 2px !important;
  transition: color 0.25s ease !important;
  line-height: 1.3 !important;
}

/* Override old location inline styles */
.location.sjolie-location-pills {
  display: block !important;
}

.location.sjolie-location-pills label {
  width: auto !important;
  margin-right: 0 !important;
}

.location.sjolie-location-pills .sjolie-pill-group {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Hide any lingering old location images */
.location img[src*="store_location"],
.location img[src*="homelocation"] {
  display: none !important;
}


/* ==========================================================================
   13. CONFIRMATION TABLE (#customer_bill)
   ========================================================================== */

#customer_bill,
#customer_bill td {
  border: none !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  font-family: var(--sjolie-sans) !important;
  text-align: left !important;
  padding: 14px 16px !important;
}

#customer_bill {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 24px 0 !important;
}

#customer_bill td:first-child {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 500 !important;
  width: 40% !important;
}

#customer_bill td:last-child {
  color: var(--sjolie-espresso) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* ==========================================================================
   14. LOCATION RADIO BUTTONS
   ========================================================================== */

.location {
  padding: 16px 0 !important;
}

.location label {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 500 !important;
}

.location label img {
  border-radius: 0 !important;
  transition: opacity 0.3s ease !important;
}

input[name='Location_radio']:checked + img {
  border-radius: 0 !important;
  border: 2px solid var(--sjolie-caramel) !important;
  padding: 1px !important;
}


/* ==========================================================================
   15. MODALS (Edit Profile, Notes, etc.)
   ========================================================================== */

.modal-content {
  background: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 40px rgba(58, 45, 39, 0.08) !important;
}

.modal-header {
  border-bottom: 1px solid var(--sjolie-border) !important;
  padding: 20px 28px !important;
  background: var(--sjolie-white) !important;
}

.modal-header .modal-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sjolie-espresso) !important;
}

.modal-body {
  padding: 28px !important;
  background: var(--sjolie-white) !important;
}

.modal-footer {
  border-top: 1px solid var(--sjolie-border) !important;
  padding: 16px 28px !important;
  background: var(--sjolie-white) !important;
}

/* Modal card_style class */
.card_style {
  background-color: var(--sjolie-white) !important;
}

/* Modal buttons */
.modal-content .btn.btn-info,
.modal-content .btn.waves-effect.btn-info {
  background-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.modal-content .btn.btn-danger,
.modal-content .btn.waves-effect.btn-danger {
  background: transparent !important;
  color: var(--sjolie-terracotta) !important;
  border: 1.5px solid var(--sjolie-terracotta) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.modal-content .btn.btn-danger:hover {
  background: var(--sjolie-terracotta) !important;
  color: var(--sjolie-white) !important;
}

.modal-content .btn.btn-default,
.modal-content .btn.btn-primary {
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}


/* ==========================================================================
   16. TABLES (Notes modal, generic)
   ========================================================================== */

.modal-content table,
.table {
  font-family: var(--sjolie-sans) !important;
  border-collapse: collapse !important;
}

.modal-content table thead th,
.table thead th {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid var(--sjolie-border) !important;
  background: var(--sjolie-pearl) !important;
}

.modal-content table tbody td,
.table tbody td {
  font-size: 14px !important;
  color: var(--sjolie-mocha) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  font-weight: 300 !important;
}

.modal-content table tbody tr:hover,
.table tbody tr:hover {
  background: var(--sjolie-pearl) !important;
}


/* ==========================================================================
   17. ALERTS (Success, Error, CSRF)
   ========================================================================== */

.alert-success {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-caramel) !important;
  color: var(--sjolie-espresso) !important;
  border-radius: 0 !important;
}

.alert-success .text-success {
  color: var(--sjolie-espresso) !important;
}

.alert-danger {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-terracotta) !important;
  color: var(--sjolie-espresso) !important;
  border-radius: 0 !important;
}

.alert-danger .text-danger {
  color: var(--sjolie-terracotta) !important;
}


/* ==========================================================================
   18. SERVICE DESCRIPTION
   ========================================================================== */

#EmailInstruction {
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}


/* ==========================================================================
   19. HR / DIVIDERS
   ========================================================================== */

#NewEvent hr,
.modal-content hr {
  border-top: 1px solid var(--sjolie-border) !important;
  margin: 24px 0 !important;
  opacity: 0.6 !important;
}


/* ==========================================================================
   20. ABOUT TAB (booking_aboutus.php)
   ========================================================================== */

#London {
  background: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  padding: 40px !important;
}

#London .owl-carousel .owl-item img {
  border-radius: 0 !important;
}

#London .listings {
  font-family: var(--sjolie-sans) !important;
}

#London .listing_content {
  border: 1px solid var(--sjolie-border) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#London .listing_content:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(58, 45, 39, 0.08) !important;
}

#London .listing_title strong {
  font-family: var(--sjolie-serif) !important;
  color: var(--sjolie-espresso) !important;
  font-weight: 400 !important;
}


/* ==========================================================================
   21. PAYMENT OPTIONS
   ========================================================================== */

.paymentoptions {
  border-top: 1px solid var(--sjolie-border) !important;
  padding-top: 25px !important;
}


/* ==========================================================================
   22. DROPIFY FILE UPLOAD
   ========================================================================== */

.dropify-wrapper {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  background: var(--sjolie-pearl) !important;
}


/* ==========================================================================
   23. AVATAR DROPDOWN
   ========================================================================== */

.dropdown_avatar_menu {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  background: var(--sjolie-white) !important;
  box-shadow: 0 4px 20px rgba(58, 45, 39, 0.08) !important;
}

.dropdown_avatar_menu::-webkit-scrollbar-thumb {
  background: var(--sjolie-sand) !important;
  border-radius: 3px !important;
}

button.dropdown_avatar {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}


/* ==========================================================================
   24. SERVICE PROVIDER ERROR
   ========================================================================== */

#serviceprovider_error {
  color: var(--sjolie-terracotta) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 12px !important;
}


/* ==========================================================================
   25. TEMPORARILY SHUT DOWN MESSAGE
   ========================================================================== */

.fa.fa-ban.text-danger {
  color: var(--sjolie-terracotta) !important;
}


/* ==========================================================================
   26. SMS CHECKBOX
   ========================================================================== */

.smscheckagree label {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
}


/* ==========================================================================
   27. SCROLLBAR (Global)
   ========================================================================== */

::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: var(--sjolie-cream) !important; }
::-webkit-scrollbar-thumb { background: var(--sjolie-sand) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--sjolie-caramel) !important; }


/* ==========================================================================
   28. POWERED BY FOOTER (optional future addition)
   ========================================================================== */

.sjolie-footer {
  text-align: center;
  padding: 40px 0;
  font-family: var(--sjolie-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sjolie-sand);
}

.sjolie-footer a {
  color: var(--sjolie-caramel);
  text-decoration: none;
}


/* ==========================================================================
   29. RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 767px) {
  .register-box {
    padding-top: 32px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #NewEvent fieldset {
    padding: 32px 20px !important;
  }

  .companyNamediv {
    font-size: 26px !important;
  }

  .tab button.tablinks {
    padding: 12px 20px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  #clinetdetails {
    flex-direction: column !important;
    text-align: center !important;
  }

  #clinetdetails .col-md-5 {
    text-align: center !important;
  }

  .fs-title {
    font-size: 20px !important;
  }
}

@media (max-width: 480px) {
  #NewEvent fieldset {
    padding: 24px 16px !important;
  }

  .tab button.tablinks {
    padding: 10px 16px !important;
    font-size: 9px !important;
  }

  #eliteregister li {
    font-size: 9px !important;
  }
}


/* ==========================================================================
   30. PRINT STYLES (confirmation print)
   ========================================================================== */

@media print {
  body {
    background: white !important;
  }

  .register-box {
    max-width: 100% !important;
  }

  #NewEvent fieldset {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}


/* ================================================
   SJOLIE SERVICE CARDS
   ================================================ */
.sjolie-service-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--sjolie-mocha) !important;
  margin-bottom: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-service-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.sjolie-service-card {
  border: 1.5px solid var(--sjolie-border) !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  background: var(--sjolie-white) !important;
  border-radius: 0 !important;
}

.sjolie-service-card:hover {
  border-color: var(--sjolie-caramel) !important;
  background: var(--sjolie-cream) !important;
}

.sjolie-service-card.selected {
  border-color: var(--sjolie-espresso) !important;
  background: var(--sjolie-pearl) !important;
}

.sjolie-sc-radio {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--sjolie-border) !important;
  border-radius: 50% !important;
  margin-right: 16px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  display: block !important;
}

.sjolie-service-card.selected .sjolie-sc-radio {
  border-color: var(--sjolie-espresso) !important;
}

.sjolie-service-card.selected .sjolie-sc-radio::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--sjolie-espresso) !important;
  border-radius: 50% !important;
  display: block !important;
}

.sjolie-sc-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.sjolie-sc-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
  margin-bottom: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-sc-duration {
  font-size: 12px !important;
  color: var(--sjolie-mocha) !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-sc-price {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
}

/* ================================================
   SJOLIE PROVIDER DROPDOWN
   ================================================ */
.sjolie-provider-section {
  margin-top: 4px !important;
}

.sjolie-provider-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--sjolie-mocha) !important;
  margin-bottom: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-provider-section select,
.sjolie-provider-section .select2-container--default .select2-selection--single {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  background: var(--sjolie-white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--sjolie-espresso) !important;
  height: 44px !important;
}

.sjolie-provider-section .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  color: var(--sjolie-espresso) !important;
}

.sjolie-provider-section .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
}

/* ================================================
   SJOLIE AVATAR BADGE (Customer Info)
   ================================================ */
.sjolie-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}

.sjolie-badge-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sjolie-sand), var(--sjolie-caramel)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--sjolie-white) !important;
}

.sjolie-badge-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.sjolie-badge-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
  line-height: 1.3 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-badge-contact {
  font-size: 12px !important;
  color: var(--sjolie-mocha) !important;
  line-height: 1.4 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-badge-dot {
  margin: 0 6px !important;
  color: var(--sjolie-caramel) !important;
}

.sjolie-badge-edit {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--sjolie-espresso) !important;
  cursor: pointer !important;
  border: 1px solid var(--sjolie-border) !important;
  background: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}

.sjolie-badge-edit:hover {
  border-color: var(--sjolie-espresso) !important;
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
}

/* Working Hours within badge section */
.sjolie-workhours {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  padding: 16px 20px !important;
  margin-top: 12px !important;
  border-radius: 0 !important;
}

.sjolie-workhours-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--sjolie-mocha) !important;
  margin-bottom: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-workhours ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sjolie-workhours li {
  display: flex !important;
  justify-content: space-between !important;
  padding: 3px 0 !important;
  font-size: 13px !important;
  color: var(--sjolie-mocha) !important;
  font-family: 'DM Sans', sans-serif !important;
}

.sjolie-workhours li b {
  color: var(--sjolie-espresso) !important;
  font-weight: 600 !important;
  min-width: 40px !important;
}

/* ================================================
   SWEETALERT2 SJOLIE BRAND OVERRIDES
   ================================================ */

/* Popup container */
.swal2-popup {
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 0 !important;
  border: 1px solid var(--sjolie-border) !important;
  padding: 32px 28px !important;
}

/* Title */
.swal2-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--sjolie-espresso) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

/* Body text */
.swal2-html-container,
#swal2-content,
.swal2-content {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--sjolie-mocha) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Icon colors — info */
.swal2-icon.swal2-info {
  border-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-caramel) !important;
}

/* Icon colors — success */
.swal2-icon.swal2-success {
  border-color: var(--sjolie-caramel) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--sjolie-caramel) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--sjolie-caramel) !important;
}

/* Icon colors — error */
.swal2-icon.swal2-error {
  border-color: #c0392b !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #c0392b !important;
}

/* Icon colors — warning */
.swal2-icon.swal2-warning {
  border-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-caramel) !important;
}

/* Icon colors — question */
.swal2-icon.swal2-question {
  border-color: var(--sjolie-sand) !important;
  color: var(--sjolie-deep) !important;
}

/* Confirm button — espresso solid */
.swal2-confirm.swal2-styled {
  background: var(--sjolie-espresso) !important;
  border: 1px solid var(--sjolie-espresso) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 32px !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

.swal2-confirm.swal2-styled:hover {
  background: var(--sjolie-deep) !important;
  border-color: var(--sjolie-deep) !important;
}

.swal2-confirm.swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(180, 146, 110, 0.3) !important;
}

/* Cancel button — ghost/outline */
.swal2-cancel.swal2-styled {
  background: transparent !important;
  border: 1px solid var(--sjolie-espresso) !important;
  border-radius: 0 !important;
  color: var(--sjolie-espresso) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 32px !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

.swal2-cancel.swal2-styled:hover {
  background: var(--sjolie-pearl) !important;
}

/* Deny button */
.swal2-deny.swal2-styled {
  background: var(--sjolie-mocha) !important;
  border: 1px solid var(--sjolie-mocha) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 32px !important;
  box-shadow: none !important;
}

/* Actions container */
.swal2-actions {
  gap: 12px !important;
}

/* Input fields in Swal (if any) */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--sjolie-espresso) !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
  border-color: var(--sjolie-caramel) !important;
  box-shadow: 0 0 0 3px rgba(180, 146, 110, 0.15) !important;
}

/* Close button */
.swal2-close {
  color: var(--sjolie-mocha) !important;
  font-weight: 300 !important;
}

.swal2-close:hover {
  color: var(--sjolie-espresso) !important;
}

/* Overlay backdrop */
.swal2-container {
  background: rgba(58, 45, 39, 0.45) !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
  background: var(--sjolie-caramel) !important;
}