/*
Theme Name: Qatar Appliance Care
Theme URI: https://example.com/
Author: Custom
Description: Qatar Appliance Care website converted from the supplied HTML design.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: qatar-appliance-care
*/

.material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
    }
    .custom-scroll::-webkit-scrollbar {
      height: 4px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #8A1538;
      border-radius: 4px;
    }


/* Mobile responsiveness for the original design */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
.hero-slide { touch-action: pan-y; }

@media (max-width: 767px) {
  #hero { padding-top: .75rem; padding-bottom: 2.5rem; }
  #hero > .max-w-7xl { padding-left: .75rem; padding-right: .75rem; }
  #hero .relative.rounded-3xl {
    min-height: 590px;
    border-radius: 1.25rem;
  }
  #hero .hero-slide > .relative.z-10 {
    width: 100%;
    max-width: none;
    padding: 2.5rem 3.25rem 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #hero .hero-slide h1,
  #hero .hero-slide h2 {
    font-size: clamp(2rem, 9vw, 2.7rem);
    line-height: 1.08;
    margin-bottom: 1rem;
  }
  #hero .hero-slide p { font-size: .92rem; line-height: 1.55; margin-bottom: 1.25rem; }
  #hero .hero-slide .inline-flex { max-width: 100%; width: fit-content; }
  #hero .hero-slide .flex.flex-wrap.items-center.gap-4 { flex-direction: column; align-items: stretch; gap: .65rem; }
  #hero .hero-slide .flex.flex-wrap.items-center.gap-4 > a { width: 100%; justify-content: center; text-align: center; }
  #hero .hero-slide .flex.flex-wrap.items-center.gap-4 > a:last-child { padding-left: 0; }
  #hero .hero-slide .mt-8 { margin-top: 1.25rem; padding-top: 1rem; }
  #hero .absolute.left-4, #hero .absolute.right-4 { width: 2.5rem; height: 2.5rem; top: auto; bottom: 1rem; }
  #hero .absolute.left-4 { left: 1rem; }
  #hero .absolute.right-4 { right: 1rem; }
  #hero .absolute.bottom-6 { left: 50%; transform: translateX(-50%); bottom: 1.25rem; }

  #booking { padding-top: 3rem; padding-bottom: 3rem; }
  #booking > .max-w-4xl { padding-left: .875rem; padding-right: .875rem; }
  #booking .rounded-3xl { border-radius: 1.25rem; }
  #booking .wizard-step { min-width: 0; }
  #booking #wizard-step-1 .grid { grid-template-columns: 1fr; }
  #booking #calendarDaysGrid { gap: .35rem; }
  #booking #calendarDaysGrid .cal-day-btn { min-width: 0; height: 2.65rem; font-size: .78rem; }
  #booking .wizard-step-3 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  #booking #timeSlotsContainer button { min-height: 3rem; padding-left: .4rem; padding-right: .4rem; }
  #booking .wizard-step-3 .mt-6 { flex-direction: column; align-items: flex-start; gap: .4rem; }
  #booking #wizard-step-5 .mt-6 { flex-direction: column; align-items: flex-start; gap: .8rem; }
  #booking #wizard-step-5 .text-right { text-align: left; }
  #booking #wizardPrevBtn, #booking #wizardNextBtn, #booking #wizardSubmitBtn { min-height: 3.1rem; }
  #booking .pt-6.border-t { flex-wrap: wrap; }
  #booking #wizardNextBtn, #booking #wizardSubmitBtn { flex: 1 1 100%; justify-content: center; }
  #booking #wizardPrevBtn { flex: 0 0 auto; }
}

@media (max-width: 390px) {
  #hero .relative.rounded-3xl { min-height: 625px; }
  #hero .hero-slide > .relative.z-10 { padding-left: 2.8rem; padding-right: 2.8rem; }
  #hero .hero-slide h1, #hero .hero-slide h2 { font-size: 1.9rem; }
  #booking #calendarDaysGrid .cal-day-btn { height: 2.45rem; font-size: .72rem; }
}

