/* =========================================
   0. ТОКЕНИ
   ========================================= */
/* Palette and faces come from the Elementor kit, so the ballot speaks the same
   language as the rest of the site. The ballot itself runs entirely on gold
   against ink - light gold marks a choice being made, deep gold a choice
   already recorded, and ink is the ground the artwork sits on. Magenta is
   kept as a token for the site's other surfaces but no longer appears in the
   voting flow: on cards whose artwork is gold on black it read as a second,
   unrelated system. */
:root {
    --cvs-ink:          #111111;
    --cvs-ink-soft:     #1E1C1A;
    --cvs-magenta:      #F81F6E;
    --cvs-magenta-dark: #C8104F;
    --cvs-gold:         #9E8C38;
    --cvs-gold-light:   #C9B45E;
    --cvs-cream:        #EDE9E3;
    --cvs-muted:        #8A8578;
    --cvs-line:         #E4E1DA;

    --cvs-display: "Oswald", "Arial Narrow", Arial, sans-serif;
    --cvs-body: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --cvs-radius: 3px;
    --cvs-control-h: 42px;

    /* Kept so any older markup referencing these still resolves. */
    --cvs-primary-color: #111111;
    --cvs-secondary-color: #F81F6E;
}

/* =========================================
   1. ОСНОВНИ НАСТРОЙКИ И ЛЕЙАУТ
   ========================================= */
.cvs-main-wrapper * {
    box-sizing: border-box;
}

.cvs-main-wrapper {
    font-family: var(--cvs-body);
    padding-bottom: 40px;
}

