:root {
    --bf-ink: #1f2937;
    --bf-muted: #6b7280;
    --bf-cream: #fff7ed;
    --bf-card: rgba(255, 255, 255, 0.78);
    --bf-stroke: rgba(31, 41, 55, 0.12);
    --bf-accent: #ee6c4d;
    --bf-accent-2: #3d5a80;
    --bf-glow: rgba(238, 108, 77, 0.18);

    --bs-font-sans-serif: "Montserrat Alternates",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
}

body {
    color: var(--bf-ink);
    min-height: 100vh;
    background:
        radial-gradient(1000px 700px at 15% 10%, rgba(61, 90, 128, 0.20), transparent 60%),
        radial-gradient(900px 680px at 85% 15%, rgba(238, 108, 77, 0.20), transparent 60%),
        radial-gradient(900px 800px at 60% 100%, rgba(152, 193, 217, 0.22), transparent 55%),
        linear-gradient(180deg, var(--bf-cream), #ffffff 40%, #ffffff);
}

.bf-card {
    background: var(--bf-card);
    border: 1px solid var(--bf-stroke);
    box-shadow:
        0 12px 34px rgba(17, 24, 39, 0.10),
        0 0 0 6px rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(10px);
}

.bf-kicker {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bf-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.bf-title {
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
}

.bf-subtitle {
    color: var(--bf-muted);
    font-weight: 500;
}

.bf-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(31, 41, 55, 0.14), transparent);
}

.bf-section-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.bf-hint {
    color: var(--bf-muted);
    font-size: 0.92rem;
}

.form-control,
.form-select {
    border-color: rgba(31, 41, 55, 0.18);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(238, 108, 77, 0.55);
    box-shadow: 0 0 0 0.25rem rgba(238, 108, 77, 0.18);
}

.btn-bf {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bf-accent);
    --bs-btn-hover-bg: #e45b3c;
    --bs-btn-hover-border-color: #e45b3c;
    --bs-btn-active-bg: var(--bf-accent);
    --bs-btn-active-border-color: #d85235;
    --bs-btn-focus-shadow-rgb: 238, 108, 77;
}


.bf-choice .btn {
    border-color: rgba(31, 41, 55, 0.18);
}

.bf-choice .btn-check:checked + .btn {
    border-color: rgba(238, 108, 77, 0.65);
    background: rgba(238, 108, 77, 0.10);
    color: var(--bf-ink);
}

/* Components specific to the gift list, in keeping with the bf-* classes */
.bf-gift {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .55);
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.bf-gift:hover {
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .06);
    transform: translateY(-2px);
}

.bf-gift-taken {
    border: 1px dashed rgba(0, 0, 0, .18);
    opacity: .72;
}

.bf-gift-taken:hover {
    box-shadow: none;
    transform: none;
}

.bf-gift-name {
    font-weight: 600;
    line-height: 1.25;
}

.bf-gift-desc {
    color: #6c757d;
    font-size: .925rem;
}

.bf-gift-price {
    white-space: nowrap;
}

.bf-pill-soft {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    color: #6c757d;
}

.bf-progress {
    height: .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
}

.bf-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bf-accent);
}

.bf-gift-img {
    display: block;
    width: 5rem;
    object-fit: cover;
    border-radius: .75rem 0 0 .75rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, .04);
}

.bf-gift-link {
    color: inherit;
    text-decoration: none;
}

.bf-gift-link:hover,
.bf-gift-link:focus-visible {
    text-decoration: underline;
}

.bf-gift-link::after {
    content: "↗";
    font-size: .8em;
    opacity: .55;
    margin-left: .25rem;
}

dt {
    color: var(--bf-muted);
    font-weight: 500;
}
dt::after {
    content: ": ";
}

code {
    color: var(--bf-accent);
}

.w-33 {
    width: calc(100% / 3);
}