/*
 * Sales Listings go-live build (2026-08-17): the new listing design's visual language. Not constrained to the
 * site's existing .ea-* dashboard design system (an explicit design-brief decision); this is its own self-contained
 * component vocabulary, shared across browse, listing detail, the create/edit wizard, my-sales, and subscribe pages.
 * Served directly by nginx from /css/, same convention as every other stylesheet in public/css/.
 */

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

.cy {
    font-family: 'Roboto', sans-serif;
    color: #34383d;
    background: #fdf1e6;
    overflow-x: hidden;
}

.cy a { color: inherit; text-decoration: none; }
.cy a:hover { color: #0f5c3f; }

.cy-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 20px 60px; }

.cy-heading {
    font-family: 'Lato', sans-serif; font-weight: 900; color: #0f5c3f; margin: 0 0 18px; font-size: 28px;
}

/* "Manage your listings" shortcut row, shown under the heading to logged-in members only. Chip styling matches
   .cy-sort-select's pill shape (same font/padding/border-radius), grey rather than that chip's black. */
.cy-subnav { display: flex; gap: 10px; align-items: center; margin: -10px 0 18px; }
.cy-chip-link {
    display: inline-flex; align-items: center; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    padding: 6px 16px; border-radius: 16px; background: #e6e6e6; color: #34383d;
}
.cy-chip-link:hover { background: #d9d9d9; color: #34383d; }

/* Required-field marker (create.html/edit.html): a plain "* required" legend plus a matching "*" on every field label that's
   actually enforced server-side, same convention as views/event/convenor/event_details.tt's ".red" legend, own colour/vocabulary. */
.cy-required { color: #c0392b; font-weight: 700; }
.cy-required-legend { font-size: 12px; color: #787f87; margin: 0 0 14px; }

/* Filter/sort chip row */
.cy-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; max-width: 100%; }
.cy-chip-select {
    appearance: none; -webkit-appearance: none; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    padding: 6px 28px 6px 12px; border-radius: 16px; background: #eef6e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2334383d'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid #cfe3ba; color: #34383d; cursor: pointer; max-width: 100%;
}
.cy-sort-select {
    appearance: none; -webkit-appearance: none; margin-left: auto; font-family: 'Roboto', sans-serif; font-size: 12px;
    font-weight: 700; padding: 6px 28px 6px 12px; border-radius: 16px; background: #34383d
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: none; color: #fff; cursor: pointer; max-width: 100%;
}
@media (max-width: 640px) {
    .cy-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .cy-chip-select, .cy-sort-select { flex: none; }
    .cy-sort-select { margin-left: 0; }
}

/* Colour swatch quick-filter row */
.cy-swatches { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; }
.cy-swatch {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.cy-swatch-clear { background: #fff; border: 2px solid #79b23c; }
.cy-swatch-count { font-size: 11px; color: #787f87; margin-left: 2px; }

/* Desktop card grid */
.cy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .cy-grid { grid-template-columns: repeat(2, 1fr); } }

.cy-card {
    display: none; height: 280px; cursor: pointer; background: #fff; border: 1px solid #e6e9eb; border-radius: 14px;
    overflow: hidden; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2); text-decoration: none; color: inherit;
    flex-direction: column; transition: border-color .15s, box-shadow .15s;
}
.cy-card:hover { border-color: #cfd4d8; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .28); }

.cy-card-photo { position: relative; height: 130px; background: #eef6e4; }
.cy-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-no-photo {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #eef6e4, #eef6e4 8px, #e1efd3 8px, #e1efd3 16px);
}
.cy-no-photo-label { font-family: 'Roboto Mono', monospace; font-size: 10px; color: #5d8f2c; letter-spacing: .05em; }

.cy-price-badge {
    position: absolute; top: 8px; right: 8px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 13px; padding: 4px 9px; border-radius: 8px;
}
.cy-cert-badge {
    position: absolute; top: 8px; left: 8px; background: #0f5c3f; color: #fff; font-size: 9px; font-weight: 700;
    padding: 4px 7px; border-radius: 6px;
}

.cy-card-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; }
.cy-card-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 15px; color: #34383d; }
.cy-card-meta { font-size: 11px; color: #787f87; margin: 3px 0 8px; }
.cy-view-btn-outline {
    margin-top: auto; text-align: center; border: 1.5px solid #34383d; border-radius: 8px; padding: 6px 0;
    font-size: 12px; font-weight: 700; display: block;
}

/* Mobile list (the desktop grid's cards are also non-flipping now, see .cy-card above) */
.cy-list { display: none; flex-direction: column; gap: 12px; }
.cy-list-row { background: #fff; border: 1px solid #e6e9eb; border-radius: 14px; display: flex; }
.cy-list-photo {
    width: 88px; height: 96px; flex: none; position: relative; background: #eef6e4; border-radius: 14px 0 0 14px;
    overflow: hidden;
}
.cy-list-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cy-list-body { padding: 10px 12px 12px; flex: 1; min-width: 0; }
.cy-list-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.cy-list-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; min-width: 0; overflow-wrap: break-word; }
.cy-list-price { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #e8862e; white-space: nowrap; }
.cy-list-meta { font-size: 10px; color: #787f87; margin: 3px 0 8px; }

@media (max-width: 640px) {
    .cy-grid { display: none; }
    .cy-list { display: flex; }
    /* Not enough horizontal width on mobile for name and price side by side (confirmed via a real mobile
       screenshot); stack the price under the name instead of .cy-list-top's desktop space-between row. */
    .cy-list-top { flex-direction: column; gap: 2px; }
}
@media (min-width: 641px) { .cy-card { display: flex; } }

/* Listing detail */
.cy-detail { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e6e9eb; }
.cy-detail-hero { position: relative; height: 340px; background: #eef6e4; }
.cy-detail-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-status-chip {
    position: absolute; top: 10px; left: 10px; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px;
    border-radius: 8px;
}
.cy-status-available { background: #79b23c; }
.cy-status-under-offer { background: #e8862e; }
.cy-status-other { background: #787f87; }
/* Back-link + Edit button both live in this top-right corner stack over the hero photo (the Edit button used to be a
   separate, independently-styled block placed after the photo in DOM order, which put it below the whole 340px-tall
   photo instead of under Back to all listings as intended: .cy-back-link's own position:absolute took it out of flow,
   so nothing after it in the DOM actually rendered underneath it). */
.cy-detail-hero .cy-hero-actions {
    position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
/* .cy-detail-hero .cy-back-link (two classes), not .cy-back-link alone: needs to out-specificity this file's own '.cy a { color:
   inherit; }' (one class + one element) above, which otherwise wins and repaints this link the page's dark body text colour instead
   of white, unreadable against the dark translucent chip background below. */
.cy-detail-hero .cy-back-link {
    background: rgba(52, 56, 61, .72); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 8px;
}
.cy-detail-hero .cy-back-link:hover { color: #fff; background: rgba(52, 56, 61, .9); }
.cy-detail-price {
    position: absolute; bottom: -14px; right: 14px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 20px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .4);
}
.cy-detail-body { padding: 26px 20px 20px; }
.cy-detail-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 22px; color: #34383d; }
.cy-detail-name .cy-cert-badge { position: static; margin-left: 8px; vertical-align: middle; }
.cy-detail-locale { font-size: 13px; color: #787f87; margin: 4px 0 14px; }
.cy-detail-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.cy-btn-call {
    flex: 1; text-align: center; background: #79b23c; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 0;
    border-radius: 10px; display: block;
}
.cy-btn-email {
    flex: 1; text-align: center; border: 1.5px solid #34383d; color: #34383d; font-weight: 700; font-size: 14px;
    padding: 12px 0; border-radius: 10px; display: block;
}
.cy-stat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cy-stat-chip {
    font-size: 11px; font-weight: 700; background: #eef6e4; border: 1px solid #cfe3ba; border-radius: 14px; padding: 5px 10px;
}
.cy-description { font-size: 13px; line-height: 1.6; color: #4a4f57; margin: 0 0 16px; white-space: pre-line; }
.cy-pedigree-panel { background: #fdf1e6; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.cy-pedigree-label { font-size: 11px; font-weight: 700; color: #8a5a2c; margin-bottom: 4px; }
.cy-pedigree-text { font-size: 12px; color: #34383d; }
.cy-pedigree-link { font-size: 11px; font-weight: 700; color: #0f5c3f; display: inline-block; margin-top: 4px; }

/* Fleece characteristics, promoted into the detail body itself (2026-08-21, owner request: fleece is the industry's premier value
   outcome, so it shouldn't be just another cy-section competing with contact/event/progeny further down the page) instead of a plain
   cy-section. Amber/gold panel to stand out against the white detail body, same accent family the fleece micron sparkline on
   animal_profile_pet.html already uses (#C9A227-ish gold), not the green cy-pedigree-panel/cy-upsell family, so fleece reads as its
   own distinct thing rather than blending into the general "info panel" look. */
.cy-fleece-highlight { background: #fbf6ec; border: 1px solid #e7d9b8; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.cy-fleece-highlight-title {
    font-family: 'Lato', sans-serif; font-weight: 900; font-size: 12px; color: #8a5a2c; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px;
}
.cy-fleece-highlight-text { font-size: 13px; line-height: 1.6; color: #4a4f57; margin: 0 0 4px; white-space: pre-line; }

.cy-contact-locked {
    background: #eef6e4; border: 1px dashed #cfe3ba; border-radius: 10px; padding: 16px; text-align: center; margin-bottom: 16px;
}
.cy-contact-locked-icon { font-size: 22px; }
.cy-contact-locked-text { font-size: 12px; color: #34383d; margin: 6px 0 10px; }
.cy-guest-signup-btn {
    font-size: 12px; font-weight: 700; background: #79b23c; color: #fff; border-radius: 8px; padding: 8px 0;
    display: block; border: none; width: 100%; cursor: pointer;
}

/* Detail page: full-width sections below the brochure, one per real-Perl-page section (contact, fleece, event results,
   progeny), widened/deepened (2026-08-18, owner request) so this box can hold everything the old Perl page showed
   instead of the original compact 480px summary card. */
.cy-section { border-top: 1px solid #e6e9eb; padding: 22px 20px; }
.cy-section-title {
    font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #0f5c3f; text-transform: uppercase;
    letter-spacing: .04em; margin: 0 0 14px;
}
.cy-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .cy-section-grid { grid-template-columns: 1fr; } }

.cy-kv-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
.cy-kv-row:last-child { border-bottom: none; }
.cy-kv-label { flex: 0 0 130px; color: #787f87; font-weight: 700; }
.cy-kv-value { flex: 1; color: #34383d; }

.cy-fleece-photo { max-width: 240px; border-radius: 10px; margin-top: 10px; display: block; }
.cy-map-embed { margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e9eb; }
.cy-map-embed iframe { width: 100%; height: 240px; display: block; border: 0; }

.cy-table-scroll { overflow-x: auto; }
.cy-progeny-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.cy-progeny-table th {
    font-weight: 700; color: #787f87; text-transform: uppercase; font-size: 10px;
    letter-spacing: .03em; padding: 6px 10px; border-bottom: 2px solid #eef6e4;
}
.cy-progeny-table td { padding: 8px 10px; border-bottom: 1px solid #f2f2f2; }
.cy-progeny-table tr:hover td { background: #fdf9f2; }
/* /css/style.css has its own site-wide 'td, th { text-align: center !important; }' default (line ~3248), which beats a plain
   text-align: left here regardless of specificity, since only an !important declaration can ever beat another !important one. Needs
   its own !important at higher specificity to win, matching how that same stylesheet overrides its own default elsewhere for named
   columns (eg. 'td.name { text-align: left !important; }'). */
.cy-progeny-table th:first-child, .cy-progeny-table td:first-child { text-align: left !important; }

.cy-service-note { font-size: 12px; color: #787f87; padding: 16px 20px; background: #fdf9f2; }

/* Detail page: hero-photo lightbox trigger plus the "Photos" thumbnail strip section, both opening the shared #cy-lightbox overlay
   (view.html's inline script). Bounded to a handful of real uploaded photos per animal (profile plus fleece today, a third upload
   type planned), never an arbitrary-length gallery. */
.cy-hero-photo-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.cy-hero-photo-btn img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-hero-expand-hint {
    position: absolute; bottom: 10px; left: 10px; background: rgba(52, 56, 61, .72); color: #fff; font-size: 11px;
    font-weight: 700; padding: 5px 10px; border-radius: 8px;
}

.cy-photo-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.cy-photo-thumb {
    width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e9eb; padding: 0;
    cursor: pointer; background: #eef6e4; position: relative;
}
.cy-photo-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-photo-thumb-label {
    position: absolute; bottom: 0; left: 0; right: 0; background: rgba(52, 56, 61, .72); color: #fff; font-size: 9px;
    font-weight: 700; text-align: center; padding: 3px 0;
}

.cy-lightbox {
    position: fixed; inset: 0; background: rgba(23, 26, 29, .92); z-index: 1000; display: flex; align-items: center;
    justify-content: center;
}
.cy-lightbox[hidden] { display: none; }
/* min-width/min-height: 0 override the flex item default of auto, which otherwise refuses to shrink this stage below the image's own
   intrinsic size, the well-known flexbox min-size trap; without it, a wide source photo overflows past 90vw/82vh on a narrow phone
   screen instead of being scaled down, taking the arrows/close button/dots off-screen with it. */
.cy-lightbox-stage { max-width: 90vw; max-height: 82vh; min-width: 0; min-height: 0; position: relative; }
.cy-lightbox-slide { margin: 0; display: none; text-align: center; }
.cy-lightbox-slide.cy-lightbox-slide-active { display: block; }
.cy-lightbox-slide img { max-width: 90vw; max-height: 74vh; display: block; border-radius: 10px; margin: 0 auto; }
.cy-lightbox-slide figcaption { color: #fff; font-size: 12px; font-weight: 700; margin-top: 8px; }
.cy-lightbox-close, .cy-lightbox-prev, .cy-lightbox-next {
    position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 50%;
    width: 40px; height: 40px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cy-lightbox-close:hover, .cy-lightbox-prev:hover, .cy-lightbox-next:hover { background: rgba(255, 255, 255, .24); }
.cy-lightbox-close { top: 18px; right: 18px; }
.cy-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.cy-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.cy-lightbox-dots { position: absolute; bottom: -34px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.cy-lightbox-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); border: none; padding: 0; cursor: pointer; }
.cy-lightbox-dot.cy-lightbox-dot-active { background: #fff; }
@media (max-width: 640px) {
    .cy-lightbox-prev, .cy-lightbox-next { width: 34px; height: 34px; }
    .cy-lightbox-prev { left: 6px; }
    .cy-lightbox-next { right: 6px; }
}

/* Not-currently-available page */
.cy-unavailable { max-width: 420px; margin: 60px auto; text-align: center; background: #fff; border-radius: 16px; padding: 40px 24px; border: 1px solid #e6e9eb; }
.cy-unavailable-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 10px; }
.cy-unavailable-text { font-size: 14px; color: #4a4f57; margin: 0 0 20px; line-height: 1.6; }
.cy-unavailable-btn {
    display: inline-block; background: #79b23c; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 24px;
    border-radius: 10px;
}

/* Shared form controls (wizard, saved-search, my-sales) */
.cy-panel { background: #fff; border: 1px solid #e6e9eb; border-radius: 16px; padding: 20px; margin-bottom: 18px; }
.cy-field { margin-bottom: 16px; }
.cy-field label { display: block; font-size: 12px; font-weight: 700; color: #34383d; margin-bottom: 6px; }
.cy-field input[type="text"], .cy-field input[type="email"], .cy-field input[type="tel"], .cy-field input[type="number"],
.cy-field input[type="date"], .cy-field textarea, .cy-field select {
    width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; padding: 10px 12px; border: 1px solid #e6e9eb;
    border-radius: 8px; background: #fff; color: #34383d;
}
.cy-field textarea { resize: vertical; min-height: 80px; }
.cy-char-count { font-size: 11px; color: #8a8f96; text-align: right; margin-top: 4px; }
.cy-btn-primary {
    background: #e8862e; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px;
    border: none; cursor: pointer; display: inline-block;
}
.cy-btn-secondary {
    background: #fff; color: #34383d; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px;
    border: 1.5px solid #34383d; cursor: pointer; display: inline-block;
}
.cy-btn-danger {
    background: #fff; color: #b23c3c; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px;
    border: 1.5px solid #e2b0b0; cursor: pointer; display: inline-block;
}
.cy-upsell {
    background: #eef6e4; border: 1px solid #cfe3ba; border-radius: 12px; padding: 14px 16px; font-size: 13px;
    color: #34383d; margin-bottom: 16px;
}
.cy-upsell strong { color: #0f5c3f; }
.cy-included-chip {
    display: inline-block; background: #0f5c3f; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px;
    border-radius: 8px;
}
.cy-error { color: #b23c3c; font-size: 13px; margin-bottom: 12px; }
.cy-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.cy-step { flex: 1; height: 4px; border-radius: 2px; background: #e6e9eb; }
.cy-step-done, .cy-step-active { background: #79b23c; }

/* Wizard layout + live preview */
.cy-wizard-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.cy-wizard-form { flex: 1 1 420px; min-width: 0; }
.cy-wizard-preview { flex: 0 0 300px; position: sticky; top: 20px; }
.cy-wizard-preview-label {
    font-size: 11px; font-weight: 700; color: #8a8f96; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.cy-preview-faces { display: flex; gap: 12px; }
.cy-preview-face { width: 140px; height: 200px; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.cy-preview-front { background: #fff; border: 1px solid #e6e9eb; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2); }
.cy-preview-photo { position: relative; height: 90px; background: #eef6e4; }
.cy-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.cy-preview-price {
    position: absolute; top: 6px; right: 6px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 11px; padding: 3px 7px; border-radius: 7px;
}
.cy-preview-body { padding: 8px 9px; flex: 1; }
.cy-preview-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 12px; }
.cy-preview-meta { font-size: 9px; color: #787f87; margin: 2px 0 6px; }
.cy-preview-tagline { font-size: 10px; color: #4a4f57; }
.cy-radio-row { display: flex; gap: 14px; margin-bottom: 6px; }
.cy-radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
.cy-drafts-list, .cy-listing-row { background: #fff; border: 1px solid #e6e9eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-listing-row-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; }
.cy-listing-row-meta { font-size: 12px; color: #787f87; }
.cy-listing-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cy-status-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; display: inline-block; color: #fff; }
.cy-wizard-nav { display: flex; gap: 8px; margin-top: 20px; }
@media (max-width: 760px) { .cy-wizard-preview { position: static; flex-basis: 100%; } }

/* Segmented Yes/No-style toggle (edit.html's herd health status), same hidden-radio-plus-sibling-label technique as
   views/event/waybill.tt's .ea-seg, reimplemented under the new listing design's own self-contained palette rather
   than pulling in .ea-seg itself (see this file's own header comment on why it doesn't share the .ea-* system). */
.cy-seg { display: inline-flex; border: 1px solid #e6e9eb; border-radius: 10px; overflow: hidden; }
.cy-seg label {
    margin: 0; padding: 10px 18px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13.5px;
    color: #5a6066; cursor: pointer; background: #fff;
}
.cy-seg label + input + label { border-left: 1px solid #e6e9eb; }
.cy-seg input:checked + label { background: #eef6e4; color: #0f5c3f; }

/* Styled file inputs (Photos step): the real <input type="file"> stays in the DOM and clickable (stretched
   transparent over the whole dropzone, so click-to-browse still works everywhere), a styled button and filename
   readout sit visually on top, and a small thumbnail previews an already-chosen image. Drag-and-drop is
   handled in listings_wizard.js's initFileFields(), which toggles .cy-file-drag on dragover/drop. */
.cy-file-field {
    position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px dashed #d3d8dc;
    border-radius: 10px; padding: 10px 14px; background: #fbfcfc; transition: border-color .15s, background .15s;
}
.cy-file-field:hover { border-color: #b7c0c7; }
.cy-file-field.cy-file-drag { border-color: #79b23c; background: #eef6e4; }
.cy-file-field input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cy-file-thumb {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: none;
    border: 1px solid #e6e9eb; background: #fff;
}
.cy-file-btn {
    flex: 0 0 auto; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; color: #34383d;
    background: #fff; border: 1px solid #cfd4d8; border-radius: 8px; padding: 7px 14px;
}
.cy-file-status { font-size: 13px; color: #8a8f96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-file-status.cy-file-status-chosen { color: #34383d; font-weight: 600; }