/* ==========================================================================
   DROIX social-proof toast — restyle the "Woo Notification" plugin
   (#message-purchased) to the DROIX design, "Edge" variant: light card with a
   DROIX-green left accent bar, green-tinted border + glow, and green emphasis.
   Maps the design language onto the plugin markup (.message-purchase-main >
   .wn-notification-image-wrapper + .wn-notification-message-container,
   #notify-close), overriding the plugin's settings-driven inline CSS with
   !important. Tokens come from droix-tokens.css. Covers position variants,
   image-left/right, RTL and the plugin background-image templates.
   Selector/specificity structure mirrors the proven GPDStore port.
   ========================================================================== */

#message-purchased {
    z-index: 99990;
    bottom: 22px;
    left: 22px;
    right: auto;
    top: auto;
    width: auto;
    max-width: calc(100vw - 44px);
    font-family: var(--font-body, Inter, system-ui, -apple-system, sans-serif);
}
#message-purchased.bottom_right { bottom: 22px; right: 22px; left: auto; top: auto; }
#message-purchased.top_left     { top: 22px; left: 22px; bottom: auto; right: auto; }
#message-purchased.top_right    { top: 22px; right: 22px; bottom: auto; left: auto; }

/* ── card (light, green edge) ─────────────────────────────────────────── */
#message-purchased .message-purchase-main {
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 420px;
    max-width: calc(100vw - 44px);
    height: auto !important;
    min-height: 96px;
    padding: 16px 16px 16px 22px !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--droix-green) 40%, var(--stroke-2)) !important;
    box-shadow: var(--shadow-lg), 0 0 32px -10px rgba(176, 203, 31, 0.4) !important;
    color: var(--fg-4) !important;
    overflow: visible !important;
}
/* repurpose the plugin's ::before (the background-template image layer) as the
   DROIX-green left accent bar — the card background:#fff above already removes
   the template image. */
#message-purchased .message-purchase-main::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 9px !important;
    top: 14px !important;
    bottom: 14px !important;
    right: auto !important;
    width: 3px !important;
    height: auto !important;
    border-radius: 999px !important;
    background: var(--droix-green) !important;
}
#message-purchased.img-right .message-purchase-main { flex-direction: row-reverse; }

/* ── product well (84×84 light) ───────────────────────────────────────── */
#message-purchased .wn-notification-image-wrapper {
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 12px !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--stroke-1) !important;
    display: grid !important;
    place-items: center;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}
#message-purchased .wn-notification-image {
    width: 90% !important;
    height: 90% !important;
    object-fit: contain !important;
    position: relative;
    z-index: 1;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ── message body ─────────────────────────────────────────────────────── */
/* match the plugin's own #message-purchased p.wn-notification-message-container
   specificity so we beat its display:grid / line-height that otherwise stacks
   every fragment onto its own grid row. */
#message-purchased p.wn-notification-message-container,
#message-purchased .wn-notification-message-container {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: var(--fg-4) !important;
    overflow: hidden;
}
#message-purchased .wn-notification-message-container p { margin: 0 !important; }
#message-purchased .wn-notification-message-container img.emoji {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    margin: 0 .25em 0 0;
}
/* product-name link — emphasised inline (dark, hover green) */
#message-purchased .wn-notification-message-container a {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--fg-2) !important;
    letter-spacing: -.2px;
    text-decoration: none;
    transition: color .15s ease;
}
#message-purchased .wn-notification-message-container a:hover { color: var(--droix-green-dark) !important; }
/* emphasised spans (name / count / city) → green accent */
#message-purchased .wn-notification-message-container span,
#message-purchased p span {
    color: var(--droix-green-dark) !important;
    font-weight: 700;
}
/* time-ago — inline secondary */
#message-purchased .wn-notification-message-container small,
#message-purchased p small {
    display: inline !important;
    margin: 0;
    color: var(--fg-5) !important;
    font-size: 12.5px;
}

/* ── close button (28px circular, light, top-right) ──────────────────── */
#message-purchased #notify-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center;
    background: var(--bg-2) !important;
    border: 1px solid var(--stroke-2) !important;
    color: var(--fg-5) !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    margin: 0 !important;
}
#message-purchased #notify-close:hover {
    color: var(--fg-1) !important;
    background: var(--bg-3) !important;
}
#message-purchased #notify-close:before {
    color: var(--fg-5) !important;
    font-size: 13px;
    line-height: 1;
}
#message-purchased #notify-close:hover:before { color: var(--fg-1) !important; }

/* ── RTL + mobile ─────────────────────────────────────────────────────── */
#message-purchased.wn-rtl .message-purchase-main { direction: rtl; padding: 16px 22px 16px 16px !important; }
#message-purchased.wn-rtl .message-purchase-main::before { left: auto !important; right: 9px !important; }
#message-purchased.wn-rtl #notify-close { right: auto; left: 12px; }

@media (max-width: 600px) {
    #message-purchased { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    #message-purchased .message-purchase-main { width: calc(100vw - 32px); }
}