/* Main calendar container */
#booking-calendar {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    font-size: 14px;
    overflow: hidden;
}

/* FullCalendar base font and pointer styles for clickable days */
.fc,
.fc-daygrid-day,
.fc-daygrid-day-frame,
.fc-daygrid-day-top {
    font-size: 14px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

/* Adjust day grid cell frame: reduce height and padding */
.fc-daygrid-day-frame {
    min-height: 60px !important;  /* Reduced further */
    padding: 2px;                 /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Day number top wrapper */
.fc-daygrid-day-top {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Center vertically */
    padding: 2px 4px;
    width: 100%;
}

/* Day number style */
.fc-daygrid-day-number {
    font-size: 13px;      /* Reduced font size */
    font-weight: 600;
    color: #222;
    line-height: 1;
    padding: 1px 3px;
}

/* Ensure header cells for day names do not overflow and are centered */
.fc .fc-col-header-cell-cushion {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
}

/* Minimum width per cell */
.fc-daygrid-day {
    min-width: 48px;
}

/* Toolbar buttons */
.fc .fc-button {
    padding: 0.4rem 0.8rem;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

/* Toolbar layout */
.fc-toolbar {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.fc .fc-toolbar.fc-header-toolbar {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 0.5rem;
}
.fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* SweetAlert2 modal fields */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    width: 100% !important;
    font-size: 14px;
    margin-bottom: 0px;
    margin-left: 0;
}
.swal2-title {
    font-size: 18px;
}

/* Price display in modal */
#swal-booking-price {
    font-size: 16px;
    text-align: center;
}

/* Responsive tweaks for tablets and mobiles */
@media (max-width: 768px) {
    .fc .fc-toolbar-title {
        font-size: 1.2rem;
        text-align: center;
    }
    .fc-daygrid-day-frame {
        min-height: 70px !important;
    }
    .fc .fc-daygrid-day-number {
        font-size: 14px;
    }
    .fc .fc-toolbar-chunk {
        flex-direction: column;
        align-items: center;
    }
    .fc .fc-button-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
}
@media (max-width: 480px) {
    #booking-calendar {
        padding: 5px;
    }
    .fc .fc-button {
        font-size: 13px;
        padding: 0.3rem 0.6rem;
    }
    .swal2-popup {
        width: 90% !important;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }
    .fc-daygrid-day-frame {
        min-height: 70px !important;
    }
    .fc-daygrid-day-number {
        font-size: 14px;
    }
}
/* Center day-of-week header text in each column */
.fc .fc-col-header-cell,
.fc .fc-col-header-cell .fc-scrollgrid-sync-inner,
.fc .fc-col-header-cell-cushion {
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important; /* or 'ellipsis' if you prefer clipping */
  white-space: nowrap !important; /* remove if you prefer wrapping */
}

/* Optional: slightly reduce the header font size to prevent overflow on narrow screens */
.fc-col-header-cell-cushion {
  font-size: 14px !important;
  padding: 4px !important;
}
/* Force the day-of-week headers (Sun, Mon, etc.) to distribute evenly */
/* and align the text to the center. */
.fc .fc-col-header {
    width: 100% !important;
    table-layout: fixed !important; /* ensures columns have equal width */
  }
  
  .fc .fc-col-header > table {
    table-layout: fixed !important; /* extra specificity for some versions */
    width: 100% !important;
  }
  
  .fc .fc-col-header-cell {
    /* Each day-of-week column gets an equal fraction of the total width. */
    width: 14.2857% !important; /* 100% / 7 columns = ~14.2857% */
    text-align: center !important;
    overflow: visible !important;
    white-space: nowrap !important; 
  }
  
  /* If you want to ensure the text doesn't overflow its box, you could add: 
     text-overflow: ellipsis;
     but usually it's better to let it center or wrap if needed.
  */
  /* Force the FullCalendar header table to fill the container */
.fc-col-header {
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  .fc-col-header > table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  /* Force each header cell to have equal width and center its content */
  .fc-col-header-cell {
    width: calc(100% / 7) !important;  /* Divide the full width by 7 days */
    text-align: center !important;
    padding: 2px !important;
    box-sizing: border-box;
  }
  
  /* Force the inner anchor to behave as a block-level element so its text aligns centrally */
  .fc-col-header-cell-cushion {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 2px 0 !important;
  }
  
  /* Optional: If needed, adjust font sizes for narrower screens */
  @media (max-width: 480px) {
    .fc-col-header-cell-cushion {
      font-size: 13px !important;
    }
  }
  /* On narrower screens, reduce font size and make columns narrower for week/day views */
@media (max-width: 768px) {
    /* Target the timeGridWeek/timeGridDay container */
    .fc-timeGridWeek-view .fc-timegrid,
    .fc-timeGridDay-view .fc-timegrid {
      overflow-x: auto !important; /* allows horizontal scroll if needed */
    }
    
    /* Narrow the time axis (where hour labels appear) */
    .fc-timeGridWeek-view .fc-timegrid-axis,
    .fc-timeGridDay-view .fc-timegrid-axis {
      min-width: 40px !important;
      max-width: 40px !important;
      overflow: hidden !important;
      text-align: center !important;
    }
    
    /* Decrease size of hour labels and header cells */
    .fc-timeGridWeek-view .fc-timegrid-slot-label,
    .fc-timeGridDay-view .fc-timegrid-slot-label,
    .fc-timeGridWeek-view .fc-col-header-cell,
    .fc-timeGridDay-view .fc-col-header-cell {
      font-size: 12px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    /* Optionally reduce the row height for all-day row, if it's too tall */
    .fc-timeGridWeek-view .fc-daygrid-day-events,
    .fc-timeGridDay-view .fc-daygrid-day-events {
      min-height: 30px !important;
    }
  }
/* Ensure day headers in week/day views display full text on mobile */

  @media (max-width: 768px) {
    .fc-timeGridWeek-view .fc-col-header-cell-cushion {
      white-space: normal !important;
      word-wrap: break-word;
      text-align: center !important;
      font-size: 13px !important;
      padding: 4px !important;
    }
  }
  /* On the week view only, shrink left time axis and reduce horizontal padding */
.fc-timeGridWeek-view .fc-timegrid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Shrink the time axis (hour labels) to 35px wide in week view */
.fc-timeGridWeek-view .fc-timegrid-axis {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    padding: 0 !important;
    text-align: right !important;
}

/* Slightly reduce hour label font size */
.fc-timeGridWeek-view .fc-timegrid-slot-label {
    font-size: 13px !important;
    padding: 2px 4px !important;
}

/* Let the short weekday name & date wrap if needed on smaller devices */
@media (max-width: 768px) {
  .fc-timeGridWeek-view .fc-col-header-cell-cushion {
    white-space: normal !important;
    word-wrap: break-word;
    text-align: center !important;
    font-size: 13px !important;
    padding: 2px !important;
  }
}
.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
    margin-left: 0em;
}
.fc-booked-slot {
    background-color: #ff9999 !important;
}
#gift-card-form{
	max-width:480px;margin:0 auto;font-family:inherit;
	padding:1.5rem;border:1px solid #ddd;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.06)
}
#gift-card-form .sw-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.5rem}
#gift-card-form label{font-weight:600;font-size:.9rem}
#gift-card-form input,
#gift-card-form select,
#gift-card-form textarea{
	flex:1 1 100%;padding:.55rem .75rem;border:1px solid #bbb;border-radius:8px;font-size:.9rem
}
#gift-card-form textarea{min-height:90px;resize:vertical}
@media(min-width:550px){
	#gift-card-form .sw-half{flex:1 1 calc(50% - .75rem)}
}

