/*
  Shadow DOM notes (guide Section 6):
  - Colors below are hardcoded placeholders matching the approved design
    reference. Swap for this site's Webflow variables (Variables panel in
    the Designer) once you have their names, so the card follows the site's
    real color/typography system instead of a fixed palette.
  - font-family isn't set to `inherit` here because the design reference
    uses its own type scale (Inter, bold weights) rather than matching
    surrounding body copy — revisit if the site wants it to blend in more.
*/

.fl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}

.fl-state {
font-size: 14px;
color: #6b6478;
padding: 24px 4px;
}
.fl-error {
color: #b23a3a;
}

.rc-card {
font-family: 'Inter', system-ui, sans-serif;
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(30, 12, 50, 0.14);
display: flex;
flex-direction: column;
}
.rc-image {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #e5e0ea;
}
.rc-body {
padding: 22px 20px 24px;
display: flex;
flex-direction: column;
gap: 13px;
}
.rc-tag {
align-self: flex-start;
background: #f6e0fa;
color: #a821c4;
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.05em;
padding: 7px 14px;
border-radius: 999px;
text-transform: uppercase;
}
.rc-title {
margin: 0;
font-size: 25px;
line-height: 1.15;
font-weight: 800;
color: #14111e;
}
.rc-suburb {
/* was: margin: 0; — pulled up to tighten the gap to .rc-title.
   .rc-body uses flex `gap: 13px` for uniform spacing between all
   children, so a negative top margin here trims spacing for this
   pair only, without affecting gaps elsewhere in the card. */
margin: -6px 0 0;
font-size: 15.5px;
font-weight: 600;
color: #14111e;
opacity: 0.8;
}
.rc-specs {
display: flex;
gap: 18px;
align-items: center;
}
.rc-specs span {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 14.5px;
color: #14111e;
}
.rc-bid-label {
margin: 2px 0 -6px;
font-weight: 700;
font-size: 14.5px;
color: #14111e;
}
.rc-bid-value {
margin: 0;
font-weight: 800;
font-size: 27px;
color: #14111e;
}
.rc-timer-box {
background: #f6e0fa;
border-radius: 16px;
padding: 13px 16px;
}
.rc-timer-label {
margin: 0 0 4px;
font-weight: 700;
color: #a821c4;
font-size: 13.5px;
}
.rc-timer-value {
margin: 0;
font-weight: 800;
color: #a821c4;
/* was: font-size: 16px; — reduced, plus nowrap/ellipsis as a safety
   net, so "X days, X hrs, X mins, X secs" stays on one line even in
   the narrowest card width (280px). */
font-size: 12.5px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rc-timer-note {
margin: 0;
font-weight: 600;
color: #a821c4;
font-size: 12px;
line-height: 1.4;
opacity: 0.85;
}
.rc-actions {
display: flex;
gap: 10px;
margin-top: 2px;
}
.rc-btn-outline {
flex: 1;
text-align: center;
padding: 12px;
border-radius: 999px;
border: 2px solid #14162b;
color: #14162b;
font-weight: 700;
font-size: 13.5px;
text-decoration: none;
}
.rc-btn-primary {
flex: 1;
text-align: center;
padding: 12px;
border-radius: 999px;
border: none;
color: #fff;
font-weight: 700;
font-size: 13.5px;
text-decoration: none;
background: linear-gradient(90deg, #3457d5, #b02cc9);
}