/* v4 service images, floating WhatsApp and mobile-first booking layout */
.qac-service-image-wrap{height:180px;border-radius:1rem;overflow:hidden;background:#f8eef1;margin-left:-.25rem;margin-right:-.25rem;}
.qac-service-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
#services > .max-w-7xl .bg-white:hover .qac-service-image{transform:scale(1.04);}
.qac-whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:8px;padding:13px 17px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2);font-weight:700;font-size:13px;transition:transform .2s ease,box-shadow .2s ease;}
.qac-whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,.25);color:#fff;}
.qac-whatsapp-float .material-symbols-outlined{font-size:23px;}
@media(max-width:767px){
  .qac-whatsapp-float{right:14px;bottom:14px;padding:14px;width:52px;height:52px;justify-content:center;}
  .qac-whatsapp-label{display:none;}
  .qac-service-image-wrap{height:145px;margin-bottom:1rem;}
  #services .bg-white{padding:1.25rem;}
  #booking{padding:0;background:#FAF7F5;}
  #booking > .max-w-4xl{width:100%;max-width:none;padding:0;}
  #booking .qac-wizard-card{height:calc(100svh - 5rem);min-height:calc(100svh - 5rem);max-height:calc(100svh - 5rem);border-radius:0;display:flex;flex-direction:column;padding:1rem .9rem .8rem;overflow:hidden;box-shadow:none;}
  #booking .qac-wizard-card > .mb-10{margin-bottom:.7rem;flex:0 0 auto;}
  #booking .qac-wizard-card > .wizard-step{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:.1rem .1rem .6rem;-webkit-overflow-scrolling:touch;}
  #booking .qac-wizard-card > .pt-6.border-t{flex:0 0 auto;padding-top:.65rem;margin-top:.25rem;background:#fff;position:relative;z-index:3;box-shadow:0 -8px 18px rgba(0,0,0,.05);}
  #booking #wizardPrevBtn,#booking #wizardNextBtn,#booking #wizardSubmitBtn{min-height:3rem;padding-top:.7rem;padding-bottom:.7rem;}
  #booking #wizardNextBtn,#booking #wizardSubmitBtn{flex:1 1 auto;}
  #booking .wizard-step .mb-8{margin-bottom:.7rem;}
  #booking #wizard-step-1 .service-option-card{padding:1rem;min-height:110px;}
  #booking #wizard-step-1 .service-option-card .w-12{width:2.5rem;height:2.5rem;}
  #booking #wizard-step-2 .max-w-lg{padding:1rem;margin-bottom:.5rem;}
  #booking #wizard-step-3 .max-w-xl{margin-bottom:.5rem;}
  #booking #wizard-step-4 .max-w-xl{margin-bottom:.5rem;}
  #booking #wizard-step-5 .max-w-xl{margin-bottom:.5rem;}
  #booking #wizard-step-5 input{padding-top:.75rem;padding-bottom:.75rem;}
  #booking #wizard-step-4 .p-6.sm\:p-8{padding:1.1rem;}
  #booking #wizard-step-4 .w-16{width:3.25rem;height:3.25rem;}
  #booking #wizard-step-4 .text-3xl{font-size:1.65rem;}
}



