/* "اتصل بنا" page (reference: تواصل معنا.png + build/prototype/contact.html). Elementor page; the container carries .safy-about too, so the base rules, the hero (.safy-ab-hero*), the section title (.safy-hm-h) and the icon reset come from about.css / home.css.
   This file: contact cards, delivery card + message form side by side, "order through" band. One layer grouped by section, breakpoints (1024, 767) last. Spacing 4/8/12/16/24/32; tokens from tokens.css. Icons are the site-wide light icons (icons.css). */
.elementor-element.e-con.safy-ct-card, .elementor-element.e-con.safy-ct-way, .elementor-element.e-con.safy-ct-hero__line, .elementor-element.e-con.safy-ct-delivery__head { --width: auto; width: auto; }

/* ===== 1. hero (no stats card on this page) ===== */
.elementor-element.safy-ct-hero { padding: 48px 0; }
.elementor-element.safy-ct-hero__body { min-height: 230px; padding-bottom: 0; }
.elementor-element.safy-ct-hero__line { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 8px; }
.safy-ct-hero__line .elementor-icon { color: var(--c-star) !important; font-size: 18px; line-height: 1; }
.safy-ct-hero__line .elementor-icon svg { width: 18px; height: 18px; color: var(--c-star); }
.safy-ct-hero__line .safy-ab-lead p { margin: 0; }
.safy-ct-hero__pic img { object-position: left center; }

/* ===== 2. four contact cards ===== */
.elementor-element.safy-ct-sec { margin-top: 48px; }
.elementor-element.safy-ct-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.elementor-element.safy-ct-card { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 28px 16px; text-align: center; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.safy-ct-card__ico .elementor-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--c-tint-purple), var(--c-tint-pink)); color: var(--c-primary) !important; font-size: 28px; line-height: 1; }
.safy-ct-card__ico .elementor-icon svg { width: 28px; height: 28px; color: var(--c-primary); }
.safy-ct-card .elementor-heading-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--c-ink) !important; }
.safy-ct-card p { margin: 0; text-align: center; }
.safy-ct-card__text p { font-size: 15px; line-height: 1.8; color: var(--c-text-muted); }
.safy-ct-card__note p { font-size: 14px; line-height: 1.7; font-weight: 700; color: var(--c-primary); }
.elementor-element.safy-ct-card__names { display: grid; gap: 0; }
.safy-ct-card__names p { font-size: 13.5px; line-height: 1.7; color: var(--c-text-muted); }
.safy-ct-card__val p { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--c-primary); }
.safy-ct-card__val--mail p { font-size: 15px; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.safy-ct-card .safy-phone-ltr, .safy-ct-card .safy-phone-ltr p, .safy-ct-card .safy-phone { direction: ltr; unicode-bidi: isolate; text-align: center; color: var(--c-ink) !important; }
.safy-ct-card .safy-phone .safy-ph-hl { color: var(--c-primary) !important; }
/* the pill button (same as the site's primary button, rounded) */
.safy-ct-pill { margin-top: 8px; }
.safy-ct-pill .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--radius-pill); background: var(--grad-brand); background-origin: border-box; color: var(--c-white); font-size: 15px; font-weight: 700; line-height: 1; }
.safy-ct-pill .elementor-button:hover, .safy-ct-pill .elementor-button:focus-visible { background: var(--grad-brand); color: var(--c-white); filter: brightness(.93); }
.safy-ct-pill .elementor-button, .safy-ct-pill .elementor-button:hover, .safy-ct-pill .elementor-button .elementor-button-text { color: var(--c-white) !important; }
.safy-ct-pill .elementor-button-icon { margin: 0; font-size: 18px; line-height: 1; }
.safy-ct-pill .elementor-button-icon svg { width: 18px; height: 18px; color: currentColor; }

