/* =====================================================================================================================
   ocars.ae - mobile / tablet responsiveness fixes
   Breakpoints: <=1024px tablet, <=767px mobile (Elementor's), 991px = the custom header's own breakpoint.
   Every block was found by auditing the LIVE pages and is checked in a real browser at 390 / 768 / 1024 px before commit.
   Selectors use Elementor element ids (stable while the section isn't rebuilt): .elementor-<page-or-template-id> .elementor-element-<id>
   Page ids: 117 = Home (home-2), 125 = Contact, 953 = footer template, 144 = header template.
   ===================================================================================================================== */

/* 1) ROOT CAUSE OF THE SIDEWAYS SCROLL ON EVERY PAGE (footer template 953)
      The "Privacy Policy | Terms & Conditions" inline icon-list uses margin-inline:-21px on the list and 21px on each item.
      On phones, tablets AND small laptops (up to ~1200px) that pushes the page ~11px wider than the screen; the fixed header (width:100%) then stretches with it. */
@media all {
	body .elementor-953 .elementor-element.elementor-element-575dc69 .elementor-icon-list-items.elementor-inline-items {
		margin-inline: 0;
		gap: 8px 42px;
	}
	body .elementor-953 .elementor-element.elementor-element-575dc69 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 0;
	}
	body .elementor-953 .elementor-element.elementor-element-575dc69 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after {
		inset-inline-end: -21px;
	}
}

/* 2) CONTACT PAGE - "Trusted by Global Distributors" icon strip (page 125, widget 2803e30)
      Same negative-margin problem plus four items squeezed in one row. Up to 1199px: 2 columns. Phone: 1 column, no dividers. */
@media (max-width: 1199px) {
	body .elementor-125 .elementor-element.elementor-element-2803e30 .elementor-icon-list-items.elementor-inline-items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 24px;
		margin-inline: 0;
		padding-inline: 20px;
	}
	body .elementor-125 .elementor-element.elementor-element-2803e30 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 0;
		width: auto;
		min-width: 0;
	}
	body .elementor-125 .elementor-element.elementor-element-2803e30 .elementor-icon-list-item:after {
		display: none;
	}
}
@media (max-width: 600px) {
	body .elementor-125 .elementor-element.elementor-element-2803e30 .elementor-icon-list-items.elementor-inline-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 3) HOME - "From Asia to the Markets That Matter": country pills (containers c52623d, 3e0ec5a)
      Elementor only lets these rows wrap on phones, so on tablets the pills shrank into each other and ran off the screen. */
@media (max-width: 1024px) {
	body .elementor-117 .elementor-element.elementor-element-c52623d,
	body .elementor-117 .elementor-element.elementor-element-3e0ec5a {
		flex-wrap: wrap;
		gap: 10px 8px;
	}
	body .elementor-117 .elementor-element.elementor-element-c52623d > .elementor-element,
	body .elementor-117 .elementor-element.elementor-element-3e0ec5a > .elementor-element {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}
}

/* 4) HOME - "How we work" 4 step cards (row 98910f8)
      Desktop keeps the staggered look. Tablet: a clean 2 x 2 grid (no stagger, no cramped 4-across). Phone already stacks. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-117 .elementor-element.elementor-element-98910f8 {
		flex-wrap: wrap;
		gap: 20px;
		padding-inline: 20px;
	}
	body .elementor-117 .elementor-element.elementor-element-98910f8 > .elementor-element {
		--width: calc(50% - 10px);
		width: calc(50% - 10px);
		margin: 0;
	}
	body .elementor-117 .elementor-element.elementor-element-3ca5c47,
	body .elementor-117 .elementor-element.elementor-element-4b0190c,
	body .elementor-117 .elementor-element.elementor-element-379b7b1,
	body .elementor-117 .elementor-element.elementor-element-0c35b1c {
		margin: 0;
		height: 100%;
	}
}

/* 5) HEADER - mobile menu button: 32px -> 44px tap target (WCAG / Apple HIG minimum) */
@media (max-width: 991px) {
	.ocars-header .ocars-mobile-toggle {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
	}
}

/* 6) HEADER - between 992px and ~1199px the DESKTOP header does not fit (6 links with 40px gaps + WhatsApp button) and
      overflows the viewport by ~20px. Tighten spacing in that range only. */
@media (min-width: 992px) and (max-width: 1199px) {
	.ocars-header .ocars-header-inner {
		gap: 20px;
		padding-inline: 24px;
	}
	.ocars-header .ocars-nav-menu {
		gap: 24px;
	}
}

