/* ==========================================================================
   GPD social-proof toast — restyle the "Woo Notification" plugin
   (#message-purchased) to the gpd-notifications handoff design.
   Maps the design's .tx card/well/close/colour 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 (white card) with !important. Tokens come from gpd-tokens.css.
   Covers every variant: position (bottom-left default + bottom_right/top_*),
   image-left/right, rounded-corner, RTL, and the background-image templates.
   ========================================================================== */

#message-purchased {
    z-index: 99990;
    bottom: 22px;
    left: 22px;
    right: auto;
    top: auto;
    width: auto;
    max-width: calc(100vw - 44px);
    font-family: var(--font-sans, 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 ─────────────────────────────────────────────────────────────── */
#message-purchased .message-purchase-main {
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 420px;
    max-width: calc(100vw - 44px);
    /* plugin hard-codes height:96px; let the card grow to fit the message rows */
    height: auto !important;
    min-height: 96px;
    padding: 16px !important;
    border-radius: 16px !important;
    background: var(--surface-elev, #1A2028) !important;
    border: 1px solid var(--line-1, rgba(255, 255, 255, .10)) !important;
    box-shadow: var(--shadow-lg, 0 24px 48px -12px rgba(0, 0, 0, .55)) !important;
    color: var(--fg-secondary, #99A1AF) !important;
    overflow: visible !important;
}
/* neutralise the plugin's background-template image layer (the design is the
   clean dark card across all variants). */
#message-purchased .message-purchase-main::before { display: none !important; }
#message-purchased.img-right .message-purchase-main { flex-direction: row-reverse; }

/* ── product well (84×84 near-black + lime radial glow) ───────────────── */
#message-purchased .wn-notification-image-wrapper {
    flex: 0 0 auto !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 10px !important;
    background: #0c1014 !important;
    border: 1px solid var(--line-1, rgba(255, 255, 255, .10)) !important;
    display: grid !important;
    place-items: center;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}
#message-purchased .wn-notification-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 120%, rgba(211, 255, 95, .16), transparent 60%);
    pointer-events: none;
}
#message-purchased .wn-notification-image {
    width: 92% !important;
    height: 92% !important;
    object-fit: contain !important;
    position: relative;
    z-index: 1;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

/* ── message body ─────────────────────────────────────────────────────── */
/* match the plugin's own #message-purchased p.wn-notification-message-container
   specificity so we beat its display:grid / line-height:1.8 (which otherwise
   stacks every fragment — emoji, city, link, time — 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-secondary, #99A1AF) !important;
    overflow: hidden;
}
#message-purchased .wn-notification-message-container p { margin: 0 !important; }
/* the 📍 the merchant put in the message becomes <img class="emoji"> in WP —
   keep it inline beside the city instead of stretching as a block/grid item. */
#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 (white, hover lime) */
#message-purchased .wn-notification-message-container a {
    font-weight: 700;
    color: var(--fg-0, #fff) !important;
    letter-spacing: -.2px;
    text-decoration: none;
    transition: color .15s ease;
}
#message-purchased .wn-notification-message-container a:hover { color: var(--lime-500, #D3FF5F) !important; }
/* emphasised spans (name / count / city) → lime accent */
#message-purchased .wn-notification-message-container span,
#message-purchased p span {
    color: var(--lime-500, #D3FF5F) !important;
    font-weight: 700;
}
/* time-ago — inline so the trailing "purchased" text and the time sit on one
   secondary line ("purchased About 7 days ago") under the bold product name.
   Plugin sets small{display:block} at higher specificity, so force inline. */
#message-purchased .wn-notification-message-container small,
#message-purchased p small {
    display: inline !important;
    margin: 0;
    color: var(--fg-tertiary, #6B7478) !important;
    font-size: 12.5px;
}

/* ── close button (28px circular glass, 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: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--line-2, rgba(255, 255, 255, .06)) !important;
    color: var(--fg-tertiary, #6B7478) !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    margin: 0 !important;
}
#message-purchased #notify-close:hover {
    color: var(--fg-0, #fff) !important;
    background: rgba(255, 255, 255, .10) !important;
}
#message-purchased #notify-close:before {
    color: var(--fg-tertiary, #6B7478) !important;
    font-size: 13px;
    line-height: 1;
}
#message-purchased #notify-close:hover:before { color: var(--fg-0, #fff) !important; }

/* ── RTL + mobile ─────────────────────────────────────────────────────── */
#message-purchased.wn-rtl .message-purchase-main { direction: rtl; }
#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); }
}