/* RC112 — Contact Us visual refresh, scoped ONLY to the Contact page.
 * Palette source: الهيكل العام للموقع.docx
 * Sky #D9F0FF, warm cream #FFF1DE, action blue #1469E8,
 * coral #FF806F, growth green #39B995, gold #F6BD4A.
 * Does not style global headers, footers, bookings or other pages.
 */

/* 1 — Native contact hero: exactly the homepage portrait treatment. */
.ascm {
  --asc112-sky: #D9F0FF;
  --asc112-cream: #FFF1DE;
  --asc112-blue: #1469E8;
  --asc112-coral: #FF806F;
  --asc112-green: #39B995;
  --asc112-gold: #F6BD4A;
  --asc112-ink: #10243f;
  --asc112-muted: #526b86;
  --blue: var(--asc112-blue);
  --ink: var(--asc112-ink);
  --muted: var(--asc112-muted);
  background: #fff;
}
.ascm .ascm-shell {max-width: 1280px;padding-inline: clamp(18px,4vw,45px)}
.ascm .ascm-hero {
  min-height: 0;
  background: radial-gradient(circle at 14% 65%,rgba(255,255,255,.68),transparent 42%),linear-gradient(115deg,#eef8ff,#D9F0FF 80%);
}
.ascm .ascm-hero-grid {
  grid-template-columns: minmax(0,1.09fr) minmax(0,.91fr);
  min-height: 0;
  gap: clamp(25px,3.8vw,65px);
  padding-top: clamp(103px,9vw,140px);
  padding-bottom: 76px;
}
.ascm .ascm-hero-copy {min-width: 0;max-width: none;text-align: start;justify-self:stretch}
.ascm .ascm-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  background: #e9f6ff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--asc112-blue);
  margin: 0 0 16px;
}
.ascm .ascm-hero h1 {font-size:clamp(33px,3.35vw,53px);font-weight:850;line-height:1.43;letter-spacing:-.02em;margin:0 0 20px}
.ascm .ascm-hero h1 span {color:var(--asc112-blue)}
.ascm .ascm-hero-copy>p:last-child {font-size:clamp(15px,1.15vw,17px);line-height:2;max-width:620px;margin:0;color:var(--asc112-muted)}
.ascm .ascm-hero-media.ascm-hero-portrait-card {
  min-width:0;
  min-height:0;
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
  padding:0;
  margin:0;
  justify-self:center;
  align-self:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#a7d2ee;
  border:1px solid rgba(20,105,232,.18);
  border-radius:27px;
  box-shadow:0 23px 52px rgba(20,72,122,.18);
}
.ascm .ascm-hero-media.ascm-hero-portrait-card::before,
.ascm .ascm-hero-media.ascm-hero-portrait-card::after {content:none!important;display:none!important}
.ascm .ascm-hero-media.ascm-hero-portrait-card img {
  display:block;
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;
  border-radius:inherit;
  background:transparent;
}
/* Keep the intended right/left arrangement from the existing bilingual template. */
@media (min-width:781px) {
  .ascm.ascm-ar .ascm-hero-copy {grid-column:1;grid-row:1}
  .ascm.ascm-ar .ascm-hero-media {grid-column:2;grid-row:1}
  .ascm.ascm-en .ascm-hero-copy {grid-column:1;grid-row:1}
  .ascm.ascm-en .ascm-hero-media {grid-column:2;grid-row:1}
}

