/* ===========================
   WooCommerce Toast Notice
   CI: AERÉ — Warm Ivory / Deep Greige / Noto Sans Thai
   ปรับจาก vachboy-plugins/hello-elementor-child/assets/css/toast.css
   (เดิม CI: Black/White/Fragment Mono) ให้ตรงพาเลตต์ AERÉ
=========================== */

/* ── Wrapper ─────────────────────────────────────────────────────
   Fixed toast position — ลบ margin / flex จาก CSS เดิม ออกทั้งหมด
   (ไม่ใช้ margin-bottom / display:flex / width:100%)
──────────────────────────────────────────────────────────────── */
.woocommerce-notices-wrapper {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 640px);
    z-index: 999999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.woocommerce-notices-wrapper > * {
    pointer-events: auto;
}

/* ── Notice Base — shared styles ─────────────────────────────────
   padding ซ้าย 58px เผื่อ icon (::before), ขวา 48px เผื่อปุ่มปิด
──────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {

    position: relative !important;

    padding: 18px 48px 18px 58px;

    /* CI: Warm Ivory + Deep Greige */
    background: #F5F1E9;
    color: #49433F;
    border: 0 !important;
    border-left: 3px solid #D8C7B2 !important; /* Champagne Beige */
    outline: none !important;

    /* CI: Noto Sans Thai / IBM Plex Sans Thai */
    font-family: 'Noto Sans Thai', 'IBM Plex Sans Thai', sans-serif;
    font-size: 14px !important;
    line-height: 1.6;

    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(73, 67, 63, 0.14); /* เงาโทนอุ่น ไม่ใช้ดำล้วน */
    overflow: hidden;
    margin-bottom: 12px; /* เผื่อกรณี render ติดกันหลายกล่องนอก .woocommerce-notices-wrapper
                             (เช่นหน้า My Account ที่ไม่ได้ถูกดึงเข้า wrapper แบบลอย) */

    /* Toast entrance animation — ปิดชั่วคราวระหว่างไล่บั๊กตำแหน่งไอคอน
       (opacity/transform ระหว่าง animate ทำให้เช็คตำแหน่งจริงยาก)
       จะเอากลับมาทีหลัง: uncomment 3 บรรทัดด้านล่าง แล้วลบ opacity:1/transform:none ทิ้ง
    opacity: 0;
    transform: translateY(-18px);
    animation: toastShow .35s ease forwards;
    */
    opacity: 1;
    transform: none;

}
.woocommerce-info.toast-persistent{
    margin-bottom:20px !important;
}
.woocommerce-error {
    border-left-color: #49433F !important; /* Deep Greige — เน้นว่าต้องดูก่อน */
}

/* ── woocommerce-message: grid 2col (text | button) ─────────────
   สำหรับ success notice ที่มี "View cart" button ชิดขวา
──────────────────────────────────────────────────────────────── */
.woocommerce-message {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
}

/* ── woocommerce-error / info: flex column — stack ทีละบรรทัด ───
   error เป็น <ul> มี <li> หลายอัน ใช้ flex-column ไม่งั้นจะ 2 คอลัมน์
──────────────────────────────────────────────────────────────── */
.woocommerce-error,
.woocommerce-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
}

/* ── Check / Icon (::before) ─────────────────────────────────────
   เดิมไม่ได้กำหนด content/font-size เอง เลยไปพึ่ง icon font ของ WooCommerce
   เองทั้งหมด (ไม่รู้ว่าโหลดสำเร็จหรือ render ขนาดเท่าไหร่แน่ๆ) พอ font นั้นมี
   ปัญหา ไอคอนเลยขยายทับตัวหนังสือ — แก้โดยกำหนด content + กล่องขนาดคงที่เอง
   ทั้งหมด ไม่พึ่ง font ภายนอกอีกต่อไป รับประกันว่าไม่ทับข้อความแน่นอน
   (padding-left ของกล่อง notice คือ 58px, ไอคอนกล่องนี้กว้าง 24px เริ่มที่
   left:22px จบที่ 46px เหลือระยะห่างก่อนตัวหนังสือ 12px)
──────────────────────────────────────────────────────────────── */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #756A61 !important; /* Warm Taupe */
}

