/* Remove the third-party page loader and its permanent account placeholder. */
#nprogress,
#nprogress * {
  display: none !important;
}

/* Remove the permanently rendered account loading placeholder from the header. */
header div:has(> svg.lucide-loader-circle.animate-spin) {
  display: none !important;
}

/* Put the desktop header in Arabic reading order: logo on the right, actions on the left. */
@media (min-width: 1024px) {
  .min-h-screen > header > .container > .flex.items-center.justify-between {
    direction: rtl !important;
  }
}

.min-h-screen > header nav[aria-label="Main"] ul[data-slot="navigation-menu-list"] {
  direction: rtl !important;
  flex-direction: row;
}

/* Replace the decorative availability badge with a real WhatsApp link. */
div.relative.rounded-lg.bg-gray-100.shadow-lg.max-h-fit::after {
  content: none !important;
  display: none !important;
}
div.relative.rounded-lg.bg-gray-100.shadow-lg.max-h-fit::before {
  z-index: 23 !important;
  pointer-events: none !important;
}
.appointment-whatsapp-tag {
  position: absolute;
  bottom: 8px;
  right: 6px;
  z-index: 22;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  padding: 4px 22px 4px 9px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(5px);
  color: #374151 !important;
  font-size: 10px;
  line-height: 1.5;
  text-decoration: none !important;
  direction: rtl;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}
.appointment-whatsapp-tag:focus-visible {
  outline: 2px solid #7b57fc;
  outline-offset: 2px;
}
.products-container[data-design-services-list] .products-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Keep only the product title and the two prices in each service card. */
.product-card .product-price-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.125rem !important;
}

/* Arabic question text and numbering read from right to left. */
.faq-section .faqs-accordion {
  direction: rtl;
}
.faq-section button.fas-accordion-title {
  direction: rtl !important;
  text-align: right !important;
}
.faq-section .faq-question {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.35rem;
  direction: rtl;
  text-align: right;
}
.faq-section .faq-number {
  direction: ltr;
  unicode-bidi: isolate;
  flex: none;
}
.faq-section .faq-prompt {
  direction: rtl;
  text-align: right;
}

/* Leave a modest gap below the payment methods without the oversized spacer. */
footer > div:last-child {
  padding-bottom: 24px !important;
}