/* v6.1: service card header fits every card width */
#services .grid{min-width:0;}
#services .bg-white{min-width:0;overflow:hidden;}
.qac-service-top{
  width:100%;
  min-width:0;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:.55rem .7rem;
  align-items:center;
  margin-bottom:1.25rem !important;
}
.qac-service-image-wrap{
  grid-column:1;
  grid-row:1 / span 2;
  width:100%;
  max-width:168px;
  height:88px;
  min-width:0;
  margin:0 !important;
  border-radius:14px;
  overflow:hidden;
  background:#f8eef1;
}
.qac-service-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.qac-service-top > .w-14{
  grid-column:2;
  grid-row:1;
  width:52px;
  height:52px;
  min-width:0;
  justify-self:end;
}
.qac-service-top > span:last-child{
  grid-column:2;
  grid-row:2;
  min-width:0;
  max-width:118px;
  white-space:normal;
  text-align:center;
  line-height:1.15;
  font-size:10px;
  padding:.45rem .55rem;
  justify-self:end;
  overflow:hidden;
}
@media (max-width:1100px) and (min-width:768px){
  #services .bg-white{padding:1.5rem;}
  .qac-service-image-wrap{max-width:135px;height:76px;}
  .qac-service-top > .w-14{width:46px;height:46px;}
  .qac-service-top > span:last-child{max-width:100px;font-size:9px;}
}
@media (max-width:767px){
  #services{overflow-x:hidden;}
  #services > .max-w-7xl{width:100%;max-width:100%;box-sizing:border-box;}
  #services .grid.grid-cols-1.md\\:grid-cols-3{grid-template-columns:minmax(0,1fr);gap:1rem;}
  #services .bg-white{width:100%;min-width:0;box-sizing:border-box;padding:1rem;border-radius:16px;}
  .qac-service-top{grid-template-columns:minmax(0,1fr) auto;gap:.5rem .6rem;margin-bottom:1rem !important;}
  .qac-service-image-wrap{max-width:110px;height:68px;border-radius:11px;}
  .qac-service-top > .w-14{width:42px;height:42px;}
  .qac-service-top > .w-14 .material-symbols-outlined{font-size:1.35rem;}
  .qac-service-top > span:last-child{max-width:105px;font-size:9px;padding:.38rem .5rem;}
  #services .bg-white h3{font-size:1.05rem;line-height:1.3;margin-bottom:.55rem;}
  #services .bg-white p{font-size:.82rem;line-height:1.55;margin-bottom:1rem;}
  #services .bg-white ul{margin-bottom:1rem;}
  #services .bg-white ul li{gap:.4rem;font-size:.72rem;line-height:1.35;}
  #services .bg-white > div:last-child{padding-top:.8rem;gap:.6rem;}
  #services .bg-white > div:last-child .text-lg{font-size:1rem;}
  #services .bg-white > div:last-child a{padding:.6rem .8rem;font-size:.68rem;white-space:nowrap;}
  #services .bg-white .absolute.top-0.right-0{max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:420px){
  #services > .max-w-7xl{padding-left:.75rem;padding-right:.75rem;}
  #services .bg-white{padding:.85rem;}
  .qac-service-image-wrap{max-width:92px;height:60px;}
  .qac-service-top > .w-14{width:38px;height:38px;}
  .qac-service-top > span:last-child{max-width:95px;font-size:8px;padding:.35rem .4rem;}
}
@media (max-width:767px){
  #booking .qac-wizard-card > .wizard-step{overflow:hidden !important;}
  #booking .qac-wizard-card{overflow:hidden !important;}
}

.qac-service-top{
  min-width:0;
  align-items:center;
}
.qac-service-image-wrap{
  width:168px;
  height:88px;
  flex:0 0 168px;
  border-radius:14px;
  overflow:hidden;
  background:#f8eef1;
  margin:0;
}
.qac-service-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.qac-service-top > .w-14{
  flex:0 0 56px;
}
.qac-service-top > span:last-child{
  flex:0 1 auto;
  white-space:nowrap;
}

@media (max-width: 1024px){
  #services .grid.grid-cols-1.md\\:grid-cols-3{
    gap:1.25rem;
  }
  #services .bg-white{
    padding:1.5rem;
  }
  .qac-service-image-wrap{
    width:140px;
    height:78px;
    flex-basis:140px;
  }
  .qac-service-top > .w-14{
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  .qac-service-top > span:last-child{
    font-size:10px;
    padding-left:.55rem;
    padding-right:.55rem;
  }
}

