/* AgencyOffice Website Builder — Base Styles */
/* Theme variables (--wb-*) are injected from _Layout.cshtml via WB_SiteConfig */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--wb-font-body);
    line-height: 1.6;
    color: #1a1a2e;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wb-font-heading);
    line-height: 1.2;
    margin-top: 0;
}

a { color: var(--wb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Container */
/* max-width is a custom property so a per-block "content width" override
   (set as an inline --wb-container-max on the parent .wb-section) can widen or
   narrow just that block. Default 1200px is unchanged when nothing overrides. */
.wb-container { max-width: var(--wb-container-max, 1200px); margin: 0 auto; padding: 0 1.5rem; }

/* Sections */
/* Vertical padding is driven by custom properties so (a) the site "density"
   preset can set the baseline on :root and (b) a single block can override its
   own top/bottom spacing via an inline style. Falls back to the original 3rem. */
.wb-section { padding: var(--wb-sec-pad-top, 3rem) 0 var(--wb-sec-pad-bottom, 3rem); }

/* ======================== */
/* Header                   */
/* ======================== */
.wb-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.wb-header .wb-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wb-logo img { height: var(--wb-logo-height, 48px); width: auto; }
.wb-logo span { font-size: 1.25rem; font-weight: 700; color: var(--wb-secondary); }

.wb-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}

.wb-nav-item a {
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    transition: color 0.2s;
}

.wb-nav-item a:hover { color: var(--wb-primary); text-decoration: none; }
.wb-nav-item { position: relative; }
.wb-nav-item.has-children > a::after { content: " \25BE"; font-size: 0.7em; opacity: 0.6; }
.wb-nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0; z-index: 100;
    list-style: none; margin: 0; padding: 0.5rem 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 200px;
}
.wb-nav-dropdown li a {
    display: block; padding: 0.5rem 1rem; color: #374151; font-size: 0.9rem;
    white-space: nowrap; text-decoration: none;
}
.wb-nav-dropdown li a:hover { background: #f3f4f6; color: var(--wb-primary); }
.wb-nav-item:hover > .wb-nav-dropdown { display: block; }

/* Account entry point (Sign in / Register / My Account) in the header */
.wb-account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1.5rem;
}
.wb-account__link {
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
}
.wb-account__link:hover { color: var(--wb-primary); text-decoration: none; }

.wb-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.wb-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #374151;
    transition: 0.2s;
}

/* ======================== */
/* Hero                     */
/* ======================== */
.wb-hero {
    background-color: var(--wb-secondary);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.wb-hero-content { position: relative; z-index: 2; }
.wb-hero--slideshow { background-image: none !important; }
.wb-hero-slides { position: absolute; inset: 0; z-index: 1; }
.wb-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.wb-hero-slide--active { opacity: 1; }
.wb-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(0,0,0,0.35); pointer-events: none;
}
.wb-hero:not(.wb-hero--slideshow):not([style*="background-image"])::after { display: none; }

.wb-hero h1 { font-size: 2.75rem; margin-bottom: 1rem; }
.wb-hero-sub { font-size: 1.25rem; opacity: 0.9; max-width: 600px; margin: 0 auto 2rem; }

/* ======================== */
/* Buttons                  */
/* ======================== */
.wb-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.wb-btn--primary {
    background: var(--wb-primary);
    color: #fff;
}

.wb-btn--primary:hover { opacity: 0.9; text-decoration: none; }
.wb-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.wb-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }

/* ======================== */
/* Property Grid            */
/* ======================== */
.wb-property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
}

/* minmax(0, 1fr), not 1fr: a long unbroken listing title could otherwise widen its
   column and push the grid past the container. */
.wb-property-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.wb-property-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-property-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-property-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tablet: three or four cards across left each one too narrow for its price line. */
@media (min-width: 769px) and (max-width: 1080px) {
    .wb-property-grid--cols-3,
    .wb-property-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .wb-property-grid--cols-2,
    .wb-property-grid--cols-3,
    .wb-property-grid--cols-4 { grid-template-columns: 1fr; }
}

.wb-property-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    color: inherit;
    text-decoration: none;
}

.wb-property-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.wb-property-card-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f3f4f6;
    position: relative;
}

.wb-property-card-image--sm { aspect-ratio: 16/6; }
.wb-property-card-image--lg { aspect-ratio: 4/3; }

.wb-property-card-image img { width: 100%; height: 100%; object-fit: cover; }

.wb-property-card-noimage {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 0.9rem;
}
.wb-property-card--confidential .wb-property-card-noimage {
    /* Sidney Phillips red, requested Sept 2026 - the placeholder reads as part of
       the brand rather than a broken image. */
    background: #9d2200; color: #fff; font-weight: 500;
}

