/* =====================================================
   Lumio Booking — Modern UI (single source of truth)
   Clean stylesheet (no duplicates)
   ===================================================== */

:root{
  --lumio-bg:#ffffff;
  --lumio-surface:#ffffff;
  --lumio-soft:#f7f8fb;
  --lumio-soft-2:#cacaca;
  --lumio-text:#0f172a;
  --lumio-muted:#64748b;
  --lumio-border:#e5e7eb;
  --lumio-border-strong:#d1d5db;
  --lumio-shadow:0 18px 60px rgba(2,6,23,.18);
  --lumio-radius:18px;
  --lumio-radius-sm:14px;
  --lumio-accent:#2563eb;
  --lumio-accent-2:#1d4ed8;
  --lumio-success:#16a34a;
  --lumio-danger:#ef4444;

  --lumio-focus:0 0 0 4px rgba(37,99,235,.14);
}

/* Base */
.lumio-widget,
.lumio-calendar-mode,
.lumio-modal-dialog{
  color:var(--lumio-text);
}

.lumio-widget{
  border:1px solid var(--lumio-border);
  background:var(--lumio-surface);
  padding:16px;
  border-radius:var(--lumio-radius);
  max-width:520px;
}

.lumio-title{ margin:0 0 6px; font-weight:900; letter-spacing:.2px; }
.lumio-price{ margin:6px 0 14px; color:var(--lumio-muted); font-weight:800; }

/* Buttons */
.lumio-btn,
.lumio-cal-nav,
.lumio-summary-change,
.lumio-deposit-confirm,
.lumio-deposit-resend,
.lumio-pay-card,
.lumio-service-card,
.lumio-slot,
.lumio-modal-close{
  -webkit-tap-highlight-color: transparent;
}

.lumio-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border:1px solid transparent;
  border-radius:var(--lumio-radius-sm);
  background:var(--lumio-text);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
}
.lumio-btn:hover{ opacity:.92; }
.lumio-btn:active{ transform:translateY(1px); }

/* Inputs */
.lumio-form input,
.lumio-staff,
.lumio-date{
  width:100%;
  padding:11px 12px;
  margin:6px 0;
  border:1px solid var(--lumio-border);
  border-radius:var(--lumio-radius-sm);
  background:#fff;
  color:var(--lumio-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.lumio-form input:focus,
.lumio-staff:focus,
.lumio-date:focus{
  outline:none;
  border-color:rgba(37,99,235,.55);
  box-shadow:var(--lumio-focus);
}

/* Focus visible for keyboard */
.lumio-btn:focus-visible,
.lumio-cal-nav:focus-visible,
.lumio-modal-close:focus-visible,
.lumio-summary-change:focus-visible,
.lumio-deposit-confirm:focus-visible,
.lumio-deposit-resend:focus-visible,
.lumio-pay-card:focus-visible,
.lumio-service-card:focus-visible,
.lumio-slot:focus-visible,
.lumio-cal-day:focus-visible,
.lumio-form input:focus-visible{
  outline:none;
  box-shadow:var(--lumio-focus);
  border-color:rgba(37,99,235,.55);
}

/* =====================================================
   Calendar
   ===================================================== */

.lumio-cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}

.lumio-cal-title{
  font-weight:900;
  letter-spacing:.2px;
}

.lumio-cal-nav{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--lumio-border);
  background:#fff;
  color:var(--lumio-text);
  cursor:pointer;
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lumio-cal-nav:hover{ background:var(--lumio-soft); border-color:var(--lumio-border-strong); box-shadow:0 10px 26px rgba(2,6,23,.08); }
.lumio-cal-nav:active{ transform:translateY(1px); }

.lumio-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}

.lumio-cal-weekdays .lumio-cal-wd{
  padding:6px 8px;
  font-weight:900;
  font-size:12px;
  color:var(--lumio-muted);
  text-transform:uppercase;
  letter-spacing:.6px;
}

.lumio-cal-days .lumio-cal-empty{ min-height:48px; }

