/* Custom styles for modal success message and pricing scroll */

/* Modal Success */
/* --------------------------------------------------
   Success Modal Styles
   --------------------------------------------------*/

/* Full-screen dark overlay */
#reviewModal{
  position:fixed;
  inset:0;
  display:none;               /* toggled to flex in JS */
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  z-index:25000;              /* above loader/preloader */
  padding:1rem;
}

/* Helper class added by JS to animate fade-out */
#reviewModal.show{animation:fade-in 0.4s ease-out;}
#reviewModal.fadeOut{animation:fade-out 0.6s forwards;}

/* White box inside */
#reviewModal .modal-box{
  background:#ffffff;
  border-radius:12px;
  width:100%;
  max-width:420px;
  text-align:center;
  padding:35px 25px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  position:relative;
  overflow:visible;
}

/* Green circle with tick */
.checkmark{
  width:90px;
  height:90px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#4caf50;
  position:relative;
  animation:pop 0.5s ease-out forwards;
}
.checkmark:after{
  content:"\2713";           /* heavy check mark */
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:56px;
  line-height:1;
}

/* Close button (inherits .thm-btn styles) */
#closeReviewModal{
  margin-top:10px;
}

/* Animations */
@keyframes pop{
  0%{transform:scale(0);opacity:0;}
  80%{transform:scale(1.1);opacity:1;}
  100%{transform:scale(1);}
}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes fade-out{to{opacity:0;visibility:hidden;}}

/* -------------------- Responsive -------------------- */
@media (max-width:767px){
  #reviewModal .modal-box{max-width:90%;padding:25px 20px;}
  .checkmark{width:70px;height:70px;}
}

/* Pricing subtitle */
.pricing-two__subtitle{font-size:18px;color:#6c757d;margin-top:-6px;margin-bottom:4px;font-weight:500;transition:color .3s;}
.pricing-two__single:hover .pricing-two__subtitle,
.pricing-two__single.pricing-two__single--two .pricing-two__subtitle,
.pricing-two__single.active .pricing-two__subtitle{color:#fff;}

/* Scroll Row */
.scroll-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:1.5rem;scroll-behavior:smooth;padding-bottom:0.5rem;cursor:grab;}
.scroll-row.dragging{cursor:grabbing;}
.scroll-row::-webkit-scrollbar{height:8px;}
.scroll-row::-webkit-scrollbar-track{background:#e0e0e0;border-radius:4px;}
.scroll-row::-webkit-scrollbar-thumb{background:#4caf50;border-radius:4px;}
/* Firefox */
.scroll-row{scrollbar-width:thin;scrollbar-color:#4caf50 #e0e0e0;}

/* Responsive tweaks */
@media (max-width:767px){
  .scroll-row{gap:1rem;}
}

/* ===== Booking Card ===== */
.xs-sidebar-group .xs-overlay{pointer-events:none !important;}
.booking-card{
    max-width:420px;
    z-index:10001;
    margin:0 auto;
    border-radius:14px;
    box-shadow:0 10px 32px rgba(0,0,0,.08);
    padding:32px 28px;
    position:relative;
    overflow:visible;
}
.booking-card:before{
    pointer-events:none;
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#6c5dd4 0%,#46c1ff 100%);
    opacity:.05;
}
.booking-card__title{
    font-size:24px;
    font-weight:700;
    text-align:center;
    margin-bottom:26px;
}
.booking-card .form-row{display:flex;gap:18px;flex-wrap:wrap;}
.booking-card .form-row > *{flex:1 1 100%;}
.booking-card select,
.booking-card input,
.booking-card output{
    width:100%;
    padding:12px 14px;
    border:1px solid #dcdcdc;
    border-radius:6px;
    font-size:15px;
    transition:border .2s,box-shadow .2s;
    background:#0a1f47;
}
.booking-card select:focus,
.booking-card input:focus{
    border-color:#6c5dd4;
    box-shadow:0 0 0 3px rgba(108,93,212,.15);
    outline:0;
}
.booking-card .range-wrap{width:100%;display:flex;align-items:center;gap:12px;}
.booking-card input[type=range]{flex:1;margin:0;height:4px;background:#e5e5e5;border-radius:5px;-webkit-appearance:none;}
.booking-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#6c5dd4;cursor:pointer;}
.booking-card output{width:34px;text-align:center;font-weight:600;}
.booking-card .thm-btn{width:100%;margin-top:6px;justify-content:center;padding:14px 18px;background:#6c5dd4;}
.booking-card .thm-btn:hover{background:#5848c6}
@media(max-width:480px){.booking-card{padding:24px 20px;}}

/* Service radio */
.service-group{margin-bottom:18px;}
.service-group .label{margin-bottom:6px;font-weight:600;color:#fff;}
.service-options{display:flex;flex-direction:column;gap:10px;}
.service-option{display:flex;align-items:center;gap:10px;background:#f5f4ff;border:1px solid #dcdcdc;border-radius:6px;padding:10px 14px;cursor:pointer;transition:background .2s,border .2s;}
.service-option input{accent-color:#6c5dd4;}
.service-option:hover{border-color:#6c5dd4;}
.service-option input:checked + span{font-weight:600;color:#6c5dd4;}

/* Sidebar & Booking refinements */
.xs-sidebar-widget{max-width:340px;}
.booking-card{padding:24px 18px;}

/* Service radio grid */
.service-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:160px;overflow-y:auto;padding-right:4px;}
.service-option{background:#10224a;border:none;border-radius:8px;color:#fff;padding:12px 10px;justify-content:flex-start;gap:6px;}
.service-option:hover{background:#1a2e5c;border:none;}
.service-option input{accent-color:#ffd25d;}
.service-option input:checked + span{color:#ffd25d;font-weight:600;}

/* Button */
.booking-card .thm-btn{
    background:linear-gradient(135deg,#6c5dd4 0%, #46c1ff 100%);
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.booking-card .thm-btn:hover{background:linear-gradient(135deg,#5b4fe0,#3aa2ef);}

/* force option colors */
.booking-card select option{
    color:#05173D;
}