.cvs-contest-title {
    margin: 0 0 clamp(32px, 5vw, 56px);
    font-family: var(--cvs-display);
    font-size: clamp(1.9rem, 5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

/* =========================================
   1a. ОПИСАНИЕ И СПОДЕЛЯНЕ
   ========================================= */
/* Collapsed by default: these descriptions carry the full contest rules, and
   the ballot should not begin several screens down. */
.cvs-contest-intro {
    margin: -16px 0 0;
    text-align: left;
}

.cvs-contest-intro-text {
    position: relative;
    max-height: 11em;
    overflow: hidden;
    font-family: var(--cvs-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: #45423D;
    transition: max-height 0.35s ease;
}

.cvs-contest-intro-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 88%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cvs-contest-intro.is-open .cvs-contest-intro-text {
    max-height: none;
}

.cvs-contest-intro.is-open .cvs-contest-intro-text::after {
    opacity: 0;
}

.cvs-contest-intro-text > *:first-child {
    margin-top: 0;
}

.cvs-contest-intro-text h2 {
    margin: 1.6em 0 0.6em;
    font-family: var(--cvs-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

.cvs-contest-intro-text ol,
.cvs-contest-intro-text ul {
    margin: 0 0 1em;
    padding-inline-start: 1.4em;
}

.cvs-contest-intro-text li {
    margin-bottom: 0.5em;
}

.cvs-contest-intro-text li::marker {
    color: var(--cvs-gold);
}

.cvs-intro-toggle {
    display: block;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--cvs-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cvs-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
}

/* hello-elementor's reset.css styles [type="button"], an attribute selector
   that ties with a plain class and then wins on load order. Every control that
   carries type="button" therefore needs the element in the selector too. The
   same reset also paints bare buttons, so .cvs-btn-select is qualified with
   the element as well even though it has no type attribute. */
button.cvs-intro-toggle {
    border: 0;
    color: var(--cvs-ink);
}

button.cvs-intro-toggle:hover,
button.cvs-intro-toggle:focus {
    background: none;
    color: var(--cvs-gold);
}

.cvs-intro-toggle .cvs-intro-less,
.cvs-contest-intro.is-open .cvs-intro-toggle .cvs-intro-more {
    display: none;
}

.cvs-contest-intro.is-open .cvs-intro-toggle .cvs-intro-less {
    display: inline;
}

.cvs-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 16px;
    margin: clamp(26px, 4vw, 38px) 0 clamp(34px, 5vw, 48px);
}

.cvs-share-label {
    font-family: var(--cvs-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cvs-muted);
}

.cvs-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

button.cvs-share-copy {
    padding: 0;
    border: 1px solid var(--cvs-line);
    background: none;
    color: var(--cvs-ink);
    cursor: pointer;
}

button.cvs-share-copy:hover,
button.cvs-share-copy:focus {
    background-color: var(--cvs-ink);
    border-color: var(--cvs-ink);
    color: #ffffff;
}

.cvs-share-copied {
    font-family: var(--cvs-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cvs-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cvs-share.is-copied .cvs-share-copied {
    opacity: 1;
}

.cvs-category-section {
    margin-bottom: clamp(48px, 6vw, 72px);
}

/* The rule fills whatever the heading leaves, so its length reports how long
   the category name is rather than just decorating the row. */
.cvs-cat-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    font-family: var(--cvs-display);
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

.cvs-cat-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--cvs-gold);
}

/* Грид система за картите */
.cvs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

/* =========================================
   2. ДИЗАЙН НА КАРТАТА (NOMINEE CARD)
   ========================================= */
/* The nominee artwork is gold lettering on black, so the card body continues
   that darkness instead of pasting the image onto a white box. */
.cvs-card {
    display: flex;
    flex-direction: column;
    background: var(--cvs-ink);
    border: 1px solid var(--cvs-ink);
    border-radius: var(--cvs-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.14);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

/* The photo is a shortcut to the details modal, so it says so on hover. */
.cvs-card-img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.cvs-card-img img,
.e-loop-item:has(.cvs-btn-details) .elementor-widget-theme-post-featured-image img {
    transition: filter 0.25s ease;
}

.cvs-card-img:hover img,
.e-loop-item:has(.cvs-btn-details) .elementor-widget-theme-post-featured-image:hover img {
    filter: brightness(1.08);
}

.e-loop-item:has(.cvs-btn-details) .elementor-widget-theme-post-featured-image {
    cursor: pointer;
}

.cvs-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cvs-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 14px;
    padding: 18px 20px 22px;
    margin: 0;
}

.cvs-card-title {
    margin: 0;
    font-family: var(--cvs-display);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--cvs-cream);
}

/* =========================================
   3. БУТОНИ
   ========================================= */
/* One solid action per card; details is a quiet link so the card asks a single
   question instead of two of equal weight. */
/* The row holds the height of the select pill even on cards where that pill is
   hidden, so "Детайли" sits on the same line across every card in a category. */
.cvs-card-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: var(--cvs-control-h);
    margin-top: auto;
}

.cvs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cvs-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cvs-btn:disabled {
    cursor: default;
}

/* The nominee card is ink carrying gold artwork, so its trigger is drawn in
   gold rather than magenta - a solid pink pill fought the poster it sat on.
   Outline, not fill: a choice not yet made states itself quietly, and the
   solid gold stays reserved for the recorded vote (.cvs-voted-confirmed).
   The element is in the selector because the parent theme's reset.css paints
   bare buttons, so border/background/colour have to be stated at a weight
   that beats it in every state. */
button.cvs-btn-select {
    min-height: var(--cvs-control-h);
    padding: 0 24px;
    border: 1px solid var(--cvs-gold);
    border-radius: 999px;
    background: transparent;
    color: var(--cvs-gold-light);
}

button.cvs-btn-select:hover:not(:disabled),
button.cvs-btn-select:focus:not(:disabled) {
    border-color: var(--cvs-gold-light);
    background: var(--cvs-gold-light);
    color: #12100C;
}

button.cvs-btn-select:focus-visible {
    outline: 2px solid var(--cvs-gold-light);
    outline-offset: 3px;
}

.cvs-btn-select .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.cvs-btn-details {
    padding: 0;
    border: 0;
    background: none;
    color: #45423D;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* The parent theme's reset.css paints every button:hover/:focus with a pink
   #CC3366 background. This is a link, not a button, so the background has to be
   held transparent - and with more specificity than that reset carries. The
   selector deliberately avoids .cvs-main-wrapper so it also covers the jury
   cards, which render outside it. */
button.cvs-btn-details:hover,
button.cvs-btn-details:focus {
    background: none;
    color: var(--cvs-ink);
}

/* On a nominee card the trigger sits on ink, so it needs the inverse. */
.cvs-card .cvs-btn-details {
    color: var(--cvs-muted);
}

.cvs-card button.cvs-btn-details:hover,
.cvs-card button.cvs-btn-details:focus {
    color: #FFFFFF;
}

/* Magenta means "the choice you are making"; opening details or a profile is
   not a choice, so these controls get a neutral ring instead. */
button.cvs-btn-details:focus-visible,
.cvs-social-link:focus-visible {
    outline: 2px solid var(--cvs-gold);
    outline-offset: 3px;
}

/* =========================================
   4. СЪСТОЯНИЯ (SELECTED / DIMMED / VOTED)
   ========================================= */
/* Избрана карта (в количката) */
.cvs-selected {
    border-color: var(--cvs-gold-light);
    box-shadow: 0 0 0 3px rgba(201, 180, 94, 0.34), 0 12px 28px rgba(201, 180, 94, 0.18);
    animation: cvsRing 0.28s ease-out;
}

/* Choosing simply fills the outline that was already there, so the change is
   read as the same control switching on rather than a different button. The
   lighter gold and the missing check icon are what separate it from the
   recorded vote below, which is deeper and disabled. */
.cvs-selected button.cvs-btn-select,
.cvs-selected button.cvs-btn-select:hover:not(:disabled),
.cvs-selected button.cvs-btn-select:focus:not(:disabled) {
    border-color: var(--cvs-gold-light);
    background: var(--cvs-gold-light);
    color: #12100C;
}

/* The single piece of motion on the page: it answers the tap that caused it. */
@keyframes cvsRing {
    from { box-shadow: 0 0 0 0 rgba(201, 180, 94, 0), 0 1px 2px rgba(17, 17, 17, 0.14); }
    to   { box-shadow: 0 0 0 3px rgba(201, 180, 94, 0.34), 0 12px 28px rgba(201, 180, 94, 0.18); }
}

/* Вече гласувана карта (от базата) */
.cvs-voted-confirmed {
    border-color: var(--cvs-gold);
    box-shadow: 0 0 0 3px rgba(158, 140, 56, 0.32);
    opacity: 1 !important;
}

/* The recorded vote takes the deeper gold and keeps its check icon, so it does
   not read as the same thing as a selection still being made. Cream on this
   fill only reaches 2.8:1, so the label stays ink. */
.cvs-voted-confirmed button.cvs-btn-select {
    border-color: var(--cvs-gold);
    background: var(--cvs-gold);
    color: #12100C;
    opacity: 1;
}

/* --- НЕАКТИВНИ ЗА ИЗБОР КАРТИ --- */
/* The card keeps its ink so it still reads as a poster; only its contents
   recede. Fading the whole card would wash it out to grey against the white
   page, which looks broken rather than "not this one". */
.cvs-dimmed .cvs-card-img {
    opacity: 0.3;
}

.cvs-dimmed .cvs-card-title {
    color: var(--cvs-muted);
}

.cvs-dimmed:hover .cvs-card-img,
.cvs-dimmed:focus-within .cvs-card-img {
    opacity: 0.55;
}

.cvs-dimmed .cvs-btn-select,
.cvs-dimmed .cvs-btn-vote-direct {
    display: none !important;
}


/* =========================================
   5. МОДАЛНИ ПРОЗОРЦИ (POP-UPS)
   ========================================= */
/* The modals stay light: they carry running prose, which is easier to read on
   a pale ground than the cards' ink. */
/* Modals are moved onto <body> at runtime, so they cannot rely on anything
   inherited from .cvs-main-wrapper. */
.cvs-modal-overlay,
.cvs-modal-overlay * {
    box-sizing: border-box;
}

.cvs-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(17, 17, 17, 0.82);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    padding: 20px;
}

.cvs-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 5vh auto;
    padding: 0;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    animation: cvsFadeIn 0.28s ease-out;
}

@keyframes cvsFadeIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cvs-modal-close {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.cvs-modal-close:hover {
    color: var(--cvs-gold-light);
}

/* Съдържание на модала за детайли */
.cvs-modal-nominee {
    max-width: 620px;
}

.cvs-modal-body {
    padding: clamp(28px, 5vw, 44px);
}

.cvs-modal-nominee h3 {
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cvs-line);
    font-family: var(--cvs-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

/* Close sits on white now that the artwork panel is gone. */
.cvs-modal-nominee .cvs-modal-close {
    color: var(--cvs-muted);
}

.cvs-modal-nominee .cvs-modal-close:hover {
    color: var(--cvs-ink);
}

/* Images here are authored per nominee in the editor, so they get tidied up
   rather than positioned: block flow, own breathing room, matching radius. */
.cvs-modal-desc img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 4px 0 20px;
    border-radius: var(--cvs-radius);
}

.cvs-modal-desc > *:last-child {
    margin-bottom: 0;
}

.cvs-modal-desc {
    max-width: 62ch;
    margin-bottom: 24px;
    font-family: var(--cvs-body);
    font-size: 1rem;
    line-height: 1.65;
    color: #45423D;
}

/* Контакти и социални мрежи */
.cvs-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-bottom: 22px;
}

.cvs-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cvs-body);
    font-size: 0.95rem;
    color: #45423D;
    text-decoration: none;
}