/* Keep the service CTA outlined like its product card, with a clear background. */
.product-card .mt-auto button[data-product-primary-cta][aria-label],
.product-card .mt-auto button[data-product-primary-cta][aria-label]:hover,
.product-card .mt-auto button[data-product-primary-cta][aria-label]:focus-visible {
  background-color: transparent !important;
  color: var(--primary, #7e3bed) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  box-shadow: none !important;
}

/* Use one corner radius across service, team, review, and FAQ cards. */
.product-card,
.testimonials-item,
.team-carousel-card,
.faq-section .border.rounded-lg {
  border-radius: 18px !important;
}

.team-carousel-section .team-carousel-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  direction: rtl !important;
  grid-template-columns: none !important;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.team-carousel-section .team-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.team-carousel-section .team-carousel-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.team-carousel-section .team-carousel-card {
  flex: 0 0 var(--team-carousel-card-width, 100%);
  width: var(--team-carousel-card-width, 100%);
  max-width: none;
  overflow: hidden;
  border: 1px solid rgb(229 229 232);
  background: #fff;
  scroll-snap-align: start;
}

.team-carousel-section .team-carousel-track > .team-carousel-card:last-child {
  scroll-snap-align: end;
}

.team-carousel-section .team-carousel-photo {
  width: 100%;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  background: #f4f4f5;
}

.team-carousel-section .team-carousel-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-carousel-section .team-carousel-details {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  padding: 12px 18px 0 !important;
}

.team-carousel-section .team-carousel-copy {
  flex: 1;
  min-width: 0;
  direction: rtl !important;
  text-align: right;
}

.team-carousel-section .team-carousel-copy > a {
  color: inherit;
  text-decoration: none;
}

.team-carousel-section .team-carousel-name {
  margin: 0;
  color: #322a42;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.6;
  min-height: 0 !important;
  text-align: right !important;
}

.team-carousel-section .team-carousel-role {
  margin: 0;
  color: #989898 !important;
  font-size: 12px !important;
  line-height: 1.8;
  text-align: right;
}

.team-carousel-section .team-carousel-action-wrap,
.team-carousel-section .team-carousel-action-wrap > div {
  margin: 0 !important;
}

.team-carousel-section .team-carousel-action,
.team-carousel-section .team-carousel-action:hover,
.team-carousel-section .team-carousel-action:focus-visible {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(49deg, var(--token-a378a457-09c9-4e21-8971-31a4dc6ae8ea, rgb(17, 16, 17)) 0%, var(--token-77abf34c-bfd0-46e4-bdc5-396472ca5ca6, rgba(17, 16, 17, 0.6)) 100%) !important;
  color: #fff !important;
  box-shadow: 3px 2px 11px #0000007d !important;
}

.team-carousel-section .team-carousel-action svg {
  width: 16px !important;
  height: 16px !important;
}

.team-carousel-section .team-carousel-card,
.team-carousel-section .product-card {
  border-radius: 18px !important;
}

/* Apply the supplied team-card customizations with selectors matching its HTML. */
.team-carousel-section .product-card .flex.flex-col.p-4.space-y-3.flex-1 {
  display: flex !important;
  flex-direction: row-reverse !important;
  direction: ltr !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 18px 0 !important;
}

.team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.space-y-0\.5 > a > h3 {
  text-align: right !important;
  font-size: 16px !important;
  min-height: 0 !important;
}

.team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.space-y-0\.5 > a > p {
  color: #989898 !important;
  font-size: 12px !important;
}

.team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.mt-auto > div > button {
  background: linear-gradient(49deg, var(--token-a378a457-09c9-4e21-8971-31a4dc6ae8ea, rgb(17, 16, 17)) 0%, var(--token-77abf34c-bfd0-46e4-bdc5-396472ca5ca6, rgba(17, 16, 17, 0.6)) 100%) !important;
  color: white !important;
  border: none !important;
  padding: 10px !important;
  box-shadow: 3px 2px 11px #0000007d !important;
  height: 30px !important;
  width: 30px !important;
}

/* The replacement arrow is a desktop-only icon; keep the original mobile icon. */
.desktop-left-arrow {
  display: none !important;
}

@media (min-width: 1024px) {
  .products-container[data-featured-packages] .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .products-container[data-design-services-list] .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .team-carousel-section .team-carousel-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
    scroll-snap-type: none;
    cursor: default;
  }

  .team-carousel-section .team-carousel-card {
    width: auto !important;
  }

  .team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div[class~="space-y-0.5"] > a > h3 {
    font-size: 22px !important;
  }

  .team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div[class~="space-y-0.5"] > a > p {
    font-size: 16px !important;
  }

  .team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.mt-auto > div > button.team-carousel-action,
  .team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.mt-auto > div > button.team-carousel-action:hover,
  .team-carousel-section .products-grid > .product-card:is(:nth-child(1), :nth-child(2)) > div.flex.flex-col.p-4.space-y-3.flex-1 > div.mt-auto > div > button.team-carousel-action:focus-visible {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .product-card > button[aria-label="Add to wishlist"] {
    display: none !important;
  }

  .product-card button[data-product-primary-cta]:not(.team-carousel-action) {
    border-radius: 9999px !important;
  }

  .product-card button[data-product-primary-cta]:not(.team-carousel-action) > svg:not(.desktop-left-arrow) {
    display: none !important;
  }

  .product-card button[data-product-primary-cta]:not(.team-carousel-action) > .desktop-left-arrow {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: none;
  }
}