body {background:#fff!important;max-height: 100vh;max-height: calc(var(--vh, 1vh) * 100);
    overflow:hidden;}
    body.prefill-no-anim .slide {transition:none !important;animation:none !important;}

  /* Container */
  .slider-container{
    position:relative;
    width:100%;
	min-height: 100vh;min-height: calc(var(--vh, 1vh) * 100);
	max-height: 100vh;max-height: calc(var(--vh, 1vh) * 100);
    overflow:hidden;
    background:#fff;
    color:#333;
    font-family:'text';
  }


  /* Slides */
  .slide{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:#fff;
    box-sizing:border-box;
    transition:left .5s ease;
    overflow-y:hidden;
 
    z-index:1;
    pointer-events:none;           /* block interactions unless active */
  }
  .slide.active{left:0;z-index:3;pointer-events:auto;}
  .slide.prev{left:-100%;z-index:2;}
  .slide.prev, .slide.active {background:#fff !important;}

  .slide h2{
     font-family:'bold';
     font-size:1.3rem!important;
     line-height:1;
     text-align:center;margin-bottom:14px
   }
.slide span{
    font-family:'bold';
   font-size:0.8rem;
    margin-bottom:20px;
    text-align:center;
  }

  .slide input,
  .slide select,
  .slide textarea{
    width:100%;
    max-width:420px;
    padding:12px 16px;
    margin-bottom:20px!important;
    border:1px solid #ccc;
    border-radius:6px;
    background:#fff;
    font-size:1rem;
    color:#333;
    box-sizing:border-box;
  }



  .btn{
    background:#333;
    color:#fff;
    border:none;
    padding:14px 24px;
    border-radius:6px;
    font-size:1rem;
    cursor:pointer;
    transition:background .3s;
  }
  .btn:hover{ background:#000; box-shadow:0 5px 12px rgba(38,38,38,0.55); }
  .btn[disabled]{ opacity:.5; cursor:not-allowed; }

  /* Line-up lists */
  .lineuplist{
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
 .lineuplist .hover{
    font-family:'heading';
    font-size:18pt;
   
    color:#fff;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-height:80px;
    transition:all .3s ease;
  }
  .lineuplist.fromPrice .hover::after{ font-family:'text'; font-size:12pt; padding-left:10px; }


  /* Slide-1b overrides */
   #slide1b .lineuplist .hover{
   flex-direction:row; align-items:center; justify-content:flex-start; gap:20px;
   padding:0; min-height:60px; border-radius:12px; font-family:'heading'; 
   }
   #slide1b .badge-circle{
   width:60px; height:60px; background:rgba(255,255,255,0.18); color:#fff; font-size:28px!important;margin-left:5px;
   display:flex; align-items:center; justify-content:center; flex-shrink:0;
   }
  #slide1b .lineup-text{ flex:1; text-align:left; }
  #slide1b .lineup-text p{ font-family:'text'; font-size:11pt!important; margin:0; line-height:1.35; }
  #slide1b .hover:hover{ box-shadow:0 10px 25px rgba(0,0,0,0.25); filter:brightness(1.2); }
  #slide1b .hover.selected{
    border:3px solid #fff;
    box-shadow: inset 0 0 45px rgba(255,255,255,0.25), 0 10px 20px rgba(0,0,0,0.3);
  }

  /* Slide-1a hover/selected effects */
  #slide1a .hover:hover{ box-shadow:0 10px 25px rgba(0,0,0,0.25); filter:brightness(1.2); }
  #slide1a .hover.selected{
    border:3px solid #fff;
    box-shadow: inset 0 0 45px rgba(255,255,255,0.25), 0 10px 20px rgba(0,0,0,0.3);
    filter:brightness(1.15);
    transition:all .3s ease;
  }

  /* Entrance animation starter */
  #slide1a .hover { opacity:0; transform:translateY(20px); }
  #slide1a .hover.animate-in { opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }


  /* Colours */
  .DP{background:#196DB6;}
  .PB{background:#B9115A;}
  .PP{background:#441341;}

  /* Fixed bottom nav */
  .nav-fixed{
    position:fixed;
    left:0; right:0; bottom:0;
    display:none;            /* hidden on slide 1a */
    gap:12px;
    padding:14px 16px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(6px);
    box-shadow:0 -4px 14px rgba(0,0,0,0.14);
    z-index:9999;
    justify-content:space-between;
  }
  .nav-fixed .btn{ width:48%; }
	
	/* Slide 4 Submit Button States */
#globalSubmit {
  background: #999;       /* greyed out when disabled */
  cursor: not-allowed;
  opacity: 0.6;
}

/* When enabled */
#globalSubmit.enabled {
  background: #28a745 !important;  /* green */
  cursor: pointer;
  opacity: 1;
}
.quote-selection-summary {font-family:'bold';font-size:1.2rem!important;background:#bbb;border-radius:40px;line-height:2;opacity:1!important;margin-top:10px!important;max-width:300px!important}
.quote-selection-summary.PP {background:#5a3b70;color:#fff;}   /* Pop-Up Piano Bar */
.quote-selection-summary.PB {background:#c91660;color:#fff;}   /* Party Piano Band */
.quote-selection-summary.DP {background:#0a6eb4;color:#fff;}   /* Duelling Pianos */
#multiStepForm.prefill-hold .slide {visibility:hidden;}
/* ===============================
   FLATPICKR CALENDAR THEME
   =============================== */

.flatpickr-calendar {
  font-family: inherit;
}

/* Header (Month + Year) */
.flatpickr-months {
  background: #196DB6;
  color: #fff;
  padding: 10px;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  display: none !important; /* hide native icons */
}

.flatpickr-prev-month::before { content: "◀"; }
.flatpickr-next-month::before { content: "▶"; }

.flatpickr-prev-month:hover::before,
.flatpickr-next-month:hover::before {
  color: #A0B6CD;
  transform: scale(1.1);
}

/* Weekday row */
.flatpickr-weekdays {
  background: #A0B6CD;
  color: #fff !important;
}

/* Selected / hover */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #196DB6 !important;
  color: #fff !important;
}

.flatpickr-day:hover {
  background: #196DB6;
  color: #fff;
}

.flatpickr-day.today {
  border-color: #fff;
}

/* ===============================
   VISIBLE INPUT (altInput)
   =============================== */

input.flatpickr-input {
  background: #333 !important;
  color: #fff !important;
  font-family: 'bold' !important;
  text-align: left !important;

  width: 100% !important;
  max-width: 220px !important;
  padding: 12px 42px 12px 16px !important; 
  border-radius: 6px !important;
  border: 1px solid #333 !important;

  cursor: pointer !important;

  /* Calendar icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5C3.897 4 3 4.897 3 6v14c0 1.102.897 2 2 2h14c1.103 0 2-.898 2-2V6c0-1.103-.897-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px !important;
}

/* Placeholder */
input.flatpickr-input::placeholder,
input.flatpickr-input::-webkit-input-placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

/* Disabled (TBC mode) */
input.flatpickr-input[disabled] {
  background: #aaa !important;
  color: #666 !important;
  background-image: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

input.flatpickr-input[disabled]::placeholder,
input.flatpickr-input[disabled]::-webkit-input-placeholder {
  color: #666 !important;
  opacity: 1 !important;
}

/* ===============================
   iPHONE FLATPICKR (mobileInput)
   =============================== */

input.flatpickr-mobile {
  color: transparent !important;
  position: relative;
  display:block;height:50px !important; 
}

/* Fake placeholder */
input.flatpickr-mobile::before {
  content: attr(placeholder);
  color: #fff !important;
  font-family: 'text';
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

input.flatpickr-mobile:valid {
  color: #fff !important;
}

input.flatpickr-mobile:valid::before {
  content: "";
}

/* ===============================
   DATE TBC STYLE
   =============================== */

.date-tbc {
  background: #f8f8f8 !important;
  color: #666 !important;
  border-color: #ddd !important;
  cursor: not-allowed !important;
  text-align: center;
  font-style: italic;
  transition: all 0.25s ease-in-out;
}

.date-tbc::after {
  display: none !important;
}

.date-tbc::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

/* ===============================
   MONTH + YEAR CONTROLS FIXES
   =============================== */

.flatpickr-monthDropdown-months {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  width: 10ch !important;transform: translateY(1px);
}

/* Dropdown options */
.flatpickr-monthDropdown-months option {
  color: #000 !important; /* required for contrast */
}

/* Year input */
.flatpickr-current-month input.cur-year {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 14pt !important;
}

/* Align month + year */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  gap: 0px !important;
  font-family: inherit !important;
  height: 30px !important;
  line-height: 30px !important;
  transform: translate(20px, -5px);
}


  /* TBC checkbox */
  .tbc-row{ display:flex; align-items:center; gap:12px; margin-top:10px; margin-bottom:10px; cursor:pointer; }
  .tbc-row input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;padding:12px!important;
    width:20px; height:20px; border:2px solid #333; border-radius:4px; background:#fff; cursor:pointer; position:relative; transition:all .25s ease;
  }
  .tbc-row input[type="checkbox"]:hover{ box-shadow:0 0 8px rgba(25,109,182,0.35); }
  .tbc-row input[type="checkbox"]:checked{ background:#196DB6; border-color:#196DB6; }
  .tbc-row input[type="checkbox"]:checked::after{
    content:""; position:absolute; left:7px; top:1px; width:7px; height:14px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg);
  }
  .tbc-row label{ font-family:'text'; font-size:12pt; color:#333; cursor:pointer; position:relative; top:-10px; }
/* Ensure wrapper behaves like other form fields */
#extraInfoBox {
  width: 100%;
  text-align: center;
  margin-top: 3px !important;   /* matches spacing of other fields */
  margin-bottom: 0;
}

/* Make textarea match input width, padding, margins */
#extraInfoBox textarea {
  width: 100%;
  max-width: 420px;          /* same as inputs */
  box-sizing: border-box;
  display: block;
  margin: 0 auto 20px auto;  /* same vertical spacing as inputs */
}
/* Scrollbar style (for Chrome/Edge/Safari) */
.gm-dropdown::-webkit-scrollbar {
  width: 6px;
}
.gm-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.gm-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}
 
	/* Progress bar container */
#progressBarWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #eaeaea;
  z-index: 9999;
}

/* Animated progress bar */
#progressBar {
  height: 100%;
  width: 0%;
  background: #333; /* DP brand blue */
  transition: width 0.35s ease;
}
	/* CSS Document */
#multiStepForm input,
#multiStepForm textarea,
#multiStepForm select,
#multiStepForm button {
  font-size: 16px !important;
}
	.addressContainer {max-width:480px;width:100%;text-align:center}
	#autocompleteContainer {position:relative}
	/* --- Mobile-friendly styling for the address field --- */