.lumio-cal-day{
  border:1px solid var(--lumio-border);
  background:#fff;
  border-radius:14px;
  padding:8px 8px;
  cursor:pointer;
  text-align:left;
  position:relative;
  min-height:42px;
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.lumio-cal-day:hover{
  box-shadow:0 12px 34px rgba(2,6,23,.10);
  border-color:var(--lumio-border-strong);
}

.lumio-cal-day:active{ transform:translateY(1px); }

.lumio-cal-day.is-past{ opacity:.35; cursor:not-allowed; }
.lumio-cal-day.is-unavailable{ opacity:.65; }

.lumio-cal-day.is-available{
  background:linear-gradient(180deg, #fff, var(--lumio-soft));
}

.lumio-cal-num{ font-weight:950; font-size:13px; }

/* availability indicator bar */
.lumio-cal-indicator,
.lumio-cal-dot{
  position:absolute;
  left:9px;
  right:9px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:transparent;
}

.lumio-cal-day.is-available .lumio-cal-indicator,
.lumio-cal-day.is-available .lumio-cal-dot{ background:var(--lumio-success); }
.lumio-cal-day.is-unavailable .lumio-cal-indicator,
.lumio-cal-day.is-unavailable .lumio-cal-dot{ background:#d1d5db; }

/* =====================================================
   Modal
   ===================================================== */

body.lumio-modal-open{ overflow:hidden; }

.lumio-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  padding:0 10px;
}

.lumio-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.55);
}

.lumio-modal-dialog{
  position:relative;
  width:min(980px, 92vw);
  margin:4vh auto;
  background:var(--lumio-bg);
  border-radius:20px;
  box-shadow:var(--lumio-shadow);
  max-height:92vh;
  overflow:hidden;
}

.lumio-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--lumio-border);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(6px);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  z-index:1000;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.lumio-modal-close:hover{
  background:var(--lumio-soft);
  border-color:var(--lumio-border-strong);
  box-shadow:0 10px 26px rgba(2,6,23,.10);
}

