/* Hide Salla's native note UI (toggle + panel + textarea) */
button[data-show^="note_"],
[id^="note_"],
textarea[name="notes"],
label[for="notes"] {
  display: none !important;
}

/* Tidy our rental inputs */
#rental-ui label { font-weight: 600; }
#rental-ui input[type="date"],
#rental-ui input[type="time"],
#rental-ui input[type="number"],
#rental-ui input[type="tel"] {
  max-width: 320px;
  width: 100%;
}


/* 1) Direct button + class-variants */
button.s-fast-checkout-button,
.s-fast-checkout-button,
button[class*="s-fast-checkout-button"],
[class^="s-fast-checkout-button"],
[class*=" s-fast-checkout-button "] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) If Salla uses a custom element for the widget */
salla-fast-checkout,
salla-fast-checkout *,
salla-fast-checkout::part(button),
salla-fast-checkout::part(root) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3) Catch-all for data hooks some themes use */
[data-widget*="fast"],
[data-testid="fast-checkout"],
.product-actions .s-fast-checkout-button,
.product-actions [class*="fast-checkout"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 4) If the theme forces inline styles, overpower with higher specificity */
html body button.s-fast-checkout-button.s-fast-checkout-button {
  display: none !important;
}

salla-mini-checkout-widget {
  display: none !important;
  visibility: hidden !important;
}

/*BackGround Image*/


/*CSS For Banner*/
/* === ONLY the first fixed banner (top hero) should be full-width === */

/* Unbox container of the FIRST .s-block--fixed-banner */
main .s-block--fixed-banner.wide-placeholder:first-of-type > .container,
.page-home .s-block--fixed-banner.wide-placeholder:first-of-type > .container,
.s-block--fixed-banner.wide-placeholder:first-of-type > .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Stretch the FIRST banner visuals */
.s-block--fixed-banner:first-of-type .banner--fixed{
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.s-block--fixed-banner:first-of-type .banner--fixed img{
  display: block !important;
  width: 100% !important;
  height: auto !important; /* or use the cover mode below */
}

/* (Optional) Taller/cover look only for the FIRST banner on desktop */
@media (min-width: 768px){
  .s-block--fixed-banner:first-of-type .banner--fixed img{
    /* uncomment if you want tall hero that crops edges a bit */
    /* height: clamp(220px, 30vw, 520px) !important;
       object-fit: cover !important; */
  }
}

/* Ensure ALL subsequent fixed banners stay boxed/normal */
.s-block--fixed-banner:not(:first-of-type) > .container{
  max-width: var(--container-max, 1200px);
  padding-left: 15px;
  padding-right: 15px;
}
.s-block--fixed-banner:not(:first-of-type) .banner--fixed img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}