/* 7) TAP TARGETS ON PHONES (<=767px) - comfortable 44px minimum (Apple HIG / WCAG 2.5.5)
      Found by the audit: footer links 22px, buttons 36-41px, form fields 40px, slider arrows 25px, slider dots 10px. */
@media (max-width: 767px) {
	/* buttons: keep the label centred while growing to 44px */
	body .elementor-button,
	body .ocars-faq-tab-btn,
	body .ocars-header .ocars-whatsapp-btn--mobile {
		min-height: 44px;
	}
	body .elementor-widget-button .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* form fields */
	body .elementor-field-textual:not(textarea),
	body .elementor-field-group select {
		min-height: 44px;
	}
	/* footer link lists (template 953): every link a full 44px row; tighten the list spacing so the footer doesn't balloon */
	body .elementor-953 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item {
		padding-block-end: 0;
		margin-block-start: 0;
	}
	body .elementor-953 .elementor-icon-list-item > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
	/* slider arrows (25px icons): bigger invisible hit area, same look */
	body .elementor-swiper-button {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* slider dots (10px): expand the tap area without changing the dot's look */
	body .swiper-pagination-bullet {
		position: relative;
	}
	body .swiper-pagination-bullet::after {
		content: "";
		position: absolute;
		inset: -17px -9px;
	}
}

/* 8) HOME - "Built Around Better Sourcing" feature boxes (785611c, 1655f76, 6728f85)
      Their titles are set to line-height:1px. That collapses a one-line title on desktop, but on tablets/small laptops the
      titles wrap to two lines and the lines are drawn on top of each other (and of the next column). Give them a normal line-height. */
@media (max-width: 1199px) {
	body .elementor-117 .elementor-element.elementor-element-785611c .elementor-icon-box-title,
	body .elementor-117 .elementor-element.elementor-element-785611c .elementor-icon-box-title a,
	body .elementor-117 .elementor-element.elementor-element-1655f76 .elementor-icon-box-title,
	body .elementor-117 .elementor-element.elementor-element-1655f76 .elementor-icon-box-title a,
	body .elementor-117 .elementor-element.elementor-element-6728f85 .elementor-icon-box-title,
	body .elementor-117 .elementor-element.elementor-element-6728f85 .elementor-icon-box-title a {
		line-height: 1.3;
	}
	body .elementor-117 .elementor-element.elementor-element-785611c .elementor-icon-box-title,
	body .elementor-117 .elementor-element.elementor-element-1655f76 .elementor-icon-box-title,
	body .elementor-117 .elementor-element.elementor-element-6728f85 .elementor-icon-box-title {
		margin-bottom: 10px;
	}
}

/* 9) FAQ TABS (widget "How We Work"/FAQ page, all pages that include it) - the site's OWN CSS forces the tab-pill row into
      a single non-wrapping horizontally-scrolling strip below 700px (its own @media (max-width:700px) rule sets
      flex-wrap:nowrap + overflow-x:auto). That hides most tabs off-screen with no visible scroll affordance. Reverse it:
      let the pills wrap onto multiple rows instead, like they already do on tablet/desktop. */
@media (max-width: 700px) {
	body .ocars-faq-tabs {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}
	body .ocars-faq-tab-btn {
		white-space: normal !important;
	}
}

/* 10) BRAND-LOGO CAROUSELS - home "Leading Brands We Supply" (widget bcda8fb) and the /brands/ page carousel (widget e57ba01).
      Both are Elementor's stock Image Carousel fed with the brands' raw PNG files. Those files have wildly different native
      sizes/aspect ratios (some are wide wordmarks, some near-square badges), and the widget's default CSS just shows each
      image at its own natural size - so logos appear in random, inconsistent sizes next to each other (a Porsche logo looks
      tiny next to a bigger square badge, etc). Give every slide the same frame: fixed height, centered, image scaled down
      (never up) to fit - so every logo reads at a consistent, comfortable size regardless of its source file. */
body .elementor-117 .elementor-element-bcda8fb .swiper-slide,
body .elementor-121 .elementor-element-e57ba01 .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
}
body .elementor-117 .elementor-element-bcda8fb .swiper-slide-inner,
body .elementor-121 .elementor-element-e57ba01 .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
body .elementor-117 .elementor-element-bcda8fb .swiper-slide-image,
body .elementor-121 .elementor-element-e57ba01 .swiper-slide-image {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 56px !important;
	object-fit: contain;
}
@media (max-width: 767px) {
	body .elementor-117 .elementor-element-bcda8fb .swiper-slide,
	body .elementor-121 .elementor-element-e57ba01 .swiper-slide {
		height: 64px;
	}
	body .elementor-117 .elementor-element-bcda8fb .swiper-slide-image,
	body .elementor-121 .elementor-element-e57ba01 .swiper-slide-image {
		max-height: 40px !important;
	}
}