#autocomplete, input, textarea {
  -webkit-appearance: none;      /* Removes iOS default rounded inset look */
  border-radius: 6px;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Focus ring for accessibility + nicer highlight on mobile */
#autocomplete:focus, input:focus, textarea:focus {
  border-color: #666;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}
	.badge-circle {font-size:3rem!important;background:none!important;max-width:30px;padding-left:10px;color:rgba(255,255,255,0.5)!important}
	.slider-container .slide h2 {color:#333!important}
	.addressContainer {max-width:480px;width:100%;text-align:center}
	#autocompleteContainer {position:relative}
	/* --- Mobile-friendly styling for the address field --- */
#autocomplete, input, textarea {
  -webkit-appearance: none;      /* Removes iOS default rounded inset look */
  border-radius: 6px;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Focus ring for accessibility + nicer highlight on mobile */
#autocomplete:focus, input:focus, textarea:focus {
  border-color: #666;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}
/* Slightly bigger tap target for iPhones */
@media (max-width: 600px) {
  #autocomplete, input, textarea {
    font-size: 1rem;
    padding: 14px 12px;
  }
}
#autocomplete:focus + 
/* --- Safari Autofill Fix: keep slides visible but off‑screen --- */
.slide {
  position: absolute !important;
  top: 0;
  left: 100vw; /* Off screen but still "visible" to Safari */
  opacity: 1 !important; /* Do not hide with opacity */
  pointer-events: none; /* Prevent interaction when off-screen */
  transition: left 0.35s ease;
}
.slide.active {
  left: 0 !important; /* Slide into view */
  pointer-events: auto; /* Reactivate */
}
/* Ensure slides stack properly */
.slider-container {
  position: relative;
  overflow-x: hidden;
}
 /* Mobile tweaks */
  @media(max-width:600px){
    .slide h2{font-size:1rem;}
    .slide input, .slide select{max-width:92%;}
	 #extraInfoBox textarea {max-width:92%}
    .nav-fixed .btn{ width:49%; }
 
/* Slightly bigger tap target for iPhones */
  #autocomplete, input, textarea {font-size: 1rem;padding: 14px 12px}
}
	
