/*
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; }
}