/* duration picker */
#gift-time-controls{justify-content:center}
#gift-time-controls button{
	width:42px;height:42px;border:none;border-radius:50%;font-size:1.25rem;
	background:#f0f0f0;cursor:pointer;transition:background .2s
}
#gift-time-controls button:hover{background:#e7e7e7}
#gift-duration{
	max-width:80px;text-align:center;border:none;font-weight:600;background:#fff
}

/* price badge */
#gift-price-display{
	display:inline-block;background:#eee;border-radius:30px;padding:.35rem .9rem;
	margin-bottom:1rem;font-weight:600
}

/* submit */
#gift-pay-button{
	display:block;width:100%;padding:.75rem;font-size:1rem;font-weight:700;
	color:#fff;background:#0066cc;border:none;border-radius:10px;cursor:pointer;
	transition:background .22s
}
#gift-pay-button:hover{background:#0057b3}
#gift-card-form select#gift-service{
  width:100%;            /* never larger than the column */
  max-width:100%;
  box-sizing:border-box; /* padding+border inside the width */
  overflow:hidden;       /* optional – keeps the arrow inside iOS */
  text-overflow:ellipsis;/* …when the select is *closed* */
}
#gift-price-display{
  display:inline-block;        /* shrink to fit the text      */
  text-align:center;
  margin:12px auto;            /* centers the block           */
  padding:.4rem .9rem;
  border:2px solid #999;       /* any brand colour you like   */
  border-radius:6px;
  background:#f6f6f6;
  font-weight:600;
  font-size:1.05rem;
}
/* -----------------------------------------------------------------
   SweetAlert2 close-button  (grey -> red on interaction)
   ----------------------------------------------------------------- */