/* Ensure mobile tap target comfort */
@media (hover: none) {
  .gm-dropdown div {padding: 14px 16px}
}

/* ==============================
Exit button - back to pianofactor.co.uk
============================== */

#exit {z-index:-1;transition:All 0.5s ease;letter-spacing:2px;font-size:1.4rem;padding:10px 20px;background:rgba(40,36,42,1);color:white;font-family:'bold';position:fixed;top:0;left:0;border-radius:0 0 10px 0}
#exit:hover {padding:12px 24px;background:darkred;box-shadow:5px 5px 15px rgba(0,0,0,0.3)}
#exit {  display: inline-block;
    
    transform-origin: 50% 50%;
    transition: padding 0.25s ease;}

/* ==============================
    Header H1 styling and animated removal
    ============================== */
 .app-header{
   position:absolute;
   top:0;
   left:50%;
   transform:translateX(-50%);
   z-index:50;
   width:min(720px, calc(100vw - 32px));
   padding:20px 0 0;
   text-align:center;
 
   opacity:0;
   transition: opacity .25s ease, transform .25s ease;
 
   pointer-events:none; /* keep header “non-interactive” */
 }
 
 .app-header.is-visible{
   opacity:1;
 }
 
 .app-header h1{
   font-size:clamp(1.6rem, 3.2vw, 2.4rem);
   line-height:1;
   margin-bottom:10px;
 }
 
 .app-header p{
   font-size:.95rem;
   opacity:.8;
   max-width:520px;
   margin:0 auto;
 }

