/* =========================================================
   WooCommerce Notices
   DAIX Laser - Black & Gold
   ========================================================= */

/* Hide WooCommerce default icon */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
    display:none!important;
}

/* ---------------------------------------------------------
   Notice
--------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{

    margin:22px 0;
    padding:14px 18px;

    background:#1a1a17!important;

    border:1px solid rgba(201,162,74,.22)!important;

    border-radius:12px;

    color:#f2ede3!important;

    box-shadow:none!important;
}

/* ---------------------------------------------------------
   Layout
--------------------------------------------------------- */

.woocommerce-message .message-container{

    display:flex;
    align-items:flex-start;
    gap:12px;
}

/* ---------------------------------------------------------
   Icon
--------------------------------------------------------- */

.woocommerce-message .icon-checkmark{

    flex:0 0 auto;

    margin-top:3px;

    color:#35c86d;

    font-size:16px;
}

/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.dx-notice-content{

    flex:1;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:18px;
}

.dx-notice-text{

    flex:1;

    font-size:15px;
    line-height:1.6;
    color:#f2ede3;
}

.dx-notice-text p{

    margin:0;
}

.dx-notice-action{

    flex-shrink:0;
}

/* ---------------------------------------------------------
   Button
--------------------------------------------------------- */

.dx-notice-action .button,
.dx-notice-action .wc-forward{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:38px;
    padding:0 18px;

    background:transparent!important;

    border:1px solid rgba(201,162,74,.45)!important;

    border-radius:999px;

    color:var(--dx-gold)!important;

    font-size:12px;
    font-weight:600;

    letter-spacing:.04em;
    text-transform:uppercase;

    text-decoration:none!important;

    transition:
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        transform .22s ease;
}

.dx-notice-action .button:hover,
.dx-notice-action .wc-forward:hover{

    background:linear-gradient(
        120deg,
        var(--dx-gold),
        var(--dx-gold-light)
    )!important;

    border-color:transparent!important;

    color:var(--dx-black)!important;

    transform:translateY(-1px);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width:549px){

    .woocommerce-message{

        padding:14px 16px;
    }

    .woocommerce-message .icon-checkmark{

        margin-top:2px;
        font-size:15px;
    }

    .dx-notice-content{

        flex-direction:column;
        align-items:flex-start;

        gap:12px;
    }

    .dx-notice-text{

        font-size:14px;
        line-height:1.55;
    }

    .dx-notice-action{

        width:100%;

        display:flex;
        justify-content:flex-end;
    }

    .dx-notice-action .button{

        height:36px;
        padding:0 16px;

        font-size:12px;
    }

}

/* =========================================================
   Remove browser focus ring
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-message *,
.woocommerce-info *,
.woocommerce-error *{

    outline:none!important;
    box-shadow:none!important;

    -webkit-tap-highlight-color:transparent;
}

.woocommerce-message:focus,
.woocommerce-message:focus-visible,
.woocommerce-message:active,

.woocommerce-info:focus,
.woocommerce-info:focus-visible,

.woocommerce-error:focus,
.woocommerce-error:focus-visible{

    outline:none!important;
    box-shadow:none!important;
}

.dx-notice-action .button:focus,
.dx-notice-action .button:focus-visible,
.dx-notice-action .button:active{

    outline:none!important;
    box-shadow:none!important;
}