/*
 * Darealmop_LoyaltyMerchandising — neutral, token-driven catalog surfaces.
 *
 * Every colour / size is a --dm-loyalty-* custom property with a sensible
 * fallback, so the earn line, redeemable callout, campaign banner and PLP badge
 * render acceptably on a bare Magento page yet a Hyva theme can re-skin them
 * entirely by overriding tokens — no markup or JS changes. The module ships no
 * Tailwind; Tailwind utility classes in a theme override remain compatible.
 * Fallbacks are brand-agnostic neutrals; the accent inherits via currentColor.
 */

/* ------------------------------------------------------------------ *
 * PDP earn line
 * ------------------------------------------------------------------ */
.dm-loyalty-earn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-loyalty-earn-gap, 8px);
    margin: var(--dm-loyalty-earn-margin, 10px 0);
    padding: var(--dm-loyalty-earn-padding, 8px 12px);
    border-radius: var(--dm-loyalty-radius, 8px);
    background: var(--dm-loyalty-earn-bg, #f8fafc);
    color: var(--dm-loyalty-ink, #1f2937);
    font-size: var(--dm-loyalty-earn-size, 14px);
    line-height: 1.35;
}

.dm-loyalty-earn__icon {
    color: var(--dm-loyalty-accent, currentColor);
    font-size: 1.05em;
}

.dm-loyalty-earn__text { font-weight: var(--dm-loyalty-earn-weight, 600); }

.dm-loyalty-earn__title {
    width: 100%;
    font-weight: 700;
    margin-bottom: 2px;
}

.dm-loyalty-earn__boost {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--dm-loyalty-boost-radius, 999px);
    background: var(--dm-loyalty-boost-bg, #e5e7eb);
    color: var(--dm-loyalty-boost-ink, #1f2937);
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *
 * PDP redeemable callout
 * ------------------------------------------------------------------ */
.dm-loyalty-redeemable {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-loyalty-earn-gap, 8px);
    margin: var(--dm-loyalty-redeemable-margin, 8px 0);
    padding: var(--dm-loyalty-earn-padding, 8px 12px);
    border: 1px dashed var(--dm-loyalty-redeemable-border, #e2e8f0);
    border-radius: var(--dm-loyalty-radius, 8px);
    color: var(--dm-loyalty-ink, #1f2937);
    font-size: var(--dm-loyalty-earn-size, 14px);
}

.dm-loyalty-redeemable__text { font-weight: 600; }

.dm-loyalty-redeemable__link {
    color: var(--dm-loyalty-link, currentColor);
    font-weight: 600;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * PDP campaign banner
 * ------------------------------------------------------------------ */
.dm-loyalty-banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--dm-loyalty-banner-margin, 0 0 12px);
    padding: var(--dm-loyalty-banner-padding, 10px 14px);
    border-radius: var(--dm-loyalty-radius, 8px);
    background: var(--dm-loyalty-banner-bg, #374151);
    color: var(--dm-loyalty-banner-ink, #ffffff);
}

.dm-loyalty-banner__headline {
    font-weight: 700;
    font-size: var(--dm-loyalty-banner-size, 15px);
}

.dm-loyalty-banner__body {
    font-size: 0.9em;
    opacity: 0.9;
}

/* ------------------------------------------------------------------ *
 * PLP "+N pts" tile badge (appended to the price HTML)
 * ------------------------------------------------------------------ */
.dm-loyalty-badge {
    display: inline-block;
    margin-top: var(--dm-loyalty-badge-mt, 4px);
    padding: var(--dm-loyalty-badge-padding, 1px 8px);
    border-radius: var(--dm-loyalty-badge-radius, 999px);
    background: var(--dm-loyalty-badge-bg, #f8fafc);
    color: var(--dm-loyalty-badge-ink, currentColor);
    font-size: var(--dm-loyalty-badge-size, 12px);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}