/* SHAHAZ Promotion Engine v0.10 presentation contract.
 * Visual identity is token-driven: the host theme supplies the values.
 */
:root {
    --shahaz-pe-promotion-bg: var(--shahaz-promotion-background, var(--promotion-background, Canvas));
    --shahaz-pe-promotion-fg: var(--shahaz-promotion-foreground, var(--promotion-foreground, CanvasText));
    --shahaz-pe-promotion-border: var(--shahaz-promotion-border, var(--promotion-border, ButtonBorder));
    --shahaz-pe-promotion-accent: var(--shahaz-promotion-accent, var(--promotion-accent, Highlight));
    --shahaz-pe-promotion-shadow: var(--shahaz-promotion-shadow, var(--promotion-shadow, none));
    --shahaz-pe-space: var(--shahaz-promotion-space, 0.75rem);
    --shahaz-pe-radius: var(--shahaz-promotion-radius, 0.5rem);
    --shahaz-pe-motion: var(--shahaz-promotion-motion, 180ms);
}

.shahaz-promotion-card-host,
.shahaz-promotion-product-host { position: relative; min-width: 0; }
.shahaz-promotion-card-host[data-shahaz-promotion-host="ribbon"],
.shahaz-promotion-product-host[data-shahaz-promotion-host="ribbon"] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.shahaz-promotion-ribbon,
.shahaz-promotion-badge {
    box-sizing: border-box;
    pointer-events: none;
    max-inline-size: 100%;
}
.shahaz-promotion-ribbon { position: absolute; z-index: 20; overflow: hidden; }
.shahaz-promotion-ribbon__text { display: inline-flex; align-items: center; min-inline-size: 0; }
.shahaz-promotion-ribbon--top-left { inset-block-start: 0; inset-inline-start: 0; }
.shahaz-promotion-ribbon--top-right { inset-block-start: 0; inset-inline-end: 0; }
.shahaz-promotion-ribbon--bottom-left { inset-block-end: 0; inset-inline-start: 0; }
.shahaz-promotion-ribbon--bottom-right { inset-block-end: 0; inset-inline-end: 0; }
.shahaz-promotion-ribbon--top,
.shahaz-promotion-ribbon--bottom { inset-inline: 0; }
.shahaz-promotion-ribbon--top { inset-block-start: 0; }
.shahaz-promotion-ribbon--bottom { inset-block-end: 0; }
.shahaz-promotion-ribbon--angled { transform-origin: top left; }
[dir="rtl"] .shahaz-promotion-ribbon--angled { transform-origin: top right; }
.shahaz-promotion-ribbon--corner { overflow: visible; }
.shahaz-promotion-ribbon--strip { inset-inline: 0; }
.shahaz-promotion-ribbon--flash,
.shahaz-promotion-ribbon--limited,
.shahaz-promotion-ribbon--campaign { isolation: isolate; }

.shahaz-promotion-presentation__content {
    display: flex;
    align-items: center;
    gap: var(--shahaz-pe-space);
    min-inline-size: 0;
}
.shahaz-promotion-presentation__icon {
    flex: 0 0 auto;
    inline-size: var(--shahaz-promotion-icon-size, 1.25em);
    block-size: var(--shahaz-promotion-icon-size, 1.25em);
    display: inline-grid;
    place-items: center;
    background: var(--shahaz-pe-promotion-accent);
    border-radius: var(--shahaz-pe-radius);
}
.shahaz-promotion-presentation__icon::before {
    content: "";
    inline-size: 45%;
    block-size: 45%;
    border-radius: 50%;
    background: currentColor;
}
.shahaz-promotion-presentation__copy {
    display: flex;
    flex: 1 1 auto;
    min-inline-size: 0;
    flex-direction: column;
    gap: calc(var(--shahaz-pe-space) / 3);
}
.shahaz-promotion-presentation__title,
.shahaz-promotion-presentation__message { overflow-wrap: anywhere; }
.shahaz-promotion-presentation__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: calc(var(--shahaz-pe-space) / 2); }
.shahaz-promotion-presentation__cta,
.shahaz-promotion-presentation__secondary { text-decoration: none; white-space: nowrap; }

