/* ==========================================================================
   Availliant Sales Notifications, All 4 Variants
   Design tokens (raw hex, not CSS vars, loads independently of theme)
   #0E1A14 ink
   #4F5A52 ink-muted
   #1F4A2E accent
   #C2553A bold/warning
   #EBD4C6 card-warm
   #2D7A3E success
   #E0DCD3 border
   #F0E6DA cream
   #FFFFFF white
   ========================================================================== */

/* ── Container ────────────────────────────────────────────────────────────── */
.av-snotif-container {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    /* Default position (will be overridden by position class below) */
    bottom: 24px;
    left: 24px;
}

/* Position variants, set via [data-position] from admin setting */
.av-snotif-container.pos-bottom-left  { bottom: 24px; left: 24px;  top: auto;  right: auto; }
.av-snotif-container.pos-bottom-right { bottom: 24px; right: 24px; top: auto;  left: auto; }
.av-snotif-container.pos-top-left     { top: 24px;    left: 24px;  bottom: auto; right: auto; }
.av-snotif-container.pos-top-right    { top: 24px;    right: 24px; bottom: auto; left: auto; }

/* Reverse stack direction when popping from top so newer appears below */
.av-snotif-container.pos-top-left,
.av-snotif-container.pos-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.av-snotif-container.pos-top-right { align-items: flex-end; }
.av-snotif-container.pos-bottom-right {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}
.av-snotif-container.pos-bottom-left {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

/* ── Base toast ───────────────────────────────────────────────────────────── */
.av-snotif {
    pointer-events: all;
    position: relative;
    margin-top: 10px;

    /* Slide-up + fade-in entrance */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 300ms cubic-bezier(.2,.7,.3,1),
                transform 300ms cubic-bezier(.2,.7,.3,1);
}

.av-snotif.av-snotif--visible {
    opacity: 1;
    transform: translateY(0);
}

.av-snotif.av-snotif--hiding {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 250ms ease,
                transform 250ms ease;
}

/* ── Close button (shared) ────────────────────────────────────────────────── */
.av-snotif__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #4F5A52;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    transition: color 150ms ease, background 150ms ease;
}

.av-snotif__close:hover {
    color: #0E1A14;
    background: rgba(14, 26, 20, .06);
}

/* ── Striped warm placeholder (when no product image) ─────────────────────── */
.av-snotif__thumb-placeholder,
.av-snotif__strip-placeholder,
.av-snotif__hero-placeholder {
    background-color: #EBD4C6;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255,255,255,.35) 6px,
        rgba(255,255,255,.35) 12px
    );
}

/* ==========================================================================
   VARIANT A, Minimal card (DEFAULT)
   360px wide, white bg, 1px border, 12px radius
   ========================================================================== */