.swal2-popup .swal2-close,
.my-swal-close{                     /* your custom class */
    position:absolute;
    top:.6rem; right:.6rem;
    z-index:2;

    width:1.65rem; height:1.65rem; line-height:1.65rem;
    border-radius:50%;

    background:transparent;        /* <-- stays grey on load   */
    border:2px solid rgba(0,0,0,.18);
    color:#666;

    font-size:1.1rem; font-weight:600;
    cursor:pointer;

    transition:background .18s ease, color .18s ease,
               transform .18s ease, border-color .18s ease;
}

/* show red **only** when USER interacts */
.swal2-popup .swal2-close:hover,
.swal2-popup .swal2-close:focus-visible,
.my-swal-close:hover,
.my-swal-close:focus-visible{
    background:#ff5252;
    border-color:#ff5252;
    color:#fff;
    transform:rotate(90deg) scale(1.05);
    outline:none;
}

/* accessible focus ring */
.swal2-popup .swal2-close:focus-visible,
.my-swal-close:focus-visible{
    box-shadow:0 0 0 3px rgba(255,82,82,.4);
}

/* ---------- mobile tweaks ---------- */
@media (max-width:768px){
    .swal2-popup .swal2-close,
    .my-swal-close{
        top:.35rem; right:.35rem;
        width:1.9rem; height:1.9rem; line-height:1.9rem;
        font-size:1.25rem;
        display:inline-flex;        /* make sure it doesn’t vanish */
        align-items:center; justify-content:center;
    }
}
/* Ensure SweetAlert2 title is visible */
.swal2-title {
  display: block !important;
  font-size: 1.875em;
  margin: 0 0 0.4em;
  padding-top: 0 !important;
}
/* Restore full error icon style */
.swal2-icon.swal2-error {
  border: 0.25em solid #f27474 !important;
  border-radius: 50% !important;
  box-sizing: content-box !important;
  color: #f27474 !important;
  height: 5em !important;
  width: 5em !important;
  margin: 1.25em auto 1em !important;
  position: relative !important;
}

/* Inner cross */
.swal2-icon.swal2-error .swal2-x-mark {
  position: relative !important;
  display: block !important;
  top: 1.2em !important;
  left: 1.25em !important;
  width: 2.5em !important;
  height: 2.5em !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  position: absolute !important;
  width: 2.5em !important;
  height: 0.3125em !important;
  background-color: #f27474 !important;
  top: 1.1em !important;
  left: 0 !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left {
  transform: rotate(45deg);
}

.swal2-icon.swal2-error .swal2-x-mark-line-right {
  transform: rotate(-45deg);
}
/* ============================================================
   SHARED CARD-LOOK  –  use on every SweetAlert2 popup that gets
   the class .booking-modal  (see JS below)
   ============================================================ */
.booking-modal{
    max-width:480px;                 /* identical to #gift-card-form   */
    margin:0 auto;
    padding:1.5rem;
    border:1px solid #ddd;
    border-radius:12px;
    box-shadow:0 2px 5px rgba(0,0,0,.06);
    font-family:inherit;
}
/* rows & halves ------------------------------------------------*/
.booking-modal .sw-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.5rem}
.booking-modal .sw-half{flex:1 1 calc(50% - .75rem)}
.booking-modal label{font-weight:600;font-size:.9rem}
.booking-modal input,
.booking-modal select,
.booking-modal textarea{
    flex:1 1 100%;
    padding:.55rem .75rem;
    border:1px solid #bbb;
    border-radius:8px;
    font-size:.9rem
}
.booking-modal textarea{min-height:90px;resize:vertical}

