/* ═══════════════════════════════════════════════════════════
   קופה — ספיר אסייג (29.07.2026)
   קובץ חדש — נכתב נגד מבנה ברירת המחדל של WooCommerce checkout.
   רקע העמוד בהיר (קרם) → טקסט כהה בלבד. פטל = רקע/הדגשה בלבד, לא צבע טקסט.
   נטען אוטומטית ע"י ה-glob של styles/pages/*.css ב-functions.php.
═══════════════════════════════════════════════════════════ */

.woocommerce-checkout .entry-content {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-title {
  font-family: var(--font-heading);
  color: #2a1c16;
  padding-inline: var(--sp-5);
  padding-top: var(--sp-6);
}

/* ⚠️ ווקומרס מוסיף אייקון ::before position:absolute בצד ההתחלה (ב-RTL = ימין) של
   .woocommerce-info/.message/.error, ממוקם ב-24px מהקצה — בדיוק איפה שהטקסט מתחיל
   כש-padding-inline-start קטן מדי. האייקון "בולע" את האות הראשונה. פותרים ב-padding
   גדול מספיק לאייקון + הפס הכהה + מרווח נשימה, לא בהסתרת האייקון. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup ul {
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--radius);
  color: #5d4a3e;
  padding-block: var(--sp-4);
  padding-inline-end: var(--sp-5);
  padding-inline-start: 48px;
  margin-block: var(--sp-5);
  list-style: none;
  overflow-wrap: break-word;
}
.woocommerce-checkout .woocommerce-error li { color: #5d4a3e; }

/* ─── פריסה: פרטים + סיכום הזמנה ─── */
form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-5) var(--sp-8);
}

@media (min-width: 900px) {
  form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: var(--sp-7); /* מרווח נדיב בין עמודת הטופס לעמודת הסיכום — טל: "נדיב ואחיד" */
  }
  /* ⚠️ ווקומרס פולט <h3>פרטי ההזמנה</h3> כאח ישיר של הטופס, לא בתוך #order_review.
     בלי מיקום מפורש הוא נופל לגריד לבד בעמודה 2 שורה 1, ודוחף את #order_review לשורה 2 —
     "עמודה שלישית" מרחפת ותיבת הסיכום נופלת רחוק למטה. פותרים בהצמדת שניהם לעמודה 2,
     h3 בשורה 1 ו-order_review בשורה 2 מתחתיו, בעוד #customer_details תופס את שתי השורות
     בעמודה 1 כדי שהראש שלו יתחיל באותו גובה בדיוק כמו ה-h3. */
  form.checkout.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
  form.checkout.woocommerce-checkout > h3 { grid-column: 2; grid-row: 1; margin: 0 0 var(--sp-3); }
  form.checkout.woocommerce-checkout #order_review,
  form.checkout.woocommerce-checkout .woocommerce-checkout-review-order { grid-column: 2; grid-row: 2; }
}

/* ─── שדות לקוח ─── */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  display: block;
}
/* ⚠️ אותה מלכודת בפעם השלישית: ווקומרס מגדיר .col2-set .col-1/.col-2 עם
   width:47%+float:left (פריסת float ישנה בת שתי עמודות) — בתוך ה-grid
   החד-עמודתי שלי (col2-set) זה נשאר תקף ומכווץ את כל עמודת הטופס ל-47%
   במקום למלא אותה, בלי קשר לילדים הפנימיים (form-row) שכבר תוקנו למעלה. */
.woocommerce-checkout .col2-set { display: grid; gap: var(--sp-5); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100%;
  float: none;
}

