/* Mobile-first member site. Brand colors arrive as CSS custom properties set by the
   layout from tenant resources (--brand-primary / --brand-secondary / --brand-accent). */

html { font-size: 16px; }
body { background: #f6f7f9; }

.brand-nav { background: var(--brand-primary); }

/* Tenant logos come in any color scheme; a white plate keeps them legible on the brand nav */
.brand-logo-plate {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: .5rem;
    padding: .3rem .6rem;
}
.brand-logo-plate img { height: 30px; display: block; }
.brand-footer { background: var(--brand-primary); color: rgba(255, 255, 255, .85); }

.btn-brand {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}
.btn-brand:hover, .btn-brand:focus { filter: brightness(.92); color: #fff; }

.text-brand { color: var(--brand-primary); }

.hero {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    padding: 3.5rem 1.25rem;
    text-align: center;
}
.hero.has-image {
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--brand-primary) 65%, transparent);
}
.hero > * { position: relative; }
.hero h1 { font-size: 1.75rem; font-weight: 700; }
.hero p { font-size: 1.05rem; opacity: .9; max-width: 34rem; margin: .75rem auto 1.25rem; }

@media (min-width: 768px) {
    .hero { padding: 6rem 2rem; }
    .hero h1 { font-size: 2.5rem; }
}

/* Cards read well on a phone: full-bleed-ish with comfortable tap targets */
.reward-card { border: 0; border-radius: .75rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.points-badge {
    background: var(--brand-secondary);
    color: #fff;
    border-radius: 999px;
    padding: .25rem .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Offer cards — priceless.com-style: large photography, quiet type, generous whitespace */
.offers-heading { font-size: 1.35rem; font-weight: 700; }
.offer-card { display: block; text-decoration: none; color: inherit; }
.offer-card-media {
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #e9ecef;
}
.offer-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.offer-card:hover .offer-card-media img { transform: scale(1.04); }
.offer-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    opacity: .3;
}
.offer-flag {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: rgba(255, 255, 255, .92);
    color: #212529;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
}
.offer-flag-auction { background: var(--brand-primary); color: #fff; }
.offer-flag-sweeps { background: var(--brand-accent); color: #fff; }
.offer-card-body { padding: .9rem .15rem 0; }
.offer-eyebrow {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
}
.offer-title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin-top: .15rem; color: #212529; }
.offer-card:hover .offer-title { color: var(--brand-primary); }
.offer-meta { font-size: .85rem; color: #6c757d; margin-top: .15rem; }

/* Bidding — the standing bid is the hero number on an auction lot */
.bid-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--brand-accent);
    border-radius: .75rem;
    padding: 1rem;
}
.bid-amount { font-size: 1.6rem; font-weight: 700; color: var(--brand-primary); line-height: 1.1; }
.bid-autobid {
    background: #f6f7f9;
    border-radius: .5rem;
    padding: .75rem;
}

/* Offer detail page */
.offer-page-title { font-size: 1.75rem; font-weight: 700; margin-top: .15rem; }
.offer-description { max-width: 44rem; }
.offer-fact { display: flex; gap: .75rem; padding: .3rem 0; font-size: .95rem; }
.offer-fact-label {
    flex: 0 0 5.5rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
    padding-top: .15rem;
}
.offer-fact-text { color: #212529; }
.redeem-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    padding: .75rem 1rem;
}
.offer-hero { border-radius: .75rem; overflow: hidden; aspect-ratio: 16 / 9; background: #e9ecef; }
.offer-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-caption { font-size: .85rem; color: #6c757d; margin-top: .35rem; min-height: 1.1rem; }
.offer-thumbs { display: flex; gap: .5rem; margin-top: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.offer-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    border-radius: .4rem;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
}
.offer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-thumb.active { border-color: var(--brand-accent); }

/* Concierge chat sheet */
.concierge-fab {
    position: fixed;
    right: 1rem;
    bottom: 1.25rem;
    z-index: 1040;
}
.concierge-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
}
@media (min-width: 768px) {
    .concierge-sheet { left: auto; width: 24rem; right: 1rem; bottom: 1rem; border-radius: 1rem; }
}
.concierge-head { background: var(--brand-primary); }
.concierge-msg {
    background: #f0f2f5;
    border-radius: .75rem;
    padding: .5rem .75rem;
    margin-top: .5rem;
    white-space: pre-wrap;
    max-width: 90%;
}
.concierge-msg.mine {
    background: var(--brand-secondary);
    color: #fff;
    margin-left: auto;
}