/* ============================================================
   עמוד יצירת קשר (page-contact.php) - לפי הפיגמה. בסיס #f5f5f5.
============================================================ */

/* HERO - בהיר, כותרת כהה מיושרת ימין */
.cpage-hero {
  background: var(--color-bg-light, #f5f5f5);
  text-align: right;
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* breadcrumb ימין (RTL: flex-start = ימין; flex-end היה דוחף שמאלה) */
.cpage-hero .site-breadcrumb {
  justify-content: flex-start;
  margin-bottom: 1.5rem;
  font-size: .8125rem;
}

.cpage-hero__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600; /* יונתن P1-5: כותרת hero פנימית 600, לא 800 */
  color: #242424;
  text-align: right;
  margin: 0 0 1rem;
}

.cpage-hero__sub {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: #424242;
  line-height: 1.46;
  text-align: right;
  margin: 0;
}

/* layout */
.cpage-body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.cpage-grid {
  display: grid;
  /* RTL: col1=right=card (רחב), col2=left=details */
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ---- contact details (left in RTL, second in DOM) ---- */
.cpage-details {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-top: 40px;
}

.cpage-detail {
  /* grid: אייקון (DOM ראשון) בעמודה ימנית קבועה => כל 3 האייקונים מיושרים לאותו קו אנכי,
     ללא תלות באורך הטקסט. טקסט בעמודה השמאלית הממלאה, מיושר ימין (לצד האייקון). */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  text-align: right;
  direction: rtl;
}

/* badge ליים - ה-SVG עצמו כבר מכיל את צורת הליים + הריבוע + האייקון.
   האייקון ראשון ב-DOM => ב-direction:rtl יושב בימין (לצד הטקסט), כמו בפיגמה. */
.cpage-detail__icon {
  flex-shrink: 0;
  line-height: 0;
}

.cpage-detail__icon img {
  width: 76px;
  height: auto;
  display: block;
}

.cpage-detail__text {
  display: flex;
  flex-direction: column;
  /* RTL: flex-start = ימין - הטקסט צמוד לאייקון כמו בפיגמה (flex-end דחף אותו שמאלה) */
  align-items: flex-start;
  text-align: right;
}

.cpage-detail__label {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: #424242;
  margin-bottom: 4px;
}

/* טלפון+מייל: כחול #354ef3 + underline עדין (לפי הפיגמה). שעות פעילות (plain) נשאר כהה. */
.cpage-detail__value {
  font-size: 1.5rem;
  font-weight: 400;
  color: #354ef3;
  text-decoration: underline;
  text-decoration-color: rgba(53, 78, 243, .35);
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

.cpage-detail__value:hover {
  color: #2740d6;
  text-decoration-color: #354ef3;
}

.cpage-detail__value--plain {
  color: #424242;
  white-space: normal;
}

@media (max-width: 480px) {
  .cpage-detail__label,
  .cpage-detail__value,
  .cpage-detail__value--plain { font-size: 1.125rem; }
  .cpage-detail__icon img { width: 60px; }
}

/* ---- form card (left in RTL, second in DOM) ---- */
.cpage-card {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
}

.cpage-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: #242424;
  text-align: right;
  margin: 0 0 6px;
}

.cpage-card__sub {
  font-size: 1.25rem;
  color: #424242;
  text-align: right;
  margin: 0 0 2rem;
}

/* ---- form (CF7) ---- */
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.cform__field {
  margin-bottom: 14px;
  position: relative;
  display: block;
}

.cform__row .cform__field { margin-bottom: 0; }

/* floating-label: כיוונון לגובה שדה 40px ופונט .875rem (קטן מהבית).
   הרמז יושב כ-placeholder במנוחה, עולה לכותרת בפוקוס/מילוי. */
.cform__field.ff-field {
  --ff-label-x: 16px;
  --ff-rest-size: .875rem;
  --ff-float-top: 5px;
  --ff-input-pad-top: 12px;
}

.cform__req { color: #c0392b; font-weight: 600; }

/* עוגן למיקום אייקוני search/select - יחסית ל-input בלבד, לא ל-label */
.cform__field .wpcf7-form-control-wrap { display: block; position: relative; }

.cform input[type="text"],
.cform input[type="tel"],
.cform input[type="email"],
.cform select,
.cform textarea {
  width: 100%;
  background: #fff;
  /* מסגרת שדה קנונית #c4c4c4 + צל עדין (זהה ל-hp-cta-form / modal). */
  border: 1px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  padding: 0 16px;
  height: 40px;
  font-family: var(--font-base);
  font-size: .875rem;
  color: #242424;
  text-align: right;
  outline: none;
  transition: border-color var(--dur-base, .18s) var(--ease, ease), box-shadow var(--dur-base, .18s) var(--ease, ease);
}

.cform textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 16px;
  resize: vertical;
  line-height: 1.6;
}

/* floating-label בשדה textarea: הרמז נצמד לראש השדה (לא ממורכז כמו ב-input).
   במילוי/פוקוס הטקסט יורד מטה כדי לא לחפוף לכותרת הצפה. */
.cform__field.ff-field:has(textarea) .ff-label { top: 14px; transform: translateY(0); }
/* .is-filled ל-textarea ב-rule נפרד (בלי :has, כדי לא להיבלע אם הדפדפן זורק :has group).
   ה-class מסומן רק על שדות עם textarea => אין צורך בתנאי :has(textarea) נוסף. */
.cform__field--message.ff-field.is-filled .ff-label { top: 6px; transform: translateY(0) scale(0.82); }
.cform__field--message.ff-field.is-filled textarea { padding-top: 22px; }
.cform__field.ff-field:has(textarea:focus) .ff-label,
.cform__field.ff-field:has(textarea:not(:placeholder-shown)) .ff-label {
  top: 6px;
  transform: translateY(0) scale(0.82);
}
.cform__field.ff-field:has(textarea:focus) textarea,
.cform__field.ff-field:has(textarea:not(:placeholder-shown)) textarea { padding-top: 22px; }

.cform input::placeholder,
.cform textarea::placeholder { color: #9e9e9e; }

.cform input:focus,
.cform select:focus,
.cform textarea:focus { border-color: #242424; box-shadow: 0 0 0 1px rgba(36, 36, 36, .12); }

/* select with chevron */
.cform select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #9e9e9e;
}

.cform__field--select .wpcf7-form-control-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px; /* RTL: שמאל - התווית בימין, האייקון/חץ בקצה הנגדי */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

.cform select:valid { color: #242424; }

/* footer row: submit + consent */
.cform__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
  direction: rtl; /* submit (DOM ראשון) = ימין, consent = שמאל - עקבי בכל רוחב (בלי wrap-reverse שהפך אצל גיא) */
}

.cform__submit {
  flex-shrink: 0;
  height: 42px;
  padding: 0 34px;
  border-radius: 80px;
  background: #242424;
  color: #fff;
  border-color: #242424;
  font-weight: 700;
  white-space: nowrap;
}

.cform__submit:hover { background: #000; border-color: #000; }

.cform__consent label,
.cform__consent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: #6b6b6b;
  margin: 0;
  cursor: pointer;
}

.cform__consent .wpcf7-list-item { margin: 0; }

.cform__consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #242424;
  cursor: pointer;
}

/* CF7 feedback */
.cform .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: .9rem;
}

.cform .wpcf7-form.sent .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--color-cta) 60%, #cfcfcf);
  background: color-mix(in srgb, var(--color-cta) 18%, #fff);
  color: #2c3a12;
}

.cform .wpcf7-not-valid-tip {
  font-size: .75rem;
  color: #c0392b;
  margin-top: 6px;
}

.cform__field:has(.wpcf7-not-valid) input,
.cform__field:has(.wpcf7-not-valid) select,
.cform__field:has(.wpcf7-not-valid) textarea { border-color: #e6b3b3; }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .cpage-grid { grid-template-columns: 1fr; }
  /* פרטי קשר מופיעים לפני הכרטיס במובייל */
  .cpage-details { order: -1; }
  .cpage-details {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0;
  }
  .cpage-detail { flex: 1 1 240px; }
}

@media (max-width: 560px) {
  .cform__row { grid-template-columns: 1fr; gap: 14px; }
  .cform__foot { justify-content: center; }
  /* כפתור שליחה - רוחב מלא במובייל */
  .cform__submit { width: 100%; }
}