/* ===== 3. delivery card + message card, side by side ===== */
.elementor-element.safy-ct-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.elementor-element.safy-ct-delivery { position: relative; display: flex; flex-direction: row !important; align-items: center !important; align-content: center; gap: 16px; padding: 24px 32px; overflow: hidden; border-radius: var(--radius-l); background: linear-gradient(135deg, var(--c-tint-pink), var(--c-tint-purple)); }
.elementor-element.safy-ct-delivery__text { display: block; flex: 1 1 0; min-width: 0; }
.elementor-element.safy-ct-delivery__head { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 12px; }
.safy-ct-delivery__head .safy-ab-h2 .elementor-heading-title { margin: 0; }
.safy-ct-delivery__ico .elementor-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-white); box-shadow: var(--shadow-card); color: var(--c-primary) !important; font-size: 22px; line-height: 1; }
.safy-ct-delivery__ico .elementor-icon svg { width: 22px; height: 22px; color: var(--c-primary); }
.safy-ct-delivery__text .safy-ab-text p { margin: 12px 0 0; font-size: 17px; line-height: 2; color: var(--c-ink); }
.safy-ct-delivery__note p { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--c-primary); }
/* the van picture sits at the far side; its own pink panel dissolves into the card colour (radial fade) so it does not show as a box */
.elementor-element.safy-ct-delivery__van { flex: none; width: 250px; }
.safy-ct-delivery__van img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 62%, transparent 100%); }
.elementor-element.safy-ct-message { padding: 28px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.safy-ct-message__title .elementor-heading-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--c-ink) !important; text-align: center; }
.elementor-element.safy-ct-message .safy-ct-message__div { margin: 8px auto 20px; }

/* the form: fields with an icon in their own strip (a mask on the group), the placeholder is the label */
.safy-ct-form .elementor-form-fields-wrapper { display: grid; gap: 12px; }
.safy-ct-form .elementor-field-group { position: relative; width: 100%; margin: 0; padding: 0; }
.safy-ct-form .elementor-field-group:not(.elementor-field-type-submit)::before { content: ""; position: absolute; z-index: 1; top: 0; inset-inline-start: 0; width: 45px; height: 100%; border: 1px solid var(--c-line); border-start-start-radius: var(--radius-s); border-end-start-radius: var(--radius-s); background: var(--c-bg-soft); pointer-events: none; }
.safy-ct-form .elementor-field-group:not(.elementor-field-type-submit):focus-within::before { border-color: var(--c-primary); }
.safy-ct-form .elementor-field-group:not(.elementor-field-type-submit)::after { content: ""; position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px; width: 18px; height: 18px; background: var(--c-primary); -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; pointer-events: none; }
.safy-ct-form .elementor-field-group-ct_name { --fi: var(--li-user); }
.safy-ct-form .elementor-field-group-ct_phone { --fi: var(--li-phone); }
.safy-ct-form .elementor-field-group-ct_email { --fi: var(--li-mail); }
.safy-ct-form .elementor-field-group-ct_subject { --fi: var(--li-tag); }
.safy-ct-form .elementor-field-group-ct_message { --fi: var(--li-edit); }
.safy-ct-form .elementor-field-textual { width: 100%; min-height: 46px; padding: 0 56px 0 14px; border: 1px solid var(--c-line) !important; border-radius: var(--radius-s) !important; background: var(--c-white) !important; font-family: Tajawal, sans-serif; font-size: 15px; color: var(--c-ink); text-align: right; box-shadow: none; }
.safy-ct-form textarea.elementor-field-textual { min-height: 110px; padding-top: 12px; resize: vertical; }
.safy-ct-form .elementor-field-textual:focus { outline: 0; border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px rgba(227, 35, 104, .12); }
.safy-ct-form .elementor-field-textual::placeholder { color: var(--c-text-muted); }
.safy-ct-form input[type=tel], .safy-ct-form input[type=email] { direction: ltr; text-align: right; }
.safy-ct-form .elementor-field-type-submit .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: var(--radius-s); background: var(--grad-brand); background-origin: border-box; color: var(--c-white); font-family: Tajawal, sans-serif; font-size: 16px; font-weight: 700; }
.safy-ct-form .elementor-field-type-submit .elementor-button:hover, .safy-ct-form .elementor-field-type-submit .elementor-button:focus-visible { background: var(--grad-brand); color: var(--c-white); filter: brightness(.93); }
.safy-ct-form .elementor-message { margin: 8px 0 0; padding: 12px 16px; border-radius: var(--radius-s); font-size: 14px; text-align: right; }
.safy-ct-form .elementor-message-success { background: #E4F6EA; color: #1c7a43; }
.safy-ct-form .elementor-message-danger { background: #FDE4EA; color: #B0123F; }

/* ===== 4. order through (one card, three columns with dashed dividers) ===== */
.elementor-element.safy-ct-ways { padding: 28px 32px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.elementor-element.safy-ct-ways .safy-hm-h .elementor-heading-title { margin-bottom: 24px; }
.elementor-element.safy-ct-ways__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elementor-element.safy-ct-way { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 16px; padding: 8px 24px; border-inline-start: 1px dashed var(--c-line); text-decoration: none; cursor: pointer; }
.elementor-element.safy-ct-way:first-child { border-inline-start: 0; }
.safy-ct-way__ico .elementor-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--c-tint-purple), var(--c-tint-pink)); color: var(--c-primary) !important; font-size: 28px; line-height: 1; }
.safy-ct-way__ico .elementor-icon svg { width: 28px; height: 28px; color: var(--c-primary); }
.elementor-element.safy-ct-way__text { display: grid; gap: 2px; }
.safy-ct-way__text .elementor-heading-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--c-ink) !important; }
.safy-ct-way__text p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--c-text-muted); }
.elementor-element.safy-ct-way:hover .elementor-heading-title { color: var(--c-primary) !important; }
.elementor-element.safy-ct-sec:last-child { margin-bottom: var(--section-pad); }
.safy-contact .safy-ct-sec:last-of-type { margin-bottom: var(--section-pad); }