.wb-property-card-status {
    position: absolute; top: 0.75rem; left: 0.75rem;
    /* Honours a per-page accent when a landing page sets one (see --wb-page-accent),
       falling back to the site primary everywhere else. */
    background: var(--wb-page-accent, var(--wb-primary)); color: #fff;
    padding: 0.25rem 0.75rem; border-radius: 4px;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wb-property-card-body { padding: 1.25rem; }
.wb-property-card-body h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.wb-property-location { color: #6b7280; font-size: 0.9rem; margin: 0 0 0.5rem; }
.wb-property-price { font-size: 1.25rem; font-weight: 700; color: var(--wb-primary); margin: 0 0 0.5rem; }
/* Proactive price qualifier ("Offers Over", "Guide Price", etc). Shown same size/weight/
   colour as the figure it precedes - SP staging feedback. ("Asking Price", the default,
   is suppressed upstream so it never reaches here.) */
.wb-property-price-qual { font-size: inherit; font-weight: inherit; color: inherit; }
/* Tenure inline with the card text, black and bold to stand out - SP staging feedback. */
.wb-property-tenure { font-size: 0.95rem; font-weight: 700; color: #1a1a1a; margin: 0 0 0.5rem; }
.wb-property-card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.wb-property-tag { display: inline-block; background: #f3f4f6; color: #374151; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; }
.wb-property-card-cta { display: block; margin-top: auto; padding-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--wb-primary); }
.wb-property-card:hover .wb-property-card-cta { text-decoration: underline; }

/* Search results grid: equal vertical spacing between every card line (title, location,
   price, tenure, View Details) - SP staging feedback. A single flex gap replaces the
   per-element margins, and the CTA's bottom-push (margin-top:auto) / extra padding are
   cleared so all four gaps are identical. Scoped to the search grid so the featured /
   list-view card layouts are unaffected. */
.wb-property-grid--search .wb-property-card-body { gap: 0.5rem; }
.wb-property-grid--search .wb-property-card-body > * { margin-top: 0; margin-bottom: 0; }
.wb-property-grid--search .wb-property-card-cta { margin-top: 0; padding-top: 0; }
.wb-property-card-body { display: flex; flex-direction: column; }

/* ======================== */
/* Property Detail          */
/* ======================== */

/* Image Gallery */
.wb-gallery { margin-bottom: 2rem; }
.wb-gallery-main {
    position: relative; border-radius: 8px; overflow: hidden;
    background: #f3f4f6; aspect-ratio: 16/9;
}
.wb-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.wb-gallery-nav:hover { background: rgba(0,0,0,0.75); }
.wb-gallery-nav--prev { left: 1rem; }
.wb-gallery-nav--next { right: 1rem; }
.wb-gallery-counter {
    position: absolute; bottom: 1rem; right: 1rem;
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 0.25rem 0.75rem; border-radius: 4px;
    font-size: 0.8rem;
}
.wb-gallery-thumbs {
    display: flex; gap: 0.5rem; margin-top: 0.75rem;
    overflow-x: auto; padding-bottom: 0.25rem;
}
.wb-gallery-thumb {
    flex-shrink: 0; width: 80px; height: 60px;
    border-radius: 4px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; padding: 0; background: none;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.6;
}
.wb-gallery-thumb:hover { opacity: 0.9; }
.wb-gallery-thumb--active { border-color: var(--wb-primary); opacity: 1; }
.wb-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Property Header */
/* Grid, not a wrapping flex row: as a flex item the heading block could not shrink below
   its min-content width, so a long advert heading pushed the price badge onto a row of its
   own where it sat right-aligned and detached, with the tenure floating under it.
   minmax(0,1fr) lets the heading shrink and wrap instead, keeping price + tenure pinned
   top-right on every listing. Stacks left-aligned on narrow screens (see media query). */
.wb-property-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: 1.5rem; margin-bottom: 1.5rem;
}
.wb-property-header h1 { margin-bottom: 0.25rem; }
.wb-property-location-large { color: #6b7280; font-size: 1rem; margin: 0; }
.wb-property-price-badge { text-align: right; flex-shrink: 0; }
.wb-property-price-qualifier { display: block; font-size: 0.8rem; color: #6b7280; }
.wb-property-price-large { font-size: 1.75rem; font-weight: 700; color: var(--wb-primary); }

/* Key Details Bar */
.wb-property-key-details {
    display: flex; flex-wrap: wrap; gap: 1px;
    background: #e5e7eb; border-radius: 8px; overflow: hidden;
    margin-bottom: 2rem;
}
.wb-property-key-item {
    flex: 1 1 auto; min-width: 120px;
    background: #f9fafb; padding: 1rem 1.25rem;
    text-align: center;
}
.wb-property-key-label { display: block; font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.wb-property-key-value { display: block; font-size: 0.95rem; font-weight: 600; color: #111827; }
.wb-property-status-value { color: var(--wb-primary); }

.wb-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.875rem; }
.wb-breadcrumb li { display: flex; align-items: center; color: #6b7280; }
.wb-breadcrumb li + li::before { content: "\203A"; margin: 0 0.5rem; color: #9ca3af; }
.wb-breadcrumb a { color: var(--wb-primary); text-decoration: none; }
.wb-breadcrumb a:hover { text-decoration: underline; }
.wb-breadcrumb li[aria-current="page"] { color: #111827; font-weight: 500; }

.wb-property-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; }
.wb-property-detail-main h2 { font-size: 1.25rem; margin-bottom: 1rem; border-bottom: 2px solid var(--wb-primary); padding-bottom: 0.5rem; display: inline-block; }
.wb-property-description { line-height: 1.7; }
.wb-property-negotiator { font-size: 0.9rem; margin-bottom: 1rem; color: #374151; }
.wb-property-ref { font-size: 0.8rem; color: #9ca3af; margin: 0.25rem 0 0; }
.wb-property-tenure-label { display: block; font-size: 0.85rem; color: #374151; margin-top: 0.25rem; }

/* Property Sections */
.wb-property-section { margin-bottom: 2rem; }
.wb-property-section h2 { font-size: 1.25rem; margin-bottom: 1rem; border-bottom: 2px solid var(--wb-primary); padding-bottom: 0.5rem; display: inline-block; }
.wb-property-description { line-height: 1.7; }
.wb-property-description li { display: list-item; list-style: disc inside; padding-left: 0.5rem; margin-bottom: 0.35rem; line-height: 1.5; }
.wb-property-description ul, .wb-property-description ol { margin: 0; padding: 0 0 0 1.25rem; }

/* Videos */
.wb-property-video { margin-bottom: 1rem; }

/* Documents */
.wb-property-documents { display: flex; flex-direction: column; gap: 0.5rem; }
.wb-property-doc-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 6px; color: inherit; text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.9rem;
}
.wb-property-doc-link:hover { border-color: var(--wb-primary); background: #fff; text-decoration: none; }
.wb-property-doc-icon {
    flex-shrink: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wb-primary); color: #fff;
    border-radius: 4px; font-size: 0.7rem; font-weight: 700;
}

/* ======================== */
/* Cards                    */
/* ======================== */
.wb-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.wb-card h3 { margin-bottom: 1rem; }

/* Team Grid */
.wb-team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.wb-team-card { text-align: center; padding: 1.5rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.wb-team-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem; }
.wb-team-avatar {
    width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 0.75rem;
    background: var(--wb-primary); color: #fff; font-size: 1.5rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.wb-team-card h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.wb-team-title { color: #6b7280; font-size: 0.875rem; margin: 0 0 0.5rem; }
.wb-team-contact { display: flex; justify-content: center; gap: 0.75rem; font-size: 0.85rem; }
.wb-team-link { color: var(--wb-primary); text-decoration: none; }
.wb-team-link:hover { text-decoration: underline; }

/* Per-person profile page link (only rendered when the person has a ProfileUrl set) */
.wb-team-photo-link { display: block; line-height: 0; }
.wb-team-name-link { color: inherit; text-decoration: none; }
.wb-team-name-link:hover { color: var(--wb-primary); text-decoration: underline; }
.wb-team-profile { margin: 0.6rem 0 0; font-size: 0.85rem; }
.wb-team-profile-link { color: var(--wb-primary); text-decoration: none; font-weight: 600; }
.wb-team-profile-link:hover { text-decoration: underline; }
.wb-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* CTA image variant — renders an image instead of the coloured button when imageUrl is set */
.wb-cta-image-link { display: inline-block; line-height: 0; }
.wb-cta-image-link img { max-width: 320px; height: auto; transition: opacity 0.15s; }
.wb-cta-image-link:hover img { opacity: 0.85; }

/* Social Icons block (distinct from .wb-social-share — these are profile links, not share buttons) */
.wb-social-icons-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.wb-social-icons--left  .wb-social-icons-list { justify-content: flex-start; }
.wb-social-icons--right .wb-social-icons-list { justify-content: flex-end; }
.wb-social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    color: var(--wb-primary);
    background: rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, background 0.15s, color 0.15s;
    text-decoration: none;
}
.wb-social-icon:hover { transform: translateY(-2px); background: var(--wb-primary); color: #fff; }
.wb-social-icon svg { width: 60%; height: 60%; }
.wb-social-icons--sm .wb-social-icon { width: 36px; height: 36px; }
.wb-social-icons--lg .wb-social-icon { width: 64px; height: 64px; }

/* Team Grid - layout variants (admin/AI-driven) */
.wb-team-grid--align-center .wb-team-photo,
.wb-team-grid--align-center .wb-team-avatar { display: block; margin-left: auto; margin-right: auto; }
.wb-team-grid--align-right  .wb-team-photo,
.wb-team-grid--align-right  .wb-team-avatar { display: block; margin-left: auto; margin-right: 0; }
.wb-team-grid--shape-square  .wb-team-photo,
.wb-team-grid--shape-square  .wb-team-avatar { border-radius: 0; }
.wb-team-grid--shape-rounded .wb-team-photo,
.wb-team-grid--shape-rounded .wb-team-avatar { border-radius: 12px; }
.wb-team-grid--size-sm .wb-team-photo,
.wb-team-grid--size-sm .wb-team-avatar { width: 72px;  height: 72px;  }
.wb-team-grid--size-lg .wb-team-photo,
.wb-team-grid--size-lg .wb-team-avatar { width: 140px; height: 140px; }
/* Border + contact-layout knobs (client feedback, July 2026) */
.wb-team-grid--no-card-border .wb-team-card { border: none; background: transparent; padding-left: 0; padding-right: 0; }
.wb-team-grid--photo-border .wb-team-photo,
.wb-team-grid--photo-border .wb-team-avatar { border: 3px solid var(--wb-primary); }
.wb-team-grid--contact-stacked .wb-team-contact { flex-direction: column; align-items: center; gap: 0.3rem; }
.wb-section-heading { font-size: 1.75rem; margin-bottom: 1.5rem; }
.wb-section-subtitle { font-size: 1rem; opacity: 0.7; margin-top: -1rem; margin-bottom: 1.5rem; }

/* Social Share */
.wb-social-share { margin-top: 1rem; }
.wb-social-share-links { display: flex; flex-direction: column; gap: 0.5rem; }
.wb-social-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; text-decoration: none; color: #fff; transition: opacity 0.15s; }
.wb-social-btn:hover { opacity: 0.85; }
.wb-social-btn--facebook { background: #1877f2; }
.wb-social-btn--linkedin { background: #0a66c2; }
.wb-social-btn--x { background: #000; }
.wb-social-btn--email { background: #6b7280; }

/* ======================== */
/* CTA Section              */
/* ======================== */
.wb-cta {
    background: var(--wb-secondary);
    color: #fff;
    text-align: center;
}

.wb-cta h2 { margin-bottom: 0.5rem; }
.wb-cta p { opacity: 0.9; margin-bottom: 1.5rem; }
/* Block-level background override (colour and/or image applied via inline style).
   The inline style wins over the .wb-cta default; this just guarantees the image
   covers the band and the copy keeps a little breathing room. */
.wb-cta--custom-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Article list pager (Newer / Older) */
.wb-article-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.wb-article-pager-page { color: #6b7280; font-size: 0.9rem; }

/* Optional per-column button in the Columns / Grid block */
.wb-grid-col-btn { display: inline-block; margin-top: 0.75rem; }

/* ======================== */
/* Forms                    */
/* ======================== */
.wb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.wb-form-group--full { grid-column: 1 / -1; }
.wb-form-group label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-size: 0.9rem; }
.wb-form-group input,
.wb-form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}
.wb-form-group input:focus,
.wb-form-group textarea:focus { outline: none; border-color: var(--wb-primary); box-shadow: 0 0 0 3px rgba(248,141,47,0.15); }

/* ======================== */
/* Footer                   */
/* ======================== */
.wb-footer {
    background: #1a1a2e;
    color: #d1d5db;
    padding: 3rem 0 1.5rem;
    margin-top: 2rem;
}

.wb-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.wb-footer-brand strong { color: #fff; font-size: 1.1rem; }
.wb-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.wb-footer-links a { color: #9ca3af; font-size: 0.9rem; }
.wb-footer-links a:hover { color: #fff; }
.wb-footer-bottom { border-top: 1px solid #374151; padding-top: 1.5rem; display: flex; justify-content: space-between; font-size: 0.85rem; }
.wb-footer-powered a { color: var(--wb-primary); }

/* ======================== */
/* Articles                 */
/* ======================== */
.wb-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.wb-article-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.wb-article-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-article-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-article-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .wb-article-grid--cols-3,
    .wb-article-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .wb-article-grid--cols-2,
    .wb-article-grid--cols-3,
    .wb-article-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.wb-article-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.wb-article-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.wb-article-card-image { aspect-ratio: 16/9; overflow: hidden; background: #f3f4f6; }
.wb-article-card-image img { width: 100%; height: 100%; object-fit: cover; }
.wb-article-card-body { padding: 1.25rem; }
.wb-article-card-body h3 { font-size: 1.1rem; margin: 0.25rem 0 0.5rem; }
.wb-article-card-body p { color: #6b7280; font-size: 0.9rem; margin: 0 0 0.5rem; }
.wb-article-card-body time { color: #9ca3af; font-size: 0.8rem; }
.wb-article-category { display: inline-block; background: var(--wb-primary); color: #fff; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.wb-article-hero-image { border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; max-height: 400px; }
.wb-article-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.wb-article-meta { color: #6b7280; margin-bottom: 2rem; }
.wb-article-body { line-height: 1.8; }
.wb-article-body h2 { margin-top: 2rem; }
.wb-article-body img { border-radius: 8px; margin: 1.5rem 0; }

/* ======================== */
/* Alerts                   */
/* ======================== */
.wb-alert { padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.9rem; }
.wb-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wb-alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ======================== */
/* Video Block               */
/* ======================== */
.wb-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.wb-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ======================== */
/* Gallery Block             */
/* ======================== */
.wb-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;
}
.wb-gallery-item { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; }
.wb-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.wb-gallery-item:hover img { transform: scale(1.05); }

/* Slideshow block (fade carousel with arrows + dots) */
.wb-slideshow-heading { margin-bottom: 1rem; }
.wb-slideshow {
    position: relative; border-radius: 8px; overflow: hidden;
    background: #f3f4f6; aspect-ratio: 16/9;
}
.wb-slideshow-track { position: absolute; inset: 0; }
.wb-slideshow-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
}
.wb-slideshow-slide--active { opacity: 1; }
.wb-slideshow-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.75rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; transition: background 0.2s;
}
.wb-slideshow-nav:hover { background: rgba(0,0,0,0.75); }
.wb-slideshow-nav--prev { left: 1rem; }
.wb-slideshow-nav--next { right: 1rem; }
.wb-slideshow-dots {
    position: absolute; bottom: 1rem; left: 0; right: 0;
    display: flex; gap: 0.5rem; justify-content: center; z-index: 2;
}
.wb-slideshow-dot {
    width: 10px; height: 10px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.55); cursor: pointer; padding: 0;
    transition: background 0.2s;
}
.wb-slideshow-dot--active { background: #fff; }

/* PDF flipbook block */
.wb-flipbook-heading { margin-bottom: 1rem; }
.wb-flipbook { position: relative; }
.wb-flipbook-status {
    text-align: center; padding: 2rem; color: #6b7280; font-size: 0.95rem;
}
.wb-flipbook-mount {
    margin: 0 auto;
    max-width: 1100px;
    min-height: 200px;
}
.wb-flipbook-mount .stf__parent { margin: 0 auto; }
.wb-flipbook-page {
    background: #fff;
}
.wb-flipbook-page img { width: 100%; height: 100%; display: block; }
.wb-flipbook-iframe {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 6px;
    min-height: 60vh;
}
.wb-flipbook-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 1rem;
}
.wb-flipbook-btn {
    background: var(--wb-primary); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.75rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s;
}
.wb-flipbook-btn:hover { opacity: 0.85; }
.wb-flipbook-counter { font-size: 0.9rem; color: #4b5563; min-width: 60px; text-align: center; }

/* ======================== */
/* Stats Bar                 */
/* ======================== */
.wb-stats-bar { background: var(--wb-secondary); color: #fff; }
.wb-stats-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; text-align: center; }
.wb-stat-item { min-width: 120px; }
.wb-stat-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; }
.wb-stat-label { display: block; font-size: 0.85rem; opacity: 0.8; margin-top: 0.25rem; }

/* ======================== */
/* Category Grid             */
/* ======================== */
.wb-category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.wb-category-card {
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s;
    text-align: center;
}
.wb-category-card:hover { border-color: var(--wb-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.wb-category-card h3 { margin: 0; font-size: 1rem; }

/* ======================== */
/* Map Block                 */
/* ======================== */
.wb-map-embed { border-radius: 8px; overflow: hidden; }
.wb-map-embed iframe { display: block; }

/* ======================== */
/* Property Search           */
/* ======================== */
.wb-search-form {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.wb-search-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}
.wb-search-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #374151;
}
.wb-search-field input,
.wb-search-field select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}
.wb-search-field input:focus,
.wb-search-field select:focus {
    outline: none;
    border-color: var(--wb-primary);
    box-shadow: 0 0 0 3px rgba(248,141,47,0.15);
}
/* The results count is a thin bar between the search form and the grid, not a
   section of its own: the default section padding on it and on its neighbours left
   ~6rem of white space above and below one line of text. Sets the spacing vars on
   the elements (the layout sets them site-wide on :root), so a block's own padding
   setting - written inline on the section - still wins. */
.wb-section.wb-property-search-summary { --wb-sec-pad-top: 0; --wb-sec-pad-bottom: 0; }
.wb-section.wb-property-search-summary .wb-search-results-info { margin-bottom: 0; }
.wb-section:has(+ .wb-property-search-summary) { --wb-sec-pad-bottom: 1.25rem; }
.wb-property-search-summary + .wb-section { --wb-sec-pad-top: 1rem; }

.wb-search-results-info { margin-bottom: 0; }
.wb-section:has(+ .wb-property-search-summary) { padding-bottom: var(--wb-sec-pad-bottom, 1rem); }
.wb-property-search-summary + .wb-section { padding-top: var(--wb-sec-pad-top, 1rem); }

.wb-search-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}
.wb-pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 2rem;
}
/* The results list is continuous now, so this nav holds a single "Show more"
   button rather than a row of page numbers. Let a .wb-btn inside it look like a
   button instead of inheriting the square page-number box below. */
.wb-pagination .wb-btn {
    min-width: 0;
    height: auto;
    border: none;
}
.wb-pagination a:not(.wb-btn),
.wb-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #374151;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.wb-pagination a:hover {
    border-color: var(--wb-primary);
    background: rgba(248,141,47,0.05);
}
.wb-pagination .wb-pagination-active {
    background: var(--wb-primary);
    color: #fff;
    border-color: var(--wb-primary);
}

/* ======================== */
/* Responsive               */
/* ======================== */
@media (max-width: 768px) {
    .wb-nav { display: none; }
    .wb-nav.open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1rem; }
    .wb-nav.open .wb-nav-list { flex-direction: column; gap: 0; }
    .wb-nav.open .wb-nav-item a { display: block; padding: 0.75rem 0; }
    .wb-nav-toggle { display: flex; }

    .wb-hero h1 { font-size: 2rem; }
    .wb-search-fields { grid-template-columns: 1fr; }
    .wb-property-grid { grid-template-columns: 1fr; }
    .wb-article-grid { grid-template-columns: 1fr; }
    .wb-property-detail-grid { grid-template-columns: 1fr; }
    .wb-property-header { grid-template-columns: 1fr; }
    .wb-property-price-badge { text-align: left; }
    .wb-gallery-thumb { width: 60px; height: 45px; }
    .wb-form-grid { grid-template-columns: 1fr; }
    .wb-footer-grid { grid-template-columns: 1fr; }
    .wb-footer-bottom { flex-direction: column; gap: 0.5rem; }
    .wb-grid-row { grid-template-columns: 1fr; }
    .wb-grid-col { grid-column: span 1 !important; }
}

/* Skip link: first focusable thing on every public page, visible only on focus. */
.wb-skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 1000;
    background: var(--wb-secondary, #1A4179); color: #fff;
    padding: 0.75rem 1.25rem; border-radius: 6px; font-weight: 600; text-decoration: none;
}
.wb-skip-link:focus { top: 1rem; outline: 3px solid var(--wb-accent, #E42289); outline-offset: 2px; }
main:focus { outline: none; }

/* ======================== */
/* Scroll-triggered animations */
/* ======================== */
.wb-anim {
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

/* Pre-reveal hidden state applies ONLY after site.js adds .wb-anim-ready to
   <html>. If site.js is missing, stale-cached, blocked, or errors before it
   runs, the class is never added and the content stays fully visible - so the
   animation can never leave the page blank. (Reveal-on-scroll used to hide
   everything up front, which meant a stale cached site.js = permanently blank
   home page for the client.) */
.wb-anim-ready .wb-anim               { opacity: 0; }
.wb-anim-ready .wb-anim--fade-up      { transform: translateY(24px); }
.wb-anim-ready .wb-anim--slide-left   { transform: translateX(-40px); }
.wb-anim-ready .wb-anim--slide-right  { transform: translateX(40px); }
.wb-anim-ready .wb-anim--zoom-in      { transform: scale(0.94); }
.wb-anim-ready .wb-anim.wb-anim--in   { opacity: 1; transform: none; }

/* If the user has reduced-motion preference, skip animation entirely */
@media (prefers-reduced-motion: reduce) {
    .wb-anim-ready .wb-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ======================== */
/* Grid block (responsive)  */
/* ======================== */
.wb-grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--wb-grid-gap, 1.5rem); /* per-block gap override set inline by the Grid editor */
    align-items: start;
}

.wb-grid-col {
    grid-column: span var(--wb-col-span, 6);
    min-width: 0; /* allow children (e.g. images) to shrink rather than overflow */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* A column with its own background gets padding + rounded corners so the fill
   reads as a card rather than a bare colour bleed. Applied only when the editor
   set a per-column background (class added in Grid.cshtml). */
.wb-grid-col--filled {
    padding: 1.5rem;
    border-radius: var(--wb-radius, 8px);
}

/* Images/media inside a grid column must scale down with the column, otherwise
   the intrinsic image width pushes the column wider than its grid slot and
   squeezes adjacent columns to one-word-per-line on narrow viewports
   (reported by Sidney Phillips, May 2026). */
.wb-grid-col img,
.wb-grid-col video,
.wb-grid-col iframe { max-width: 100%; height: auto; }

.wb-grid-col > *:first-child { margin-top: 0; }
.wb-grid-col > *:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
    /* Tablet: relax to a 2-up if span is small, otherwise keep configured span */
    .wb-grid-row { gap: 1rem; }
}

/* Below tablet, force every column to stack full-width. Previously this lived
   inside the generic 768px block at the top of the file, but the configured
   spans can still bite at narrow widths if a column's intrinsic content is
   wider than its grid slot — so promote to its own rule with !important and
   widen the breakpoint a touch so it also catches small tablets in portrait. */
@media (max-width: 820px) {
    .wb-grid-row { grid-template-columns: 1fr !important; }
    .wb-grid-col { grid-column: 1 / -1 !important; }
}

/* ============================= */
/* Media + Text block (hybrid)   */
/* ============================= */
.wb-media-text-inner {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}
.wb-media-text--right .wb-media-text-inner { flex-direction: row-reverse; }
.wb-media-text-media { min-width: 0; }
.wb-media-text-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--wb-radius, 8px);
}
.wb-media-text-body { flex: 1 1 0; min-width: 0; }
.wb-media-text-body > *:first-child { margin-top: 0; }
.wb-media-text-body h2 { margin-bottom: 1rem; }
.wb-media-text-btn { display: inline-block; margin-top: 1.25rem; }

@media (max-width: 820px) {
    /* Stack image above text on narrow screens regardless of configured position/width. */
    .wb-media-text-inner,
    .wb-media-text--right .wb-media-text-inner { flex-direction: column; gap: 1.5rem; }
    .wb-media-text-media { flex: 0 0 auto !important; width: 100%; }
}

/* ========================== */
/* Property-search radius map */
/* ========================== */
.wb-psr-map-wrapper { position: relative; }

.wb-psr-map-radius-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--wb-surface, #ffffff);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 14px 16px;
    width: 240px;
    z-index: 500;
    font-size: 0.9rem;
}

.wb-psr-map-radius-header {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--wb-text, #111827);
}

.wb-psr-map-radius-hint {
    margin: 0 0 10px 0;
    font-size: 0.78rem;
    color: var(--wb-text-muted, #6b7280);
    line-height: 1.4;
}

.wb-psr-map-radius-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.wb-psr-map-radius-row > span {
    color: var(--wb-text, #111827);
    font-weight: 500;
}

.wb-psr-map-radius-select {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
}

.wb-psr-map-radius-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wb-psr-map-search-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.wb-psr-map-search-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.wb-psr-map-clear {
    font-size: 0.8rem;
    color: var(--wb-text-muted, #6b7280);
}

@media (max-width: 640px) {
    /* Move panel below the map on small screens so it doesn't cover the map */
    .wb-psr-map-radius-panel {
        position: static;
        margin-top: 8px;
        width: 100%;
    }
}

/* ============================================================ */
/* Radio Blocks — 4themusic-inspired design system (D1 re-skin) */
/* ALL colours via var(--wb-primary/secondary/accent).           */
/* Layout toggles via var(--wb-radius/density) from SiteConfig.  */
/* ============================================================ */

/* Layout-option CSS variables (set from _RadioLayout or _Layout) */
:root {
    --wb-radius: var(--wb-card-radius, 8px);
    --wb-section-gap: var(--wb-density-gap, 3rem);
}

/* Shared radio section typography */
.wb-radio-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

/* Dark-section base (used by events, spotify, chart, platform-links, on-air) */
.wb-dark-section {
    background: var(--wb-secondary);
    color: #fff;
}
.wb-dark-section .wb-section-heading,
.wb-dark-section .wb-radio-section-title { color: #fff; }
.wb-dark-section .wb-section-subtitle { color: rgba(255,255,255,0.65); margin-bottom: 2rem; }

/* Radio card base */
.wb-radio-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
}
.wb-radio-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Radio button styles */
.wb-btn--radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid var(--wb-primary);
    background: transparent;
    color: var(--wb-primary);
    font-family: var(--wb-font-body);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--wb-radius);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.wb-btn--radio:hover {
    background: var(--wb-primary);
    color: #fff;
    text-decoration: none;
}
.wb-btn--radio-filled {
    background: var(--wb-primary);
    color: #fff;
}
.wb-btn--radio-filled:hover { opacity: 0.9; }
.wb-btn--radio-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.wb-btn--radio-ghost {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
}
.wb-btn--radio-ghost:hover {
    border-color: var(--wb-primary);
    background: var(--wb-primary);
    color: #fff;
}

/* Tag / pill */
.wb-radio-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.08);
    border-radius: var(--wb-radius);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--wb-accent, var(--wb-primary));
    transition: all 0.2s;
}

/* Live badge */
.wb-live-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #22c55e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--wb-radius);
}

/* ======================== */
/* On Air Now               */
/* ======================== */
.wb-on-air-now { }

/* Strip variant (default — 4-card horizontal) */
.wb-on-air-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.wb-on-air-strip .wb-on-air-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}
.wb-on-air-strip .wb-on-air-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.wb-on-air-strip .wb-on-air-card--live {
    border: 2px solid var(--wb-primary);
    box-shadow: 0 0 20px rgba(255,255,255,0.08);
}
.wb-on-air-card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.wb-on-air-card-body {
    padding: 0.6rem 0.75rem;
}
.wb-on-air-card-time {
    font-size: 0.75rem;
    color: var(--wb-accent, var(--wb-primary));
    font-weight: 700;
    display: block;
    margin-bottom: 0.15rem;
}
.wb-on-air-card-dj {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
}
.wb-on-air-card-show {
    font-size: 0.75rem;
    opacity: 0.65;
    margin: 0;
}

/* Single-card variant */
.wb-on-air-card-single {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    position: relative;
    overflow: hidden;
}
.wb-on-air-pulse {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: wb-pulse 2s ease-in-out infinite;
}
@keyframes wb-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.wb-on-air-photo { flex-shrink: 0; }
.wb-on-air-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.wb-on-air-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.wb-on-air-info { flex: 1; }
.wb-on-air-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ef4444;
    text-transform: uppercase;
}
.wb-on-air-dj { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700; }
.wb-on-air-show { margin: 0.25rem 0 0; opacity: 0.7; font-size: 0.95rem; }
.wb-on-air-listeners { margin: 0.5rem 0 0; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; gap: 0.4rem; }
.wb-on-air-listener-dot {
    width: 6px; height: 6px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}
.wb-on-air-listen { flex-shrink: 0; }

/* Minimal variant */
.wb-on-air-minimal {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 0.9rem;
}
.wb-on-air-minimal .wb-on-air-label { font-size: 0.7rem; }
.wb-on-air-minimal .wb-on-air-dj { font-size: 1rem; margin: 0; }

@media (max-width: 768px) {
    .wb-on-air-strip { grid-template-columns: repeat(2, 1fr); }
    .wb-on-air-card-single { flex-direction: column; text-align: center; }
    .wb-on-air-listen { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .wb-on-air-strip { grid-template-columns: 1fr; }
}

/* ======================== */
/* DJ Schedule              */
/* ======================== */

/* Cards-4col variant (default) */
.wb-schedule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.wb-schedule-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
}
.wb-schedule-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.wb-schedule-card--live {
    border-color: var(--wb-primary);
}
.wb-schedule-card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.wb-schedule-card-body {
    padding: 0.6rem 0.75rem;
}
.wb-schedule-card-time {
    font-size: 0.75rem;
    color: var(--wb-accent, var(--wb-primary));
    font-weight: 700;
}
.wb-schedule-card-dj {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0.15rem 0 0;
}
.wb-schedule-card-show {
    font-size: 0.75rem;
    opacity: 0.65;
    margin: 0.15rem 0 0;
}

/* Legacy 7-day grid (timetable variant) */
.wb-schedule-grid--week {
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}
.wb-schedule-day {
    background: rgba(255,255,255,0.04);
    border-radius: var(--wb-radius);
    padding: 1rem;
    min-height: 120px;
}
.wb-schedule-day--today {
    background: var(--wb-primary);
    color: #fff;
}
.wb-schedule-day-name {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wb-schedule-live-badge {
    font-size: 0.6rem;
    background: #ef4444;
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
}
.wb-schedule-slot {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wb-schedule-slot:last-child { border-bottom: none; }
.wb-schedule-time { font-size: 0.75rem; color: var(--wb-accent, var(--wb-primary)); font-weight: 700; }
.wb-schedule-show { font-size: 0.8rem; font-weight: 600; }
.wb-schedule-dj { font-size: 0.75rem; opacity: 0.6; }
.wb-schedule-slots { font-size: 0.85rem; }
.wb-schedule-empty { margin: 0; opacity: 0.5; font-style: italic; font-size: 0.8rem; }
.wb-schedule-note { text-align: center; color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-top: 1rem; }

/* List variant */
.wb-schedule-list { }
.wb-schedule-list-day { margin-bottom: 1.5rem; }
.wb-schedule-list-day-name {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 0.5rem;
    color: var(--wb-accent, var(--wb-primary));
}
.wb-schedule-list-slot {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.wb-schedule-list-slot:hover { background: rgba(255,255,255,0.04); }

/* Day tabs for schedule */
.wb-schedule-tabs {
    display: flex; gap: 0.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; justify-content: center;
}
.wb-schedule-tab {
    padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--wb-radius); background: transparent;
    color: rgba(255,255,255,0.65); cursor: pointer; transition: all 0.2s;
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
}
.wb-schedule-tab:hover { border-color: var(--wb-primary); color: #fff; }
.wb-schedule-tab--active { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }

@media (max-width: 900px) {
    .wb-schedule-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .wb-schedule-grid--week { grid-template-columns: 1fr; }
    .wb-schedule-day { min-height: auto; }
}
@media (max-width: 500px) {
    .wb-schedule-grid { grid-template-columns: 1fr; }
}

/* ======================== */
/* Mix Gallery              */
/* ======================== */
.wb-mix-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.wb-mix-filter {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    transition: all 0.2s;
}
.wb-mix-filter:hover,
.wb-mix-filter--active {
    background: var(--wb-primary);
    color: #fff;
    border-color: var(--wb-primary);
}

/* Grid-cover variant (default) */
.wb-mix-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.wb-mix-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
}
.wb-mix-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}
.wb-mix-card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.wb-mix-card-body {
    padding: 0.75rem;
}
.wb-mix-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wb-mix-card-dj {
    font-size: 0.7rem;
    opacity: 0.65;
    margin: 0 0 0.35rem;
}
.wb-mix-card-genre {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(255,255,255,0.08);
    border-radius: var(--wb-radius);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--wb-accent, var(--wb-primary));
    margin-right: 0.25rem;
}
.wb-mix-card-duration {
    font-size: 0.65rem;
    opacity: 0.5;
}
.wb-mix-card-stats {
    display: flex; gap: 0.75rem; font-size: 0.65rem; opacity: 0.5;
    margin-top: 0.35rem;
}
.wb-mix-card-stats i { margin-right: 0.15rem; }
.wb-mix-card-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wb-primary);
    text-decoration: none;
}
.wb-mix-card-link:hover { color: #fff; text-decoration: none; }
.wb-mix-empty { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,0.5); padding: 2rem 0; }

/* List-detailed variant */
.wb-mix-list { }
.wb-mix-list-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.wb-mix-list-item:hover { background: rgba(255,255,255,0.04); }
.wb-mix-list-cover { width: 64px; height: 64px; border-radius: var(--wb-radius); overflow: hidden; flex-shrink: 0; }
.wb-mix-list-cover img { width: 100%; height: 100%; object-fit: cover; }
.wb-mix-list-info { flex: 1; min-width: 0; }

/* Carousel variant */
.wb-mix-carousel {
    display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.wb-mix-carousel .wb-mix-card {
    flex: 0 0 220px; scroll-snap-align: start;
}

@media (max-width: 900px) {
    .wb-mix-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .wb-mix-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wb-mix-cards { grid-template-columns: 1fr; }
}

/* ======================== */
/* DJ Roster                */
/* ======================== */

/* Grid-square variant (default) */
.wb-dj-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.wb-dj-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
    text-align: center;
}
.wb-dj-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}
.wb-dj-card-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.wb-dj-card-avatar {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.wb-dj-card-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.75rem 0.3rem;
    margin: 0;
}
.wb-dj-card-link {
    display: block;
    padding: 0.25rem 0.75rem 0.6rem;
    font-size: 0.75rem;
    color: var(--wb-primary);
    text-decoration: none;
    font-weight: 600;
}
.wb-dj-card-link:hover { color: #fff; text-decoration: none; }

/* Circle variant */
.wb-dj-cards--circle .wb-dj-card {
    background: transparent; border: none; text-align: center;
}
.wb-dj-cards--circle .wb-dj-card:hover { background: transparent; transform: none; }
.wb-dj-cards--circle .wb-dj-card-photo {
    border-radius: 50%;
    width: 160px; height: 160px; margin: 0 auto;
    aspect-ratio: auto;
    transition: transform 0.2s;
}
.wb-dj-cards--circle .wb-dj-card:hover .wb-dj-card-photo { transform: scale(1.05); }
.wb-dj-cards--circle .wb-dj-card-avatar {
    border-radius: 50%; width: 160px; height: 160px; margin: 0 auto;
    aspect-ratio: auto;
}

/* Horizontal-list variant */
.wb-dj-list { }
.wb-dj-list-item {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.wb-dj-list-item:hover { background: rgba(255,255,255,0.04); }
.wb-dj-list-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wb-dj-list-info { flex: 1; }
.wb-dj-list-name { font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; }
.wb-dj-list-bio { font-size: 0.85rem; opacity: 0.65; margin: 0; }

.wb-dj-empty { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,0.5); padding: 2rem 0; }

@media (max-width: 900px) {
    .wb-dj-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .wb-dj-cards { grid-template-columns: repeat(2, 1fr); }
    .wb-dj-cards--circle .wb-dj-card-photo,
    .wb-dj-cards--circle .wb-dj-card-avatar { width: 120px; height: 120px; }
}
@media (max-width: 480px) {
    .wb-dj-cards { grid-template-columns: 1fr; }
}

/* ======================== */
/* DJ Bio                   */
/* ======================== */
.wb-dj-bio-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.wb-dj-bio-photo {
    width: 200px;
    height: 200px;
    border-radius: var(--wb-radius);
    object-fit: cover;
    flex-shrink: 0;
}
.wb-dj-bio-avatar {
    width: 200px;
    height: 200px;
    border-radius: var(--wb-radius);
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    flex-shrink: 0;
}
.wb-dj-bio-intro { flex: 1; }
.wb-dj-bio-intro h2 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 800; }
.wb-dj-bio-socials { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.wb-dj-bio-social-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9999px;
    font-size: 0.8rem;
    text-decoration: none;
    color: rgba(255,255,255,0.8);
    transition: all 0.2s;
}
.wb-dj-bio-social-link:hover {
    background: var(--wb-primary);
    border-color: var(--wb-primary);
    color: #fff;
    text-decoration: none;
}
.wb-dj-bio-body { margin-bottom: 2rem; line-height: 1.8; }
.wb-dj-bio-schedule,
.wb-dj-bio-mixes { margin-top: 2rem; }
.wb-dj-bio-schedule h3,
.wb-dj-bio-mixes h3 {
    font-size: 1rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 1rem;
}
.wb-dj-bio-schedule-list,
.wb-dj-bio-mix-list { list-style: none; padding: 0; margin: 0; }
.wb-dj-bio-schedule-list li,
.wb-dj-bio-mix-list li {
    padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.9rem;
}
@media (max-width: 640px) {
    .wb-dj-bio-header { flex-direction: column; align-items: center; text-align: center; }
    .wb-dj-bio-photo, .wb-dj-bio-avatar { width: 150px; height: 150px; }
}

/* ======================== */
/* Listen Live Player       */
/* ======================== */
.wb-listen-live-player {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
}
.wb-listen-live-artwork {
    width: 80px;
    height: 80px;
    border-radius: var(--wb-radius);
    object-fit: cover;
    flex-shrink: 0;
}
.wb-listen-live-info { flex: 1; }
.wb-listen-live-station { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; }
.wb-listen-live-status { margin: 0; opacity: 0.7; font-size: 0.85rem; }
.wb-listen-live-btn {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    border-radius: var(--wb-radius);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid var(--wb-primary);
    background: var(--wb-primary);
    color: #fff;
}
.wb-listen-live-btn:hover { opacity: 0.9; }
@media (max-width: 640px) {
    .wb-listen-live-player { flex-direction: column; text-align: center; }
}

/* ======================== */
/* Request Line             */
/* ======================== */
.wb-request-line { }
.wb-request-form { }
.wb-request-form .wb-form-optional { font-weight: 400; opacity: 0.6; font-size: 0.85em; }
.wb-request-form label { color: rgba(255,255,255,0.8); }
.wb-request-form input,
.wb-request-form textarea {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: var(--wb-radius);
}
.wb-request-form input:focus,
.wb-request-form textarea:focus {
    outline: none;
    border-color: var(--wb-primary);
}
.wb-request-form input::placeholder,
.wb-request-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.wb-request-success { color: #22c55e; font-weight: 600; margin-top: 1rem; }

/* ======================== */
/* Station Chat             */
/* ======================== */
.wb-chat-container {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.wb-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}
.wb-chat-placeholder {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 2rem 0;
}
.wb-chat-input {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}
.wb-chat-input input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--wb-radius);
    font-size: 0.9rem;
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.wb-chat-input input::placeholder { color: rgba(255,255,255,0.4); }
.wb-chat-input button { flex-shrink: 0; }

/* ======================== */
/* Podcast Feed             */
/* ======================== */
.wb-podcast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.wb-podcast-header .wb-section-heading,
.wb-podcast-header .wb-radio-section-title { margin-bottom: 0; }
.wb-podcast-rss {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--wb-radius);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.2s;
}
.wb-podcast-rss:hover { background: rgba(255,255,255,0.15); text-decoration: none; }
.wb-podcast-rss svg { color: #f97316; }
.wb-podcast-episodes { }
.wb-podcast-episode {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wb-podcast-episode:last-child { border-bottom: none; }
.wb-podcast-episode-info { flex: 1; }
.wb-podcast-episode-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; }
.wb-podcast-episode-desc { font-size: 0.85rem; opacity: 0.65; margin: 0 0 0.35rem; }
.wb-podcast-episode-meta { font-size: 0.75rem; opacity: 0.5; }
.wb-podcast-episode audio { flex-shrink: 0; margin-top: 0.25rem; max-width: 280px; }
.wb-podcast-empty { text-align: center; color: rgba(255,255,255,0.5); padding: 2rem 0; }

/* ======================== */
/* Events Grid              */
/* ======================== */
.wb-events-grid { }
.wb-events-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.wb-events-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
}
.wb-events-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.wb-events-card-image { position: relative; aspect-ratio: 16/9; background: rgba(255,255,255,0.04); }
.wb-events-card-image img { width: 100%; height: 100%; object-fit: cover; }
.wb-events-card-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.25);
}
.wb-events-card-body { padding: 1.25rem; }
.wb-events-card-body h3 { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; }
.wb-events-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; }
.wb-events-date { opacity: 0.8; }
.wb-events-location {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.8rem;
}
.wb-events-location--online { background: rgba(34,197,94,0.2); color: #4ade80; }
.wb-events-location--venue { background: rgba(59,130,246,0.2); color: #60a5fa; }
.wb-events-days { margin: 0.75rem 0; padding: 0.75rem; background: rgba(255,255,255,0.04); border-radius: var(--wb-radius); font-size: 0.85rem; }
.wb-events-day-row { padding: 0.25rem 0; }
.wb-events-day-row + .wb-events-day-row { border-top: 1px solid rgba(255,255,255,0.08); }

/* Featured-hero variant */
.wb-events-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius); overflow: hidden; margin-bottom: 2rem;
}
.wb-events-hero-image { position: relative; min-height: 280px; background: rgba(255,255,255,0.04); }
.wb-events-hero-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.wb-events-hero-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.25);
}
.wb-events-hero-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.wb-events-hero-title { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 800; }

