/* ============================================================
   GOLDIKA TOAST NOTIFICATION SYSTEM — Frontend Styles
   ============================================================ */


/* ── Container ── */
#goldika-toast-container {
    position: fixed;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;

    /* Default: bottom-left (RTL-friendly) */
    bottom: 24px;
    left:   24px;
    width:  380px;
}

/* Position variants (set via body data attribute or inline) */
body[data-toast-pos="bottom-right"] #goldika-toast-container {
    left:  unset;
    right: 24px;
}
body[data-toast-pos="top-left"] #goldika-toast-container {
    bottom: unset;
    top:    80px;
    left:   24px;
    flex-direction: column-reverse;
}
body[data-toast-pos="top-right"] #goldika-toast-container {
    bottom: unset;
    top:    80px;
    left:   unset;
    right:  24px;
    flex-direction: column-reverse;
}
body[data-toast-pos="bottom-center"] #goldika-toast-container {
    left:      50%;
    transform: translateX(-50%);
}

/* ── Individual Toast ── */
.woocommerce-custom-toast {
    display:         flex;
    align-items:     flex-start;
    gap:             12px;
    padding:         14px 16px;
    border-radius:   12px;
    background:      #1e1e2e;
    color:           #e2e8f0;
    font-size:       14px;
    line-height:     1.5;
    box-shadow:      0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
    border-left:     4px solid #555;
    pointer-events:  all;
    cursor:          default;
    width:           100%;
    box-sizing:      border-box;

    /* entrance: hidden + slightly shifted */
    opacity:         0;
    transform:       translateY(16px) scale(.97);
    transition:      opacity .35s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
}

/* RTL flip */
body[dir="rtl"] .woocommerce-custom-toast,
.rtl .woocommerce-custom-toast {
    border-left:  none;
    border-right: 4px solid #555;
    flex-direction: row-reverse;
    text-align: right;
}

/* Visible state */
.woocommerce-custom-toast.show {
    opacity:   1;
    transform: translateY(0) scale(1);
}

/* ── Type colours ── */
.toast-success { border-left-color: #22c55e; }
.toast-error   { border-left-color: #ef4444; }
.toast-warning { border-left-color: #f59e0b; }
.toast-info    { border-left-color: #3b82f6; }

body[dir="rtl"] .toast-success, .rtl .toast-success { border-right-color: #22c55e; }
body[dir="rtl"] .toast-error,   .rtl .toast-error   { border-right-color: #ef4444; }
body[dir="rtl"] .toast-warning, .rtl .toast-warning { border-right-color: #f59e0b; }
body[dir="rtl"] .toast-info,    .rtl .toast-info    { border-right-color: #3b82f6; }

/* ── Icon ── */
.toast-icon {
    flex-shrink: 0;
    margin-top:  2px;
}
.toast-success .toast-icon { color: #22c55e; }
.toast-error   .toast-icon { color: #ef4444; }
.toast-warning .toast-icon { color: #f59e0b; }
.toast-info    .toast-icon { color: #3b82f6; }

/* ── Message ── */
.toast-message {
    flex: 1;
    min-width: 0;
}
.toast-text {
    margin:  0;
    padding: 0;
    font-size: 13.5px;
    color: #e2e8f0;
    word-break: break-word;
}

/* ── Cart / Action Button ── */
.toast-button {
    display:       inline-block;
    margin-top:    8px;
    padding:       5px 12px;
    font-size:     12px;
    font-family:   inherit;
    background:    rgba(255,255,255,.08);
    color:         #e2e8f0;
    border:        1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    text-decoration: none;
    transition:    background .2s, border-color .2s;
    white-space:   nowrap;
}
.toast-button:hover {
    background:   rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.25);
    color:        #fff;
    text-decoration: none;
}
.toast-success .toast-button { border-color: rgba(34,197,94,.4); }
.toast-error   .toast-button { border-color: rgba(239,68,68,.4); }

/* ── Close Button ── */
.toast-close {
    flex-shrink:  0;
    background:   transparent;
    border:       none;
    cursor:       pointer;
    color:        #6b7280;
    padding:      2px;
    line-height:  1;
    transition:   color .2s;
    align-self:   flex-start;
    margin-top:   2px;
}
.toast-close:hover { color: #e2e8f0; }

/* ── Progress bar (optional, future) ── */
.toast-progress {
    position:   absolute;
    bottom:     0;
    left:       0;
    height:     3px;
    border-radius: 0 0 0 12px;
    background: currentColor;
    opacity:    .4;
}

/* ╔══════════════════════════════════════════╗
   ║  MOBILE FIX  (< 600 px)                 ║
   ╚══════════════════════════════════════════╝ */
@media (max-width: 600px) {
    #goldika-toast-container {
        /* Stretch full width with small padding */
        left:      12px !important;
        right:     12px !important;
        bottom:    16px !important;
        top:       unset !important;
        width:     auto !important;
        transform: none !important;
        gap:       8px;
    }

    .woocommerce-custom-toast {
        padding:       12px 14px;
        font-size:     13px;
        border-radius: 10px;
        width:         100%;
    }

    .toast-text {
        font-size: 12.5px;
    }

    .toast-button {
        font-size:  11.5px;
        padding:    4px 10px;
        margin-top: 6px;
    }

    .toast-close {
        padding: 0;
    }

    .toast-icon svg {
        width:  18px;
        height: 18px;
    }
}

/* ── Very small screens / landscape phones ── */
@media (max-width: 400px) {
    #goldika-toast-container {
        left:   8px !important;
        right:  8px !important;
        bottom: 12px !important;
    }
    .woocommerce-custom-toast {
        padding: 10px 12px;
        gap:     10px;
    }
}