/* ==========================================================
   PetSmart toast notifications
   Include this alongside js/toast.js on any page that needs
   in-page popups instead of browser alert() boxes.

   Look: soft tinted card per type, round colored icon on the
   left, bold title + message, small white close button.
   ========================================================== */

/* Lato = the font in the toast design. Without internet (e.g. offline
   XAMPP) it falls back to Segoe UI / Roboto / Arial automatically. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

#toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    max-width: 400px;
}

/* Colors per type. Each type only swaps these three values:
     --toast-bg      card background (light tint)
     --toast-border  thin outline (slightly deeper tint)
     --toast-accent  the round icon                          */
.toast {
    --toast-bg: #EAF1FB;
    --toast-border: #C8DAF2;
    --toast-accent: #2F80ED;

    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    min-width: 300px;
    padding: 14px 14px 14px 16px;
    background: var(--toast-bg);
    border: 1px solid var(--toast-border);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    font-family: 'Lato', 'Segoe UI', Roboto, Arial, sans-serif;
    animation: toast-in 0.25s ease-out;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-success { --toast-bg: #EEF8F0; --toast-border: #CAE7D1; --toast-accent: #27A243; }
.toast-error   { --toast-bg: #FCEEEF; --toast-border: #F2CCD0; --toast-accent: #EF5A5F; }
.toast-warning { --toast-bg: #FEF6E6; --toast-border: #F6E0B5; --toast-accent: #F4B71E; }
.toast-info    { --toast-bg: #EAF1FB; --toast-border: #C8DAF2; --toast-accent: #2F80ED; }

.toast.toast-hide {
    opacity: 0;
    transform: translateX(-30px);
}

/* round colored badge with a white symbol (check / x / ! / i) */
.toast-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--toast-accent);
    color: #fff;
}

.toast-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.toast-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1D2125;
}

.toast-message {
    font-size: 13.5px;
    line-height: 1.4;
    color: #2C3036;
    overflow-wrap: anywhere;   /* long emails/links wrap instead of overflowing */
}

/* small white square with a dark x */
.toast-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: #fff;
    color: #1D2125;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: background 0.15s ease;
}

.toast-close svg {
    width: 12px;
    height: 12px;
    display: block;
}

.toast-close:hover {
    background: #F1F3F4;
}

.toast-close:focus-visible {
    outline: 2px solid var(--toast-accent);
    outline-offset: 2px;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 480px) {
    #toast-container {
        left: 16px;
        right: 16px;
        bottom: 12px;
        max-width: none;
    }
}

/* ===================== Confirm dialog ===================== */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-box {
    background: #fff;
    border-radius: 14px;
    padding: 1.6rem;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: toast-in 0.2s ease-out;
}

.confirm-message {
    margin: 0 0 1.4rem;
    font-size: 0.98rem;
    color: #222;
    line-height: 1.4;
}

.confirm-actions {
    display: flex;
    gap: 0.75rem;
}

.confirm-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1.5px solid #6FC2BB;
    background: #fff;
    color: #6FC2BB;
    transition: background 0.15s ease, color 0.15s ease;
}

.confirm-btn:hover {
    background: #eef7f6;
}

.confirm-btn.confirm-yes {
    background: #6FC2BB;
    color: #fff;
}

.confirm-btn.confirm-yes:hover {
    background: #58a89f;
}