/* ---------------------------------------------------------------------------
 * Granzia Elementor widgets — desktop/canvas adjustments.
 * Scoped to the widget wrappers so it never affects the original shortcode
 * homepage (where .hero-services is intentionally a mobile-only bar).
 * ------------------------------------------------------------------------- */

/* Trust bar (.hero-services) is `display:none` on desktop in style.css because
 * the original design keeps it mobile-only. Inside the Hero widget we want it
 * visible directly under the hero on desktop too — the blue tint background
 * (var(--hero-blue-tint) = rgba(0,47,135,.15)) is already defined in style.css
 * and applies automatically once the section is shown. */
@media (min-width: 768px) {
  .elementor-widget-granzia_hero_banner .hero-services-desktop {
    display: block;
  }
  .elementor-widget-granzia_hero_banner .hero-services-mobile {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Neutralize Elementor's default "chrome" spacing around Granzia widgets.
 *
 * The Granzia widgets reproduce full-bleed design sections whose own CSS
 * (style.css + responsive.css) already controls every padding/margin. But
 * Elementor wraps each widget in section ▸ container ▸ column ▸ widget-wrap,
 * each adding default padding (≈10px) and a max-width container — which on
 * mobile breaks alignment and adds stray gutters ("padding غلط", broken grids).
 *
 * Scope: only pages built with the Granzia full-width template, and the editor
 * canvas — so normal Elementor pages keep Elementor's defaults.
 * ------------------------------------------------------------------------- */
.page-template-granzia-full-width .elementor-section,
.elementor-editor-active .elementor-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Full-bleed: let sections span the whole viewport width. */
.page-template-granzia-full-width .elementor-section-full_width > .elementor-container,
.elementor-editor-active .elementor-section-full_width > .elementor-container {
  max-width: 100%;
}

/* Remove the default 10px column / widget-wrap padding. */
.page-template-granzia-full-width .elementor-element-populated,
.page-template-granzia-full-width .elementor-widget-wrap,
.elementor-editor-active .elementor-element-populated,
.elementor-editor-active .elementor-widget-wrap {
  padding: 0;
}

/* Our widgets own their vertical rhythm; drop Elementor's inter-widget margin. */
.page-template-granzia-full-width .elementor-widget:not(:last-child),
.elementor-editor-active .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* The widget container itself should add nothing around our section markup. */
.page-template-granzia-full-width [class*="elementor-widget-granzia_"] > .elementor-widget-container,
.elementor-editor-active [class*="elementor-widget-granzia_"] > .elementor-widget-container {
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Elementor HEADER/FOOTER templates (free theme-builder) — strip ALL default
 * Elementor chrome so the header/footer render flush with no empty gaps, on
 * EVERY page (these wrappers exist site-wide, not only on full-width pages).
 * ------------------------------------------------------------------------- */
.granzia-elementor-header .elementor-section,
.granzia-elementor-footer .elementor-section {
  padding: 0;
  margin: 0;
  min-height: 0;
}
.granzia-elementor-header .elementor-container,
.granzia-elementor-footer .elementor-container {
  max-width: 100%;
}
.granzia-elementor-header .elementor-element-populated,
.granzia-elementor-header .elementor-widget-wrap,
.granzia-elementor-footer .elementor-element-populated,
.granzia-elementor-footer .elementor-widget-wrap {
  padding: 0;
}
.granzia-elementor-header .elementor-widget,
.granzia-elementor-footer .elementor-widget {
  margin-bottom: 0 !important;
}
.granzia-elementor-header .elementor-widget-container,
.granzia-elementor-footer .elementor-widget-container {
  padding: 0;
  margin: 0;
}

/* ---- Hero slider (Granzia_Hero_Banner repeater) ----
 * Single slide => first-child stays visible (identical to the static hero).
 * Multiple slides => only .is-active shows; dots sit centered below. */
.hero-slider { position: relative; }
.hero-slider .hero-slide { display: none; }
.hero-slider .hero-slide.is-active,
.hero-slider .hero-slide:first-child:last-child { display: block; }
.hero-slider__dots {
  position: absolute;
  bottom: 16px;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}
.hero-slider__dot {
  width: 8px; height: 8px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: #d0d6e4;
  cursor: pointer;
}
.hero-slider__dot--active { background: #002f87; width: 22px; border-radius: 4px; }

/* ---- Task 4: kill Elementor's default section/widget spacing on Granzia widgets ----
 * The sections render full-width section bodies; the widgets carry their own
 * spacing inside style.css, so Elementor's wrapper padding/margins double it up. */
.elementor-widget-granzia_hero_banner,
.elementor-widget-granzia_trust_bar,
.elementor-widget-granzia_stats_strip,
.elementor-widget-granzia_categories_grid,
.elementor-widget-granzia_promo_banners,
.elementor-widget-granzia_featured_products,
.elementor-widget-granzia_quiz_cta,
.elementor-widget-granzia_solutions_carousel,
.elementor-widget-granzia_best_sellers,
.elementor-widget-granzia_hotspot,
.elementor-widget-granzia_doctors_carousel,
.elementor-widget-granzia_blogs,
.elementor-widget-granzia_reviews_carousel,
.elementor-widget-granzia_faq_accordion {
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-widget-granzia_hero_banner .elementor-widget-container,
.elementor-widget-granzia_trust_bar .elementor-widget-container,
[class*="elementor-widget-granzia_"] .elementor-widget-container {
    padding: 0 !important;
}

/* Catch-all: covers the real widget slugs (granzia_services_trust_bar,
 * granzia_quiz_cta_widget, …) that the explicit list above can miss. */
[class*="elementor-widget-granzia_"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* The full-width sections hosting Granzia widgets shouldn't add their own gaps. */
.elementor-section .elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
.elementor-element .elementor-widget-wrap { padding: 0 !important; }