/* 11) HERO ICON BOXES (the 4 trust stats under the H1: 17+ Years / GCC・MENA・Africa / Multi-Origin Sourcing /
      Thousands of Parts) - on mobile Elementor already stacks each icon above its text, but the desktop side padding
      and the vertical divider borders BETWEEN boxes (meant for a horizontal row) carry over uneven and dangling once
      stacked into one column. Scoped to every icon-box inside the hero container (d378994), not just some of them,
      so this can't miss any if the section is edited again later. */
@media (max-width: 767px) {
	body .elementor-117 .elementor-element-d378994 .elementor-widget-icon-box {
		padding: 0 !important;
		border: 0 !important;
		width: 100%;
		text-align: center;
	}
	body .elementor-117 .elementor-element-d378994 .elementor-widget-icon-box + .elementor-widget-icon-box {
		margin-top: 20px;
	}
	body .elementor-117 .elementor-element-d378994 .elementor-icon-box-wrapper {
		align-items: center;
		text-align: center;
	}
}

/* 12) GENERAL MOBILE RHYTHM - every Elementor section on this site uses the same generous 50px top/bottom section padding
      (fine on desktop, but with 8-10 sections stacked on a phone it reads as uneven, overly-tall gaps between sections).
      Tighten uniformly below 767px wherever a section hasn't already set its own explicit mobile padding via Elementor. */
@media (max-width: 767px) {
	body .elementor-117 > .elementor-element.e-parent,
	body .elementor-125 > .elementor-element.e-parent,
	body .elementor-121 > .elementor-element.e-parent,
	body .elementor-123 > .elementor-element.e-parent,
	body .elementor-1107 > .elementor-element.e-parent {
		--padding-top: 34px;
		--padding-bottom: 34px;
	}
}

/* 13) ADMIN BAR OFFSET (logged-in editors/admins only - invisible to every public visitor) - our header is
      position:fixed and assumes it starts at the very top of the viewport. When viewing the site logged into
      wp-admin, WordPress adds its own 32px (46px on phones) admin bar ABOVE everything and pushes <html> down by
      that much - since our header doesn't know about it, this can look like a gap of plain white space sitting
      above the header while logged in. This rule only ever applies to the `body.admin-bar` class WordPress adds
      for logged-in users with the toolbar on - it has zero effect for real (logged-out) visitors. */
body.admin-bar .ocars-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .ocars-header {
		top: 46px;
	}
}

/* 14) THEME'S AUTOMATIC PAGE TITLE - the theme's own template prints an automatic page title
      (<div class="page-header"><h1 class="entry-title">...</h1></div>) SEPARATELY from the Elementor content -
      on pages that use the plain WordPress page template rather than a full Elementor Canvas/Theme-Builder layout
      (confirmed on About and Terms & Conditions; any other page could pick this up too if its template setting
      ever changes). Every page already has its own Elementor heading, so this always duplicates it - on Terms &
      Conditions it duplicated our own replacement heading; on About it just showed as a second, unstyled, oddly
      positioned title sitting under the fixed header with no clearance. Hidden site-wide, not per-page, so this
      can't recur unnoticed. */
.page-header {
	display: none;
}

/* 15) HEADER TRANSPARENT<->STICKY TRANSITION SPEED (client request: the crossfade was taking "a few seconds" to
      settle and looked like the white/dark logo were ghosting/overlapping mid-transition). The header itself
      isn't built in this theme - it's a raw HTML/CSS widget pasted directly into the Elementor header template
      (ID 144) - so its own <style> block (0.35s on background-color/box-shadow/logo-opacity) lives inline in
      <body>, rendered AFTER this stylesheet's <link> in <head>. On equal CSS specificity the later one in
      source order wins, so these need !important to reliably beat it without hand-editing the Elementor widget.
      0.35s -> 0.12s: still a crossfade (not an instant snap, which would look like a flicker/glitch), but fast
      enough that the two logos and the background no longer visibly overlap mid-scroll. */
.ocars-header,
.ocars-header.is-sticky {
	transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
}
.ocars-header .ocars-logo-img {
	transition: opacity 0.12s ease !important;
}
.ocars-nav-menu a,
.ocars-mobile-menu a {
	transition: color 0.12s ease !important;
}
.ocars-header .ocars-mobile-toggle span {
	transition: background-color 0.12s ease, transform 0.12s ease, opacity 0.12s ease !important;
}