/* ========================================================================== Hoopsters theme Palette, type and components lifted from the Hoopsters creative (Step_To_UnlockContent/assets/css/master.css) so the cancellation flow matches the acquisition flow. Everything is scoped to the theme attribute set on , which also reaches Bootstrap dialogs rendered at body level. ========================================================================== */ html[data-theme="hoopsters"] { --hp-accent: #005EFF; --hp-accent-hover: #1A5CF0; --hp-accent-active: #0047C4; --hp-accent-tint: rgba(0, 94, 255, 0.10); --hp-ink: #0A0A0A; --hp-body: #4B4B4B; --hp-muted: #8A8A8A; --hp-surface: #FFFFFF; --hp-raised: #F5F7F8; --hp-border: #EBEEF1; --hp-danger: #D92D20; --hp-danger-hover: #B42318; --hp-danger-tint: rgba(217, 45, 32, 0.08); --hp-radius: 14px; --hp-radius-lg: 20px; --hp-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px rgba(10, 10, 10, 0.06); --hp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --hp-font-display: "Zalando Sans SemiExpanded", "Inter", system-ui, sans-serif; } html[data-theme="hoopsters"] body { background: var(--hp-surface); color: var(--hp-body); font-family: var(--hp-font-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* ---------- Layout shell ---------- */ html[data-theme="hoopsters"] .app-shell { max-width: none; width: 100%; padding: 0 20px; display: flex; flex-direction: column; min-height: 100vh; } html[data-theme="hoopsters"] .app-shell__header { width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 0 8px; } html[data-theme="hoopsters"] .app-shell__logo { display: block; width: 112px; height: 34px; object-fit: contain; object-position: left center; } html[data-theme="hoopsters"] .app-shell__main { flex: 1 0 auto; width: 100%; } html[data-theme="hoopsters"] .app-shell__footer { width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 0 32px; color: var(--hp-muted); font-size: 12px; border-top: 1px solid var(--hp-border); } /* ---------- Page ---------- */ html[data-theme="hoopsters"] .hp { width: 100%; max-width: 480px; margin: 0 auto; padding: 12px 0 32px; display: flex; flex-direction: column; gap: 24px; } html[data-theme="hoopsters"] .hp__intro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } html[data-theme="hoopsters"] .hp__badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 47px; background: var(--hp-accent-tint); color: var(--hp-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } html[data-theme="hoopsters"] .hp__title { margin: 0; font-family: var(--hp-font-display); font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--hp-ink); text-wrap: balance; } html[data-theme="hoopsters"] .hp__subtitle { margin: 0; max-width: 42ch; font-size: 14px; color: var(--hp-body); text-wrap: balance; } /* ---------- Search card ---------- */ html[data-theme="hoopsters"] .hp__card { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow); padding: 20px; } html[data-theme="hoopsters"] .hp__card-title { margin: 0 0 16px; font-family: var(--hp-font-display); font-size: 16px; font-weight: 700; color: var(--hp-ink); } html[data-theme="hoopsters"] .hp__form { display: flex; flex-direction: column; gap: 16px; } html[data-theme="hoopsters"] .hp__field { display: flex; flex-direction: column; gap: 6px; } html[data-theme="hoopsters"] .hp__label { font-size: 13px; font-weight: 600; color: var(--hp-ink); } html[data-theme="hoopsters"] .hp__label-hint { font-weight: 400; color: var(--hp-muted); } html[data-theme="hoopsters"] .hp__input { width: 100%; height: 48px; padding: 0 14px; font-family: inherit; font-size: 16px; /* 16px or larger stops iOS Safari zooming on focus */ color: var(--hp-ink); background: var(--hp-raised); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } html[data-theme="hoopsters"] .hp__input::placeholder { color: var(--hp-muted); } html[data-theme="hoopsters"] .hp__input:focus { background: var(--hp-surface); border-color: var(--hp-accent); box-shadow: 0 0 0 4px var(--hp-accent-tint); } html[data-theme="hoopsters"] .hp__input--invalid, html[data-theme="hoopsters"] .hp__input--invalid:focus { border-color: var(--hp-danger); box-shadow: 0 0 0 4px var(--hp-danger-tint); } html[data-theme="hoopsters"] .hp__error { margin: 0; font-size: 13px; font-weight: 500; color: var(--hp-danger); } /* ---------- Buttons ---------- */ html[data-theme="hoopsters"] .hp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--hp-radius); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } html[data-theme="hoopsters"] .hp__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--hp-accent-tint); } html[data-theme="hoopsters"] .hp__btn--primary { width: 100%; background: var(--hp-accent); color: #FFFFFF; } html[data-theme="hoopsters"] .hp__btn--primary:hover { background: var(--hp-accent-hover); } html[data-theme="hoopsters"] .hp__btn--primary:active { background: var(--hp-accent-active); } html[data-theme="hoopsters"] .hp__btn--danger { min-height: 40px; padding: 0 16px; font-size: 14px; background: var(--hp-surface); border-color: var(--hp-danger); color: var(--hp-danger); } html[data-theme="hoopsters"] .hp__btn--danger:hover { background: var(--hp-danger); color: #FFFFFF; } html[data-theme="hoopsters"] .hp__btn--danger:focus-visible { box-shadow: 0 0 0 4px var(--hp-danger-tint); } html[data-theme="hoopsters"] .hp__link { font-size: 14px; font-weight: 600; color: var(--hp-accent); text-decoration: none; } html[data-theme="hoopsters"] .hp__link:hover { color: var(--hp-accent-hover); text-decoration: underline; } /* ---------- Results ---------- */ html[data-theme="hoopsters"] .hp__section-title { margin: 0 0 12px; font-family: var(--hp-font-display); font-size: 16px; font-weight: 700; color: var(--hp-ink); } html[data-theme="hoopsters"] .hp__results { display: flex; flex-direction: column; } html[data-theme="hoopsters"] .hp__sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--hp-raised); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); } html[data-theme="hoopsters"] .hp__sub + .hp__sub { margin-top: 10px; } /* Grows and shrinks so a long service name wraps in place instead of pushing the actions onto their own line and staggering the rows. */ html[data-theme="hoopsters"] .hp__sub-main { flex: 1 1 auto; min-width: 0; } html[data-theme="hoopsters"] .hp__sub-name { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--hp-ink); overflow-wrap: anywhere; } html[data-theme="hoopsters"] .hp__sub-meta { margin: 0; font-size: 13px; color: var(--hp-muted); } html[data-theme="hoopsters"] .hp__sub-actions { display: flex; align-items: center; flex-shrink: 0; gap: 16px; margin-left: auto; } html[data-theme="hoopsters"] .hp__empty { margin: 0; padding: 16px; background: var(--hp-accent-tint); border-radius: var(--hp-radius); font-size: 14px; color: var(--hp-ink); } /* ---------- Steps ---------- */ html[data-theme="hoopsters"] .hp__steps { padding-top: 20px; border-top: 1px solid var(--hp-border); } html[data-theme="hoopsters"] .hp__steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } html[data-theme="hoopsters"] .hp__step { display: flex; align-items: flex-start; gap: 12px; } html[data-theme="hoopsters"] .hp__step-num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--hp-accent); box-shadow: 0 0 0 5px var(--hp-accent-tint); color: #FFFFFF; font-size: 13px; font-weight: 700; } html[data-theme="hoopsters"] .hp__step-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--hp-ink); } html[data-theme="hoopsters"] .hp__step-desc { margin: 2px 0 0; font-size: 13px; color: var(--hp-muted); } html[data-theme="hoopsters"] .hp__note { margin: 18px 0 0; font-size: 13px; color: var(--hp-muted); } /* ---------- Blazor.Bootstrap overrides (confirm dialog + preload) ---------- */ html[data-theme="hoopsters"] .modal-content { border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow); font-family: var(--hp-font-body); color: var(--hp-ink); } html[data-theme="hoopsters"] .modal-header, html[data-theme="hoopsters"] .modal-footer { border-color: var(--hp-border); } html[data-theme="hoopsters"] .modal-title { font-family: var(--hp-font-display); font-weight: 700; } html[data-theme="hoopsters"] .modal .btn { min-height: 42px; padding: 0 18px; border-radius: var(--hp-radius); font-weight: 600; } html[data-theme="hoopsters"] .modal .btn-primary { background: var(--hp-accent); border-color: var(--hp-accent); } html[data-theme="hoopsters"] .modal .btn-primary:hover, html[data-theme="hoopsters"] .modal .btn-primary:focus { background: var(--hp-accent-hover); border-color: var(--hp-accent-hover); } html[data-theme="hoopsters"] .modal .btn-secondary { background: var(--hp-raised); border-color: var(--hp-border); color: var(--hp-ink); } html[data-theme="hoopsters"] .bb-preload-spinner, html[data-theme="hoopsters"] .spinner-border { color: var(--hp-accent); } /* ---------- Small screens ---------- */ @media (max-width: 420px) { html[data-theme="hoopsters"] .hp__title { font-size: 24px; } html[data-theme="hoopsters"] .hp__sub { align-items: flex-start; flex-direction: column; } html[data-theme="hoopsters"] .hp__sub-actions { margin-left: 0; width: 100%; justify-content: space-between; } }