.woocommerce-message::before {
    content: "\2713" !important; /* ✓ */
}

.woocommerce-error::before {
    content: "!" !important;
}

.woocommerce-info::before {
    content: "i" !important;
    font-style: italic !important;
}

/* ── Button (View cart / action) ─────────────────────────────────
   ตาม CI ปุ่ม: bg Deep Greige / ตัวอักษร Soft White, hover สลับเป็น
   Champagne Beige / Deep Greige, ไม่มีเส้นใต้, มุมโค้ง 4px
──────────────────────────────────────────────────────────────── */
.woocommerce-message .button,
.woocommerce-message a.button {
    float: none !important;
    margin: 0;
    white-space: nowrap;
    width: fit-content !important;
    border-radius: 4px;

    color: #FBF9F4 !important;
    background: #49433F !important;
    border: none !important;
    padding: 12px 22px !important;
    text-decoration: none !important;
    font-weight: 500;
}

.woocommerce-message a.button:hover {
    color: #49433F !important;
    background: #D8C7B2 !important; /* Champagne Beige */
}

/* ── Progress Bar ────────────────────────────────────────────────
   AUTO-FADE ปิดชั่วคราว (animation-play-state: paused)
   ลบบรรทัด animation-play-state เพื่อเปิดใช้งาน
──────────────────────────────────────────────────────────────── */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #D8C7B2; /* Champagne Beige แทน rgba(0,0,0,.1) */
    transform-origin: left;
    animation: toastProgress 5s linear forwards;
}

/* ── Animations ──────────────────────────────────────────────────*/

@keyframes toastShow {
    to { opacity: 1; transform: translateY(0); }
}

.toast-hide {
    animation: toastHide .35s ease forwards;
}

@keyframes toastHide {
    to { opacity: 0; transform: translateY(-18px); }
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Close Button ─────────────────────────────────────────────── */

.toast-close {
    position: absolute;
    top: 10px;
    right: 10px;

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

    width: 24px;
    height: 24px;
    border-radius: 50%;

    cursor: pointer;
    font-size: 15px;
    line-height: 1;

    color: #49433F; /* Deep Greige */
    opacity: .6;
    background: #E8DED0; /* Soft Beige แทน rgba(0,0,0,.06) */
    transition: opacity .2s, background .2s;
}

.toast-close:hover {
    opacity: 1;
    background: #D8C7B2; /* Champagne Beige */
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .toast-hide,
    .toast-progress {
        animation-duration: 0.01ms !important;
    }
}

/* ── Tablet (max-width: 1024px) ──────────────────────────────── */

@media (max-width: 1024px) {

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        column-gap: 20px;
        padding: 16px 44px 16px 52px;
    }

    .woocommerce-message::before,
    .woocommerce-error::before,
    .woocommerce-info::before {
        left: 18px;
    }

    .woocommerce-message .button,
    .woocommerce-message a.button {
        padding: 10px 18px !important;
        font-size: 14px;
    }

}

/* ── Mobile (max-width: 767px) ───────────────────────────────── */

@media (max-width: 767px) {

    .woocommerce-notices-wrapper {
        top: 15px;
        width: calc(100% - 24px);
    }

    .woocommerce-message {
        /* เปลี่ยนเป็น column — button อยู่ใต้ข้อความ */
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 16px 44px 16px 48px;
    }

    /* Icon ชิดบน ไม่ vertical center เมื่อข้อความ wrap หลายบรรทัด */
    .woocommerce-message::before,
    .woocommerce-error::before,
    .woocommerce-info::before {
        top: 18px;
        transform: none;
    }

    .woocommerce-message .button,
    .woocommerce-message a.button {
        margin-top: 10px;
        padding: 10px 16px !important;
        font-size: 14px;
    }

}