/* Checkout page: icons first (generated by build/tools/gen-checkout-icons.js), then the rules. */
:root {
  --co-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  --co-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E");
  --co-whatsapp: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l1.65-4.8A9%209%200%201%201%208%2019.5L3%2021z%22%2F%3E%3Cpath%20d%3D%22M9%2010c.6%202.2%202.3%203.9%204.5%204.5l1.2-1.2a.7.7%200%200%201%20.9-.1l1.2.7c.3.2.4.5.2.8-.5%201-1.5%201.5-2.6%201.3C10.9%2015.9%208.1%2013.1%207.7%209.8c-.1-1.1.4-2.1%201.3-2.6.3-.2.6-.1.8.2l.7%201.2c.2.3.1.6-.1.9z%22%2F%3E%3C%2Fsvg%3E");
  --co-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M22%206l-10%207L2%206%22%2F%3E%3C%2Fsvg%3E");
  --co-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-8%209%208v10a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E");
  --co-edit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204H4a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7M18.5%202.5a2.1%202.1%200%200%201%203%203L12%2015l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E");
  --co-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013S3%2017%203%2010a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --co-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  --pk-truck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%203h15v13H1zM16%208h4l3%203v5h-7z%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2218.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
  --pk-store: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l1-5h16l1%205M3%209a3%203%200%200%200%206%200%203%203%200%200%200%206%200%203%203%200%200%200%206%200M5%2012v9h14v-9%22%2F%3E%3C%2Fsvg%3E");
  --pk-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013S3%2017%203%2010a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --pk-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");
  --pk-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  --pk-wallet: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E32368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012V7a2%202%200%200%200-2-2H5a2%202%200%200%201%200-4h12M3%205v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-5M18%2014h3v4h-3a2%202%200%200%201%200-4z%22%2F%3E%3C%2Fsvg%3E");
  --cg-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  --cg-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E");
  --cg-whatsapp: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l1.65-4.8A9%209%200%201%201%208%2019.5L3%2021z%22%2F%3E%3Cpath%20d%3D%22M9%2010c.6%202.2%202.3%203.9%204.5%204.5l1.2-1.2a.7.7%200%200%201%20.9-.1l1.2.7c.3.2.4.5.2.8-.5%201-1.5%201.5-2.6%201.3C10.9%2015.9%208.1%2013.1%207.7%209.8c-.1-1.1.4-2.1%201.3-2.6.3-.2.6-.1.8.2l.7%201.2c.2.3.1.6-.1.9z%22%2F%3E%3C%2Fsvg%3E");
  --cg-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M22%206l-10%207L2%206%22%2F%3E%3C%2Fsvg%3E");
  --cg-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-8%209%208v10a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E");
  --cg-edit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204H4a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7M18.5%202.5a2.1%202.1%200%200%201%203%203L12%2015l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E");
  --cg-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013S3%2017%203%2010a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --cg-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  --cg-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6479%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");
  --co-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%2F%3E%3C%2Fsvg%3E");
  --co-check-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%2F%3E%3C%2Fsvg%3E");
}

/* Checkout page (reference: build/prototype/checkout.html + css/checkout.css). Elementor page: hero + the WooCommerce checkout shortcode
   inside .safy-checkout. The form comes from WooCommerce + One Creation Smart Checkout (its own markup); site-tools/checkout.js groups
   the plugin's fields into numbered cards. Shared pieces (hero, notices, option values box, delivery box): components.css.
   `!important` only where WooCommerce / the plugin's inline CSS print their own with higher specificity (see DESIGN-DIRECTION.md §5). */

.safy-checkout, .safy-checkout * { font-family: Tajawal, sans-serif !important; }
.safy-checkout .woocommerce { width: 100%; }
/* what the prototype does not have */
.safy-checkout .woocommerce-form-coupon-toggle, .safy-checkout form.checkout_coupon, .safy-checkout #customer_details, .safy-checkout .woocommerce-privacy-policy-text { display: none !important; }

/* ===== two columns: the cards | the order summary (340px) ===== */
.safy-checkout form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.safy-checkout #ocsc-checkout-section { grid-column: 1; display: grid; gap: 18px; min-width: 0; counter-reset: safy-co; }
.safy-co-summary { grid-column: 2; position: sticky; top: 20px; box-sizing: border-box; padding: 24px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }

