/* drgbooking.css
   Dr. Garages Booking — updated for sticky footer compatibility
*/

:root{
  --garage-blue:#2E6FA3;
  --dark-steel:#1F2A33;
  --clean-concrete:#F5F7FA;
  --accent-blue:#4DA3FF;

  --text: var(--dark-steel);
  --muted: rgba(31,42,51,.65);
  --muted2: rgba(31,42,51,.50);
  --border: rgba(31,42,51,.10);
  --border2: rgba(31,42,51,.14);
  --shadow: 0 30px 120px rgba(0,0,0,.35);
  --shadow2: 0 18px 55px rgba(31,42,51,.14);
  --radius: 22px;
  --radius2: 16px;
  --radiusPill: 999px;
}

/* Plugin wrapper */
.drg-booking{
  display: contents;
}

/* Plugin default button, if shortcode is ever used */
.drg-booking__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radiusPill);
  border: 1px solid rgba(46,111,163,.20);
  background: var(--garage-blue);
  color: #fff;
  font-weight: 900;
  letter-spacing: .15px;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(46,111,163,.28);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.drg-booking__btn:hover{
  background: var(--accent-blue);
  transform: translateY(-1px);
  box-shadow: 0 24px 60px rgba(46,111,163,.34);
}

.drg-booking__btn:active{
  transform: translateY(0) scale(.99);
}

.drg-booking__btn:focus-visible{
  outline: none;
  box-shadow:
    0 24px 60px rgba(46,111,163,.34),
    0 0 0 5px rgba(77,163,255,.22);
}

.drg-booking__price{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radiusPill);
  background: rgba(245,247,250,.18);
  border: 1px solid rgba(245,247,250,.22);
  font-size: 13px;
  font-weight: 900;
}

/* Mount point */
#drg-booking-root{
  position: relative;
  z-index: 1;
}

/* Modal */
.drg-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.drg-modal.is-open{
  display: block;
}

.drg-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(31,42,51,.55);
  backdrop-filter: blur(10px);
}

.drg-modal__panel{
  position: relative;
  width: min(980px, calc(100% - 24px));
  margin: 6vh auto;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.drg-modal__head{
  padding: 22px 22px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(245,247,250,.96), rgba(255,255,255,.94));
  border-bottom: 1px solid rgba(31,42,51,.06);
}