.shahaz-promotion-badge {
    display: inline-flex;
    align-items: center;
    max-inline-size: 100%;
}

.shahaz-promotion-toast,
.shahaz-promotion-popup {
    box-sizing: border-box;
    color: var(--shahaz-pe-promotion-fg);
    background: var(--shahaz-pe-promotion-bg);
    border: 1px solid var(--shahaz-pe-promotion-border);
    box-shadow: var(--shahaz-pe-promotion-shadow);
}
.shahaz-promotion-toast {
    position: fixed;
    z-index: 99999;
    max-inline-size: min(100% - 2 * var(--shahaz-pe-space), var(--shahaz-promotion-max-width));
    padding: var(--shahaz-pe-space);
    pointer-events: auto;
}
.shahaz-promotion-toast--top-right { inset-block-start: var(--shahaz-pe-space); inset-inline-end: var(--shahaz-pe-space); }
.shahaz-promotion-toast--top-left { inset-block-start: var(--shahaz-pe-space); inset-inline-start: var(--shahaz-pe-space); }
.shahaz-promotion-toast--bottom-right { inset-block-end: var(--shahaz-pe-space); inset-inline-end: var(--shahaz-pe-space); }
.shahaz-promotion-toast--bottom-left { inset-block-end: var(--shahaz-pe-space); inset-inline-start: var(--shahaz-pe-space); }
.shahaz-promotion-toast--top { inset-block-start: var(--shahaz-pe-space); inset-inline: var(--shahaz-pe-space); margin-inline: auto; }
.shahaz-promotion-toast--bottom { inset-block-end: var(--shahaz-pe-space); inset-inline: var(--shahaz-pe-space); margin-inline: auto; }

.shahaz-promotion-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: var(--shahaz-pe-space);
    background: var(--shahaz-promotion-backdrop, transparent);
    pointer-events: auto;
}
.shahaz-promotion-popup__panel {
    inline-size: min(100%, var(--shahaz-promotion-max-width));
    max-block-size: calc(100dvh - 2 * var(--shahaz-pe-space));
    overflow: auto;
    padding: var(--shahaz-pe-space);
    background: var(--shahaz-pe-promotion-bg);
    color: var(--shahaz-pe-promotion-fg);
    border: 1px solid var(--shahaz-pe-promotion-border);
    box-shadow: var(--shahaz-pe-promotion-shadow);
}