.woocommerce-checkout h3 {
  font-family: var(--font-heading);
  color: #2a1c16;
  margin-bottom: var(--sp-3);
  font-size: 1.15rem;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

/* ⚠️ ווקומרס מגדיר .form-row-first/.form-row-last עם width:47%+float לפריסת float ישנה בת
   שתי עמודות. בתוך ה-grid שלי (display:grid על העטיפה) האחוז נגזר מתא הגריד עצמו,
   לא מרוחב הטופס — אותה מלכודת בדיוק כמו cross-sells בעגלה. בלי override השדה נשאר
   ~47% מחצי עמודה, כלומר רבע מרוחב הטופס. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
  width: 100%;
  float: none;
  box-sizing: border-box;
  margin: 0;
}
.woocommerce-checkout .form-row label {
  display: block;
  color: #5d4a3e;
  font-size: .9rem;
  margin-bottom: var(--sp-1);
}
.woocommerce-checkout .form-row label .required {
  color: var(--berry);
  text-decoration: none;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-selection {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  color: #2a1c16;
  background: #fff;
  font-family: var(--font-body);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

@media (min-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout .form-row.notes,
  .woocommerce-checkout .form-row.address-field:not(.form-row-first):not(.form-row-last) {
    grid-column: 1 / -1;
  }
}

/* ─── סיכום הזמנה ─── */
#order_review,
.woocommerce-checkout-review-order {
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

#order_review h3 { margin-top: 0; }

/* ⚠️ table-layout:auto חילק את הרוחב לפי כל השורות ביחד — עמודת "משלוח" (th, מילה אחת
   בשורות אחרות) ירשה רוחב צר שנקבע ע"י עמודת "משלוח"/"סה"כ" הקצרות, ושמות שיטות המשלוח
   הארוכים נשברו לשתי שורות בתא הצר. fixed + רוחב יחסי לשתי העמודות פותר עבור כל השורות יחד. */
table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
/* ⚠️ תיקון 2 (סבב 4): שורת המשלוח הפוכה מבנית משורות הפריטים — ה-th הקצר ("משלוח")
   בעמודה 1 וה-td הארוך (רשימת שיטות המשלוח) בעמודה 2, בעוד ששורת פריט זה td.product-name
   ארוך בעמודה 1 ו-td.product-total קצר בעמודה 2. table-layout:fixed כופה רוחב עמודה אחיד
   על כל השורות — אי אפשר לספק את שתיהן בו-זמנית בטבלה צרה אחת. מעדיפים כאן את עמודה 2
   רחבה כי שם יושב הטקסט הארוך שנבדק במפורש (שם שיטת משלוח בשורה אחת). שם מוצר ארוך
   עשוי לגלוש לשתי שורות בעמודה 1 הצרה יותר — לא חלק מהדרישה הנוכחית. */
table.shop_table.woocommerce-checkout-review-order-table tr > *:first-child { width: 34%; }
table.shop_table.woocommerce-checkout-review-order-table tr > *:last-child { width: 66%; }
table.shop_table.woocommerce-checkout-review-order-table thead th {
  color: #2a1c16;
  font-family: var(--font-heading);
  text-align: start;
  padding: var(--sp-1) var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
/* ⚠️ אותה מלכודת כמו בעגלה: sapir.css צובע th בקרם ו-td נשאר שקוף → טבלה דו-גונית. מאחדים.
   וגם: padding-inline היה 0 — התוכן נגע בקצוות הפנימיים של הכרטיס. */
table.shop_table.woocommerce-checkout-review-order-table tbody td,
table.shop_table.woocommerce-checkout-review-order-table tbody th {
  padding: var(--sp-3) var(--sp-1);
  color: #5d4a3e;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
table.shop_table.woocommerce-checkout-review-order-table .product-name { text-align: start; }
table.shop_table.woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: #5d4a3e;
  font-size: .85rem;
}
table.shop_table.woocommerce-checkout-review-order-table .product-total,
table.shop_table.woocommerce-checkout-review-order-table td.product-total {
  text-align: end;
  color: #2a1c16;
  font-weight: 600;
}

table.shop_table.woocommerce-checkout-review-order-table tfoot th,
table.shop_table.woocommerce-checkout-review-order-table tfoot td {
  padding: var(--sp-3) var(--sp-1);
  color: #5d4a3e;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: start;
}
table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { text-align: start; }
table.shop_table.woocommerce-checkout-review-order-table ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
table.shop_table.woocommerce-checkout-review-order-table ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: #5d4a3e;
  padding: var(--sp-2) 0;
}
table.shop_table.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"] {
  flex-shrink: 0;
  margin-top: .3em;
}
table.shop_table.woocommerce-checkout-review-order-table ul#shipping_method li label {
  flex: 1;
  color: #5d4a3e;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot td { text-align: end; }
table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child td {
  border-bottom: none;
  font-family: var(--font-heading);
  color: #2a1c16;
  font-weight: 700;
  font-size: 1.15rem;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr:last-child .amount { color: #2a1c16; }

/* ─── אמצעי תשלום ─── */
ul.wc_payment_methods {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}
ul.wc_payment_methods li.wc_payment_method {
  padding: var(--sp-2) 0;
}
ul.wc_payment_methods label {
  color: #2a1c16;
  font-weight: 600;
}
ul.wc_payment_methods .payment_box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-top: var(--sp-2);
  color: #5d4a3e;
  font-size: .9rem;
}

/* כפתור המשך לתשלום — בולט, רוחב מלא במובייל */
#place_order {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--berry);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-pill);
  border: none;
  margin-top: var(--sp-5);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
#place_order:hover {
  background: var(--berry-hover);
  box-shadow: var(--shadow-hover);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: #5d4a3e;
  font-size: .875rem;
  margin-top: var(--sp-4);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--cocoa); }

.woocommerce-checkout .woocommerce-privacy-policy-text {
  color: #5d4a3e;
  font-size: .8rem;
  margin-top: var(--sp-3);
}

/* ─── סבב 7: טבלת סיכום ההזמנה בקופה ───
   טל: \"מסגרת מוזרה וריווחים לא טובים\".
   השורש: sapir.css צובע th ברקע קרם ומצייר גבול לטבלה — בתוך כרטיס
   לבן זה נראה כמו קופסה חתוכה. מאחדים: כרטיס אחד, כותרת רציפה,
   ריפוד אחיד, בלי גבול כפול. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
}
.woocommerce-checkout table.shop_table {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.woocommerce-checkout table.shop_table thead th {
  background: var(--cream-2);
  color: #2a1c16;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-4);
  border: none;
}
.woocommerce-checkout table.shop_table thead th:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
.woocommerce-checkout table.shop_table thead th:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
.woocommerce-checkout table.shop_table tbody td,
.woocommerce-checkout table.shop_table tbody th,
.woocommerce-checkout table.shop_table tfoot td,
.woocommerce-checkout table.shop_table tfoot th {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
}
.woocommerce-checkout table.shop_table tfoot tr:last-child td,
.woocommerce-checkout table.shop_table tfoot tr:last-child th {
  border-bottom: none;
  padding-block: var(--sp-4);
}
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total {
  text-align: end;
  white-space: nowrap;
}
.woocommerce-checkout ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-checkout ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  color: #5d4a3e;
}
.woocommerce-checkout ul#shipping_method li input[type="radio"] {
  flex-shrink: 0;
  margin-top: .3em;
}
.woocommerce-checkout #payment {
  margin-top: var(--sp-5);
  border-radius: var(--radius);
}