/* Layout (desktop) */
@media (min-width: 992px){
  .lumio-modal-dialog{ display:flex; height:92vh; }

  .lumio-modal-aside{
    width:34%;
    border-right:1px solid var(--lumio-border);
    background:linear-gradient(180deg, var(--lumio-soft-2), #fff);
    overflow:auto;
  }

  .lumio-modal-main{
    width:66%;
    overflow:auto;
    background:#fff;
  }

  /* Clear visual separation */
  .lumio-modal-dialog{
    border:1px solid var(--lumio-border);
  }

  .lumio-modal-aside{
    padding:4px 0;
  }

  .lumio-modal-main{
    padding:18px 22px 22px;
  }
}

/* Layout (mobile) */
@media (max-width: 991px){

  



  .lumio-modal-dialog{ height:92vh; display:flex; flex-direction:column; }

  /* Compact summary bar on mobile */
  .lumio-modal-aside{
    flex:0 0 auto;
    max-height:22vh;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    border-bottom:1px solid var(--lumio-border);
    background:linear-gradient(180deg, var(--lumio-soft-2), #fff);
    box-shadow:0 10px 30px rgba(2,6,23,.06);
  }

  .lumio-modal-main{ flex:1 1 auto; overflow:auto; }

  .lumio-summary{ padding:12px 14px; }
  .lumio-summary-title{ font-size:13px; margin-bottom:6px; }
  .lumio-summary-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .lumio-summary-label{ font-size:11px; margin:0; min-width:48px; }
  .lumio-summary-value{
    font-size:13px;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .lumio-summary-change{ margin:0; padding:5px 9px; font-size:11px; }

  .lumio-summary-row{
    padding:6px 8px;
    border-radius:12px;
    margin-bottom:6px;
    box-shadow:none;
  }
}

/* .lumio-modal-aside{
  background:linear-gradient(180deg, var(--lumio-soft), #fff);
} */
.lumio-modal-main{ position:relative; padding:18px 18px 20px; background:#fff; }

/* Sticky header inside main */
.lumio-modal-head{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);
  padding:10px 0;
  margin:0 0 12px;
  border-bottom:1px solid var(--lumio-border);
}

.lumio-modal-date{ font-weight:950; }
.lumio-modal-step{ color:var(--lumio-muted); font-weight:800; margin-right:50px;}

/* =====================================================
   Summary (Aside)
   ===================================================== */

.lumio-summary{
  padding:16px;
}
.lumio-summary-title{ font-weight:950; margin:0 0 12px; letter-spacing:.2px; }

.lumio-summary-item{
  padding:0;
  border-bottom:0;
}

.lumio-summary-row{
  padding:8px 10px;
  border:1px solid var(--lumio-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px rgba(2,6,23,.04);
  margin-bottom:8px;
}

.lumio-summary-label{ font-size:12px; color:var(--lumio-muted); margin:0 0 4px; }
.lumio-summary-value{ font-weight:950; }

.lumio-summary-change{
  margin-top:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--lumio-border);
  background:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  color:var(--lumio-text);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.lumio-summary-change:hover{ background:var(--lumio-soft); border-color:var(--lumio-border-strong); box-shadow:0 10px 26px rgba(2,6,23,.08); }
.lumio-summary-change[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* Mobile summary density */
@media (max-width: 991px){

  .lumio-modal-step{ margin-right:unset;}
  
  .lumio-summary{ padding:12px 14px; }
  .lumio-summary-title{ font-size:13px; margin-bottom:6px; }
  .lumio-summary-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .lumio-summary-label{ font-size:11px; margin:0; min-width:48px; }
  .lumio-summary-value{
    font-size:13px;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .lumio-summary-change{ margin:0; padding:5px 9px; font-size:11px; }

  .lumio-summary-row{
    padding:6px 8px;
    border-radius:12px;
    margin-bottom:6px;
    box-shadow:none;
  }
}

/* =====================================================
   Steps / Content
   ===================================================== */

.lumio-step h4{
  margin:10px 0 12px;
  font-weight:950;
  letter-spacing:.2px;
}

.lumio-back{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:0 0 10px;
  font-weight:950;
  color:var(--lumio-text);
}

/* Back buttons (slots/services/form) — pill modern */
.lumio-back-to-slots,
.lumio-back-to-services{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--lumio-border);
  background:#fff;
  cursor:pointer;
  padding:8px 12px;
  margin:0 0 12px;
  border-radius:999px;
  font-weight:950;
  color:var(--lumio-text);
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.lumio-back-to-slots:hover,
.lumio-back-to-services:hover{
  background:var(--lumio-soft);
  border-color:var(--lumio-border-strong);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}

.lumio-back-to-slots:active,
.lumio-back-to-services:active{
  transform:translateY(1px);
}

.lumio-back-to-slots:focus-visible,
.lumio-back-to-services:focus-visible{
  outline:none;
  box-shadow:var(--lumio-focus);
  border-color:rgba(37,99,235,.55);
}

/* Mobile compact */
@media (max-width: 480px){
  .lumio-back-to-slots,
  .lumio-back-to-services{
    padding:7px 10px;
    font-size:12px;
    margin-bottom:10px;
  }
}


/* Services grid */
.lumio-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.lumio-service-card{
  border:1px solid var(--lumio-border);
  border-radius:var(--lumio-radius);
  padding:14px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}

.lumio-service-card:hover{ box-shadow:0 12px 34px rgba(2,6,23,.10); border-color:var(--lumio-border-strong); }
.lumio-service-card:active{ transform:translateY(1px); }
.lumio-service-card:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.lumio-service-name{ font-weight:950; margin:0 0 6px; }
.lumio-service-meta{ color:var(--lumio-muted); font-size:14px; }

/* Slots grid */
.lumio-slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:10px;
}

.lumio-slot{
  border:1px solid var(--lumio-border);
  border-radius:var(--lumio-radius);
  padding:12px;
  background:linear-gradient(180deg, #fff, var(--lumio-soft));
  cursor:pointer;
  font-weight:950;
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.lumio-slot:hover{ border-color:var(--lumio-border-strong); box-shadow:0 10px 26px rgba(2,6,23,.08); }
.lumio-slot:active{ transform:translateY(1px); }
.lumio-slot:disabled{ opacity:.45; cursor:not-allowed; background:var(--lumio-soft); box-shadow:none; }

/* =====================================================
   Payment chooser
   ===================================================== */

.lumio-pay-chooser{ margin-top:14px; }
.lumio-pay-title{ font-weight:950; margin:0 0 10px; }

.lumio-pay-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.lumio-pay-card{
  text-align:left;
  border:1px solid var(--lumio-border);
  background:#fff;
  border-radius:var(--lumio-radius);
  padding:14px;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.lumio-pay-card:hover{ border-color:var(--lumio-border-strong); box-shadow:0 12px 32px rgba(2,6,23,.10); }
.lumio-pay-card:active{ transform:translateY(1px); }

.lumio-pay-card-title{ font-weight:950; }
.lumio-pay-card-sub{ margin-top:6px; color:var(--lumio-muted); font-size:13px; }

.lumio-pay-card.is-disabled,
.lumio-pay-card:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.lumio-pay-card.is-selected{
  border-color:rgba(37,99,235,.85);
  box-shadow:0 16px 46px rgba(37,99,235,.20);
}

.lumio-pay-hint{ margin-top:10px; color:var(--lumio-muted); font-size:13px; }

/* PayPal / Deposit blocks */
.lumio-paypal,
.lumio-deposit{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--lumio-border);
  border-radius:var(--lumio-radius);
  background:linear-gradient(180deg, #fff, var(--lumio-soft));
}

.lumio-deposit-instructions{ font-size:14px; line-height:1.5; color:var(--lumio-text); opacity:.92; margin:10px 0 12px; }

.lumio-deposit-confirm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:var(--lumio-radius-sm);
  border:1px solid transparent;
  background:var(--lumio-text);
  color:#fff;
  font-weight:950;
  cursor:pointer;
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
}

.lumio-deposit-confirm:hover{ opacity:.92; }
.lumio-deposit-confirm:active{ transform:translateY(1px); }

/* Resend button (modern pill) */
.lumio-deposit-resend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--lumio-border);
  background:#fff;
  color:var(--lumio-text);
  font-weight:950;
  cursor:pointer;
  margin-top:10px;
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.lumio-deposit-resend:hover{ background:var(--lumio-soft); border-color:var(--lumio-border-strong); box-shadow:0 10px 26px rgba(2,6,23,.08); }
.lumio-deposit-resend:active{ transform:translateY(1px); }
.lumio-deposit-resend:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* Messages */
.lumio-msg,
.lumio-deposit-msg{ font-size:13px; color:var(--lumio-muted); margin-top:10px; }

/* =====================================================
   Small utilities
   ===================================================== */

.lumio-label{ display:block; margin:8px 0 6px; font-weight:800; color:var(--lumio-muted); }
.lumio-slots{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }

/* Make Pay cards stack on very small screens */
@media (max-width: 480px){
  .lumio-pay-cards{ grid-template-columns:1fr; }
  .lumio-services-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   Inline modal (Elementor button) — calendar + form polish
   ===================================================== */

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-step-calendar{
  padding-top:2px;
}

/* Make calendar grid denser + balanced inside modal */
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-week{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  margin:8px 0 10px;
  padding:0;
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-week > div{
  text-align:center;
  font-weight:900;
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--lumio-muted);
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-days{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}

/* Day button: more "app-like" */
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-day{
  border-radius:14px;
  min-height:40px;
  padding:7px 7px;
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-num{
  font-size:13px;
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-indicator,
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-dot{
  left:7px;
  right:7px;
  bottom:6px;
  height:3px;
}

/* Step title spacing inside modal */
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-step-title{
  font-weight:950;
  margin:0 0 10px;
  letter-spacing:.2px;
}

/* Form: make it look premium */
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

@media (min-width: 680px){
  .lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid label:first-child{
    grid-column:1 / -1;
  }
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid label{
  display:block;
  font-weight:850;
  font-size:12px;
  color:var(--lumio-muted);
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid input{
  margin-top:6px;
  width:100%;
  padding:12px 12px;
  border:1px solid var(--lumio-border);
  border-radius:14px;
  background:#fff;
  color:var(--lumio-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid input:focus{
  outline:none;
  border-color:rgba(37,99,235,.55);
  box-shadow:var(--lumio-focus);
}

/* Payment cards: slightly tighter in modal */
.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-pay-cards{
  margin-top:10px;
}

.lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-pay-card{
  padding:13px;
}

/* On very small screens keep everything compact */
@media (max-width: 480px){
  .lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-day{
    min-height:36px;
    padding:6px 6px;
  }
  .lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-cal-num{
    font-size:12px;
  }
  .lumio-calendar-mode--inline[data-calendar-in-modal="1"] .lumio-form-grid{
    gap:8px;
  }
}