/**
 * VendorPlus Toast – Custom Theming
 *
 * Rounded-rect, vibrant Bootstrap-inspired colours,
 * progress-bar countdown, dark-mode support.
 *
 * @package  vendorplus
 * @since    2.1.0
 */

/* ────────────────────────────────────────────────
   Base toast container overrides
   ──────────────────────────────────────────────── */
.vplus-toast {
    --vp-toast-bg:       #fff;
    --vp-toast-color:    #1e293b;
    --vp-toast-accent:   #6366f1;
    --vp-toast-shadow:   0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
    --vp-toast-radius:   6px;
    --vp-toast-padding:  12px 20px;

    background: var(--vp-toast-bg) !important;
    color: var(--vp-toast-color) !important;
    box-shadow: var(--vp-toast-shadow) !important;
    border-radius: var(--vp-toast-radius) !important;
    padding: var(--vp-toast-padding) !important;
    font-family: inherit;
    font-size: 17.5px;
    font-weight: 500;
    line-height: 1.45;
    min-width: 220px;
    max-width: 460px;
    border: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ────────────────────────────────────────────────
   Inner layout  (icon · text · progress)
   ──────────────────────────────────────────────── */
.vplus-toast-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.vplus-toast-icon {
    flex-shrink: 0;
    font-size: 20px;
    width: 24px;
    text-align: center;
    color: var(--vp-toast-accent);
}

.vplus-toast-text {
    flex: 1 1 auto;
    word-break: break-word;
}

/* ────────────────────────────────────────────────
   Close button refinement
   ──────────────────────────────────────────────── */
.vplus-toast .toast-close {
    font-size: 15px;
    opacity: .45;
    padding: 0 0 0 8px;
    transition: opacity .15s;
    color: var(--vp-toast-color);
}
.vplus-toast .toast-close:hover {
    opacity: .85;
}

/* ────────────────────────────────────────────────
   Progress bar
   ──────────────────────────────────────────────── */
.vplus-toast-progress {
    position: absolute;
    bottom: -12px;
    left: -20px;
    right: -20px;
    height: 3px;
    background: var(--vp-toast-accent);
    opacity: .35;
    transform-origin: left;
    animation: vpToastProgress linear forwards;
}

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

/* ────────────────────────────────────────────────
   Type variants — vibrant Bootstrap-inspired colours
   ──────────────────────────────────────────────── */

/* ── Success ── */
.vplus-toast--success {
    --vp-toast-bg:     #ecfdf5;
    --vp-toast-color:  #065f46;
    --vp-toast-accent: #10b981;
    border-color: rgba(16, 185, 129, .2) !important;
}

/* ── Error ── */
.vplus-toast--error {
    --vp-toast-bg:     #fef2f2;
    --vp-toast-color:  #991b1b;
    --vp-toast-accent: #ef4444;
    border-color: rgba(239, 68, 68, .2) !important;
}

/* ── Warning ── */
.vplus-toast--warning {
    --vp-toast-bg:     #fffbeb;
    --vp-toast-color:  #92400e;
    --vp-toast-accent: #f59e0b;
    border-color: rgba(245, 158, 11, .2) !important;
}

/* ── Info ── */
.vplus-toast--info {
    --vp-toast-bg:     #eff6ff;
    --vp-toast-color:  #1e40af;
    --vp-toast-accent: #3b82f6;
    border-color: rgba(59, 130, 246, .2) !important;
}

/* ────────────────────────────────────────────────
   Dark mode
   ──────────────────────────────────────────────── */
body.vplus-dark-mode .vplus-toast {
    --vp-toast-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
    border-color: rgba(255, 255, 255, .08) !important;
}

body.vplus-dark-mode .vplus-toast--success {
    --vp-toast-bg:     #052e16;
    --vp-toast-color:  #a7f3d0;
    --vp-toast-accent: #34d399;
}

body.vplus-dark-mode .vplus-toast--error {
    --vp-toast-bg:     #450a0a;
    --vp-toast-color:  #fca5a5;
    --vp-toast-accent: #f87171;
}

body.vplus-dark-mode .vplus-toast--warning {
    --vp-toast-bg:     #451a03;
    --vp-toast-color:  #fde68a;
    --vp-toast-accent: #fbbf24;
}

body.vplus-dark-mode .vplus-toast--info {
    --vp-toast-bg:     #1e1b4b;
    --vp-toast-color:  #bfdbfe;
    --vp-toast-accent: #60a5fa;
}

body.vplus-dark-mode .vplus-toast .toast-close {
    color: var(--vp-toast-color);
}

/* ────────────────────────────────────────────────
   Mobile responsive
   ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .vplus-toast {
        --vp-toast-radius: 6px;
        min-width: 0;
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
        font-size: 16px;
    }
}