/**
 * Agi Library — site-wide toast notifications.
 *
 * Used by the Purchase Flow module and available to any other plugin
 * code that wants to surface a user-facing message. Matches the
 * library UI palette.
 *
 * Design principles:
 *   - No auto-dismiss. Toasts stay in the viewport until the user
 *     clicks Dismiss, so messages can be screenshot/copied for support.
 *   - One editable variable block (below) controls every color, radius,
 *     spacing, and font size. Retune the design without hunting
 *     selectors.
 *   - Logical properties (margin-inline-*, padding-block-*) so one
 *     stylesheet serves LTR English and RTL Hebrew without a flip.
 *   - All structural rules are scoped to #agiw-toasts (ID specificity)
 *     so Elementor's global stylesheet cannot override them.
 */

/* -------------------------------------------------------------------
 * EDIT THIS BLOCK TO RETUNE THE DESIGN
 * ----------------------------------------------------------------- */
#agiw-toasts {
    /* Container placement */
    --agiw-toast-z:                9999;
    --agiw-toast-viewport-inset:   16px;     /* distance from viewport edges */
    --agiw-toast-max-width:        360px;

    /* Toast surface */
    --agiw-toast-bg:               #FFFAF4;
    --agiw-toast-border-width:     0px;
    --agiw-toast-radius:           16px;
    --agiw-toast-shadow:           0 6px 20px rgba(28, 24, 10, 0.12);
    --agiw-toast-padding:          14px 16px;
    --agiw-toast-gap:              10px;     /* gap between stacked toasts */

    /* Typography — pulls from the Elementor kit font if available */
    --agiw-toast-font-family:      var(--e-global-typography-primary-font-family, inherit);
    --agiw-toast-title-size:       15px;
    --agiw-toast-title-weight:     600;
    --agiw-toast-message-size:     14px;
    --agiw-toast-detail-size:      12px;
    --agiw-toast-line-height:      1.45;

    /* Status accents */
    --agiw-toast-color-success:    #44B93C;
    --agiw-toast-color-error:      #F79256;
    --agiw-toast-color-info:       #004CA8;
    --agiw-toast-color-muted:      #6B7576;

    /* Detail code block */
    --agiw-toast-detail-bg:        #F8F4EE;
    --agiw-toast-detail-color:     #1E2D2F;

    /* Dismiss + copy buttons */
    --agiw-toast-button-color:     #6B7576;
    --agiw-toast-button-hover:     #1E2D2F;
}

/* -------------------------------------------------------------------
 * Structural — do not edit below unless changing layout behavior
 * ----------------------------------------------------------------- */

#agiw-toasts {
    position: fixed;
    inset-block-end:   var(--agiw-toast-viewport-inset);
    inset-inline-end:  var(--agiw-toast-viewport-inset);
    z-index: var(--agiw-toast-z);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--agiw-toast-gap);
    pointer-events: none;
    max-width: var(--agiw-toast-max-width);
    width: calc(100vw - (var(--agiw-toast-viewport-inset) * 2));
}

#agiw-toasts .agiw-toast {
    pointer-events: auto;
    background: var(--agiw-toast-bg);
    border: var(--agiw-toast-border-width) solid transparent;
    border-inline-start: 4px solid var(--agiw-toast-color-muted);
    border-radius: var(--agiw-toast-radius);
    box-shadow: var(--agiw-toast-shadow);
    padding: var(--agiw-toast-padding);
    font-family: var(--agiw-toast-font-family);
    line-height: var(--agiw-toast-line-height);
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: agiw-toast-in 180ms ease-out;
}

#agiw-toasts .agiw-toast--success { border-inline-start-color: var(--agiw-toast-color-success); }
#agiw-toasts .agiw-toast--error   { border-inline-start-color: var(--agiw-toast-color-error); }
#agiw-toasts .agiw-toast--info    { border-inline-start-color: var(--agiw-toast-color-info); }

#agiw-toasts .agiw-toast__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#agiw-toasts .agiw-toast__title {
    font-size: var(--agiw-toast-title-size);
    font-weight: var(--agiw-toast-title-weight);
    color: var(--agiw-toast-color-muted);
    margin: 0;
    padding: 0;
}
#agiw-toasts .agiw-toast--success .agiw-toast__title { color: var(--agiw-toast-color-success); }
#agiw-toasts .agiw-toast--error   .agiw-toast__title { color: var(--agiw-toast-color-error); }
#agiw-toasts .agiw-toast--info    .agiw-toast__title { color: var(--agiw-toast-color-info); }

#agiw-toasts .agiw-toast__message {
    font-size: var(--agiw-toast-message-size);
    color: #2a2618;
    margin: 0;
    padding: 0;
}

#agiw-toasts .agiw-toast__message a {
    color: inherit;
    text-decoration: underline;
}

#agiw-toasts .agiw-toast__detail {
    background: var(--agiw-toast-detail-bg);
    color: var(--agiw-toast-detail-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--agiw-toast-detail-size);
    padding: 8px 10px;
    margin: 0;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow: auto;
}

/* CTA action buttons (View cart, Undo, Refresh, etc.) */
#agiw-toasts .agiw-toast__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 6px;
}

#agiw-toasts .agiw-toast__cta-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(28, 24, 10, 0.08);
    border: 0;
    border-radius: 50px;
    padding: 5px 12px;
    font-family: var(--agiw-toast-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #1E2D2F;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
}
#agiw-toasts .agiw-toast__cta-btn:hover,
#agiw-toasts .agiw-toast__cta-btn:focus-visible {
    background: rgba(28, 24, 10, 0.15);
    color: #1E2D2F;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

/* Copy details row (below error detail block) */
#agiw-toasts .agiw-toast__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-block-start: 2px;
}

#agiw-toasts .agiw-toast__button {
    background: none;
    border: 0;
    padding: 4px 6px;
    font-family: var(--agiw-toast-font-family);
    font-size: 12px;
    line-height: 1;
    color: var(--agiw-toast-button-color);
    cursor: pointer;
    border-radius: 50px;
    box-shadow: none;
    text-decoration: none;
}
#agiw-toasts .agiw-toast__button:hover,
#agiw-toasts .agiw-toast__button:focus-visible {
    color: var(--agiw-toast-button-hover);
    background: rgba(28, 24, 10, 0.06);
    outline: none;
    box-shadow: none;
}

#agiw-toasts .agiw-toast__close {
    background: none;
    border: 0;
    padding: 2px 6px;
    font-family: var(--agiw-toast-font-family);
    font-size: 18px;
    line-height: 1;
    color: var(--agiw-toast-button-color);
    cursor: pointer;
    border-radius: 50px;
    box-shadow: none;
    text-decoration: none;
}
#agiw-toasts .agiw-toast__close:hover,
#agiw-toasts .agiw-toast__close:focus-visible {
    color: var(--agiw-toast-button-hover);
    background: rgba(28, 24, 10, 0.06);
    outline: none;
    box-shadow: none;
}

/* Auto-dismiss timer bar — drains left-to-right over 5 s */
#agiw-toasts .agiw-toast__timer {
    height: 3px;
    background: currentColor;
    opacity: 0.2;
    border-radius: 0 0 calc(var(--agiw-toast-radius) - 2px) calc(var(--agiw-toast-radius) - 2px);
    margin-block-start: 6px;
    margin-inline: -16px;
    margin-block-end: -14px;
    transform-origin: left;
    animation: agiw-toast-timer 5s linear forwards;
}

@keyframes agiw-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes agiw-toast-timer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    #agiw-toasts .agiw-toast { animation: none; }
    #agiw-toasts .agiw-toast__timer { animation: none; }
}