/* validation / error notices of WooCommerce appear above both columns */
.safy-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup, .safy-checkout form.woocommerce-checkout > .woocommerce-error { grid-column: 1 / -1; order: -1; margin: 0 !important; width: 100%; }
.safy-co-summary table.shop_table tfoot th, .safy-co-summary table.shop_table tfoot td { border-top: 0 !important; }

/* ===== numbered cards ===== */
.safy-co-card { box-sizing: border-box; padding: 22px 24px; margin: 0; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.safy-co-card[data-card="contact"] { order: 1; } .safy-co-card[data-card="method"] { order: 2; } .safy-co-card[data-card="branch"] { order: 3; }
.safy-co-card[data-card="address"] { order: 4; } .safy-co-card[data-card="schedule"] { order: 5; } .safy-co-card[data-card="recipient-choice"] { order: 6; } .safy-co-card[data-card="recipient"] { order: 7; }
.safy-checkout #ocsc-checkout-section .ocsc-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--c-ink); counter-increment: safy-co; }
.safy-checkout #ocsc-checkout-section .ocsc-section-title::before { content: counter(safy-co); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-brand); color: var(--c-white); font-size: 14px; font-weight: 700; }
.safy-co-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.safy-co-grid > * { flex: 1 1 calc(50% - 6px); min-width: 0; }
.safy-co-grid > #ocsc-whatsapp-same-row, .safy-co-grid > #ocsc-different-recipient-row, .safy-co-grid > #ocsc-recipient-same-as-contact-row, .safy-co-grid > #ocsc-recipient-whatsapp-same-row, .safy-co-grid > #ocsc-landmark-field, .safy-co-grid > #ocsc-schedule-type-field, .safy-co-grid > #ocsc-schedule-datetime, .safy-co-grid > #ocsc-order-method-field, .safy-co-grid > .ocsc-field:has(textarea), .safy-co-grid > #ocsc-branch-field { flex-basis: 100%; }
.safy-co-grid > .ocsc-field, .safy-co-grid #ocsc-checkout-section .ocsc-field { margin: 0; }
.safy-checkout #ocsc-checkout-section .ocsc-field { margin: 0; }
.safy-checkout #ocsc-checkout-section #ocsc-schedule-fields { margin: 0; padding: 22px 24px; border: 1px solid var(--c-line); }
.safy-checkout #ocsc-checkout-section #ocsc-schedule-type-field { margin: 0 !important; }

/* ===== fields: placeholder + icon inside (the label stays for screen readers) ===== */
.safy-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.safy-checkout #ocsc-checkout-section .ocsc-field { position: relative; }
.safy-checkout #ocsc-checkout-section .ocsc-field.safy-iconfield::before { content: ""; position: absolute; z-index: 1; inset-block: 1px; inset-inline-end: 1px; width: 44px; border-inline-start: 1px solid var(--c-line); border-start-end-radius: 7px; border-end-end-radius: 7px; background: var(--i) center / 18px no-repeat, var(--c-bg-soft); pointer-events: none; }
.safy-checkout #ocsc-checkout-section .ocsc-field.safy-iconfield.safy-area::before { background-position: center 14px, 0 0; }
#ocsc-full-name-field, #ocsc-recipient-full-name-field { --i: var(--cg-user); }
#ocsc-mobile-number-field, #ocsc-alternative-phone-field, #ocsc-landline-field, #ocsc-recipient-mobile-field, #ocsc-recipient-alt-phone-field, #ocsc-recipient-landline-field { --i: var(--cg-phone); }
#ocsc-whatsapp-number-field, #ocsc-recipient-whatsapp-field { --i: var(--cg-whatsapp); }
#ocsc-email-field { --i: var(--cg-mail); }
#ocsc-detailed-address-field, #ocsc-recipient-address-field { --i: var(--cg-edit); }
#ocsc-landmark-field, #ocsc-recipient-landmark-field, #ocsc-branch-field { --i: var(--cg-pin); }
.safy-checkout #ocsc-checkout-section input.input-text, .safy-checkout #ocsc-checkout-section input[type="date"], .safy-checkout #ocsc-checkout-section input[type="time"], .safy-checkout #ocsc-checkout-section .ocsc-select, .safy-checkout #ocsc-checkout-section .ocsc-textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; padding-inline-end: 56px; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-white); color: var(--c-ink); font-size: 15px; box-shadow: none; }
.safy-checkout #ocsc-checkout-section input[type="date"], .safy-checkout #ocsc-checkout-section input[type="time"] { padding-inline: 14px; }
.safy-checkout #ocsc-checkout-section .ocsc-textarea { min-height: 100px; padding-block: 12px; resize: vertical; }
.safy-checkout #ocsc-checkout-section input.input-text:focus, .safy-checkout #ocsc-checkout-section input[type="date"]:focus, .safy-checkout #ocsc-checkout-section input[type="time"]:focus, .safy-checkout #ocsc-checkout-section .ocsc-textarea:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(227, 35, 104, .12); }
.safy-checkout #ocsc-checkout-section .ocsc-field > label:not(.safy-sr):not(.ocsc-order-method-option):not(.ocsc-schedule-option):not(:has(input[type="checkbox"])) { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--c-ink); line-height: 1.6; }
.safy-checkout #ocsc-checkout-section .ocsc-field abbr.required { border: 0; text-decoration: none; color: var(--c-primary); }
.safy-checkout #ocsc-checkout-section .optional { font-weight: 400; color: var(--c-text-muted); }

/* ===== tick boxes (same look as the product add-ons) ===== */
.safy-checkout #ocsc-checkout-section .ocsc-field > label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.safy-checkout #ocsc-checkout-section input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--c-line); border-radius: 5px; background: var(--c-white); cursor: pointer; transform: none; }
.safy-checkout #ocsc-checkout-section input[type="checkbox"]:checked { border-color: transparent; background: var(--co-check) center / 13px no-repeat, var(--grad-brand); }
.safy-checkout #ocsc-checkout-section input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ===== option cards: order method, appointment type, payment (prototype .optcard) ===== */
.safy-checkout #ocsc-checkout-section .ocsc-order-method-wrap, .safy-checkout #ocsc-checkout-section .ocsc-schedule-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option, .safy-checkout #payment ul.payment_methods li.wc_payment_method {
  position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; width: 100%; padding: 14px 16px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-white); color: var(--c-ink); line-height: 1.5; cursor: pointer; transition: border-color .2s, background .2s; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option::before, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option::before, .safy-checkout #payment ul.payment_methods li.wc_payment_method label::before {
  content: ""; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--ic, none) center / 22px no-repeat, linear-gradient(135deg, var(--c-tint-purple), var(--c-tint-pink)); }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option::after, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option::after { content: ""; flex: none; width: 20px; height: 20px; margin-inline-start: auto; border: 2px solid var(--c-line); border-radius: 50%; transition: .2s; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option input, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option-text, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option-text { display: grid; gap: 2px; min-width: 0; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option-main, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option-main { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.safy-checkout #ocsc-checkout-section .ocsc-schedule-option-desc, .safy-checkout #ocsc-checkout-section .ocsc-order-method-option-desc { font-size: 13px; font-weight: 400; color: var(--c-text-muted); }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option:has(input:checked), .safy-checkout #ocsc-checkout-section .ocsc-schedule-option:has(input:checked) { border-color: var(--c-primary); background: linear-gradient(135deg, rgba(244, 234, 249, .6), rgba(253, 235, 242, .6)); box-shadow: none; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option:has(input:checked)::after, .safy-checkout #ocsc-checkout-section .ocsc-schedule-option:has(input:checked)::after { border-color: var(--c-primary); background: radial-gradient(circle, var(--c-primary) 0 45%, transparent 50%); }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option:has(input:focus-visible), .safy-checkout #ocsc-checkout-section .ocsc-schedule-option:has(input:focus-visible) { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option:has(#ocsc-method-delivery) { --ic: var(--pk-truck); }
.safy-checkout #ocsc-checkout-section .ocsc-order-method-option:has(#ocsc-method-pickup) { --ic: var(--pk-store); }
.safy-checkout #ocsc-checkout-section .ocsc-schedule-option:has(#ocsc-schedule-asap) { --ic: var(--pk-clock); }
.safy-checkout #ocsc-checkout-section .ocsc-schedule-option:has(#ocsc-schedule-specific) { --ic: var(--pk-calendar); }
.safy-checkout #ocsc-checkout-section .ocsc-schedule-title { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.safy-checkout #ocsc-checkout-section #ocsc-schedule-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.safy-checkout #ocsc-checkout-section #ocsc-schedule-datetime .ocsc-schedule-notice { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border: 0; border-radius: var(--radius-s); background: linear-gradient(to right, var(--c-tint-purple), var(--c-tint-pink)); font-size: 13px; color: var(--c-ink); line-height: 1.7; }

/* ===== order summary ===== */
.safy-co-summary #order_review_heading { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--c-ink); }
.safy-co-summary table.shop_table { display: block; width: 100%; margin: 0; border: 0; border-collapse: separate; }
.safy-co-summary table.shop_table thead { display: none; }
.safy-co-summary table.shop_table tbody, .safy-co-summary table.shop_table tfoot { display: block; }
.safy-co-summary table.shop_table tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.safy-co-summary table.shop_table th, .safy-co-summary table.shop_table td { padding: 0; border: 0; background: none; }
.safy-co-summary tr.cart_item { align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
.safy-co-summary td.product-name { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--c-ink); text-align: start; }
.safy-co-thumb { grid-column: 1; grid-row: 1 / span 3; }
.safy-co-thumb img { display: block; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.safy-co-name { grid-column: 2; grid-row: 1; }
.safy-co-qty { grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 400; color: var(--c-text-muted); }
.safy-co-summary td.product-name dl.variation { grid-column: 2; grid-row: 3; margin: 4px 0 0 !important; }
.safy-co-summary td.product-total { flex: none; font-weight: 700; color: var(--c-primary) !important; white-space: nowrap; text-align: left; }
.safy-co-summary td.product-total * { color: var(--c-primary) !important; font-weight: 700 !important; }
.safy-co-summary tfoot tr { padding: 12px 0; border-bottom: 1px dashed var(--c-line); font-size: 15px; }
.safy-co-summary tfoot th { font-weight: 400; color: var(--c-text-muted); text-align: start; }
.safy-co-summary tfoot td { font-weight: 500; text-align: left; }
.safy-co-summary tfoot tr.order-total { padding-top: 16px; border-bottom: 0; }
.safy-co-summary tfoot tr.order-total th { font-size: 17px; font-weight: 700; color: var(--c-ink); }
.safy-co-summary tfoot tr.order-total td, .safy-co-summary tfoot tr.order-total td * { font-size: 22px !important; font-weight: 700 !important; color: var(--c-primary) !important; background: none !important; }

/* payment (the plugin keeps cash on delivery only) */
.safy-checkout #payment { margin: 14px 0 0; padding: 0; border-radius: 0; background: none; }
.safy-checkout #payment::before { content: "طريقة الدفع"; display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.safy-checkout #payment ul.payment_methods { margin: 0 0 14px; padding: 0; border: 0; list-style: none; }
.safy-checkout #payment ul.payment_methods li.wc_payment_method { display: grid; grid-template-columns: 1fr; gap: 0; padding: 12px 14px; border-color: var(--c-primary); background: linear-gradient(135deg, rgba(244, 234, 249, .6), rgba(253, 235, 242, .6)); cursor: default; }
.safy-checkout #payment ul.payment_methods li.wc_payment_method > input { position: absolute; opacity: 0; pointer-events: none; }
.safy-checkout #payment ul.payment_methods li.wc_payment_method label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); cursor: default; --ic: var(--pk-wallet); }
.safy-checkout #payment ul.payment_methods li.wc_payment_method .payment_box { margin: 4px 0 0; padding: 0 58px 0 0; background: none; color: var(--c-text-muted); font-size: 13px; line-height: 1.6; }
.safy-checkout #payment ul.payment_methods li.wc_payment_method .payment_box::before { display: none; }
.safy-checkout #payment ul.payment_methods li.wc_payment_method .payment_box p { margin: 0; }
.safy-checkout #payment div.form-row.place-order { margin: 0; padding: 0; background: none; }
.safy-checkout #payment #place_order { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; float: none; width: 100%; min-height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: 10px; background: var(--grad-brand); background-origin: border-box; color: var(--c-white); font-size: 17px; font-weight: 700; line-height: 1.2; }
.safy-checkout #payment #place_order::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--co-check) center / contain no-repeat; }
.safy-checkout #payment #place_order:hover { filter: brightness(.93); color: var(--c-white); }
.safy-checkout #payment #place_order.ocsc-place-order-disabled, .safy-checkout #payment #place_order:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.safy-co-summary .safy-delivery { margin-top: 14px; }

/* ===== tablet and phone ===== */
@media (max-width: 1024px) {
  .safy-checkout form.woocommerce-checkout { grid-template-columns: minmax(0, 1fr); }
  .safy-co-summary { grid-column: 1; position: static; }
}
@media (max-width: 767px) {
  .safy-co-card { padding: 18px 16px; }
  .safy-co-summary { padding: 20px; }
  .safy-co-grid > * { flex-basis: 100%; }
  .safy-checkout #ocsc-checkout-section .ocsc-order-method-wrap, .safy-checkout #ocsc-checkout-section .ocsc-schedule-options, .safy-checkout #ocsc-checkout-section #ocsc-schedule-datetime { grid-template-columns: 1fr; }
  .safy-checkout #ocsc-checkout-section .ocsc-schedule-notice { font-size: 12px; }
}

/* owner review: phone fields read right-to-left like the others; tick rows centred on their box */
.safy-checkout #ocsc-checkout-section input[type="tel"] { direction: ltr; text-align: right; }
.safy-checkout #ocsc-checkout-section input[type="email"] { direction: ltr; text-align: right; }
.safy-checkout #ocsc-checkout-section .ocsc-field > label:has(input[type="checkbox"]) { align-items: center; font-weight: 500; line-height: 1.5; }
.safy-checkout #ocsc-checkout-section input[type="checkbox"] { margin: 0; }
.safy-checkout .woocommerce-NoticeGroup .woocommerce-error, .safy-checkout .woocommerce-NoticeGroup .woocommerce-message, .safy-checkout .woocommerce-NoticeGroup .woocommerce-info { width: 100%; }

/* select fields: the dropdown arrow keeps clear of the field's icon strip */
.safy-checkout #ocsc-checkout-section select.ocsc-select { padding-inline-end: 56px !important; }

/* ===== date / time pickers in the site's own design (the browser's pickers are not used) ===== */
.safy-native-hidden { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.safy-pick-wrap { position: relative; }
.safy-pick { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 14px; padding-inline-end: 56px; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-white); color: var(--c-ink); font-size: 15px; text-align: start; cursor: pointer; position: relative; }
.safy-pick::after { content: ""; position: absolute; inset-block: 1px; inset-inline-end: 1px; width: 44px; border-inline-start: 1px solid var(--c-line); border-start-end-radius: 7px; border-end-end-radius: 7px; background: var(--i) center / 18px no-repeat, var(--c-bg-soft); }
.safy-pick[data-kind="date"] { --i: var(--cg-calendar); }
.safy-pick[data-kind="time"] { --i: var(--cg-clock); }
.safy-pick:hover, .safy-pick[aria-expanded="true"], .safy-pick:focus-visible { border-color: var(--c-primary); outline: 0; box-shadow: 0 0 0 3px rgba(227, 35, 104, .12); }
.safy-pick .safy-pick__ph { color: #8a8095; }
.safy-pop { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px); box-sizing: border-box; padding: 8px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-white); box-shadow: var(--shadow-pop); }
.safy-pop[hidden] { display: none; }
/* picker panels: cards to choose from (days, times) */
.safy-pop--cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 12px; }
.safy-pop--days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.safy-card { box-sizing: border-box; display: grid; place-items: center; gap: 2px; min-height: 48px; padding: 8px 6px; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-white); color: var(--c-ink); font-size: 15px; line-height: 1.3; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.safy-card b { font-size: 15px; font-weight: 700; }
.safy-card--day { min-height: 76px; }
.safy-card--day b { font-size: 22px; }
.safy-card__top { font-size: 13px; font-weight: 700; color: var(--c-text-muted); }
.safy-card__sub { font-size: 12px; color: var(--c-text-muted); }
.safy-card:hover:not(:disabled), .safy-card:focus-visible { border-color: var(--c-primary); background: var(--c-white); color: var(--c-primary); outline: 0; }
.safy-card:hover:not(:disabled) .safy-card__top, .safy-card:hover:not(:disabled) .safy-card__sub { color: var(--c-primary); }
.safy-card[aria-selected="true"] { border-color: var(--c-primary); background: linear-gradient(135deg, var(--c-tint-purple), var(--c-tint-pink)); color: var(--c-primary); }
.safy-card[aria-selected="true"] .safy-card__top, .safy-card[aria-selected="true"] .safy-card__sub { color: var(--c-primary); }
.safy-card:disabled, .safy-card:disabled:hover { border-color: var(--c-line); background: var(--c-bg-soft); color: #b3a9ba; cursor: not-allowed; }
.safy-pop__note { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: var(--radius-s); background: linear-gradient(to right, var(--c-tint-purple), var(--c-tint-pink)); font-size: 13px; color: var(--c-ink); text-align: center; }
@media (max-width: 767px) { .safy-pop--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .safy-pop--days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; } }

/* area field + branch location (pickup) */
#ocsc-delivery-area-field { --i: var(--cg-pin); }
.safy-checkout .ocsc-branch-location { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: linear-gradient(to right, var(--c-tint-purple), var(--c-tint-pink)); font-size: 14px; color: var(--c-ink); line-height: 1.6; }
.safy-checkout .ocsc-branch-location[hidden] { display: none; }
.safy-checkout .ocsc-branch-location__map { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--c-primary); border-radius: var(--radius-s); background: var(--c-white); color: var(--c-primary); font-weight: 700; text-decoration: none; }
.safy-checkout .ocsc-branch-location__map::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pin-mask) center/contain no-repeat; mask: var(--pin-mask) center/contain no-repeat; }
.safy-checkout .ocsc-branch-location__map:hover { background: var(--c-tint-pink); color: var(--c-primary); }
.safy-checkout .ocsc-branch-location__map[hidden] { display: none; }
:root { --pin-mask: var(--ico-pin); }
.safy-co-grid > #ocsc-delivery-area-field { flex-basis: 100%; }
.safy-checkout .ocsc-area-notice { margin: 0; padding: 12px 14px; border-radius: var(--radius-s); background: linear-gradient(to right, var(--c-tint-purple), var(--c-tint-pink)); font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--c-ink); }
.safy-checkout .ocsc-area-notice[hidden] { display: none; }
.safy-co-grid > .ocsc-area-notice { flex-basis: 100%; }