/* Compact list variant */
.wb-events-list-item {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
}
.wb-events-list-item:hover { background: rgba(255,255,255,0.04); }
.wb-events-list-item:last-child { border-bottom: none; }
.wb-events-list-date { min-width: 120px; font-size: 0.9rem; opacity: 0.8; }
.wb-events-list-info { flex: 1; }
.wb-events-list-info h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; }
@media (max-width: 768px) {
    .wb-events-hero { grid-template-columns: 1fr; }
    .wb-events-hero-image { min-height: 180px; }
    .wb-events-list-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .wb-events-list-date { min-width: auto; }
}

/* ======================== */
/* Spotify Playlist Grid    */
/* ======================== */
.wb-spotify-grid { }
.wb-spotify-cards {
    display: grid;
    gap: 1.25rem;
}
.wb-spotify-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    overflow: hidden;
    transition: all 0.2s;
}
.wb-spotify-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.wb-spotify-card-cover { position: relative; aspect-ratio: 1; background: rgba(255,255,255,0.04); }
.wb-spotify-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.wb-spotify-card-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.2);
}
.wb-spotify-card-body { padding: 1rem; }
.wb-spotify-card-title { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 600; display: block; }
.wb-spotify-card-tracks { font-size: 0.8rem; opacity: 0.6; display: block; margin-bottom: 0.75rem; }
.wb-btn--spotify { background: #1db954; color: #fff; border: none; }
.wb-btn--spotify:hover { background: #1ed760; }
@media (max-width: 768px) {
    .wb-spotify-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .wb-spotify-cards { grid-template-columns: 1fr !important; }
}

/* ======================== */
/* Weekly Chart             */
/* ======================== */
.wb-weekly-chart { }
.wb-chart-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.wb-chart-period {
    font-size: 0.8rem; padding: 0.3rem 0.8rem; font-weight: 600;
    background: rgba(255,255,255,0.1); border-radius: 9999px;
}
.wb-chart-list { display: flex; flex-direction: column; }
.wb-chart-entry {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem 1rem; border-radius: var(--wb-radius);
    transition: background 0.15s;
}
.wb-chart-entry:hover { background: rgba(255,255,255,0.06); }
.wb-chart-entry:nth-child(odd) { background: rgba(255,255,255,0.02); }
.wb-chart-entry:nth-child(odd):hover { background: rgba(255,255,255,0.06); }
.wb-chart-entry--1 {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 60%);
    border-left: 3px solid var(--wb-accent, var(--wb-primary));
}
.wb-chart-entry--2 {
    border-left: 3px solid rgba(192,192,210,0.5);
    background: linear-gradient(135deg, rgba(192,192,210,0.06), transparent 60%);
}
.wb-chart-entry--3 {
    border-left: 3px solid rgba(205,127,50,0.5);
    background: linear-gradient(135deg, rgba(205,127,50,0.06), transparent 60%);
}
.wb-chart-rank {
    min-width: 2rem; text-align: center; font-weight: 800;
    font-size: 1.1rem; opacity: 0.5;
}
.wb-chart-rank--top { opacity: 1; color: var(--wb-accent, var(--wb-primary)); font-size: 1.25rem; }
.wb-chart-cover { width: 56px; height: 56px; border-radius: var(--wb-radius); overflow: hidden; flex-shrink: 0; }
.wb-chart-cover img { width: 100%; height: 100%; object-fit: cover; }
.wb-chart-cover-placeholder {
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.2);
}
.wb-chart-info { flex: 1; min-width: 0; }
.wb-chart-title { display: block; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-chart-dj { display: block; font-size: 0.8rem; opacity: 0.6; }
.wb-chart-stats { display: flex; gap: 1rem; flex-shrink: 0; }
.wb-chart-stat {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; opacity: 0.6;
}
@media (max-width: 640px) {
    .wb-chart-entry { gap: 0.5rem; padding: 0.6rem 0.5rem; }
    .wb-chart-cover { width: 40px; height: 40px; }
    .wb-chart-stats { flex-direction: column; gap: 0.1rem; }
}

/* ======================== */
/* Platform Links Grid      */
/* ======================== */
.wb-platform-links { }
.wb-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.wb-platform-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--wb-radius);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s;
}
.wb-platform-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.wb-platform-icon {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border-radius: 50%;
    color: var(--wb-primary);
}
.wb-platform-label { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 700; }
.wb-platform-desc { font-size: 0.85rem; opacity: 0.6; margin: 0 0 1rem; }
.wb-btn--outline {
    display: inline-block;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.5rem 1rem;
    border-radius: var(--wb-radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.2s;
}
.wb-btn--outline:hover {
    background: var(--wb-primary); border-color: var(--wb-primary);
    color: #fff; text-decoration: none;
}

/* Minimal icon-row variant */
.wb-platform-grid--minimal {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}
.wb-platform-grid--minimal .wb-platform-card {
    padding: 1rem;
}
.wb-platform-grid--minimal .wb-platform-desc { display: none; }
.wb-platform-grid--minimal .wb-platform-label { font-size: 0.85rem; }

@media (max-width: 768px) {
    .wb-platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wb-platform-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* Radio Layout — sticky header, persistent player bar, footer   */
/* ============================================================ */

.wb-radio-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wb-secondary);
    color: #fff;
}
.wb-radio-body a { color: rgba(255,255,255,0.65); }
.wb-radio-body a:hover { color: #fff; text-decoration: none; }
.wb-radio-body .wb-section-heading { color: #fff; }
.wb-radio-body .wb-section-subtitle { color: rgba(255,255,255,0.65); }

/* Radio header */
.wb-radio-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--wb-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wb-radio-header-inner {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.wb-radio-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.wb-radio-logo img { height: var(--wb-logo-height, 40px); width: auto; }
.wb-radio-logo-text {
    font-size: 1.4rem; font-weight: 800; letter-spacing: 0.05em; color: #fff;
}
.wb-radio-nav {
    display: flex; align-items: center; gap: 0.25rem; flex: 1;
    list-style: none; margin: 0; padding: 0;
}
.wb-radio-nav a {
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.75rem;
    border-radius: var(--wb-radius);
    transition: all 0.2s;
    text-decoration: none;
}
.wb-radio-nav a:hover,
.wb-radio-nav a.active { color: #fff; background: rgba(255,255,255,0.05); }
.wb-radio-header-actions {
    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.wb-radio-menu-toggle {
    display: none;
    background: none; border: none;
    color: rgba(255,255,255,0.65);
    font-size: 1.25rem; cursor: pointer;
    transition: color 0.2s;
}
.wb-radio-menu-toggle:hover { color: var(--wb-primary); }

/* Radio main content */
.wb-radio-main {
    flex: 1;
    padding-bottom: 80px;
    transition: opacity .15s ease;
}
.wb-radio-main.wb-content--loading { opacity: 0.45; }
.wb-radio-nav a.wb-nav-active { color: var(--wb-primary); }


/* Persistent player bar */
.wb-radio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0 1.5rem;
    height: 64px;
}
.wb-radio-player-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
}
.wb-player-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--wb-primary);
    background: transparent;
    color: var(--wb-primary);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.wb-player-btn:hover { background: var(--wb-primary); color: #fff; }
.wb-player-volume {
    width: 80px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.wb-player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--wb-primary);
    cursor: pointer;
}
.wb-player-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.wb-player-live-dot--active {
    background: #ef4444;
    animation: wb-pulse-dot 1.5s infinite;
}
@keyframes wb-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.wb-player-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.8);
}
.wb-player-sep {
    color: rgba(255,255,255,0.2); font-size: 0.85rem;
}
.wb-player-now {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.75rem;
}
.wb-player-now-time {
    color: var(--wb-accent, var(--wb-primary));
    font-weight: 700;
}
.wb-player-now-dj {
    font-weight: 600;
}
.wb-player-marquee {
    display: flex; align-items: center; gap: 0.5rem;
    overflow: hidden; min-width: 0; max-width: 40%; margin-left: auto;
}
.wb-player-marquee-label {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    color: rgba(255,255,255,0.5); white-space: nowrap;
}
.wb-player-marquee-scroll {
    overflow: hidden; flex: 1; min-width: 0;
}
.wb-player-marquee-content {
    display: flex; white-space: nowrap;
    animation: wb-marquee 40s linear infinite; gap: 0;
}
.wb-player-marquee-scroll:hover .wb-player-marquee-content {
    animation-play-state: paused;
}
.wb-marquee-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.65rem; padding-right: 2rem;
}
.wb-marquee-time { color: var(--wb-accent, var(--wb-primary)); font-weight: 700; }
.wb-marquee-dj { font-weight: 600; }
.wb-marquee-sep { color: rgba(255,255,255,0.2); margin: 0 0.5rem; }
@keyframes wb-marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Radio footer */
.wb-radio-footer {
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 3rem 1.5rem 1rem;
}
.wb-radio-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.wb-radio-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem; margin-bottom: 2rem;
}
.wb-radio-footer-tagline { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.wb-radio-footer-desc { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.wb-radio-footer-links {
    display: flex; flex-direction: column; gap: 0.5rem;
    list-style: none; padding: 0; margin: 0;
}
.wb-radio-footer-links a {
    font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: color 0.2s;
}
.wb-radio-footer-links a:hover { color: #fff; }
.wb-radio-footer-social {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.wb-radio-footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); font-size: 0.85rem;
    transition: all 0.2s;
}
.wb-radio-footer-social a:hover {
    border-color: var(--wb-primary); color: var(--wb-primary);
}
.wb-radio-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem;
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: rgba(255,255,255,0.4);
}
.wb-radio-footer-powered a { color: var(--wb-primary); }

@media (max-width: 768px) {
    .wb-radio-nav { display: none; }
    .wb-radio-nav.open {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--wb-secondary);
        padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .wb-radio-menu-toggle { display: block; }
    .wb-radio-footer-grid { grid-template-columns: 1fr; }
    .wb-radio-footer-bottom { flex-direction: column; gap: 0.5rem; }
    .wb-player-now { display: none; }
    .wb-player-marquee { display: none; }
    .wb-radio-header-actions .wb-radio-user { display: none; }
}

/* ----- Multi-column page layouts -----------------------------------------
   The wb-layout-* class on .wb-page is set from WB_Pages.LayoutTemplate.
   On multi-column layouts the page renders two regions (wb-region-main +
   wb-region-sidebar) — full-width pages skip the grid entirely so existing
   single-column markup still flows edge-to-edge inside its own .wb-section.
   --------------------------------------------------------------------- */

.wb-page.wb-layout-sidebar-right,
.wb-page.wb-layout-sidebar-left,
.wb-page.wb-layout-two-column {
    display: grid;
    gap: 2rem;
    max-width: var(--wb-container-max, 1280px);
    margin: 0 auto;
    padding: 2rem 1rem;
    align-items: start;
}

.wb-page.wb-layout-sidebar-right { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.wb-page.wb-layout-sidebar-left  { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.wb-page.wb-layout-two-column    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* On sidebar-left layouts, render the aside FIRST visually via grid order. */
.wb-page.wb-layout-sidebar-left .wb-region-sidebar { order: 0; }
.wb-page.wb-layout-sidebar-left .wb-region-main    { order: 1; }
.wb-page.wb-layout-sidebar-right .wb-region-main    { order: 0; }
.wb-page.wb-layout-sidebar-right .wb-region-sidebar { order: 1; }

.wb-region-main,
.wb-region-sidebar {
    min-width: 0; /* prevents grid blowout from long unbreakable content */
}

/* Sidebar regions: tighter padding inside their child sections so they read
   as sidebar widgets rather than full-bleed page sections. */
.wb-region-sidebar > .wb-section,
.wb-region-sidebar > [data-wb-animate] > .wb-section {
    padding: 1rem 0;
}
.wb-region-sidebar > .wb-section > .wb-container,
.wb-region-sidebar > [data-wb-animate] > .wb-section > .wb-container {
    padding: 0;
}

/* Stack to one column on narrow screens. */
@media (max-width: 900px) {
    .wb-page.wb-layout-sidebar-right,
    .wb-page.wb-layout-sidebar-left,
    .wb-page.wb-layout-two-column {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .wb-page.wb-layout-sidebar-left .wb-region-sidebar { order: 1; }
    .wb-page.wb-layout-sidebar-left .wb-region-main    { order: 0; }
}

/* Scroll-loading status line under the results grid. Reserves a little height so
   the sentinel has something to intersect with even when the message is empty. */
.wb-loadmore {
    min-height: 2rem;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Cookie consent banner. Shown only on a tenant that has an analytics tag
   configured - a site with nothing to consent to should not ask. */
.wb-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 760px;
    margin: 0 auto;
    background: #111827;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
    padding: 20px 22px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.wb-consent__text {
    flex: 1 1 340px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.wb-consent__text a { color: #fff; text-decoration: underline; }
.wb-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.wb-consent__btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.wb-consent__btn--accept { background: var(--wb-primary); color: #fff; }
.wb-consent__btn--decline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.wb-consent__btn--decline:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 520px) {
    .wb-consent { flex-direction: column; align-items: stretch; }
    .wb-consent__actions { justify-content: stretch; }
    .wb-consent__btn { flex: 1; }
}

/* Privacy line under a form that collects personal details. */
.wb-form-privacy {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}

/* ---- Valuation calculator block (ContentBlock/ValuationCalculator.cshtml) ----
   Brand-led: primary for headings/figure panel, accent for the progress bar and
   the selected state. Choices are real radio inputs styled as pills. */
.wb-val { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.wb-val__heading { margin: 0 0 1rem; color: var(--wb-primary); font-family: var(--wb-font-heading, inherit); line-height: 1.1; }
.wb-val__lead { margin: 0 0 1.5rem; color: var(--wb-text-muted, #444); line-height: 1.65; }
.wb-val__steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; counter-reset: wbval; }
.wb-val__steps li { counter-increment: wbval; display: flex; align-items: center; gap: 0.75rem; color: var(--wb-primary); font-weight: 500; }
.wb-val__steps li::before { content: counter(wbval); width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.wb-val__steps li.is-current { font-weight: 700; }
.wb-val__steps li.is-current::before { background: var(--wb-primary); color: #fff; border-color: var(--wb-primary); }
.wb-val__steps li.is-done::before { content: "\2713"; background: var(--wb-secondary, var(--wb-primary)); color: #fff; border-color: transparent; }
.wb-val__confidential { font-size: 0.85rem; color: var(--wb-text-muted, #555); }
.wb-val__card { background: #fff; border-radius: var(--wb-card-radius, 12px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); border-top: 4px solid var(--wb-accent, var(--wb-primary)); padding: 2rem 2.25rem; }
.wb-val__progress { height: 6px; background: #e8ece4; border-radius: 3px; overflow: hidden; margin-bottom: 1.5rem; }
.wb-val__progress span { display: block; height: 100%; background: var(--wb-primary); transition: width 0.3s ease; }
/* display:flex on steps and choices beats the hidden attribute, so every step showed at once */
.wb-val [hidden] { display: none !important; }
.wb-val__step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.wb-val__step > legend { font-family: var(--wb-font-heading, inherit); font-size: 1.6rem; font-weight: 600; color: var(--wb-primary); margin-bottom: 1rem; padding: 0; }
.wb-val__step select, .wb-val__step input[type="text"], .wb-val__step input[type="number"], .wb-val__step input[type="email"], .wb-val__step input[type="tel"], .wb-val__step input[type="password"], .wb-val__step input:not([type]) { width: 100%; box-sizing: border-box; min-height: 48px; }
.wb-val__hint { margin: -0.5rem 0 0; font-size: 0.9rem; color: var(--wb-text-muted, #555); }
.wb-val__choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wb-val__choice > legend { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wb-primary); margin-bottom: 0.5rem; padding: 0; }
.wb-val__choice label { flex: 1 1 8rem; position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.75rem; border: 1.5px solid #cfd8c6; border-radius: 6px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: center; }
.wb-val__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wb-val__choice label:has(input:checked) { border-color: var(--wb-primary); background: color-mix(in srgb, var(--wb-primary) 8%, #fff); color: var(--wb-primary); }
.wb-val__choice label:has(input:focus-visible) { outline: 3px solid var(--wb-accent, var(--wb-primary)); outline-offset: 2px; }
.wb-val__consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.5; }
.wb-val__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.wb-val__back { background: none; border: 0; color: var(--wb-primary); font-weight: 600; cursor: pointer; min-height: 44px; padding: 0 0.5rem; }
.wb-val__error { background: #fdecea; color: #8a1c10; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.9rem; }
.wb-val__greeting { margin: 0 0 1rem; color: var(--wb-primary); font-family: var(--wb-font-heading, inherit); }
.wb-val__figure { background: var(--wb-primary); color: #fff; border-radius: 10px; padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wb-val__figure-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.85; }
.wb-val__figure-range { font-family: var(--wb-font-heading, inherit); font-size: 2.6rem; font-weight: 600; line-height: 1.1; }
.wb-val__figure-range.is-text { font-size: 1.8rem; }
.wb-val__figure-basis { font-size: 0.9rem; opacity: 0.9; line-height: 1.55; }
.wb-val__figure-extra { font-weight: 700; color: var(--wb-accent, #fff); }
.wb-val__disclaimer { font-size: 0.85rem; color: var(--wb-text-muted, #555); line-height: 1.6; }
.wb-val__next { background: color-mix(in srgb, var(--wb-primary) 5%, #fff); border-radius: 10px; padding: 1.25rem 1.5rem; }
.wb-val__next p { margin: 0.4rem 0 1rem; font-size: 0.9rem; }
@media (max-width: 860px) {
    .wb-val { grid-template-columns: 1fr; gap: 1.5rem; }
    .wb-val__steps { display: none; }
    .wb-val__card { padding: 1.5rem 1.25rem; }
    .wb-val__figure-range { font-size: 2rem; }
}

/* ---- Address fields on the enquiry and contact forms (Shared/_AddressFields.cshtml) ----
   Postcode finder, or manual fields; road, town and postcode required (HD-2026-01117).
   Fields and select pick up the site's existing form-control look. */
.wb-address { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.wb-address legend { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.5rem; padding: 0; }
.wb-address [hidden] { display: none !important; }
.wb-address__abroad { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 0.75rem; cursor: pointer; }
.wb-address__abroad input { width: auto; margin: 0; }
.wb-address__find { display: flex; gap: 0.5rem; }
.wb-address__find input { flex: 1 1 auto; min-width: 0; }
.wb-address__find .wb-btn { flex: 0 0 auto; white-space: nowrap; }
.wb-address__status { font-size: 0.85rem; color: var(--wb-text-muted, inherit); margin: 0.4rem 0 0; min-height: 0; }
.wb-address__status:empty { display: none; }
.wb-address__pick { width: 100%; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 0.95rem; background: var(--wb-surface, #fff); color: inherit; }
.wb-address__toggle { background: none; border: 0; padding: 0; margin-top: 0.5rem; font: inherit; font-size: 0.85rem; color: var(--wb-primary); text-decoration: underline; cursor: pointer; }
/* Six-column grid so each field is sized to what it holds: a short house number
   beside a long road, town and county side by side, a short postcode. Sized by the
   space the form actually has (container query), so the narrow enquiry sidebar and
   phones get one column. */
.wb-address { container-type: inline-size; }
.wb-address__fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1rem; margin-top: 0.25rem; }
.wb-address__fields .wb-form-group { margin-bottom: 1rem; min-width: 0; }
.wb-address__f--building { grid-column: span 2; }
.wb-address__f--road { grid-column: span 4; }
.wb-address__f--town,
.wb-address__f--county { grid-column: span 3; }
.wb-address__f--postcode { grid-column: span 2; }
.wb-address__f--country { grid-column: span 4; }
@container (max-width: 460px) {
    .wb-address__fields { grid-template-columns: minmax(0, 1fr); }
    .wb-address__fields .wb-form-group { grid-column: 1 / -1; }
    .wb-address__f--postcode { max-width: 12rem; }
}

/* ---- Account pages (register, forgot / reset password, verify) ----
   These used .wb-account-page / .wb-account-card / .wb-form-row with no styles at
   all, so every field ran the full width of the page with no spacing. */
.wb-account-page { padding: 3rem 1.5rem; }
.wb-account-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    background: var(--wb-surface, #fff);
    border: 1px solid #e5e7eb;
    border-radius: var(--wb-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wb-account-card h1 { margin: 0 0 0.5rem; font-family: var(--wb-font-heading, inherit); }
.wb-account-card > p:first-of-type { color: var(--wb-text-muted, inherit); margin: 0 0 1.75rem; }
.wb-account-card form > .wb-form-group,
.wb-account-card .wb-form-row > .wb-form-group { margin-bottom: 1rem; min-width: 0; }
.wb-account-card .wb-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.wb-account-card form > .wb-address { margin: 0.5rem 0 0; }
.wb-account-card .wb-address legend { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.wb-account-card .wb-address__abroad { margin-bottom: 1rem; }
.wb-form-hint { font-weight: 400; color: var(--wb-text-muted, inherit); font-size: 0.85em; }
.wb-account-card form > .wb-btn { margin-top: 0.5rem; }
@media (max-width: 560px) {
    .wb-account-page { padding: 1.5rem 1rem; }
    .wb-account-card { padding: 1.5rem 1.25rem; }
    .wb-account-card .wb-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Property enquiry form (Properties/Detail + ContentBlock/PropertyEnquiryForm) ----
   Its fields had no spacing between them (each label sat on the box above). Name,
   email and phone go side by side where the card is wide, and stack in the sidebar. */
.wb-enquiry-form .wb-form-group { margin-bottom: 1rem; min-width: 0; }
.wb-enquiry-form > .wb-address { margin-bottom: 0; }
.wb-enquiry-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

/* ---- Register page: two columns (details | address) on wide screens ---- */
.wb-account-card--wide { max-width: 960px; }
.wb-account-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
.wb-account-section { border: 0; padding: 0; margin: 0; min-width: 0; }
.wb-account-section legend,
.wb-account-columns .wb-address legend { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; padding: 0; }
.wb-account-section .wb-form-group { margin-bottom: 1rem; min-width: 0; }
.wb-account-columns > .wb-address { margin: 0; grid-column: auto; } /* it carries wb-form-group--full for the contact form grid */
.wb-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; font-size: 0.9rem; }
.wb-account-actions .wb-btn { min-width: 14rem; }
@media (max-width: 820px) {
    .wb-account-columns { grid-template-columns: minmax(0, 1fr); }
    .wb-account-columns > .wb-address { margin-top: 0.5rem; }
}
@media (max-width: 560px) {
    .wb-account-actions { flex-direction: column; align-items: stretch; text-align: center; }
    .wb-account-actions .wb-btn { width: 100%; }
}

/* ---- Save button (Saved Businesses / portfolio) ----
   A round heart floating over the bottom-right of the listing image. */
.wb-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: var(--wb-primary, #374151);
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: transform 0.15s, background-color 0.15s;
}
.wb-save-btn:hover { background: #fff; transform: scale(1.08); }
.wb-save-btn:focus-visible { outline: 2px solid var(--wb-primary, #374151); outline-offset: 2px; }
.wb-save-icon { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill 0.15s; }
.wb-save-btn:hover .wb-save-icon { fill: currentColor; fill-opacity: 0.25; }
.wb-save-btn--saved .wb-save-icon,
.wb-save-btn--saved:hover .wb-save-icon { fill: currentColor; fill-opacity: 1; }

/* Over an image: bottom-right corner */
.wb-property-card-image > .wb-save-btn,
.wb-gallery-main > .wb-save-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
}
.wb-gallery-main > .wb-save-btn { width: 48px; height: 48px; }
.wb-gallery-main > .wb-save-btn .wb-save-icon { width: 26px; height: 26px; }

/* No image on the card (showImage off): top-right of the card body */
.wb-property-card-body { position: relative; }
.wb-property-card-body > .wb-save-btn { position: absolute; top: 0.75rem; right: 0.75rem; }

/* Detail heading fallback, for listings with no gallery image. Hidden when the
   gallery on the same page already carries the heart. */
.wb-property-header h1 .wb-save-btn { vertical-align: middle; margin-left: 0.75rem; }
body:has(.wb-gallery-main > .wb-save-btn) .wb-property-header h1 .wb-save-btn { display: none; }

/* ---- Saved Businesses page ---- */
.wb-text-muted { color: var(--wb-text-muted, #6b7280); }
.wb-saved-count { margin-bottom: 1.5rem; }
/* Unsaved from this page: dimmed until the next visit, so a mis-click can be undone. */
.wb-saved-card { position: relative; transition: opacity 0.2s; }
.wb-saved-card--removed { opacity: 0.45; }

/* ---- Account dashboard ---- */
.wb-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; align-items: stretch; }
/* Cards stretch to the row height and keep their buttons on one line at the bottom. */
.wb-dashboard-card { display: flex; flex-direction: column; }
.wb-dashboard-card h2 { margin-bottom: 1rem; }
.wb-dashboard-card-body { flex: 1 1 auto; }
.wb-dashboard-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.wb-dashboard-item { padding: 0.75rem 0; border-bottom: 1px solid #e5e7eb; }
.wb-dashboard-item:first-child { padding-top: 0; }
.wb-dashboard-item-meta { font-size: 0.85rem; color: var(--wb-text-muted, #6b7280); margin: 0.25rem 0 0; }
.wb-dashboard-item-text { font-size: 0.9rem; margin: 0.25rem 0 0; }
.wb-dashboard-item-flag { color: #16a34a; font-size: 0.8rem; }
.wb-dashboard-details { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.wb-dashboard-details dt { color: var(--wb-text-muted, #6b7280); }
.wb-dashboard-details dd { margin: 0; overflow-wrap: anywhere; }