/* Bridge styles: map existing Blazor classes to novo-layout visual language without rewriting Razor markup */

:root {
 /* ensure variables exist even if novo-layout/styles.css is not loaded for some reason */
 --primary: #01408F;
 --secondary: #E2CD2A;
 --bg-primary: #FFFFFF;
 --bg-secondary: #F9FAFB;
 --bg-tertiary: #F3F4F6;
 --text-primary: #1F2937;
 --text-secondary: #6B7280;
 --border-light: #E5E7EB;
 --shadow-md:04px6px -1px rgba(0,0,0,0.1);
 --shadow-lg:010px15px -3px rgba(0,0,0,0.1);
}

/* Containers */
.main-content {
 max-width:480px;
 margin:0 auto;
 padding-bottom:40px;
}

.section-title,
.section-title-light {
 color: var(--primary);
 font-weight:700;
}

/* Cards */
.loyalty-card {
 background: var(--bg-primary);
 border-radius:12px;
 padding:16px;
 box-shadow: var(--shadow-md);
 border-left:4px solid var(--secondary);
}

.rules-card,
.rewards-card {
 background: var(--bg-secondary);
 border-radius:12px;
 padding:16px;
 border-left:4px solid var(--secondary);
}

/* Header bits */
.stores-header {
 display: flex;
 align-items: center;
 gap:12px;
 padding:8px4px12px;
}

.back-btn {
 width:40px;
 height:40px;
 border-radius:50%;
 border: none;
 background: var(--bg-tertiary);
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Titles and meta */
.store-name { font-weight:700; color: var(--text-primary); }
.store-category { color: var(--text-secondary); font-size: .9rem; }
.campaign-meta span { color: var(--text-secondary); }

/* Avatars & images */
.store-image, .store-avatar {
 width:64px; height:64px; border-radius:12px;
 background: var(--bg-tertiary);
 display: flex; align-items: center; justify-content: center;
}
.campaign-avatar { width:98px; height:98px; border-radius:12px; object-fit: cover; border:2px solid var(--secondary); }
.campaign-banner, .store-banner { border-radius:12px; border:2px solid rgba(0,0,0,0.04); }

/* Status badge */
.status-badge {
 padding:2px8px; border-radius:999px; font-size: .7rem; font-weight:600;
 background: #FEF3C7; color: #92400E;
}
.status-badge.active { background: #DEF7EC; color: #03543F; }

/* Progress */
.progress-bar { width:100%; height:8px; background: var(--bg-tertiary); border-radius:999px; overflow: hidden; margin-left:0px !important }
.progress-fill {
    height: 100%;
    background: var(--secondary-color);
}
.progress-fill.used { background: #EF7148; }

/* Stamps */
.stamps-grid { display: grid; grid-template-columns: repeat(5,1fr); gap:8px; }
.stamp { aspect-ratio:1; border-radius:8px; background: var(--bg-tertiary); }
    .stamp.filled {
        background: var(--secondary-color);
    }
.stamp.used { background: #EF7148; color: white; opacity: .9; }

/* Footer */
.card-footer { border-top:1px solid var(--border-light); padding-top:12px; }
.reward-info { color: var(--text-secondary); }

/* Buttons */
.btn { border: none; border-radius:8px; padding:10px16px; font-weight:600; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline-primary, .btn-secondary { border:1px solid var(--primary); background: transparent; color: var(--primary); }
.join-btn { background: var(--primary); color: #fff; border-radius:8px; padding:10px16px; }

/* Bottom nav compatibility */
.bottom-nav.custom-nav { background: var(--bg-primary); border-top:1px solid var(--border-light); }
.bottom-nav .nav-item { color: var(--text-secondary); }
.bottom-nav .nav-item.active { color: var(--primary); }

/* Alerts as cards tone */
.alert { border-radius:8px; padding:10px12px; }
.alert-info { background: var(--bg-tertiary); color: var(--text-secondary); }
.alert-warning { background: #FEF3C7; color: #92400E; }
.alert-success { background: #DEF7EC; color: #03543F; }