/* Toastr reskin to match the Rentsy design system (dark card + circular status icon).
   Loaded after toastr.min.css; !important everywhere to win over the default toastr rules. */

#toast-container > div.toast:not(.live-notification-toast) {
    --toast-bg: #101b30;
    --toast-title: #ffffff;
    --toast-msg: #e7e8ea;
    --toast-icon: #3cd984;
    --toast-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

    /* NOTE: display & opacity are intentionally NOT !important — toastr hides a
       toast via inline display:none / opacity fade, and only removes it once it is
       no longer :visible. Forcing them would keep toasts on screen forever. */
    display: grid;
    grid-template-columns: 28px 1fr 16px !important;
    grid-template-areas:
        "icon title close"
        "icon msg   close" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;

    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 16px !important;
    background-color: var(--toast-bg) !important;
    background-image: none !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.35) !important;
    opacity: 1;
    font-family: 'Public Sans', sans-serif !important;
}

#toast-container > div.toast:not(.live-notification-toast):hover {
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.45) !important;
}

/* Circular status icon (replaces toastr's default left background image) */
#toast-container > div.toast:not(.live-notification-toast)::before {
    content: "" !important;
    grid-area: icon !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: var(--toast-icon) !important;
    background-image: var(--toast-icon-glyph) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
}

#toast-container > div.toast:not(.live-notification-toast) .toast-title {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--toast-title) !important;
}

#toast-container > div.toast:not(.live-notification-toast) .toast-message {
    grid-area: msg !important;
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    color: var(--toast-msg) !important;
    word-break: break-word !important;
}

/* Optional CTA link inside the message, e.g. message: 'text <a href="...">View Booking</a>' */
#toast-container > div.toast:not(.live-notification-toast) .toast-message a {
    display: block !important;
    margin-top: 4px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    color: #ee4e86 !important;
    text-decoration: none !important;
}

#toast-container > div.toast:not(.live-notification-toast) .toast-message a:hover {
    color: #ee4e86 !important;
    text-decoration: underline !important;
}

/* Close (×) button restyled to the 16px icon in the design */
#toast-container > div.toast:not(.live-notification-toast) .toast-close-button {
    grid-area: close !important;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 18px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    color: #e7e8ea !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

#toast-container > div.toast:not(.live-notification-toast) .toast-close-button:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Per-type icon colour + glyph */
#toast-container > div.toast-success:not(.live-notification-toast) {
    --toast-icon: #3cd984;
}

#toast-container > div.toast-error:not(.live-notification-toast) {
    --toast-icon: #f93642;
    --toast-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

#toast-container > div.toast-warning:not(.live-notification-toast) {
    --toast-icon: #ffab00;
    --toast-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

#toast-container > div.toast-info:not(.live-notification-toast) {
    --toast-icon: #ee4e86;
    --toast-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
    #toast-container > div.toast:not(.live-notification-toast) {
        width: 100% !important;
    }
}