@media (max-width: 767px){
  /* Keep each service card inside the viewport; no horizontal overflow. */
  #services{
    overflow-x:hidden;
  }
  #services > .max-w-7xl{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #services .grid.grid-cols-1.md\\:grid-cols-3{
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
  #services .bg-white{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:1rem;
    border-radius:16px;
  }
  .qac-service-top{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:92px minmax(0,1fr) auto;
    gap:.65rem;
    align-items:center;
    margin-bottom:1rem;
  }
  .qac-service-image-wrap{
    width:92px;
    height:66px;
    min-width:0;
    flex:none;
    border-radius:11px;
  }
  .qac-service-top > .w-14{
    width:42px;
    height:42px;
    min-width:42px;
    flex:none;
  }
  .qac-service-top > .w-14 .material-symbols-outlined{
    font-size:1.35rem;
  }
  .qac-service-top > span:last-child{
    min-width:0;
    white-space:normal;
    text-align:center;
    line-height:1.15;
    font-size:9px;
    padding:.4rem .5rem;
  }
  #services .bg-white h3{
    font-size:1.05rem;
    line-height:1.3;
    margin-bottom:.55rem;
  }
  #services .bg-white p{
    font-size:.82rem;
    line-height:1.55;
    margin-bottom:1rem;
  }
  #services .bg-white ul{
    margin-bottom:1rem;
  }
  #services .bg-white ul li{
    gap:.4rem;
    font-size:.72rem;
    line-height:1.35;
  }
  #services .bg-white > div:last-child{
    padding-top:.8rem;
    gap:.6rem;
  }
  #services .bg-white > div:last-child .text-lg{
    font-size:1rem;
  }
  #services .bg-white > div:last-child a{
    padding:.6rem .8rem;
    font-size:.68rem;
    white-space:nowrap;
  }
  /* The featured card's corner ribbon must never push the content outside the card. */
  #services .bg-white .absolute.top-0.right-0{
    max-width:58%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 420px){
  #services > .max-w-7xl{
    padding-left:.75rem;
    padding-right:.75rem;
  }
  #services .bg-white{
    padding:.85rem;
  }
  .qac-service-top{
    grid-template-columns:82px minmax(0,1fr) auto;
    gap:.5rem;
  }
  .qac-service-image-wrap{
    width:82px;
    height:60px;
  }
  .qac-service-top > .w-14{
    width:38px;
    height:38px;
    min-width:38px;
  }
  .qac-service-top > span:last-child{
    font-size:8px;
    padding:.35rem .4rem;
  }
}

/* v6.2: final service-card overflow correction */
#services .qac-service-top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  gap:.55rem .7rem !important;
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
  overflow:hidden !important;
}
#services .qac-service-image-wrap{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:100% !important;
  max-width:168px !important;
  height:88px !important;
  min-width:0 !important;
  flex:none !important;
  margin:0 !important;
}
#services .qac-service-top > .w-14{
  grid-column:2 !important;
  grid-row:1 !important;
  width:52px !important;
  height:52px !important;
  min-width:0 !important;
  flex:none !important;
  justify-self:end !important;
}
#services .qac-service-top > span:last-child{
  grid-column:2 !important;
  grid-row:2 !important;
  width:auto !important;
  max-width:118px !important;
  min-width:0 !important;
  white-space:normal !important;
  text-align:center !important;
  line-height:1.15 !important;
  font-size:10px !important;
  padding:.45rem .55rem !important;
  justify-self:end !important;
  overflow:hidden !important;
}
@media (max-width:1100px) and (min-width:768px){
  #services .qac-service-image-wrap{max-width:135px !important;height:76px !important;}
  #services .qac-service-top > .w-14{width:46px !important;height:46px !important;}
  #services .qac-service-top > span:last-child{max-width:100px !important;font-size:9px !important;}
}
@media (max-width:767px){
  #services .qac-service-top{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:.5rem .6rem !important;
  }
  #services .qac-service-image-wrap{max-width:110px !important;height:68px !important;}
  #services .qac-service-top > .w-14{width:42px !important;height:42px !important;}
  #services .qac-service-top > span:last-child{max-width:105px !important;font-size:9px !important;padding:.38rem .5rem !important;}
}
@media (max-width:420px){
  #services .qac-service-image-wrap{max-width:92px !important;height:60px !important;}
  #services .qac-service-top > .w-14{width:38px !important;height:38px !important;}
  #services .qac-service-top > span:last-child{max-width:95px !important;font-size:8px !important;}
}

/* v6: booking remains a fixed mobile viewport with no internal scrolling. */
@media (max-width:767px){
  #booking .qac-wizard-card > .wizard-step{
    overflow:hidden!important;
  }
  #booking .qac-wizard-card{
    overflow:hidden!important;
  }
}