/*
 * Office Choice Kenya — notification surface
 * Loaded after the universal commerce theme so WooCommerce and OCK status
 * messages keep the Office Choice neumorphic language instead of Woo defaults.
 */

html body.ock-site{
  --ock-notice-bg:#EAF1EF;
  --ock-notice-bg-strong:#F2F6F5;
  --ock-notice-ink:#102E36;
  --ock-notice-muted:#5D7074;
  --ock-notice-border:#C5D3D1;
  --ock-notice-ocean:#14758A;
  --ock-notice-cyan:#08A4C1;
  --ock-notice-success:#287A59;
  --ock-notice-error:#B54444;
  --ock-notice-warning:#A66B17;
  --ock-notice-raised:7px 7px 18px rgba(105,127,124,.23),-7px -7px 18px rgba(255,255,255,.82);
  --ock-notice-inset:inset 3px 3px 8px rgba(105,127,124,.13),inset -3px -3px 8px rgba(255,255,255,.72);
}

/* Keep the wrapper neutral. Individual notices own the material surface. */
html body.ock-site .woocommerce-notices-wrapper:not(:empty),
html body.ock-site .woocommerce-NoticeGroup:not(:empty){
  display:grid;
  gap:12px;
  margin:0 0 18px!important;
}

/* WooCommerce classic notices. Normal flow is intentional: removal/undo
   messages can contain bare text nodes that should never become grid items. */
html body.ock-site .woocommerce-message,
html body.ock-site .woocommerce-info,
html body.ock-site .woocommerce-error,
html body.ock-site ul.woocommerce-error{
  position:relative!important;
  box-sizing:border-box!important;
  min-height:62px!important;
  margin:0 0 14px!important;
  padding:17px 18px 17px 64px!important;
  border:1px solid rgba(255,255,255,.64)!important;
  border-left:0!important;
  border-top:0!important;
  border-radius:14px!important;
  background:var(--ock-notice-bg)!important;
  color:var(--ock-notice-ink)!important;
  box-shadow:var(--ock-notice-raised)!important;
  font:600 13px/1.5 Inter,Arial,sans-serif!important;
  list-style:none!important;
}

html body.ock-site .woocommerce-message::before,
html body.ock-site .woocommerce-info::before,
html body.ock-site .woocommerce-error::before,
html body.ock-site ul.woocommerce-error::before{
  position:absolute!important;
  top:50%!important;
  left:16px!important;
  width:32px!important;
  height:32px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:10px!important;
  background:var(--ock-notice-bg)!important;
  box-shadow:var(--ock-notice-inset)!important;
  color:var(--ock-notice-ocean)!important;
  font:900 15px/1 Inter,Arial,sans-serif!important;
}

html body.ock-site .woocommerce-message::before{content:"✓"!important;color:var(--ock-notice-success)!important;}
html body.ock-site .woocommerce-info::before{content:"i"!important;color:var(--ock-notice-ocean)!important;}
html body.ock-site .woocommerce-error::before,
html body.ock-site ul.woocommerce-error::before{content:"!"!important;color:var(--ock-notice-error)!important;}

html body.ock-site ul.woocommerce-error li{
  margin:2px 0!important;
  padding:0!important;
  color:inherit!important;
}

/* Action links inside notices become tactile compact controls instead of Woo pills. */
html body.ock-site .woocommerce-message a.button,
html body.ock-site .woocommerce-message a.wc-forward,
html body.ock-site .woocommerce-info a.button,
html body.ock-site .woocommerce-info a.wc-forward,
html body.ock-site .woocommerce-error a.button,
html body.ock-site .woocommerce-error a.wc-forward{
  float:right!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  margin:-3px 0 -3px 14px!important;
  padding:0 13px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--ock-notice-bg)!important;
  color:var(--ock-notice-ocean)!important;
  box-shadow:var(--ock-notice-raised)!important;
  font:800 11px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
}
html body.ock-site .woocommerce-message a.button:hover,
html body.ock-site .woocommerce-message a.wc-forward:hover,
html body.ock-site .woocommerce-info a.button:hover,
html body.ock-site .woocommerce-info a.wc-forward:hover,
html body.ock-site .woocommerce-error a.button:hover,
html body.ock-site .woocommerce-error a.wc-forward:hover{
  background:var(--ock-notice-bg-strong)!important;
  color:var(--ock-notice-ink)!important;
  box-shadow:var(--ock-notice-inset)!important;
}