/* ==============================
  PianoFactor Entry Cue (Toast)
  ============================== */
 .pf-entrycue{
   position:fixed;
   left:50%;
   bottom:40px;
   z-index:999999;
 
   /* centring */
   width:100%;
   transform:translateX(-50%) translateY(140%);
   display:flex;
   justify-content:center;
   padding-inline:26px;
   box-sizing:border-box;
 
   opacity:0;
   pointer-events:none;
 
   transition:
   transform 420ms cubic-bezier(.2,.9,.2,1),
   opacity 260ms ease;
 }
 
 .pf-entrycue.is-visible{
   transform:translateX(-50%) translateY(0);
   opacity:1;
 }
 
 .pf-entrycue.is-hiding{
   transform:translateX(-50%) translateY(140%);
   opacity:0;
 }
 
 .pf-entrycue__inner{
   display:flex;
   align-items:center;
   gap:14px;
   padding:14px 18px;
   border-radius:14px;
   background:rgba(255,255,255,0.94);
   color:#111;
   box-shadow:0 14px 40px rgba(0,0,0,0.1);
   border:1px solid rgba(0,0,0,0.08);
 
   width:100%;
   max-width:444px;
 }
 
 .pf-entrycue__logo{
   width:36px;
   height:36px;
   display:block;
   flex:0 0 auto;
 }
 
 .pf-entrycue__text{
   display:flex;
   flex-direction:column;
   gap:4px;
   line-height:1.25;
 }
 
 .pf-entrycue__brand{
   font-weight:700;
   font-size:16px;
   letter-spacing:.2px;
 }
 
 .pf-entrycue__line{
   font-size:14px;
   opacity:.78;
 }
 

  
  /* Reduced motion: no slide */
  @media (prefers-reduced-motion: reduce){
    .pf-entrycue{
    transition:none !important;
    transform:translateX(-50%) translateY(0) !important;
    opacity:1 !important;
    }
  }
  
  /* Dark mode */
  @media (prefers-color-scheme: dark){
    .pf-entrycue__inner{
    background:rgba(20,20,20,0.94);
    color:rgba(255,255,255,0.95);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 14px 40px rgba(0,0,0,0.55);
    }
    .pf-entrycue__line{ opacity:.75; }
  }
  
  @media (max-width:420px){
    .pf-entrycue__brand{ font-size:15px; }
    .pf-entrycue__line{ font-size:13px; }
  }