/*
 * Darealmop_LoyaltyStorefront — neutral, token-driven structural CSS.
 *
 * Every colour / size is a --dm-loyalty-* (page) or --dm-loyalty-widget-*
 * (launcher) custom property with a sensible fallback, so the surfaces render
 * acceptably on a bare Magento/blank page yet a Hyvä theme can re-skin them
 * entirely by overriding tokens — no markup or JS changes. Fallbacks are
 * brand-agnostic neutrals (accent inherits via currentColor). The module ships
 * no Tailwind; Tailwind utility
 * classes in a theme override remain compatible.
 */

/* Hide Alpine-managed subtrees until the component initialises. */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ *
 * Shared page surfaces (Rewards page + account section)
 * ------------------------------------------------------------------ */
.dm-loyalty,
.dm-loyalty-account {
    box-sizing: border-box;
    color: var(--dm-loyalty-ink, #1f2937);
    font-family: var(--dm-loyalty-font, inherit);
    display: flex;
    flex-direction: column;
    gap: var(--dm-loyalty-gap, 24px);
}

.dm-loyalty *,
.dm-loyalty *::before,
.dm-loyalty *::after,
.dm-loyalty-account *,
.dm-loyalty-account *::before,
.dm-loyalty-account *::after { box-sizing: border-box; }

.dm-loyalty__hero {
    padding: var(--dm-loyalty-hero-padding, 32px);
    background: var(--dm-loyalty-hero-bg, #f8fafc);
    border-radius: var(--dm-loyalty-radius, 10px);
    text-align: var(--dm-loyalty-hero-align, left);
}

.dm-loyalty__title {
    margin: 0 0 12px;
    font-size: var(--dm-loyalty-title-size, 28px);
    line-height: 1.2;
    color: var(--dm-loyalty-ink, #1f2937);
}

.dm-loyalty__lead {
    margin: 0 0 20px;
    font-size: var(--dm-loyalty-lead-size, 16px);
    color: var(--dm-loyalty-muted, #6b7280);
    max-width: 60ch;
}

.dm-loyalty__balance-card {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 20px;
    background: var(--dm-loyalty-surface, #fff);
    border: var(--dm-loyalty-border, 1px solid rgba(0, 0, 0, .1));
    border-radius: var(--dm-loyalty-radius, 10px);
}

.dm-loyalty__balance-value {
    font-size: var(--dm-loyalty-balance-size, 32px);
    font-weight: 700;
    color: var(--dm-loyalty-accent-ink, currentColor);
}

.dm-loyalty__balance-label { font-size: 14px; color: var(--dm-loyalty-muted, #6b7280); }

.dm-loyalty__cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.dm-loyalty__panel {
    padding: var(--dm-loyalty-panel-padding, 24px);
    background: var(--dm-loyalty-surface, #fff);
    border: var(--dm-loyalty-border, 1px solid rgba(0, 0, 0, .1));
    border-radius: var(--dm-loyalty-radius, 10px);
}

.dm-loyalty__heading {
    margin: 0 0 16px;
    font-size: var(--dm-loyalty-heading-size, 20px);
    color: var(--dm-loyalty-ink, #1f2937);
}

.dm-loyalty__text { margin: 0 0 12px; color: var(--dm-loyalty-muted, #6b7280); }

/* Buttons */
.dm-loyalty__btn {
    display: inline-block;
    padding: var(--dm-loyalty-btn-padding, 10px 18px);
    border-radius: var(--dm-loyalty-btn-radius, 8px);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--dm-loyalty-transition, .2s ease);
}

.dm-loyalty__btn--primary {
    background: var(--dm-loyalty-accent, #e5e7eb);
    color: var(--dm-loyalty-accent-contrast, #1f2937);
}

.dm-loyalty__btn--ghost {
    background: transparent;
    border-color: var(--dm-loyalty-accent, currentColor);
    color: var(--dm-loyalty-accent-ink, currentColor);
}

.dm-loyalty__link {
    display: inline-block;
    color: var(--dm-loyalty-accent-ink, currentColor);
    font-weight: 600;
    text-decoration: underline;
}

/* Progress bar (shared page + account) */
.dm-loyalty__track {
    position: relative;
    width: 100%;
    height: var(--dm-loyalty-track-height, 10px);
    background: var(--dm-loyalty-track-bg, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

.dm-loyalty__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--dm-loyalty-fill, #9ca3af);
    border-radius: inherit;
    transition: width var(--dm-loyalty-fill-transition, .4s ease);
}

.dm-loyalty__tier-current { margin: 0 0 8px; font-weight: 600; }
.dm-loyalty__tier-next { margin: 8px 0 0; color: var(--dm-loyalty-muted, #6b7280); font-size: 14px; }

/* Ways-to-earn */
.dm-loyalty__earn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dm-loyalty__earn-item {
    padding: 12px 16px;
    background: var(--dm-loyalty-hero-bg, #f8fafc);
    border-radius: var(--dm-loyalty-radius, 10px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-loyalty__earn-title { font-weight: 600; }
.dm-loyalty__earn-desc { font-size: 14px; color: var(--dm-loyalty-muted, #6b7280); }

/* Apply-points row */
.dm-loyalty__apply { margin-top: 16px; }
.dm-loyalty__apply-label { display: block; font-weight: 600; margin-bottom: 8px; }
.dm-loyalty__apply-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dm-loyalty__apply-input {
    padding: 9px 12px;
    border: var(--dm-loyalty-border, 1px solid rgba(0, 0, 0, .2));
    border-radius: var(--dm-loyalty-btn-radius, 8px);
    max-width: 160px;
}
.dm-loyalty__message { margin: 10px 0 0; font-size: 14px; color: var(--dm-loyalty-accent-ink, currentColor); }

/* Rewards catalog */
.dm-loyalty__rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dm-loyalty__reward {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: var(--dm-loyalty-border, 1px solid rgba(0, 0, 0, .1));
    border-radius: var(--dm-loyalty-radius, 10px);
}
.dm-loyalty__reward-name { font-weight: 600; flex: 1 1 auto; }
.dm-loyalty__reward-cost { color: var(--dm-loyalty-muted, #6b7280); font-size: 14px; }

/* Tables */
.dm-loyalty__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-loyalty__table th,
.dm-loyalty__table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dm-loyalty-table-border, rgba(0, 0, 0, .08));
}
.dm-loyalty__table th { font-weight: 600; color: var(--dm-loyalty-muted, #6b7280); }
.dm-loyalty__points--pos { color: var(--dm-loyalty-pos, currentColor); font-weight: 600; }
.dm-loyalty__points--neg { color: var(--dm-loyalty-neg, #a12a1a); font-weight: 600; }

/* FAQ */
.dm-loyalty__faq { margin: 0; }
.dm-loyalty__faq-q { font-weight: 600; margin-top: 12px; }
.dm-loyalty__faq-a { margin: 4px 0 0; color: var(--dm-loyalty-muted, #6b7280); }

/* Pager */
.dm-loyalty__pager { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.dm-loyalty__pager-status { font-size: 14px; color: var(--dm-loyalty-muted, #6b7280); }

/* Account summary */
.dm-loyalty-account__summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dm-loyalty-account__balance { display: inline-flex; align-items: baseline; gap: 8px; }
.dm-loyalty-account__balance-value {
    font-size: 28px; font-weight: 700; color: var(--dm-loyalty-accent-ink, currentColor);
}
.dm-loyalty-account__balance-label { color: var(--dm-loyalty-muted, #6b7280); }
.dm-loyalty-account__tier {
    padding: 6px 12px;
    background: var(--dm-loyalty-hero-bg, #f8fafc);
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
}
.dm-loyalty-account__progress-text { margin: 6px 0 0; font-size: 14px; color: var(--dm-loyalty-muted, #6b7280); }

/* ------------------------------------------------------------------ *
 * Corner launcher widget
 * ------------------------------------------------------------------ */
.dm-loyalty-widget {
    position: fixed;
    z-index: var(--dm-loyalty-widget-z, 900);
    font-family: var(--dm-loyalty-widget-font, inherit);
}

.dm-loyalty-widget--bottom_right { bottom: var(--dm-loyalty-widget-offset, 20px); right: var(--dm-loyalty-widget-offset, 20px); }
.dm-loyalty-widget--bottom_left  { bottom: var(--dm-loyalty-widget-offset, 20px); left: var(--dm-loyalty-widget-offset, 20px); }
.dm-loyalty-widget--top_right    { top: var(--dm-loyalty-widget-offset, 20px); right: var(--dm-loyalty-widget-offset, 20px); }
.dm-loyalty-widget--top_left     { top: var(--dm-loyalty-widget-offset, 20px); left: var(--dm-loyalty-widget-offset, 20px); }

.dm-loyalty-widget__launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--dm-loyalty-widget-launcher-padding, 12px 18px);
    background: var(--dm-loyalty-widget-accent, #e5e7eb);
    color: var(--dm-loyalty-widget-accent-contrast, #1f2937);
    border: none;
    border-radius: var(--dm-loyalty-widget-launcher-radius, 999px);
    box-shadow: var(--dm-loyalty-widget-shadow, 0 6px 20px rgba(0, 0, 0, .25));
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.dm-loyalty-widget__launcher-icon { font-size: 16px; line-height: 1; }

.dm-loyalty-widget__badge {
    min-width: 20px;
    padding: 2px 6px;
    background: var(--dm-loyalty-widget-badge-bg, #374151);
    color: var(--dm-loyalty-widget-badge-ink, #fff);
    border-radius: 999px;
    font-size: 12px;
    text-align: center;
}

.dm-loyalty-widget__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: var(--dm-loyalty-widget-panel-width, 300px);
    max-width: calc(100vw - 40px);
    padding: var(--dm-loyalty-widget-panel-padding, 20px);
    background: var(--dm-loyalty-widget-bg, #fff);
    color: var(--dm-loyalty-widget-ink, #1f2937);
    border-radius: var(--dm-loyalty-widget-radius, 12px);
    box-shadow: var(--dm-loyalty-widget-shadow, 0 6px 20px rgba(0, 0, 0, .25));
}

.dm-loyalty-widget--bottom_left .dm-loyalty-widget__panel,
.dm-loyalty-widget--top_left .dm-loyalty-widget__panel { right: auto; left: 0; }

.dm-loyalty-widget--top_right .dm-loyalty-widget__panel,
.dm-loyalty-widget--top_left .dm-loyalty-widget__panel { bottom: auto; top: calc(100% + 12px); }

.dm-loyalty-widget__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dm-loyalty-widget__panel-title { font-weight: 700; font-size: 16px; }
.dm-loyalty-widget__close {
    background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: var(--dm-loyalty-widget-ink, #1f2937);
}

.dm-loyalty-widget__balance { margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px; }
.dm-loyalty-widget__balance-value {
    font-size: 26px; font-weight: 700; color: var(--dm-loyalty-widget-accent-ink, currentColor);
}
.dm-loyalty-widget__balance-label { font-size: 13px; color: var(--dm-loyalty-widget-muted, #6b7280); }
.dm-loyalty-widget__tier { margin: 0 0 10px; font-size: 13px; font-weight: 600; }

.dm-loyalty-widget__track {
    position: relative; width: 100%;
    height: var(--dm-loyalty-widget-track-height, 8px);
    background: var(--dm-loyalty-widget-track-bg, #e5e7eb);
    border-radius: 999px; overflow: hidden;
}
.dm-loyalty-widget__fill {
    display: block; height: 100%; width: 0;
    background: var(--dm-loyalty-widget-fill, #9ca3af); border-radius: inherit;
    transition: width .4s ease;
}
.dm-loyalty-widget__progress-text { margin: 6px 0 12px; font-size: 12px; color: var(--dm-loyalty-widget-muted, #6b7280); }

.dm-loyalty-widget__cta {
    display: block; text-align: center; margin-top: 10px;
    padding: 10px 14px;
    background: var(--dm-loyalty-widget-accent, #e5e7eb);
    color: var(--dm-loyalty-widget-accent-contrast, #1f2937);
    border-radius: var(--dm-loyalty-widget-launcher-radius, 8px);
    font-weight: 600; text-decoration: none; font-size: 14px;
}
.dm-loyalty-widget__link {
    display: block; text-align: center; margin-top: 8px;
    color: var(--dm-loyalty-widget-accent-ink, currentColor); text-decoration: underline; font-size: 13px;
}
.dm-loyalty-widget__guest-text { margin: 0 0 12px; font-size: 14px; color: var(--dm-loyalty-widget-muted, #6b7280); }
.dm-loyalty-widget__loading { margin: 0; font-size: 14px; color: var(--dm-loyalty-widget-muted, #6b7280); }

@media (prefers-reduced-motion: reduce) {
    .dm-loyalty__fill,
    .dm-loyalty-widget__fill { transition: none; }
}

/* ------------------------------------------------------------------ *
 * CMS surfaces (widgets / Page Builder content types)
 * Points Balance, Rewards Catalog, Join/Earn CTA, Active Campaign Banner.
 * Reuse the same --dm-loyalty-* tokens so a theme re-skins them for free.
 * ------------------------------------------------------------------ */
.dm-loyalty-surface {
    box-sizing: border-box;
    color: var(--dm-loyalty-ink, #1f2937);
    font-family: var(--dm-loyalty-font, inherit);
    padding: var(--dm-loyalty-panel-padding, 24px);
    background: var(--dm-loyalty-surface, #fff);
    border: var(--dm-loyalty-border, 1px solid rgba(0, 0, 0, .1));
    border-radius: var(--dm-loyalty-radius, 10px);
}

.dm-loyalty-surface *,
.dm-loyalty-surface *::before,
.dm-loyalty-surface *::after { box-sizing: border-box; }

.dm-loyalty-surface__title {
    margin: 0 0 12px;
    font-size: var(--dm-loyalty-heading-size, 20px);
    color: var(--dm-loyalty-ink, #1f2937);
}

.dm-loyalty-surface__btn {
    display: inline-block;
    padding: var(--dm-loyalty-btn-padding, 10px 18px);
    border-radius: var(--dm-loyalty-btn-radius, 8px);
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dm-loyalty-transition, .2s ease);
}

.dm-loyalty-surface__btn--primary {
    background: var(--dm-loyalty-accent, #e5e7eb);
    color: var(--dm-loyalty-accent-contrast, #1f2937);
}

.dm-loyalty-surface__btn--ghost {
    background: transparent;
    border-color: var(--dm-loyalty-accent, currentColor);
    color: var(--dm-loyalty-accent-ink, currentColor);
}

.dm-loyalty-surface__link {
    display: inline-block;
    margin-top: 8px;
    color: var(--dm-loyalty-accent-ink, currentColor);
    text-decoration: underline;
}

/* Points Balance */
.dm-loyalty-balance__value { margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px; }
.dm-loyalty-balance__number {
    font-size: var(--dm-loyalty-balance-size, 32px);
    font-weight: 700;
    color: var(--dm-loyalty-accent-ink, currentColor);
}
.dm-loyalty-balance__label { font-size: 14px; color: var(--dm-loyalty-muted, #6b7280); }
.dm-loyalty-balance__tier { margin: 0 0 12px; color: var(--dm-loyalty-muted, #6b7280); font-size: 14px; }
.dm-loyalty-balance__guest-text,
.dm-loyalty-catalog__guest-text { margin: 0 0 12px; color: var(--dm-loyalty-muted, #6b7280); }

/* Rewards Catalog */
.dm-loyalty-catalog__grid {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dm-loyalty-tile-min, 160px), 1fr));
    gap: var(--dm-loyalty-tile-gap, 12px);
}
.dm-loyalty-catalog__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--dm-loyalty-tile-padding, 14px);
    background: var(--dm-loyalty-hero-bg, #f8fafc);
    border-radius: var(--dm-loyalty-radius, 10px);
}
.dm-loyalty-catalog__name { font-weight: 600; }
.dm-loyalty-catalog__cost { font-size: 14px; color: var(--dm-loyalty-accent-ink, currentColor); }
.dm-loyalty-catalog__loading,
.dm-loyalty-catalog__empty { margin: 0; color: var(--dm-loyalty-muted, #6b7280); }

/* Join / Earn CTA */
.dm-loyalty-cta { text-align: var(--dm-loyalty-cta-align, left); }
.dm-loyalty-cta__heading { margin: 0 0 8px; font-size: var(--dm-loyalty-heading-size, 20px); font-weight: 700; }
.dm-loyalty-cta__subtext { margin: 0 0 16px; color: var(--dm-loyalty-muted, #6b7280); }

/* Active Campaign Banner */
.dm-loyalty-campaign {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--dm-loyalty-campaign-bg, #374151);
    color: var(--dm-loyalty-campaign-ink, #fff);
    border: none;
}
.dm-loyalty-campaign__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dm-loyalty-campaign-badge-size, 56px);
    height: var(--dm-loyalty-campaign-badge-size, 56px);
    padding: 0 10px;
    border-radius: 999px;
    background: var(--dm-loyalty-accent, #e5e7eb);
    color: var(--dm-loyalty-accent-contrast, #1f2937);
    font-size: var(--dm-loyalty-campaign-badge-font, 22px);
    font-weight: 800;
}
.dm-loyalty-campaign__heading { margin: 0 0 4px; font-size: var(--dm-loyalty-heading-size, 20px); font-weight: 700; }
.dm-loyalty-campaign__text { margin: 0; opacity: .9; }