/* [CLAUDE CHANGE] — Loyalty Phase 2a: the Milestop360 customer site (Views/LoyaltyPublic/_MilestopLayout.cshtml) and the
   brand stylesheet of the "Milestop360" ProductBrand (error pages on that domain: body.brand-milestop360).
   Direction C tokens (docs/plans/Loyalty_Plan.md 14). The owner's accent colour, when set, arrives as --ms-accent. */
:root {
    --ms-navy: #1F3A8A;
    --ms-blue: #1356C7;
    --ms-sky: #29ABE2;
    --ms-night: #0A2350;
    --ms-bg: #F3F6FB;
    --ms-ink: #0B1B3A;
    --ms-muted: #56657E;
    --ms-line: #E2E8F2;
    --ms-amber: #F59E0B;
    --ms-danger: #B42318;
}

.ms360 {
    margin: 0;
    background: var(--ms-bg);
    color: var(--ms-ink);
    font: 16px/1.5 Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --ms-primary: var(--ms-accent, var(--ms-blue));
}

.ms360 a { color: var(--ms-primary); }
.ms360-wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.ms360-header { background: var(--ms-navy); color: #fff; }
.ms360-header-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.ms360-mark img { display: block; height: 28px; width: auto; }
.ms360-program { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ms360-program-logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }

.ms360-main { flex: 1; padding: 28px 0 40px; }

.ms360-card {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(11, 27, 58, .04), 0 8px 24px rgba(11, 27, 58, .06);
    margin-bottom: 16px;
}
.ms360-card--center { text-align: center; }
.ms360-card h1 { font-size: 26px; line-height: 1.2; margin: 0 0 8px; color: var(--ms-navy); }
.ms360-card h2 { font-size: 18px; margin: 20px 0 6px; color: var(--ms-navy); }
.ms360-eyebrow { margin: 0 0 4px; color: var(--ms-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ms360-lead { color: var(--ms-muted); margin: 0 0 16px; }
.ms360-fine { color: var(--ms-muted); font-size: 13px; margin: 12px 0; }
.ms360-aside { text-align: center; font-size: 14px; color: var(--ms-muted); }

.ms360-hero { text-align: center; padding: 8px 0 20px; }
.ms360-hero h1 { font-size: 30px; color: var(--ms-navy); margin: 12px 0 8px; }

.ms360-field { display: block; margin: 0 0 14px; }
.ms360-field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ms360-field input, .ms360-field select {
    width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px; border: 1px solid #C9D3E3; border-radius: 10px; background: #fff; color: var(--ms-ink);
}
.ms360-field input:focus, .ms360-field select:focus { outline: 3px solid rgba(19, 86, 199, .25); border-color: var(--ms-primary); }
.ms360-code { letter-spacing: .3em; font-size: 22px !important; text-align: center; text-transform: uppercase; }
.ms360-row { display: flex; gap: 12px; }
.ms360-row > .ms360-field { flex: 1; }

.ms360-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; }
.ms360-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ms-primary); }

.ms360-btn {
    display: block; width: 100%; border: 0; border-radius: 12px; padding: 14px 18px; margin-top: 8px;
    font: 600 17px/1.2 Outfit, system-ui, sans-serif; color: #fff; background: var(--ms-primary); cursor: pointer;
}
.ms360-btn:hover { filter: brightness(1.06); }
.ms360-btn:disabled { opacity: .6; cursor: wait; }
.ms360-btn--danger { background: var(--ms-danger); }

.ms360-note { padding: 12px 14px; border-radius: 10px; background: #EAF2FE; color: var(--ms-ink); margin: 0 0 16px; }
.ms360-note--error { background: #FDECEA; color: var(--ms-danger); }
.ms360-draft { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 700; margin: 0 0 12px; }
.ms360-legal p, .ms360-legal li { color: #2A3A57; }
.ms360-legal blockquote { margin: 8px 0 16px; padding: 10px 14px; border-left: 4px solid var(--ms-sky); background: var(--ms-bg); }

/* the logo's 360° orbit ring */
.ms360-orbit { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; border: 6px solid var(--ms-line); border-top-color: var(--ms-primary); border-right-color: var(--ms-sky); }
.ms360-orbit--done { border-color: var(--ms-primary); }
.ms360-orbit--big { width: 84px; height: 84px; border-width: 8px; }

.ms360-footer { border-top: 1px solid var(--ms-line); background: #fff; padding: 18px 0 24px; font-size: 13px; color: var(--ms-muted); }
.ms360-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.ms360-footer a { color: var(--ms-muted); }

@media (max-width: 420px) {
    .ms360-card { padding: 18px; border-radius: 14px; }
    .ms360-card h1 { font-size: 23px; }
}

/* Error pages on the Milestop360 domain (Views/Error/_Layout.cshtml with this brand). */
body.brand-milestop360 { font-family: Outfit, system-ui, sans-serif; }
/* [END CLAUDE CHANGE] */