/* Office Choice form/RFQ confirmations use the same notification material. */
html body.ock-site .ock-form-status{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:4px!important;
  min-height:68px!important;
  margin:0 0 18px!important;
  padding:14px 18px 14px 64px!important;
  border:1px solid rgba(255,255,255,.64)!important;
  border-left:0!important;
  border-radius:14px!important;
  background:var(--ock-notice-bg)!important;
  box-shadow:var(--ock-notice-raised)!important;
}
html body.ock-site .ock-form-status::before{
  content:"i";
  position:absolute;
  top:50%;
  left:16px;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--ock-notice-bg)!important;
  box-shadow:var(--ock-notice-inset)!important;
  color:var(--ock-notice-ocean)!important;
  font:900 15px/1 Inter,Arial,sans-serif;
}
html body.ock-site .ock-form-status strong{
  grid-column:1;
  color:var(--ock-notice-ink)!important;
  font:800 14px/1.25 Archivo,Inter,Arial,sans-serif!important;
}
html body.ock-site .ock-form-status span{
  grid-column:2;
  color:var(--ock-notice-muted)!important;
  font:700 10px/1.35 Inter,Arial,sans-serif!important;
  letter-spacing:.02em;
  text-align:right;
}
html body.ock-site .ock-form-status.is-success::before{content:"✓";color:var(--ock-notice-success)!important;}
html body.ock-site .ock-form-status.is-error::before{content:"!";color:var(--ock-notice-error)!important;}

/* Order received notice is often not inside the standard notice wrapper. */
html body.ock-site .woocommerce-order .woocommerce-notice--success{
  position:relative!important;
  min-height:62px!important;
  padding:17px 18px 17px 64px!important;
  border:1px solid rgba(255,255,255,.64)!important;
  border-radius:14px!important;
  background:var(--ock-notice-bg)!important;
  color:var(--ock-notice-ink)!important;
  box-shadow:var(--ock-notice-raised)!important;
  font:700 13px/1.5 Inter,Arial,sans-serif!important;
}
html body.ock-site .woocommerce-order .woocommerce-notice--success::before{
  content:"✓";
  position:absolute;
  top:50%;
  left:16px;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--ock-notice-bg)!important;
  box-shadow:var(--ock-notice-inset)!important;
  color:var(--ock-notice-success)!important;
  font:900 15px/1 Inter,Arial,sans-serif;
}

/* WooCommerce Blocks notices, should blocks be enabled later. */
html body.ock-site .wc-block-components-notice-banner{
  border:1px solid rgba(255,255,255,.64)!important;
  border-radius:14px!important;
  background:var(--ock-notice-bg)!important;
  color:var(--ock-notice-ink)!important;
  box-shadow:var(--ock-notice-raised)!important;
}
html body.ock-site .wc-block-components-notice-banner>.wc-block-components-notice-banner__content{
  color:var(--ock-notice-ink)!important;
  font:600 13px/1.5 Inter,Arial,sans-serif!important;
}
html body.ock-site .wc-block-components-notice-banner.is-success>svg{background:var(--ock-notice-success)!important;}
html body.ock-site .wc-block-components-notice-banner.is-error>svg{background:var(--ock-notice-error)!important;}
html body.ock-site .wc-block-components-notice-banner.is-info>svg{background:var(--ock-notice-ocean)!important;}

/* Coupon prompts and payment-gateway helper boxes are controls/content, not flash
   notifications. Preserve their purpose-specific checkout layout. */
html body.ock-site .woocommerce-form-coupon-toggle .woocommerce-info,
html body.ock-site .ock-checkout-native #payment .woocommerce-info,
html body.ock-site .ock-checkout-native #payment .woocommerce-notice{
  box-shadow:var(--ock-notice-inset)!important;
}

@media(max-width:680px){
  html body.ock-site .woocommerce-message,
  html body.ock-site .woocommerce-info,
  html body.ock-site .woocommerce-error,
  html body.ock-site ul.woocommerce-error{
    min-height:58px!important;
    padding:15px 14px 15px 56px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }
  html body.ock-site .woocommerce-message::before,
  html body.ock-site .woocommerce-info::before,
  html body.ock-site .woocommerce-error::before,
  html body.ock-site ul.woocommerce-error::before{
    left:13px!important;
    width:30px!important;
    height:30px!important;
  }
  html body.ock-site .woocommerce-message a.button,
  html body.ock-site .woocommerce-message a.wc-forward,
  html body.ock-site .woocommerce-info a.button,
  html body.ock-site .woocommerce-info a.wc-forward,
  html body.ock-site .woocommerce-error a.button,
  html body.ock-site .woocommerce-error a.wc-forward{
    float:none!important;
    margin:10px 0 0!important;
  }
  html body.ock-site .ock-form-status{
    grid-template-columns:1fr!important;
    min-height:64px!important;
    padding:14px 14px 14px 56px!important;
    border-radius:12px!important;
  }
  html body.ock-site .ock-form-status::before{left:13px;width:30px;height:30px;}
  html body.ock-site .ock-form-status strong,
  html body.ock-site .ock-form-status span{grid-column:1!important;text-align:left!important;}
}