/* AIEO Checkout Notice Modal — clean, modern restyle. Same `.om-wc-*` class
 * names preserved for back-compat. Notice rows no longer reuse WooCommerce's
 * `.woocommerce-error` (pink box + misaligned icon-font glyph); they use the
 * neutral `.om-wc-notice` rows styled below. Brand accent = #F46767.
 * Badge icons are SVG-drawn discs (glyph centered in the viewBox) so the icon
 * is perfectly centered regardless of font metrics. */

/* Overlay + card */
.om-wc-modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);display:none;z-index:99998}
.om-wc-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:480px;width:calc(100% - 2rem);background:#fff;border-radius: var(--aieo-shape-panel, 16px);box-shadow:0 16px 48px rgba(17,24,39,.22);z-index:99999;display:none;overflow:hidden;font-family:inherit}
.om-wc-modal-header{padding:16px 20px;border-bottom:1px solid #f0f0f3;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.om-wc-modal-title{font-size:1.05rem;font-weight:700;color:#111827;margin:0;line-height:1.3}
.om-wc-modal-close{background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:#9ca3af;width:34px;height:34px;border-radius: var(--aieo-shape-button, 8px);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s ease,color .15s ease}
.om-wc-modal-close:hover{background:#f3f4f6;color:#111827}
.om-wc-modal-body{padding:18px 20px;max-height:70vh;overflow:auto}

/* Notice rows — icon + text vertically centered as a pair */
.om-wc-notices{display:flex;flex-direction:column;gap:10px}
.om-wc-modal .om-wc-notice{display:flex;align-items:center;gap:11px;margin:0;padding:12px 15px;border:1px solid #f9d6d6;border-left:4px solid #F46767;border-radius: var(--aieo-shape-panel, 10px);background:#fef2f2;color:#7a2e2e;font-size:.92rem;line-height:1.5;box-shadow:none}
.om-wc-modal .om-wc-notice::before{content:"";flex:0 0 20px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%23F46767'/%3E%3Crect%20x='9'%20y='4.3'%20width='2'%20height='7'%20rx='1'%20fill='%23fff'/%3E%3Ccircle%20cx='10'%20cy='14.6'%20r='1.15'%20fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
.om-wc-modal .om-wc-notice-text{flex:1 1 auto;min-width:0}
.om-wc-modal .om-wc-notice-text a{color:inherit;text-decoration:underline;font-weight:600}
.om-wc-modal .om-wc-notice--info{border-color:#cfe2ff;border-left-color:#2563eb;background:#eff6ff;color:#1e3a8a}
.om-wc-modal .om-wc-notice--info::before{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%232563eb'/%3E%3Ccircle%20cx='10'%20cy='5.7'%20r='1.15'%20fill='%23fff'/%3E%3Crect%20x='9'%20y='8.4'%20width='2'%20height='7'%20rx='1'%20fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
.om-wc-modal .om-wc-notice--success{border-color:#cdebd6;border-left-color:#16a34a;background:#f0fdf4;color:#14532d}
.om-wc-modal .om-wc-notice--success::before{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%2316a34a'/%3E%3Cpath%20d='M5.8%2010.3l2.6%202.6%205.8-5.8'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* WooCommerce block order-summary quantity badge — ALIGNMENT ONLY, no recolour.
 * WC already flex-centers the number, but its text line box reserves descender
 * space so the digit sits a touch high; nudge the visible digit down to optical
 * centre. Colour stays WooCommerce's default. Loaded only on checkout. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity{
  align-items:center;
  justify-content:center;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span[aria-hidden="true"]{
  display:block;
  line-height:1;
  transform:translateY(1px);
}

/* Body lock + hide the original inline notices (classic + block) while open */
body.om-wc-notice-open{overflow:hidden}
body.om-wc-notice-open .woocommerce-NoticeGroup-checkout .woocommerce-error,
body.om-wc-notice-open .woocommerce-notices-wrapper .woocommerce-error,
body.om-wc-notice-open .wc-block-components-notice-banner.is-error{display:none!important}

@media (max-width:480px){
  .om-wc-modal{border-radius: var(--aieo-shape-panel, 14px)}
  .om-wc-modal-header{padding:14px 16px}
  .om-wc-modal-body{padding:16px}
}

/* ── Don't say it twice ───────────────────────────────────────────────────────
   The modal SURFACES WooCommerce's checkout notices; it never removed them, so
   every message appeared both inline on the page and in the dialog. The PHP side
   only ever covered the classic checkout — it drops
   `woocommerce_output_all_notices` — and the BLOCK checkout renders its notices
   client-side in React, where no PHP hook exists to remove. Confirmed on the
   block checkout: notices shown in both places at once.

   Hiding is done here rather than by removing nodes in JS because React owns
   that subtree and re-renders would put them straight back, and because CSS
   applies before first paint, so there is no flash of the inline banner.

   🚨 GATED ON `body.om-wc-modal-ready`, WHICH THE SCRIPT ADDS AT RUNTIME.
   If the script does not run, nothing here applies and WooCommerce's notices
   stay exactly where they were. A checkout that silently swallows "your payment
   was declined" because a stylesheet loaded and a script did not would be a far
   worse bug than the duplication this fixes.

   🚨 THE SELECTORS MIRROR WHAT THE MODAL ACTUALLY COLLECTS, deliberately, and
   must keep mirroring it. buildModalContentFromDom() reads exactly these four
   block variants and these four classic ones. Hide anything BROADER — the whole
   `.wc-block-components-notice-banner` set, say, or the entire notices wrapper —
   and a message the modal does not pick up would vanish with nowhere to appear.
   If you add a selector here, add it there in the same commit. */

body.om-wc-modal-ready .wc-block-components-notice-banner.is-error,
body.om-wc-modal-ready .wc-block-components-notice-banner[role="alert"],
body.om-wc-modal-ready .wc-block-components-notice-banner.is-error,
body.om-wc-modal-ready .woocommerce-NoticeGroup-checkout .woocommerce-error,
body.om-wc-modal-ready .woocommerce-notices-wrapper .woocommerce-error {
    display: none !important;
}
/* Brief section 22: success and info notices are WooCommerce's own and stay
 * where it prints them; only error notices move into the modal. */

/* Field-level validation is NOT touched. `.wc-block-components-validation-error`
   sits under the input it belongs to and is the only thing telling a customer
   WHICH field is wrong; the modal lists messages but cannot point at a field. */

/* The modal's own rows use `.om-wc-notice*`, so they can never match the rules
   above. Belt and braces in case a theme re-adds WC classes inside it. */
.om-wc-modal .wc-block-components-notice-banner,
.om-wc-modal .woocommerce-error,
.om-wc-modal .woocommerce-message,
.om-wc-modal .woocommerce-info {
    display: block !important;
}