/* duration picker (–  / + buttons) ----------------------------*/
#booking-time-controls{justify-content:center}
#booking-time-controls button{
    width:42px;height:42px;border:none;border-radius:50%;
    font-size:1.25rem;background:#f0f0f0;cursor:pointer;
    transition:background .2s
}
#booking-time-controls button:hover{background:#e7e7e7}
#swal-booking-additional-time{
    max-width:80px;text-align:center;border:none;font-weight:600;background:#fff
}

/* price badge --------------------------------------------------*/
#swal-booking-price{
    display:inline-block;
    text-align:center;
    margin:0px auto;
    padding:.4rem .9rem;
    border:2px solid #999;
    border-radius:6px;
    background:#f6f6f6;
    font-weight:600;
    font-size:1.05rem;
    min-width: 14ch;          /* roughly 14 characters wide */
    min-height: 3.5ch;
    white-space: nowrap;
}
#swal-booking-time, #swal-gift-code{
  max-width: 50% !important;
}
div:where(.swal2-container) input:where(.swal2-input), div:where(.swal2-container) textarea:where(.swal2-textarea){
  margin: 0 !important;
}
.swal2-html-container{
  padding-top: 0 !important;
}
.sw-duration{
  display:flex;
  justify-content:center;   /* ⇠ centre on main axis (left ↔ right) */
  align-items:center;       /* ⇡ centre on cross axis (top ↕ bottom) */
  gap:.65rem;
  width:fit-content;        /* shrink to contents */
  margin:0 auto;
}
/* Put this in Divi → Theme Options → Custom CSS or child-theme style.css */

@media only screen and (max-width: 980px) {

	/* Main UL inside the mobile menu */
	.et_mobile_menu {
		/* 1️⃣  Let it fill the viewport minus the header strip */
		height: calc(100vh - var(--mobile-header-height, 56px));

		/* 2️⃣  Scroll inside that area */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;   /* momentum scroll */

		/* 3️⃣  Optional: avoid the little overscroll glow */
		overscroll-behavior: contain;
	}

	/*  If you see the admin bar on mobile, subtract its height as well */
	html.admin-bar .et_mobile_menu {
		height: calc(100vh
		              - var(--mobile-header-height, 56px)
		              - var(--admin-bar-height, 46px) );
	}

	/*  Customise these CSS variables if your theme header is taller */
	:root {
		--mobile-header-height: 150px;   /* height of the bar with the “×” */
		--admin-bar-height:    46px;   /* WP admin bar on mobile */
	}
}
/* duration “min” label */
.time-unit{
    font-weight:600;
    font-size:1rem;     /* keep same height as the digits */
    user-select:none;
}

/* optional: tighten the spacing of everything in the row */
#booking-time-controls.save-gap{
    gap:.35rem;         /* was .5rem, a bit smaller now */
}
/* Make the number box as narrow as the digits it contains */
#swal-booking-additional-time{
    /* stop it from stretching */
    flex: 0 0 auto !important;   /* 0 grow, 0 shrink, auto basis   */
    width: 3.5ch !important;     /* ~3 characters (“180”) wide     */

    /* tighter internal padding */
    padding: .3rem .2rem !important;

    text-align: center;
    font-weight: 600;
}

/* Optional: bring the “min” label closer as well */
#booking-time-controls{
    gap: 0rem .3rem .3rem .3rem !important;       /* was .5rem */
}