/* BackGround CSS */
/* Full-screen frame that always hits all 4 edges (allows distortion) */
html{ background:#1f1242 !important; position:relative; }
html::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url('https://cdn.salla.sa/form-builder/A70XC2au02ybrtBCdNRE4bdJjDdfDzUHhH7cgI8u.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;   /* key: stretch both width & height */
}
body, main, .page-content, #app{ position:relative; z-index:1; background:transparent !important; }
@media (max-width:768px){ html::before{ position:absolute; } }

/*for TIME*/

/* Consistent, elegant time UI */
.sr-time-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-time-label { font-weight: 600; display: block; margin-bottom: 6px; }

.sr-time-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 10px 12px; background: #fff; font-size: 15px; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  outline: none; transition: box-shadow .2s, border-color .2s;
  min-width: 84px; text-align: center;
}
.sr-time-select:hover  { border-color:#d1d5db; }
.sr-time-select:focus  { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.sr-time-sep { opacity:.6; font-weight:600; min-width: 8px; text-align:center; }


/* Force HH : MM order in RTL */
html[dir="rtl"] .sr-time-wrap {
  direction: ltr;              /* lay out children left→right */
  flex-direction: row !important; /* prevent any row-reverse from theme */
}

html[dir="rtl"] .sr-time-wrap .sr-time-select,
html[dir="rtl"] .sr-time-wrap .sr-time-sep {
  direction: ltr;              /* ensure numbers/colon stay LTR */
  text-align: center;
}

/* Optional: nicer aligned digits */
.sr-time-select { font-variant-numeric: tabular-nums; }


/* ==== 500 Partners block ==== */
.partners-500-wrap { margin: 24px auto; }
.partners-500 {
  background: #fff;
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  text-align: center;                /* center everything */
}
.partners-500 h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  font-weight: 800;
  background: linear-gradient(90deg,#9b51e0,#d62aa0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.partners-500 p {
  margin: 6px auto 0;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.9;
  color: #5b5b5b;
  max-width: 900px;                  /* tidy line length */
}

/* width align with theme container if available */
.partners-500-wrap,
.partners-500-wrap .container { width: 100%; }

/*END SECTION*/

/*START SECTION*/

/* ===== Contact + Map section (homepage) ===== */
.home-contact-map-wrap { margin: 28px 0 36px; }
.home-contact-map {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:20px; box-shadow:0 8px 28px rgba(0,0,0,.06);
  overflow:hidden;
}

/* layout */
.home-contact-map .hcm-grid{
  display:grid; grid-template-columns: 2fr 1.1fr; gap:0;
}
@media (max-width: 992px){
  .home-contact-map .hcm-grid{ grid-template-columns:1fr; }
}

/* map */
.hcm-map { position:relative; min-height:360px; }
.hcm-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* contact column */
.hcm-aside{
  padding: clamp(18px, 2.4vw, 28px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
html[dir="rtl"] .hcm-aside{ align-items:flex-end; text-align:right; }
html[dir="ltr"] .hcm-aside{ align-items:flex-start; text-align:left; }

.hcm-title{
  font-weight:800; font-size: clamp(20px, 2.4vw, 28px);
  margin:0 0 14px;
  color:#211d2e;
}
.hcm-list{ display:flex; flex-direction:column; gap:16px; width:100%; }
.hcm-item{ display:flex; align-items:center; gap:12px; }
html[dir="rtl"] .hcm-item{ flex-direction:row-reverse; }
.hcm-ico{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #9b51e0, #d62aa0);
  color:#fff; flex:0 0 40px;
  box-shadow:0 6px 16px rgba(214,42,160,.25);
}
.hcm-text{ font-size:16px; color:#4b4b4b; line-height:1.6; }
.hcm-text strong{ color:#111; font-weight:700; }

/* subtle link styles */
.hcm-text a{ color:#111; text-decoration:none; border-bottom:1px dotted rgba(0,0,0,.25); }
.hcm-text a:hover{ border-bottom-color: transparent; }

/* container alignment like theme */
.home-contact-map-wrap .container{ width:100%; }


/*END SECTION*/

/*START SECTION*/

/* ===== Contact + Map section ===== */
.home-contact-map-wrap { margin: 28px 0 36px; }
.home-contact-map {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Grid container – force LTR so columns don’t flip in RTL */
.home-contact-map .hcm-grid {
  display: grid;
  gap: 0;
  direction: ltr;
}

/* Column widths: map bigger than aside */
html[dir="ltr"] .home-contact-map .hcm-grid {
  grid-template-columns: 2fr 1.1fr;      /* map | aside */
}
html[dir="rtl"] .home-contact-map .hcm-grid {
  grid-template-columns: 1.1fr 2fr;      /* aside | map */
}

.hcm-map {
  position: relative;
  min-height: 360px;
}
.hcm-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hcm-aside {
  padding: clamp(18px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hcm-title {
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0 0 14px;
  color: #211d2e;
}
.hcm-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hcm-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hcm-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #9b51e0, #d62aa0);
  color: #fff;
  flex: 0 0 40px;
  box-shadow: 0 6px 16px rgba(214,42,160,.25);
}
.hcm-text {
  font-size: 16px;
  color: #4b4b4b;
  line-height: 1.6;
}
.hcm-text strong {
  color: #111;
  font-weight: 700;
}
.hcm-text a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.25);
}
.hcm-text a:hover {
  border-bottom-color: transparent;
}

/* RTL tweaks: icons on the right and text aligned right */
html[dir="rtl"] .hcm-item {
  flex-direction: row-reverse;
}
html[dir="rtl"] .hcm-aside {
  text-align: right;
  align-items: flex-end;
  padding-right: 10px;
  padding-left: clamp(18px, 2.4vw, 28px);
}
html[dir="ltr"] .hcm-aside {
  text-align: left;
  align-items: flex-start;
}


/*END SECTION*/

/*START SECTION*/

/* Remove the top bar entirely */
.top-navbar {
  display: none !important;
}

/* Ensure the search bar is compact and doesn't overflow */
#mainnav .header-search {
  max-width: 220px;
  flex: 0 0 220px !important;
  width: 100%;
}

/* Optional: Style the language button with a little breathing room */
#mainnav .header-buttons {
  margin-inline-end: 6px;
}

/* Keep the categories row on one line by preventing wrap */
#mainnav .flex.items-center {
  flex-wrap: nowrap;
}


/*END SECTION*/

/*START SECTION*/

/* Adjust Salla moving banner styles (target the banner container if possible) */
div.overlay-bg.bg-cover.bg-center.absolute.inset-0 {
  /* Show the whole image instead of cropping */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* Remove the dark/grey overlay */
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Make the moving banner image display at full brightness */

/* Remove overlay and blend modes */
.overlay-bg {
  background-color: transparent !important;
  mix-blend-mode: normal !important;      /* cancel dark multiply blend */
}

/* Hide pseudo-element overlays used for the dark tint */
.overlay-bg::before,
.overlay-bg::after {
  display: none !important;
}

/*END SECTION*/


/* Completely hide the phone toggle and phone fields in the rental widget */
#rental-use-default-phone,
label[for="rental-use-default-phone"],
#rental-phone1,
#rental-phone2,
label[for="rental-phone1"],
label[for="rental-phone2"] {
  display: none !important;
}

/**/


/* Use the same dark pink as the +500 highlight (pick the second stop of the gradient) */
:root { --accent-pink: #d62aa0; }  /* deep pink */

/* Section heading "التصنيفات" */
.s-block--banners .s-block__title h2 {
  color: var(--accent-pink) !important;
}

/* Category caption color WITHOUT any white border */
html body .s-block--banners .banner-entry h3.text-with-border,
html body .s-block--banners .banner-entry h3.text-with-border span {
  color: var(--accent-pink) !important;
  -webkit-text-stroke: 0 !important;            /* remove stroke */
  text-shadow: none !important;                  /* remove faux outline */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Keep same color on hover/focus */
.s-block--banners .banner-entry:hover h3.text-with-border span,
.s-block--banners .banner-entry:focus h3.text-with-border span {
  color: var(--accent-pink) !important;
}