/* ===== responsive ===== */
@media (max-width: 1024px) {
  .elementor-element.safy-ct-hero { padding: 0 0 40px; }
  .elementor-element.safy-ct-hero__body { min-height: 0; padding-top: 12px; }
  .elementor-element.safy-ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor-element.safy-ct-split { grid-template-columns: minmax(0, 1fr); }
  .elementor-element.safy-ct-ways__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .elementor-element.safy-ct-way, .elementor-element.safy-ct-way:first-child { border-inline-start: 0; padding: 12px 8px; border-top: 1px dashed var(--c-line); }
  .elementor-element.safy-ct-way:first-child { border-top: 0; }
}
@media (max-width: 767px) {
  .elementor-element.safy-ct-sec { margin-top: 32px; }
  .elementor-element.safy-ct-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .elementor-element.safy-ct-card { padding: 20px 12px; }
  .safy-ct-card__ico .elementor-icon { width: 52px; height: 52px; font-size: 24px; }
  .safy-ct-card .elementor-heading-title { font-size: 16px; }
  .safy-ct-card__val p { font-size: 16px; }
  .elementor-element.safy-ct-delivery { flex-direction: column !important; align-items: center; padding: 24px 16px; text-align: center; }
  .elementor-element.safy-ct-delivery__text { width: 100%; margin: 0; }
  .safy-ct-delivery__text .safy-ab-text p, .safy-ct-delivery__note p { text-align: center; }
  .elementor-element.safy-ct-delivery__head { justify-content: center; }
  .elementor-element.safy-ct-delivery__van { width: 220px; margin-inline: auto; }
  .elementor-element.safy-ct-message { padding: 20px 16px; }
  .elementor-element.safy-ct-ways { padding: 20px 16px; }
}
.safy-ct-pill .elementor-button, .safy-ct-pill .elementor-button-text { white-space: nowrap; }
@media (max-width: 767px) {
  .safy-ct-pill .elementor-button { padding: 0 16px; font-size: 14px; }
  .elementor-element.safy-ct-hero .safy-ab-hero__pic { height: 210px; }
  .elementor-element.safy-ct-hero { padding-bottom: 32px; }
  .safy-ct-card__val p { white-space: normal; }
}
@media (max-width: 767px) {
  .elementor-element.safy-ct-way { gap: 16px; padding: 12px 4px; }
  .safy-ct-way__ico .elementor-icon { width: 44px; height: 44px; font-size: 20px; }
  .safy-ct-way__ico .elementor-icon svg { width: 20px; height: 20px; }
  .elementor-element.safy-ct-way > .elementor-widget { flex: none; width: 44px; }
  .elementor-element.safy-ct-way__text { flex: 1 1 0; min-width: 0; padding-inline-start: 4px; }
  .safy-ct-way__text .elementor-heading-title { font-size: 16px; }
  .safy-ct-way__text p { font-size: 13.5px; }
}