/* 2 — A warm, welcoming start section and distinct colorful action cards. */
.ascm .ascc29-start {
  background:linear-gradient(165deg,#FFF9F1,var(--asc112-cream))!important;
  border-block:1px solid #fae8ce;
  padding:70px clamp(16px,3vw,32px) 76px;
  margin:0;
}
.ascm .ascc29-container {max-width:1190px}
.ascm .ascc29-start h2 {color:var(--asc112-ink);font-size:clamp(26px,2.8vw,35px)}
.ascm .ascc29-start h2::after {background:var(--asc112-coral);height:4px;width:60px;margin:12px auto 17px}
.ascm .ascc29-subtitle {max-width:670px;margin:0 auto 26px;color:var(--asc112-muted);line-height:1.9}
.ascm .ascc29-grid {gap:20px}
.ascm .ascc29-card {
  min-width:0;
  padding:27px 22px 26px;
  border:1px solid #e4ebf4;
  border-radius:24px;
  box-shadow:0 12px 35px rgba(21,63,105,.09);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ascm .ascc29-card:hover {transform:translateY(-4px);box-shadow:0 19px 42px rgba(21,63,105,.13);border-color:#b5d4f7}
.ascm .ascc29-circle {width:72px;height:72px;border-radius:21px;background:#e4f8ef;color:#208b6b}
.ascm .ascc29-card-2 .ascc29-circle {background:#e4efff;color:#1469E8}
.ascm .ascc29-card-3 .ascc29-circle {background:#fff0e6;color:#d86a58}
.ascm .ascc29-circle svg {width:36px;height:36px}
.ascm .ascc29-start h3 {font-size:19px;margin-top:17px;color:var(--asc112-ink)}
.ascm .ascc29-card p {font-size:14px;line-height:1.9;color:var(--asc112-muted);margin:6px auto 20px}
.ascm .ascc29-link {
  width:100%;max-width:none;min-height:46px;
  color:#095bd5!important;
  border:1px solid #83b5fb;
  background:#f8fbff;
  border-radius:12px;
  font-size:14px;
}
.ascm .ascc29-link:focus-visible {outline:3px solid var(--asc112-blue);outline-offset:3px}

/* 3 — Contact methods: large icons, generous copy spacing, accessible hover. */
.ascm .ascm-methods {margin-top:56px;gap:22px}
.ascm .ascm-method {
  background:#fff;
  border:1px solid #e4edf7;
  border-radius:24px;
  padding:31px 26px 28px;
  min-height:222px;
  box-shadow:0 13px 35px rgba(22,66,104,.08);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  text-align:center;
}
.ascm .ascm-method:hover,.ascm .ascm-method:focus-visible {
  transform:translateY(-3px);
  border-color:#a5c9f7;
  box-shadow:0 18px 42px rgba(22,66,104,.13);
}
.ascm .ascm-method:focus-visible {outline:3px solid var(--asc112-blue);outline-offset:3px}
.ascm .ascm-method-icon {width:68px;height:68px;border-radius:19px;background:#e4f8ef;color:#15906b;box-shadow:none;font-size:30px}
.ascm .ascm-method:nth-child(2) .ascm-method-icon {background:#e7f0ff;color:var(--asc112-blue)}
.ascm .ascm-method:nth-child(3) .ascm-method-icon {background:#fff0e6;color:#d26950}
.ascm .ascm-method h2 {font-size:20px;margin:15px 0 8px}
.ascm .ascm-method p {font-size:14px;line-height:1.9}
.ascm .ascm-method strong {font-size:14px}

/* 4 — The original signed contact form and its inputs remain unchanged. */
.ascm .ascm-work {gap:28px;margin-top:78px;grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr)}
.ascm .ascm-panel {border:1px solid #e0eaf6;border-radius:25px;padding:clamp(24px,3vw,42px);box-shadow:0 15px 38px rgba(21,63,105,.08)}
.ascm .ascm-panel h2 {font-size:clamp(22px,2.2vw,29px);line-height:1.45}
.ascm .ascm-panel>p {font-size:15px;line-height:1.95}
.ascm .ascm-form-grid {gap:22px}
.ascm .ascm-field {font-size:14px;gap:9px;color:#193552}
.ascm .ascm-field input,.ascm .ascm-field select,.ascm .ascm-field textarea {
  border:1px solid #d5e2f1;border-radius:13px;
  background:#f9fcff;color:var(--asc112-ink);
  font-size:15px;min-height:53px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.ascm .ascm-field textarea {min-height:170px}
.ascm .ascm-field input:focus,.ascm .ascm-field select:focus,.ascm .ascm-field textarea:focus {
  outline:none;border-color:var(--asc112-blue);box-shadow:0 0 0 4px rgba(20,105,232,.12);background:#fff;
}
.ascm .ascm-submit {background:var(--asc112-blue);border-radius:13px;min-height:54px;font-size:16px;box-shadow:0 10px 22px rgba(20,105,232,.23);transition:transform .2s,background .2s,box-shadow .2s}
.ascm .ascm-submit:hover:not(:disabled) {background:#095bcc;transform:translateY(-2px);box-shadow:0 13px 25px rgba(20,105,232,.26)}
.ascm .ascm-submit:focus-visible {outline:3px solid #7acdf5;outline-offset:3px}
.ascm .ascm-location {background:linear-gradient(160deg,#f1f9ff,#fff);border-color:#d5e9fa}
.ascm .ascm-location a {display:inline-flex;align-items:center;min-height:42px;padding:7px 15px;border:1px solid #a5c9f8;border-radius:11px;background:#fff;text-decoration:none;font-weight:700}
.ascm .ascm-location a:hover {background:#eaf4ff}

/* 5 — Readable FAQ without modifying answer content or accordion logic. */
.ascm .ascm-faq {padding-block:85px 100px}
.ascm .ascm-faq>h2 {font-size:clamp(24px,2.8vw,34px);margin-bottom:26px}
.ascm .ascm-faq-list {gap:14px}
.ascm .ascm-faq details {overflow:hidden;background:#fff;border:1px solid #dce9f6;border-radius:17px;box-shadow:0 6px 19px rgba(25,70,109,.04)}
.ascm .ascm-faq details[open] {border-color:#afd0f7;box-shadow:0 10px 26px rgba(25,70,109,.08)}
.ascm .ascm-faq summary {list-style:none;display:flex;align-items:center;gap:20px;justify-content:space-between;font-size:16px;padding:21px 25px;line-height:1.8;color:#183a62}
.ascm .ascm-faq summary::-webkit-details-marker {display:none}
.ascm .ascm-faq summary::after {content:'+';display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:#e9f3ff;border-radius:10px;font-size:24px;line-height:1;color:var(--asc112-blue)}
.ascm .ascm-faq details[open] summary::after {content:'−';background:#e0f7ef;color:#158367}
.ascm .ascm-faq details>div {border-top:1px solid #e8f1f8;padding:14px 24px 24px;color:#385472}

/* 6 — Elementor-public route: only the exact contact widget render surface. */
.ascm-contact-elementor .ascc112-contact-hero {--asc112-blue:#1469E8;--asc112-sky:#D9F0FF}
.ascm-contact-elementor .ascc112-contact-hero img[src*="contact-hero-portrait-rc112"] {
  display:block;
  width:100%;height:auto;
  aspect-ratio:1/1;max-width:520px;
  object-fit:cover;object-position:center;
  padding:0!important;
  border:1px solid rgba(20,105,232,.18)!important;
  border-radius:27px!important;
  background:#a7d2ee;
  box-shadow:0 23px 52px rgba(20,72,122,.18);
}
.ascm-contact-elementor .ascc112-contact-workform :is(input:not([type="hidden"]),select,textarea) {
  border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
.ascm-contact-elementor .ascc112-contact-workform :is(input:not([type="hidden"]),select,textarea):focus {
  border-color:#1469E8;
  box-shadow:0 0 0 4px rgba(20,105,232,.12);
}
.ascm-contact-elementor .ascc112-contact-workform button[type="submit"] {background:#1469E8;border-radius:12px;transition:background .2s,transform .2s}
.ascm-contact-elementor .ascc112-contact-workform button[type="submit"]:hover {background:#095bcc;transform:translateY(-1px)}
.ascm-contact-elementor .ascc112-contact-workform button[type="submit"]:focus-visible {outline:3px solid #7acdf5;outline-offset:3px}
.ascm-contact-elementor .ascc112-contact-methods a[href] {transition:transform .2s,box-shadow .2s}
.ascm-contact-elementor .ascc112-contact-methods a[href]:focus-visible {outline:3px solid #1469E8;outline-offset:3px}

/* Elementor path: the standalone "Start Here" cards are mounted outside .ascm.
 * Limit these enhancements to the Contact page body class. */
body.ascm-contact-elementor .ascc29-start {
  background:linear-gradient(165deg,#fff9f1,#FFF1DE)!important;
  border-block:1px solid #fae8ce;
  padding-block:52px 58px;
}
body.ascm-contact-elementor .ascc29-start.ascc30-mounted {
  padding-top:52px;
  padding-bottom:58px;
}
body.ascm-contact-elementor .ascc29-start h2 {color:#10243f}
body.ascm-contact-elementor .ascc29-start h2::after {background:#FF806F;width:60px;height:4px}
body.ascm-contact-elementor .ascc29-grid {gap:20px}
body.ascm-contact-elementor .ascc29-card {
  border:1px solid #e4ebf4;
  border-radius:23px;
  padding:24px 20px;
  box-shadow:0 12px 35px rgba(21,63,105,.09);
  transition:transform .2s ease,box-shadow .2s ease;
}
body.ascm-contact-elementor .ascc29-card:hover {transform:translateY(-3px);box-shadow:0 18px 37px rgba(21,63,105,.13)}
body.ascm-contact-elementor .ascc29-circle {width:70px;height:70px;border-radius:20px;background:#e4f8ef;color:#208b6b}
body.ascm-contact-elementor .ascc29-card-2 .ascc29-circle {background:#e4efff;color:#1469E8}
body.ascm-contact-elementor .ascc29-card-3 .ascc29-circle {background:#fff0e6;color:#d86a58}
body.ascm-contact-elementor .ascc29-link {border-radius:12px;min-height:44px;background:#f8fbff}
body.ascm-contact-elementor .ascc29-link:focus-visible {outline:3px solid #1469E8;outline-offset:3px}

/* Widget internals remain owned by AliClick. These rules only enhance named,
 * already-rendered card/accordion elements when present; no markup rewriting. */
body.ascm-contact-elementor .ascc112-contact-methods :is([class*="method-card"],[class*="method_card"],[class*="method__item"]) {
  border-radius:23px;
  box-shadow:0 12px 34px rgba(21,63,105,.08);
  transition:transform .2s ease,box-shadow .2s ease;
}
body.ascm-contact-elementor .ascc112-contact-methods :is([class*="method-card"],[class*="method_card"],[class*="method__item"]):hover {
  transform:translateY(-3px);
  box-shadow:0 17px 38px rgba(21,63,105,.12);
}
body.ascm-contact-elementor .ascc112-contact-faq :is(details,[class*="faq-item"],[class*="accordion-item"]) {
  border-radius:16px;
}
body.ascm-contact-elementor .ascc112-contact-workform :is([class*="form-card"],[class*="form-wrapper"],[class*="form_panel"]) {
  border-radius:24px;
}

@media(max-width:960px) {
  .ascm .ascm-hero-grid {gap:28px}
  .ascm .ascm-work {grid-template-columns:minmax(0,1.4fr) minmax(245px,.8fr)}
}
@media(max-width:780px) {
  .ascm .ascm-shell {padding-inline:20px}
  .ascm .ascm-hero-grid {padding-top:107px;padding-bottom:42px;gap:22px}
  .ascm .ascm-hero-copy {max-width:650px;text-align:center;order:0!important}
  .ascm .ascm-kicker {margin-inline:auto}
  .ascm .ascm-hero h1 {font-size:clamp(30px,7.7vw,43px)}
  .ascm .ascm-hero-copy>p:last-child {margin-inline:auto;font-size:15px;line-height:1.9}
  .ascm .ascm-hero-media.ascm-hero-portrait-card {max-width:470px;align-self:center;order:1!important;border-radius:23px;margin-top:8px}
  .ascm .ascc29-start {padding:52px 18px 57px}
  .ascm .ascc29-grid {max-width:510px;margin:auto;gap:15px}
  .ascm .ascc29-card {padding:23px 18px}
  .ascm .ascm-methods {margin-top:40px;gap:16px}
  .ascm .ascm-work {grid-template-columns:1fr;margin-top:50px;gap:20px}
  .ascm .ascm-faq {padding-block:62px 76px}
  .ascm .ascm-faq summary {font-size:15px;padding:18px;gap:11px}
  .ascm .ascm-faq details>div {padding:12px 18px 20px}
  .ascm-contact-elementor .ascc112-contact-hero img[src*="contact-hero-portrait-rc112"] {max-width:470px;margin-inline:auto;border-radius:23px!important}
}
@media(max-width:480px) {
  .ascm .ascm-hero-grid {padding-top:98px}
  .ascm .ascm-hero-media.ascm-hero-portrait-card {border-radius:20px}
  .ascm .ascm-panel {padding:22px 18px}
  .ascm .ascm-form-grid {grid-template-columns:1fr;gap:16px}
  .ascm .ascm-method {min-height:0}
  .ascm .ascm-faq summary {font-size:14px}
  .ascm-contact-elementor .ascc112-contact-hero img[src*="contact-hero-portrait-rc112"] {border-radius:20px!important}
}
@media(prefers-reduced-motion:reduce) {
  .ascm :is(.ascc29-card,.ascc29-link,.ascm-method,.ascm-submit),
  .ascm-contact-elementor .ascc112-contact-workform button[type="submit"] {transition:none!important;transform:none!important}
}


/* RC113 — Contact Elementor hero portrait: match the homepage's full-bleed
 * square portrait card. RC112 correctly replaced the asset but still capped
 * the image at 520px while the Elementor artwork container stayed wider and
 * shorter. Those conflicting bounds created visible blue side gutters.
 * These rules activate only for the RC112 portrait inside the Contact widget.
 */
body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure,picture):has(> img[src*="contact-hero-portrait-rc112"]),
body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> picture > img[src*="contact-hero-portrait-rc112"]) {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 1 100%;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid rgba(20,105,232,.18) !important;
  border-radius: 27px !important;
  background: #a7d2ee;
  overflow: hidden !important;
  box-shadow: 0 23px 52px rgba(20,72,122,.18);
}
/* Only expand an extra wrapper when its sole child is the picture itself. A
 * contact text/grid container must never be made square by these rules. */
body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> :is(div,figure,picture):only-child > img[src*="contact-hero-portrait-rc112"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 27px !important;
}
body.ascm-contact-elementor .ascc112-contact-hero img[src*="contact-hero-portrait-rc112"] {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 780px) {
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure,picture):has(> img[src*="contact-hero-portrait-rc112"]),
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> picture > img[src*="contact-hero-portrait-rc112"]),
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> :is(div,figure,picture):only-child > img[src*="contact-hero-portrait-rc112"]) {
    max-width: 470px !important;
    border-radius: 23px !important;
  }
}
@media (max-width: 480px) {
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure,picture):has(> img[src*="contact-hero-portrait-rc112"]),
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> picture > img[src*="contact-hero-portrait-rc112"]),
  body.ascm-contact-elementor .ascc112-contact-hero :is(div,figure):has(> :is(div,figure,picture):only-child > img[src*="contact-hero-portrait-rc112"]) {
    border-radius: 20px !important;
  }
}


/* RC115 — Contact Elementor hero: real, measured spacing on its Grid row.
 * Source of truth (live /contact-us/, Elementor widget 244c4b4):
 * .acw-contact-hero__inner is the two-column display:grid container.
 * .acw-contact-hero__media and .acw-contact-hero__content are direct children.
 * The AliClick widget uses a 44% image track and no column gap by default.
 * Target only this Contact widget's real row. Do not pad nested text nodes,
 * move the portrait, change the columns/order, or touch other AliClick heroes.
 * RC114's generic :has() gap/padding guesses were removed, not layered on.
 */
@media (min-width: 1025px) {
  body.ascm-contact-elementor .ascc112-contact-hero .acw-contact-hero--contact > .acw-contact-hero__inner {
    column-gap: clamp(60px, 4.5vw, 80px);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body.ascm-contact-elementor .ascc112-contact-hero .acw-contact-hero--contact > .acw-contact-hero__inner {
    column-gap: clamp(26px, 3.6vw, 46px);
  }
}
@media (max-width: 767px) {
  body.ascm-contact-elementor .ascc112-contact-hero .acw-contact-hero--contact > .acw-contact-hero__inner {
    row-gap: clamp(18px, 4vw, 28px);
  }
  /* Keep long RTL/LTR descriptions clear of the viewport edge when stacked. */
  body.ascm-contact-elementor .ascc112-contact-hero .acw-contact-hero--contact .acw-contact-hero__content {
    padding-inline: clamp(16px, 4vw, 24px);
  }
}