.drg-modal__kicker{
  display:inline-flex;
  padding: 7px 12px;
  border-radius: var(--radiusPill);
  background: rgba(46,111,163,.10);
  border: 1px solid rgba(46,111,163,.18);
  color: var(--garage-blue);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.drg-modal__title{
  margin: 0 0 6px;
  color: var(--text);
  font-weight: 950;
  letter-spacing: -0.4px;
  font-size: clamp(20px, 2.7vw, 32px);
  line-height: 1.08;
}

.drg-modal__sub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.drg-modal__close{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: var(--radiusPill);
  border: 1px solid rgba(31,42,51,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  cursor:pointer;
  display:grid;
  place-items:center;
  color: rgba(31,42,51,.78);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.drg-modal__close svg{
  width:18px;
  height:18px;
}

.drg-modal__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.drg-modal__close:active{
  transform: translateY(0) scale(.98);
}

.drg-modal__body{
  padding: 18px 22px 22px;
  max-height: 78vh;
  overflow: auto;
  scrollbar-width: none;
}

.drg-modal__body::-webkit-scrollbar{
  display: none;
}

/* Toast */
.drg-toast{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 70px;
  width: min(720px, calc(100% - 28px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(31,42,51,.92);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.drg-toast.is-on{
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Loading */
.drg-loading{
  padding: 34px 10px 26px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 12px;
}

.drg-spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(31,42,51,.16);
  border-top-color: rgba(31,42,51,.62);
  animation: drgSpin .9s linear infinite;
}

@keyframes drgSpin{
  to{ transform: rotate(360deg); }
}

.drg-loading__text{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

/* Steps */
.drg-steps{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin-bottom: 16px;
}

.drg-step{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 12px;
  color: rgba(31,42,51,.55);
  background: rgba(245,247,250,.80);
  border: 1px solid rgba(31,42,51,.08);
}

.drg-step.is-active{
  color: var(--garage-blue);
  background: rgba(46,111,163,.10);
  border-color: rgba(46,111,163,.18);
}

/* Layout */
.drg-twoCol{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:start;
}

.drg-sectionTitle{
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--text);
  margin-bottom: 10px;
  font-size: 14px;
}

/* Days */
.drg-days{
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: none;
}

.drg-days::-webkit-scrollbar{
  display:none;
}

.drg-day{
  background: rgba(245,247,250,.55);
  border: 1px solid rgba(31,42,51,.07);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
}

.drg-day__title{
  font-weight: 950;
  color: rgba(31,42,51,.86);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  font-size: 13px;
}

.drg-day__slots{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Slot chips */
.drg-slot{
  appearance:none;
  border: 1px solid rgba(31,42,51,.12);
  background: rgba(255,255,255,.82);
  color: rgba(31,42,51,.86);
  font-weight: 900;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}

.drg-slot:hover{
  transform: translateY(-1px);
  border-color: rgba(46,111,163,.28);
  box-shadow: 0 10px 24px rgba(31,42,51,.10);
}

.drg-slot:active{
  transform: translateY(0) scale(.99);
}

.drg-slot.is-selected{
  border-color: rgba(46,111,163,.40);
  background: rgba(46,111,163,.12);
  color: rgba(31,42,51,.90);
  box-shadow: 0 14px 34px rgba(46,111,163,.18);
}

/* Right card */
.drg-card{
  position: sticky;
  top: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(31,42,51,.08);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.drg-card__kicker{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: var(--radiusPill);
  background: rgba(46,111,163,.10);
  border: 1px solid rgba(46,111,163,.18);
  color: var(--garage-blue);
  font-weight: 950;
  font-size: 12px;
  margin-bottom: 10px;
}

.drg-card__when{
  font-weight: 950;
  letter-spacing: -0.2px;
  color: rgba(31,42,51,.86);
  margin-bottom: 12px;
  font-size: 14px;
}

/* Form */
.drg-form{
  display:grid;
  gap: 12px;
}

.drg-field{
  display:grid;
  gap: 6px;
}

.drg-field label{
  font-size: 13px;
  font-weight: 950;
  color: rgba(31,42,51,.78);
}

.drg-field select,
.drg-field textarea,
.drg-field input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(31,42,51,.12);
  background: rgba(255,255,255,.85);
  padding: 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.drg-field textarea{
  resize: vertical;
  min-height: 92px;
}

.drg-field select:focus,
.drg-field textarea:focus,
.drg-field input:focus{
  border-color: rgba(77,163,255,.55);
  box-shadow: 0 0 0 4px rgba(77,163,255,.18);
}

/* Agreement */
.drg-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(245,247,250,.75);
  border: 1px solid rgba(31,42,51,.08);
  color: rgba(31,42,51,.68);
  font-size: 13px;
  line-height: 1.45;
}

.drg-check input{
  margin-top: 3px;
  width: auto;
}

.drg-check a{
  color: var(--garage-blue);
  font-weight: 950;
  text-decoration: none;
}

.drg-check a:hover{
  text-decoration: underline;
}

/* Submit */
.drg-submit{
  width: 100%;
  border: 0;
  border-radius: var(--radiusPill);
  padding: 14px 16px;
  background: var(--garage-blue);
  color: #fff;
  font-weight: 950;
  letter-spacing: .2px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow: 0 18px 50px rgba(46,111,163,.30);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.drg-submit:hover{
  background: var(--accent-blue);
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(46,111,163,.34);
}

.drg-submit:active{
  transform: translateY(0) scale(.99);
}

.drg-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 12px 32px rgba(46,111,163,.18);
}

.drg-submit:focus-visible{
  outline: none;
  box-shadow:
    0 22px 60px rgba(46,111,163,.34),
    0 0 0 5px rgba(77,163,255,.22);
}

.drg-chip{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radiusPill);
  background: rgba(245,247,250,.18);
  border: 1px solid rgba(245,247,250,.26);
  font-size: 12px;
  font-weight: 950;
}

/* Fine print */
.drg-fine{
  text-align:center;
  color: var(--muted2);
  font-size: 12px;
  margin-top: 2px;
}

/* States */
.drg-state{
  padding: 22px 10px 26px;
  text-align:center;
  display:grid;
  gap: 10px;
}

.drg-state__title{
  font-weight: 950;
  letter-spacing: -0.3px;
  color: var(--text);
  font-size: 18px;
}

.drg-state__sub{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.drg-state__actions{
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.drg-miniBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radiusPill);
  border: 1px solid rgba(31,42,51,.12);
  background: rgba(255,255,255,.85);
  color: rgba(31,42,51,.82);
  font-weight: 950;
  cursor:pointer;
  text-decoration:none;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.drg-miniBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(31,42,51,.10);
  background: rgba(255,255,255,.96);
}

.drg-miniBtn.is-primary{
  border-color: rgba(46,111,163,.22);
  background: rgba(46,111,163,.10);
  color: var(--garage-blue);
}

/* Sticky footer compatibility:
   when modal is open, footer should not sit above it */
body.drg-booking-open .drg-sticky{
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px){
  .drg-twoCol{
    grid-template-columns: 1fr;
  }

  .drg-card{
    position: relative;
    top: auto;
  }

  .drg-days{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 520px){
  .drg-modal__panel{
    width: min(100% - 16px, 100%);
    margin: 2vh auto;
    border-radius: 18px;
  }

  .drg-modal__body{
    padding: 16px;
    max-height: 74vh;
  }

  .drg-modal__head{
    padding: 18px 16px 12px;
  }

  .drg-day{
    padding: 10px;
  }

  .drg-slot{
    padding: 11px 13px;
    font-size: 13px;
  }

  .drg-submit{
    min-height: 48px;
  }
}