/* Home page header — no body class on `/`. The first slider section uses
   margin-top: -100px to slip its background under the header, but headers
   taller than 100px (any reasonably-sized logo) leave a strip of body bg
   (white) above. Bg = --home_header_primary_bg so admins can theme the
   home header independently of the brand --primary_color (which drives
   the phone link, button gradients, etc.). Inner pages keep their
   `body.inner header { background: linear-gradient(...) }`. */
body:not(.inner) header {
  background-color: var(--home_header_primary_bg);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #fff;
}

.icon-svg {
  width: 17px;
  height: 17px;
  fill: #000;
  display: block;
}

/* Desktop header user-menu icons: guarantee a gap between the 30px chips.
   The site ships PURGED Bootstrap, which can strip `.list-inline-item`'s
   default margin and leave the account/cart/menu chips touching ("smushed"
   together vs the PHP header). Spacing here (non-purged) is authoritative. */
.block.user-menu ul li { margin-left: 12px; }
.block.user-menu ul li:first-child { margin-left: 0; }
.block.logo a.menu-toggle { margin-left: 12px; }

/* Mobile header user-menu (person + cart chips): shown only ≤991px, where
   .block.user-menu is display:none. site.css explicitly zeroes the gap with
   `.block.logo ul.mobile-user-menu li + li { margin-left:0 }` (plus @media
   copies), so the person + cart icons touch. Restore the desktop 12px chip
   spacing; the leading `header` raises specificity above that rule and all its
   media variants. `li + li` adds the gap to every item after the first. */
header .block.logo ul.mobile-user-menu li + li { margin-left: 12px; }

.block.user-menu ul li a,
.mobile-user-menu li a {
  position: relative;
}

footer .social ul li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.social .social-icon-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.pac-container {
	z-index: 10000 !important;
}

.m_validations_showhide {
	color:red;
}

.iti-mobile.menu-active header, .inner.iti-mobile.menu-active header {
   background: -webkit-gradient(linear, left top, right top, from(var(--sub_menu_background_color)), to(var(--sub_menu_background_color)));
   background: linear-gradient(to right, var(--sub_menu_background_color), var(--sub_menu_background_color));
}

/***22/09/2024***/

button.close img {
   transition: transform 0.3s ease-in-out;
 }
 
 button.close img:hover {
   transform: rotate(180deg); /* Adjust rotation degree as needed */
 }

 .instant-sell-m .close  {
   right: 5px !important;
   top: 8px !important;
 }

 .instant-sell-m .form-group input {
   text-align: left !important;
 }

 .instant-sell-m .modal-body {
      padding: 20px 25px !important;
 }

 .instant-sell-m .form-group label {
   font-size: 18px;
   font-weight: 400;
}

.instant-sell-m .modal-header {
  padding: 0;
}   

.cell-phone-n small.invalid-feedback {
   /* position: relative !important; */
   width: 100% !important;
   left: 5px !important;
   bottom: -24px;
   top: auto;
}

/***25/09/2024***/

.condition-tooltips-htm  {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 15px 15px;
  margin-top: 15px;
  margin: 15px 3px 0;
}

.condition-tooltips-htm br {
  display: none;
}

/***26/09/2024***/

form.sign-in.needs-validation.bulk-order {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 30px 30px;
  margin-bottom: 50px;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

form.sign-in.needs-validation.bulk-order .quantity-form .form-control {
  box-shadow: none;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin: 0 10px;
}

form.sign-in.needs-validation.bulk-order .form-group.double-btn {
  margin-bottom: 0;
}

form.sign-in.needs-validation.bulk-order .quantity-form.form-inline {
  margin-bottom: 10px;
}

.price-total-with-model-img-v1 {
	margin-top: 75px;
}
.price-total-with-model-img-v2 {
	margin-top: 20px;
}
.price-total-with-model-img-v3 {
	margin-top: 20px;
}

@media (max-width: 767px) {
	select#new_modifier_links {
		margin: 0 auto;
	}
	
	.model_device_condation .custom-control-label {
		width: fit-content;
	}
	
	.model_device_condation .form-group.new_modifier_links_showhide {
		margin: 15px 0;
	}
	
	.price-total-with-model-img-v1 {
		margin-top: 50px;
	}
	.price-total-with-model-img-v2 {
		margin-top: 50px;
	}
	.price-total-with-model-img-v3 {
		margin-top: 50px;
	}
}

/*** Font Awesome icon sizing for sections using FA icons ***/
.block.easy-steps .image i {
   font-size: 100px;
   position: absolute;
   z-index: 9;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: var(--primary_color);
}
@media (max-width: 991.98px) {
   .block.easy-steps .image i {
      font-size: 80px;
   }
}
@media (max-width: 767.98px) {
   .block.easy-steps .image i {
      font-size: 60px;
   }
}

.block.why-choose .card-body > i {
   font-size: 50px;
   display: block;
   margin-bottom: 15px;
   color: var(--primary_color);
}
@media (max-width: 767.98px) {
   .block.why-choose .card-body > i {
      font-size: 36px;
      margin-bottom: 10px;
   }
}

.payment-select .custom-control.custom-radio .custom-control-label {
	width: auto !important;
	padding-left: 15px;
	padding-right: 15px;
}


/* PHP parity: why-choose cards must be transparent so the section_color (often
   black) shows through behind the white card text + item icon. Bootstrap 4
   .card defaults to background:#fff, which on a dark why-choose section hides
   the white card-title/description (white-on-white). Legacy color.css renders
   these cards over the section background, not on a white card. */
.block.why-choose,
.block.why-choose .card,
.block.why-choose .card-group>.card,
.block.why-choose .card-body { background-color: transparent !important; }