/* the icon strip is as tall as the box it belongs to: block-level controls leave no baseline gap under them */
.safy-checkout #ocsc-checkout-section .ocsc-field > input, .safy-checkout #ocsc-checkout-section .ocsc-field > textarea, .safy-checkout #ocsc-checkout-section .ocsc-field > select { display: block; }
.safy-checkout #ocsc-checkout-section .ocsc-textarea { vertical-align: top; resize: none; }
/* "I agree to the terms" box: same tick box as every other (20px, gradient when ticked), box and sentence on one line */
.safy-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0 0 16px; }
.safy-checkout .woocommerce-terms-and-conditions-wrapper, .safy-checkout .form-row.validate-required:has(#terms) { margin: 0 0 16px; padding: 0; }
.safy-checkout .form-row:has(#terms) label.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; line-height: 1.8; color: var(--c-ink); }
.safy-checkout .form-row:has(#terms) input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px !important; height: 20px !important; min-width: 20px; margin: 0; border: 1.5px solid var(--c-line); border-radius: 5px; background: var(--c-white); cursor: pointer; }
.safy-checkout .form-row:has(#terms) input[type="checkbox"]:checked { border-color: transparent; background: var(--co-check) center / 13px no-repeat, var(--grad-brand); }
.safy-checkout .form-row:has(#terms) a { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.safy-checkout .form-row:has(#terms) .required { color: var(--c-primary); text-decoration: none; }