.cvs-contact-link .cvs-social-icon {
    width: 14px;
    color: var(--cvs-gold);
}

.cvs-contact-link:hover {
    color: var(--cvs-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cvs-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Monochrome discs: brand colours here would fight the palette, and the marks
   stay recognisable by shape alone. */
.cvs-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cvs-line);
    border-radius: 50%;
    color: var(--cvs-ink);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cvs-social-link:hover {
    background-color: var(--cvs-ink);
    border-color: var(--cvs-ink);
    color: #ffffff;
}

.cvs-social-icon {
    display: block;
    width: 17px;
    height: auto;
    fill: currentColor;
}

.cvs-modal-actions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--cvs-line);
    text-align: right;
}

button.cvs-btn-modal-close {
    padding: 10px 22px;
    border: 1px solid var(--cvs-ink);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--cvs-ink);
    font-family: var(--cvs-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

button.cvs-btn-modal-close:hover {
    background-color: var(--cvs-ink);
    color: #ffffff;
}

/* Финален модал (По-малък) */
.cvs-final-content {
    max-width: 460px;
    padding: 36px 32px 32px;
    text-align: center;
}

.cvs-final-content .cvs-modal-close {
    color: var(--cvs-muted);
}

.cvs-final-content h3 {
    margin: 0 0 8px;
    font-family: var(--cvs-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

.cvs-final-content > p {
    margin: 0;
    color: var(--cvs-muted);
    font-size: 0.95rem;
}

.cvs-final-form {
    margin-top: 24px;
    text-align: left;
}

.cvs-final-form label {
    font-family: var(--cvs-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

/* Turnstile draws its own iframe at a fixed size; this only places it. */
.cvs-turnstile {
    display: flex;
    justify-content: center;
    margin: 16px 0 0;
    min-height: 65px;
}

/* Honeypot. Moved out of sight rather than hidden with display:none, which
   the cruder form-fillers know to skip - it has to look reachable to a script
   while being unreachable to a person. */
.cvs-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cvs-inp-email {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--cvs-line);
    border-radius: 3px;
    font-family: var(--cvs-body);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.cvs-inp-email:focus {
    border-color: var(--cvs-gold);
    outline: none;
}

.cvs-gdpr-box {
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #45423D;
}

.cvs-gdpr-box a {
    color: var(--cvs-ink);
}

/* This one sits in the light modal, not on a card, so the fill needs the
   darker gold as a rim: light gold alone is only 2:1 against the modal's white
   and the button would lose its edge. */
button.cvs-btn-vote-direct {
    justify-content: center;
    padding: 14px 24px;
    border: 1px solid var(--cvs-gold);
    border-radius: 999px;
    background: var(--cvs-gold-light);
    color: #12100C;
}

button.cvs-btn-vote-direct:hover:not(:disabled),
button.cvs-btn-vote-direct:focus:not(:disabled) {
    border-color: var(--cvs-gold);
    background: var(--cvs-gold);
    color: #12100C;
}

/* Closed or not-yet-open contest */
.cvs-notice {
    padding: clamp(32px, 6vw, 56px) 24px;
    border: 1px solid var(--cvs-line);
    border-top: 3px solid var(--cvs-gold);
    border-radius: var(--cvs-radius);
    text-align: center;
}

.cvs-notice h2 {
    margin: 0 0 10px;
    font-family: var(--cvs-display);
    font-size: clamp(1.4rem, 3.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cvs-ink);
}

.cvs-notice-msg {
    margin: 0;
    font-family: var(--cvs-body);
    font-size: 1.05rem;
    color: #45423D;
}

.cvs-voting-as {
    margin: 0 0 4px;
    font-family: var(--cvs-body);
    font-size: 0.95rem;
    color: #45423D;
}

.cvs-voting-as strong {
    color: var(--cvs-ink);
}

/* =========================================
   6. STICKY FOOTER (ЛЕНТА ЗА ЗАВЪРШВАНЕ)
   ========================================= */
#cvs-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: none;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--cvs-ink);
    border-top: 1px solid var(--cvs-gold);
    box-shadow: 0 -10px 30px rgba(17, 17, 17, 0.24);
}

.cvs-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.cvs-selection-info {
    font-family: var(--cvs-display);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cvs-cream);
}

#cvs-count-badge {
    display: inline-block;
    min-width: 26px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cvs-gold-light);
    color: #12100C;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

button#cvs-btn-finalize {
    padding: 13px 30px;
    border: 1px solid var(--cvs-gold-light);
    border-radius: 999px;
    background: var(--cvs-gold-light);
    color: #12100C;
    font-family: var(--cvs-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button#cvs-btn-finalize:hover,
button#cvs-btn-finalize:focus {
    border-color: #DCCB86;
    background: #DCCB86;
    color: #12100C;
}

/* Keyboard users get the same clarity the pointer does. */
.cvs-main-wrapper button:focus-visible,
.cvs-main-wrapper a:focus-visible,
.cvs-main-wrapper input:focus-visible,
.cvs-modal-overlay button:focus-visible,
.cvs-modal-overlay a:focus-visible,
.cvs-modal-overlay input:focus-visible,
#cvs-sticky-footer button:focus-visible {
    outline: 2px solid var(--cvs-gold-light);
    outline-offset: 3px;
}

/* =========================================
   7. JURY
   ========================================= */
/* Same discs as the nominee modal - the row shares .cvs-social-link, so only
   the container needs describing here. Centred on the card, where it sits under
   a centred name; left-aligned in the modal, where it follows body copy. */
.cvs-jury-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cvs-modal-body .cvs-jury-social-icons {
    justify-content: flex-start;
}

/* The jury photos are uploaded at slightly different ratios (0.83 / 0.80 / 0.80),
   so each card's white panel - and the "Детайли" link inside it - started a few
   pixels lower than the next. Cropping the featured image to one ratio lines
   them all up. Anchored to the top so faces survive the crop. */
.e-loop-item:has(.cvs-jury-social-icons) .elementor-widget-theme-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

/* =========================================
   8. RESPONSIVE DESIGN (АДАПТИВНОСТ)
   ========================================= */

/* Tablet & Small Desktop (до 1024px) */
@media (max-width: 1024px) {
    .cvs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Tablet Portrait (до 768px) */
@media (max-width: 768px) {
    .cvs-grid {
        grid-template-columns: 1fr; /* Една карта на ред */
        gap: 18px;
    }

    .cvs-social-link {
        width: 42px;
        height: 42px;
    }
}

/* Mobile (до 480px) */
@media (max-width: 480px) {
    .cvs-card-body {
        padding: 16px 16px 20px;
    }

    .cvs-footer-content {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cvs-selection-info {
        text-align: center;
    }

    #cvs-btn-finalize {
        width: 100%;
        padding: 14px;
    }

    .cvs-modal-overlay {
        padding: 12px;
    }

    .cvs-modal-content {
        margin: 2vh auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cvs-main-wrapper *,
    .cvs-modal-overlay * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}