/* =====================================================
CENTER SHEET
===================================================== */

.center-sheet-blur{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
  z-index:80;
}
.center-sheet-blur.open{ opacity:1; }

.center-sheet{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-40%) scale(.95);
  width:min(92vw,520px);
  max-height:84vh;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:20px;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  z-index:90;
  box-shadow:0 24px 60px var(--overlay-dark);
  overflow:hidden;
}
.center-sheet.open{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.center-sheet-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:84vh;
  overflow:auto;
}

/* =====================================================
SHOP FRONT (ACCORDION)
===================================================== */

.shop-front{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* accordion container */
.drawer-collapsible{
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

/* header — pointer-events on header only, not children */
.drawer-collapsible-header{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

/* content collapses via JS inline height */
.drawer-collapsible-content{
  height:0;
  overflow:hidden;
  transition:height .32s ease;
  display:block;
}

/* when open, overflow becomes visible so dropdowns/calendars aren't clipped */
.drawer-collapsible.open .drawer-collapsible-content{
  overflow:visible;
}

/* =====================================================
SHOP HOURS HEADER
===================================================== */

.sf-hours-header{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sf-hours-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--accent);
}
.sf-hours-preview{
  font-size:12px;
  color:var(--text-secondary);
}

/* =====================================================
INNER CONTENT
===================================================== */

.sf-section-inner{
  padding:0 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* inputs */
input, textarea{
  width:100%;
  border-radius:12px;
  background:var(--bg-elevated);
  border:1px solid var(--border-soft);
  color:var(--text-main);
  padding:10px;
}

/* buttons */
.sf-row{
  display:flex;
  gap:10px;
}
.sf-btn-primary{
  flex:1;
  height:42px;
  border-radius:12px;
  background:var(--accent);
  color:var(--bg-main);
  font-weight:700;
  border:none;
}
.sf-btn-muted{
  flex:1;
  height:42px;
  border-radius:12px;
  background:var(--bg-elevated);
  color:var(--text-secondary);
  border:none;
}

/* =====================================================
SERVICES
===================================================== */

.service-carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
}

.service-card{
  min-width:120px;
  padding:10px;
  border-radius:12px;
  background:var(--bg-elevated);
  position:relative;
}
.service-card-top{ font-weight:700; }
.service-card-price{
  font-size:12px;
  opacity:.7;
}
.service-card-star{
  position:absolute;
  bottom:8px;
  right:8px;
  color:var(--text-tertiary);
}
.service-card-star.active{ color:var(--accent); }

/* =====================================================
SHOP HOURS WRAP
===================================================== */

.shop-hours-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0 14px 14px;
  min-width:0;
}

#shopHoursSheet,
#shopHoursSheet *{
  min-width:0;
  box-sizing:border-box;
}

/* =====================================================
CALENDAR HEADER
===================================================== */

.calendar-header{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  padding:10px 12px 6px;
  gap:6px;
}

.calendar-month{
  text-align:center;
  font-size:16px;
  font-weight:800;
  color:var(--text-main);
}

.calendar-header button{
  height:36px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);
  color:var(--text-main);
  font-size:18px;
  cursor:pointer;
}

/* =====================================================
CALENDAR GRID
===================================================== */

#shopCalendar{
  width:100%;
  display:block;
  padding:0 12px 8px;
  box-sizing:border-box;
}

#shopCalendar .calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  width:100%;
}

#shopCalendar .calendar-dow{
  font-size:11px;
  font-weight:700;
  color:var(--text-secondary);
  text-align:center;
  padding-bottom:4px;
  opacity:.7;
  cursor:pointer;
}

#shopCalendar .calendar-dow.selected{
  color:var(--accent);
  opacity:1;
}

#shopCalendar .calendar-day{
  width:100%;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-subtle);
  cursor:pointer;
  transition:.18s ease;
}

#shopCalendar .calendar-day.selected{
  background:var(--accent-15);
  border-color:var(--accent-35);
  color:var(--accent);
}

#shopCalendar .calendar-empty{
  visibility:hidden;
}

/* =====================================================
HOURS CONTROLS
===================================================== */

.hours-controls{
  display:flex;
  gap:10px;
  padding:0 2px;
}

.hours-controls label{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--text-secondary);
}

.hours-controls input[type="time"]{
  width:100%;
}

/* =====================================================
SAVE BUTTON
===================================================== */

.sheet-save{
  display:block;
  width:100%;
  height:46px;
  border-radius:14px;
  background:var(--accent);
  color:var(--bg-main);
  font-weight:800;
  border:none;
  cursor:pointer;
  font-size:15px;
}