.av-snotif--a {
    width: 360px;
    background: #FFFFFF;
    border: 1px solid #E0DCD3;
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(14,26,20,.18),
                0 2px 6px rgba(14,26,20,.06);
    padding: 14px 36px 14px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.av-snotif--a .av-snotif__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.av-snotif--a .av-snotif__thumb-placeholder {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.av-snotif--a .av-snotif__body {
    flex: 1;
    min-width: 0;
}

.av-snotif--a .av-snotif__who {
    font-size: 13px;
    color: #0E1A14;
    margin: 0 0 2px;
    line-height: 1.4;
}

.av-snotif--a .av-snotif__who strong {
    font-weight: 700;
}

.av-snotif--a .av-snotif__who .av-snotif__muted {
    color: #4F5A52;
    font-weight: 400;
}

.av-snotif--a .av-snotif__verified {
    color: #2D7A3E;
    font-size: 11px;
    margin-left: 4px;
}

.av-snotif--a .av-snotif__product {
    font-size: 14px;
    font-weight: 500;
    color: #0E1A14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0;
}

.av-snotif--a .av-snotif__meta {
    font-size: 11px;
    color: #4F5A52;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}

/* ==========================================================================
   VARIANT B, Editorial with italic flourish
   380px wide, left warm strip
   ========================================================================== */
.av-snotif--b {
    width: 380px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(14,26,20,.18),
                0 2px 6px rgba(14,26,20,.06);
    display: flex;
    overflow: hidden;
}

.av-snotif--b .av-snotif__strip {
    width: 64px;
    flex-shrink: 0;
}

.av-snotif--b .av-snotif__strip-placeholder {
    width: 100%;
    height: 100%;
    min-height: 80px;
}

.av-snotif--b .av-snotif__strip img {
    width: 64px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.av-snotif--b .av-snotif__body {
    flex: 1;
    padding: 14px 36px 14px 16px;
    min-width: 0;
}

.av-snotif--b .av-snotif__cap {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1F4A2E;
    margin: 0 0 4px;
}

.av-snotif--b .av-snotif__who {
    font-size: 13px;
    color: #0E1A14;
    margin: 0 0 3px;
    line-height: 1.45;
}

.av-snotif--b .av-snotif__who strong {
    font-weight: 700;
}

.av-snotif--b .av-snotif__who em {
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
}

.av-snotif--b .av-snotif__product {
    font-size: 13px;
    color: #4F5A52;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 3px;
}

.av-snotif--b .av-snotif__time {
    font-size: 11px;
    color: #4F5A52;
}

/* ==========================================================================
   VARIANT C, Compact pill (dark)
   Pill shape, dark background, inline layout
   ========================================================================== */
.av-snotif--c {
    background: #0E1A14;
    color: #F5F1EA;
    border-radius: 999px;
    padding: 10px 18px 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    box-shadow: 0 8px 24px -6px rgba(14,26,20,.35);
}

.av-snotif--c .av-snotif__thumb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.av-snotif--c .av-snotif__thumb-placeholder {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.av-snotif--c .av-snotif__body {
    min-width: 0;
}

.av-snotif--c .av-snotif__line1 {
    font-size: 13px;
    font-weight: 600;
    color: #F5F1EA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.av-snotif--c .av-snotif__line2 {
    font-size: 12px;
    color: rgba(245, 241, 234, .7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.av-snotif--c .av-snotif__close {
    color: rgba(245, 241, 234, .6);
    position: static;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 14px;
}

.av-snotif--c .av-snotif__close:hover {
    color: #F5F1EA;
    background: rgba(255,255,255,.1);
}

/* ==========================================================================
   VARIANT D, Image-first hero card
   360px wide, 140px hero image, pulsing LIVE pill
   ========================================================================== */
.av-snotif--d {
    width: 360px;
    background: #FFFFFF;
    border: 1px solid #E0DCD3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px -14px rgba(14,26,20,.22),
                0 4px 10px rgba(14,26,20,.08);
}

.av-snotif--d .av-snotif__hero {
    position: relative;
    height: 140px;
}

.av-snotif--d .av-snotif__hero img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.av-snotif--d .av-snotif__hero-placeholder {
    width: 100%;
    height: 140px;
}

.av-snotif--d .av-snotif__live-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1F4A2E;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.av-snotif--d .av-snotif__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    animation: av-pulse 1.6s ease-in-out infinite;
}

@keyframes av-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.75); }
}

.av-snotif--d .av-snotif__body {
    padding: 14px 16px 16px;
}

.av-snotif--d .av-snotif__cap {
    font-size: 11px;
    font-weight: 500;
    color: #4F5A52;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 4px;
}

.av-snotif--d .av-snotif__product {
    font-size: 15px;
    font-weight: 500;
    color: #0E1A14;
    margin: 0 0 6px;
    line-height: 1.4;
}

.av-snotif--d .av-snotif__who {
    font-size: 13px;
    color: #4F5A52;
}

.av-snotif--d .av-snotif__who strong {
    font-weight: 600;
    color: #0E1A14;
}

.av-snotif--d .av-snotif__close {
    top: 6px;
    right: 6px;
}