.shahaz-promotion-toast .shahaz-promotion-presentation__content,
.shahaz-promotion-popup .shahaz-promotion-presentation__content { align-items: flex-start; }
.shahaz-promotion-toast .shahaz-promotion-presentation__actions,
.shahaz-promotion-popup .shahaz-promotion-presentation__actions { flex-wrap: wrap; }
.shahaz-promotion-toast__close,
.shahaz-promotion-popup__close {
    position: absolute;
    inset-block-start: var(--shahaz-pe-space);
    inset-inline-end: var(--shahaz-pe-space);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.shahaz-promotion-engine-ready .shahaz-promotion-toast,
.shahaz-promotion-engine-ready .shahaz-promotion-popup {
    animation: shahazPromotionEnter var(--shahaz-pe-motion) ease-out both;
}
@keyframes shahazPromotionEnter {
    from { opacity: 0; transform: translateY(-0.35em); }
    to { opacity: 1; transform: translateY(0); }
}

.shahaz-promotion-toast[data-exit="1"],
.shahaz-promotion-popup[data-exit="1"] { animation: shahazPromotionExit var(--shahaz-pe-motion) ease-in both; }
@keyframes shahazPromotionExit { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 767px) {
    .shahaz-promotion-presentation__content { align-items: flex-start; }
    .shahaz-promotion-presentation__actions { flex-wrap: wrap; }
    .shahaz-promotion-ribbon { max-inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .shahaz-promotion-engine-ready .shahaz-promotion-toast,
    .shahaz-promotion-engine-ready .shahaz-promotion-popup,
    .shahaz-promotion-toast[data-exit="1"],
    .shahaz-promotion-popup[data-exit="1"] { animation: none; }
}


/* v0.14 centralized template structure. Visual identity remains token-driven. */
.shahaz-promotion-template__frame{position:relative;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;}
.shahaz-promotion-template__content{display:flex;align-items:center;min-inline-size:0;gap:var(--shahaz-promotion-template-gap, var(--shahaz-pe-space));}
.shahaz-promotion-template__visual{display:inline-grid;place-items:center;flex:0 0 auto;}
.shahaz-promotion-template__icon{display:block;inline-size:var(--shahaz-promotion-icon-size, 1.25em);block-size:var(--shahaz-promotion-icon-size, 1.25em);background:var(--shahaz-pe-promotion-accent);border-radius:var(--shahaz-promotion-icon-radius, var(--shahaz-pe-radius));}
.shahaz-promotion-template__copy{display:flex;flex:1 1 auto;min-inline-size:0;flex-direction:column;gap:var(--shahaz-promotion-copy-gap, calc(var(--shahaz-pe-space) / 3));}
.shahaz-promotion-template__title,.shahaz-promotion-template__message,.shahaz-promotion-template__supporting{overflow-wrap:anywhere;min-inline-size:0;}
.shahaz-promotion-template__supporting{opacity:var(--shahaz-promotion-supporting-opacity, .82);}
.shahaz-promotion-template__actions{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--shahaz-promotion-action-gap, calc(var(--shahaz-pe-space) / 2));flex-wrap:wrap;}
.shahaz-promotion-template__cta,.shahaz-promotion-template__secondary{text-decoration:none;white-space:nowrap;}

/* Ribbon families: geometry is structural and overridable through SHAHAZ tokens. */
.shahaz-promotion-ribbon{overflow:visible;background:transparent;border:0;box-shadow:none;}
.shahaz-promotion-ribbon .shahaz-promotion-template__frame{background:var(--shahaz-pe-promotion-bg);color:var(--shahaz-pe-promotion-fg);border:1px solid var(--shahaz-pe-promotion-border);box-shadow:var(--shahaz-pe-promotion-shadow);}
.shahaz-promotion-ribbon--template-label .shahaz-promotion-template__content,
.shahaz-promotion-ribbon--template-card .shahaz-promotion-template__content,
.shahaz-promotion-ribbon--template-image .shahaz-promotion-template__content{padding:var(--shahaz-promotion-ribbon-padding, var(--shahaz-pe-space));}
.shahaz-promotion-ribbon--template-angled .shahaz-promotion-template__frame{transform:skewX(var(--shahaz-promotion-ribbon-angle, 0deg));transform-origin:top left;}
[dir="rtl"] .shahaz-promotion-ribbon--template-angled .shahaz-promotion-template__frame{transform-origin:top right;}
.shahaz-promotion-ribbon--template-angled .shahaz-promotion-template__content{transform:skewX(var(--shahaz-promotion-ribbon-counter-angle, 0deg));}
.shahaz-promotion-ribbon--template-corner .shahaz-promotion-template__frame,
.shahaz-promotion-ribbon--template-folded .shahaz-promotion-template__frame{overflow:visible;}
.shahaz-promotion-ribbon--template-folded .shahaz-promotion-template__frame::after{content:"";position:absolute;inset-block-end:0;inset-inline-end:0;border-style:solid;border-width:var(--shahaz-promotion-fold-border, 0);border-color:transparent var(--shahaz-pe-promotion-border) var(--shahaz-pe-promotion-border) transparent;}
.shahaz-promotion-ribbon--template-flash .shahaz-promotion-template__frame,
.shahaz-promotion-ribbon--template-campaign .shahaz-promotion-template__frame,
.shahaz-promotion-ribbon--template-limited .shahaz-promotion-template__frame{font-weight:var(--shahaz-promotion-emphasis-weight, inherit);}

.shahaz-promotion-badge .shahaz-promotion-template__content{padding:var(--shahaz-promotion-badge-padding, calc(var(--shahaz-pe-space) / 2));}
.shahaz-promotion-badge--template-compact .shahaz-promotion-template__content{gap:var(--shahaz-promotion-badge-gap, calc(var(--shahaz-pe-space) / 2));}

.shahaz-promotion-toast .shahaz-promotion-template__content{align-items:flex-start;}
.shahaz-promotion-toast--template-promotional .shahaz-promotion-template__frame,
.shahaz-promotion-toast--template-announcement .shahaz-promotion-template__frame,
.shahaz-promotion-toast--template-cta .shahaz-promotion-template__frame,
.shahaz-promotion-toast--template-success .shahaz-promotion-template__frame,
.shahaz-promotion-toast--template-limited .shahaz-promotion-template__frame{padding:var(--shahaz-promotion-toast-padding, var(--shahaz-pe-space));}

.shahaz-promotion-popup .shahaz-promotion-template__content{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"visual copy" "actions actions";align-items:start;}
.shahaz-promotion-popup .shahaz-promotion-template__visual{grid-area:visual;}
.shahaz-promotion-popup .shahaz-promotion-template__copy{grid-area:copy;}
.shahaz-promotion-popup .shahaz-promotion-template__actions{grid-area:actions;justify-content:flex-start;}
.shahaz-promotion-popup--template-compact .shahaz-promotion-template__frame,
.shahaz-promotion-popup--template-announcement .shahaz-promotion-template__frame,
.shahaz-promotion-popup--template-offer .shahaz-promotion-template__frame,
.shahaz-promotion-popup--template-cta .shahaz-promotion-template__frame,
.shahaz-promotion-popup--template-campaign .shahaz-promotion-template__frame{padding:var(--shahaz-promotion-popup-padding, var(--shahaz-pe-space));}

.shahaz-promotion-popup__panel:focus{outline:var(--shahaz-promotion-focus-outline, 2px solid currentColor);outline-offset:var(--shahaz-promotion-focus-offset, 2px);}

@media (max-width: 767px){
    .shahaz-promotion-template__content{max-inline-size:100%;}
    .shahaz-promotion-template__actions{max-inline-size:100%;}
    .shahaz-promotion-template__cta,.shahaz-promotion-template__secondary{white-space:normal;}
    .shahaz-promotion-popup .shahaz-promotion-template__content{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "copy" "actions";}
    .shahaz-promotion-popup .shahaz-promotion-template__actions{justify-content:flex-start;}
}

@media (prefers-reduced-motion: reduce){
    .shahaz-promotion-ribbon--template-angled .shahaz-promotion-template__frame{transform:none;}
    .shahaz-promotion-ribbon--template-angled .shahaz-promotion-template__content{transform:none;}
}

/* SHAHAZ ZIP 250 — Admin media picker UX. Keeps attachment IDs as the
 * existing persistence contract while adding an immediate visual selection
 * state in the Promotion Builder. */
.shahaz-pe-media-picker{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;max-width:720px;padding:12px;border:1px solid #dcdcde;border-radius:8px;background:#fff;box-sizing:border-box}
.shahaz-pe-media-preview{position:relative;display:flex;align-items:center;justify-content:center;inline-size:96px;block-size:96px;flex:0 0 96px;overflow:hidden;border:1px dashed #c3c4c7;border-radius:8px;background:#f6f7f7;color:#646970;cursor:pointer}
.shahaz-pe-media-preview.has-image{border-style:solid;border-color:#8c8f94;background:#fff}
.shahaz-pe-media-preview img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.shahaz-pe-media-placeholder{padding:8px;text-align:center;font-size:12px;line-height:1.35}
.shahaz-pe-media-check{position:absolute;inset-block-start:6px;inset-inline-end:6px;display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:#2271b1;color:#fff;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.shahaz-pe-media-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:220px;padding-top:2px}
.shahaz-pe-media-controls .button-link-delete{cursor:pointer}
.shahaz-pe-media-meta{flex:1 1 100%;min-width:0;color:#50575e;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.shahaz-pe-media-picker .description{flex:1 1 100%;margin:0}
@media (max-width:782px){.shahaz-pe-media-picker{max-width:100%}.shahaz-pe-media-preview{inline-size:84px;block-size:84px;flex-basis:84px}.shahaz-pe-media-controls{min-width:0;flex:1 1 180px}}