/**
 * File: woo-message.css
 * Purpose: Styles for WooCommerce system notices, including error, info, and success messages.
 * Usage: Applies to cart, checkout, and account pages where WooCommerce messages are shown.
 *
 * Dependencies:
 * - WooCommerce default markup for `.woocommerce-message`, `.woocommerce-info`, and `.woocommerce-error`
 * - Divi modules that reuse Woo notices (e.g., cart notices)
 * - FontAwesome for dismiss icon styling
 *
 * Layout Overview:
 * - Variables control colors for background, border, text, and buttons
 * - Dismiss buttons and restore links use consistent styling with global buttons
 * - Responsive styles adjust layout at 820px and 768px breakpoints
 *
 * Notes:
 * - Scoped under `.woocommerce` to limit impact and support Divi integration
 * - Button colors link to global button variables for consistency
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.woocommerce
 {
--woo-message-error-bg-color: var(--brand-orange-overlay-light);
--woo-message-error-border-color: var(--brand-accent-color);
--woo-message-error-font-color: var(--black);

--woo-message-bg-color: var(--white);
--woo-message-border-color: var(--gray-medium);
--woo-message-font-color: var(--black);

--woo-message-dismiss-font-color: var(--black);
--woo-message-dismiss-font-hover-color: var(--white);
--woo-message-dismiss-bg-color: var(--white);
--woo-message-dismiss-bg-hover-color: var(--brand-accent-color);
--woo-message-dismiss-border-color: var(--gray-medium);
--woo-message-dismiss-border-hover-color: var(--brand-accent-color);

--woo-message-button-font-color: var(--global-button-font-color);
--woo-message-button-font-hover-color: var(--global-button-font-hover-color);
--woo-message-button-bg-color: var(--global-button-bg-color);
--woo-message-button-bg-hover-color: var(--global-button-bg-hover-color);
--woo-message-button-border-color: var(--global-button-border-color);
--woo-message-button-border-hover-color: var(--global-button-border-hover-color);

}

/* -------------------------- */

.woocommerce .woocommerce-error, 
.woocommerce-error, 
.et-db #et-boc .et-l .et_pb_wc_cart_notice .woocommerce-error, 
.et-db #et-boc .et-l .et_pb_wc_cart_notice_0_tb_body .woocommerce-error
 {
    background: var(--woo-message-error-bg-color) !important;
    border: solid var(--woo-message-error-border-color)!important;
    border-width: 3px 1px!important;
    color: var(--woo-message-error-font-color) !important;
}

.woocommerce .woocommerce-info, 
.woocommerce .woocommerce-message,
.woocommerce #respond input#submit, 
.woocommerce-page #respond input#submit, 
.woocommerce #content input.button, 
.woocommerce-page #content input.button, 
.woocommerce-message, 
.woocommerce-info,
.et-db #et-boc .et-l .et_pb_wc_cart_notice .woocommerce-info, 
.et-db #et-boc .et-l .et_pb_wc_cart_notice .woocommerce-message,
.et-db #et-boc .et-l .et_pb_wc_cart_notice_0_tb_body .woocommerce-message, 
.et-db #et-boc .et-l .et_pb_wc_cart_notice_0_tb_body .woocommerce-info
 {
    background: var(--woo-message-bg-color) !important;
    border: solid var(--woo-message-border-color)!important;
    border-width: 3px 1px!important;
    color: var(--woo-message-font-color) !important;
}

.woocommerce-notices-wrapper .notice-dismiss {
    float: right;
    text-align: center;
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: 600;
    color: var(--woo-message-dismiss-font-color);
    cursor: pointer;
    margin-left: 18px;
    background-color: var(--woo-message-dismiss-bg-color);
    border-radius: 50%;
    border: solid var(--woo-message-dismiss-border-color);
    border-width:2px 1px;
    width: 25px;
    height: 25px;
    transition: all 500ms ease;
}

.woocommerce-notices-wrapper .notice-dismiss:hover {
    color: var(--woo-message-dismiss-font-hover-color);
    border: solid var(--woo-message-dismiss-border-hover-color);
    border-width:2px 1px;
    background-color: var(--woo-message-dismiss-bg-hover-color);
}

a.restore-item {
    display: inline-block;
    float: right;
    color:var(--woo-message-button-font-color);
    border: solid var(--woo-message-button-border-color);
    border-width: 2px 1px;
    padding: 0.3em 1em;
    background-color: var(--woo-message-button-bg-color);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 500ms ease;
}

.et_pb_wc_cart_notice_0 .woocommerce-message a.restore-item:hover {
    border: solid var(--woo-message-button-border-hover-color);
    border-width: 2px 1px;
    background-color: var(--woo-message-button-bg-hover-color);
    color:var(--woo-message-button-font-hover-color)!important;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  .woocommerce-message{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
  }

  .woocommerce-notices-wrapper a.button.wc-forward 
  {
      float: left !important;
      margin: 1em 80% 0 0;
      order: 2;
  }

  .woocommerce-notices-wrapper .notice-dismiss {
    order:1;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  .woocommerce-message{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
  }

  .woocommerce-notices-wrapper a.button.wc-forward,
  .woocommerce .woocommerce-error .button, 
  .woocommerce .woocommerce-info .button, 
  .woocommerce .woocommerce-message .button, 
  .woocommerce-page .woocommerce-error .button, 
  .woocommerce-page .woocommerce-info .button, 
  .woocommerce-page .woocommerce-message .button
  {
      float: left !important;
      margin: 1em auto 0 0;
      order: 1;
  }

  .woocommerce-notices-wrapper .notice-dismiss {
    order:2;
    margin: auto 0% 0 0%;
  }
}