:root {
    /* ==========================================
       Палитра 2: „Динамична & Продажбена“
       Една източник-истина за целия сайт.
       ========================================== */

    /* Основни бранд и хедър цветове */
    --color-primary: #0369A1;         /* Петролено синьо (Header / Акценти) */
    --color-primary-hover: #0284C7;   /* По-светло петролено за hover */

    /* Фонове и повърхности */
    --color-bg: #FAFAFA;              /* Основен фон на сайта (меко бяло) */
    --color-surface: #FFFFFF;         /* Фон за карти/карточки на обяви */
    --color-border: #E5E7EB;          /* Фин цвят за разделители и рамки */

    /* Типография */
    --color-heading: #111827;         /* Оф-блек за заглавия на обяви */
    --color-text: #374151;            /* Основен текст и описания */
    --color-muted: #6B7280;           /* Второстепенен текст (напр. локация, дата) */

    /* Действия и конверсии (CTA) */
    --color-cta: #EF4444;             /* Ярък Корал / Червено-оранжево за главен бутон */
    --color-cta-hover: #DC2626;       /* По-тъмен корал при задържане */

    /* Цени и сделки */
    --color-price: #059669;           /* Тъмно изумрудено за цената на обявата */

    /* Линкове и интерактивни състояния — един източник за всички страници */
    --color-link: var(--color-primary);        /* Цвят на текстовите линкове */
    --color-link-hover: var(--color-primary-hover);
    --color-primary-soft: #E0F2FE;    /* Светъл тон на основното — фонове/ховър на вторични бутони */

    /* Бутони — единни параметри за .btn / .btn-primary / .btn-secondary / .btn-cta */
    --color-on-cta: #FFFFFF;          /* Текст върху CTA */
    --btn-radius: var(--radius-sm);
    --btn-font-weight: 600;
    --btn-font-size: 0.95rem;
    --btn-padding-y: 10px;
    --btn-padding-x: 16px;

    /* Типографски и дизайнерски настройки */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);

    /* Мост към историческите променливи: всички съществуващи компоненти
       продължават да работят, но следват новата палитра. */
    --primary-green: var(--color-primary);
    --dark-green: var(--color-primary-hover);
    --accent-orange: var(--color-cta);
    --bg-light: var(--color-bg);
    --text-main: var(--color-text);
    --border-color: var(--color-border);
    --header-height: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Design Matching Image */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
}

.logo {
    white-space: nowrap;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    gap: 20px;
    margin-left: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.user-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-green);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.logo .cms-text {
    color: var(--text-cms);
}

.main-nav {
    display: flex;
    gap: 25px;
    margin-left: 40px;
    flex: 1;
}

.main-nav a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}

.main-nav a:hover {
    color: var(--primary-green);
}

.user-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.login-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;
}

.login-link:hover {
    color: var(--primary-green);
}

.login-link.logout {
    color: var(--accent-orange);
}

.user-welcome {
    font-size: 12px;
    color: #777;
    margin-right: 10px;
}

.btn-post-ad {
    background-color: var(--primary-green);
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
}

.btn-post-ad:hover {
    background-color: var(--dark-green);
}

/* Търсачката на сайта (.search-section + .hp-search-panel) е централизирана
   в assets/css/site-header.css — един източник на стил за всички страници. */

.main-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    flex: 1;
    width: 100%;
}

/* Страниците с резултати (categories.php) се подравняват със съдържанието на
   лентата с търсачка (.search-section .hp-search-panel = min(1200px, 100% - 40px)).
   border-box: 1240px външна ширина − 40px падинг = 1200px съдържание. */
.main-wrapper.category-results-layout {
    max-width: 1240px;
}

aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-box {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
}

.sidebar-box h3 {
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 5px;
}

details summary {
    user-select: none;
    transition: color 0.2s;
}

details summary::-webkit-details-marker {
    color: var(--primary-green);
}

details[open] summary {
    color: var(--primary-green) !important;
}

.content-area h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #444;
}

.ads-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.ad-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.ad-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ad-thumb {
    width: 100%;
    height: 140px;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    font-size: 13px;
    position: relative;
    cursor: pointer;
}

.ad-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-featured {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-orange);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 2;
}

.ad-details {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.ad-card-heading{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.ad-intent-badge{display:inline-flex;align-items:center;align-self:flex-start;width:max-content;max-width:100%;padding:3px 8px;border-radius:999px;background:#e8f5f1;color:#167768;font-size:10px;font-weight:400;line-height:1.35;letter-spacing:.02em}
.ad-intent-badge[data-intent="Купувам"]{background:#eaf1ff;color:#315fac}
.ad-intent-badge[data-intent="Продавам"]{background:#e8f5f1;color:#167768}
.ad-intent-badge[data-intent="Заменям"]{background:#fff3df;color:#9a6416}
.hp-listing-body>.ad-intent-badge{margin-bottom:6px}

/* Доверие и репутация: бадж „Доверен продавач" и звездна оценка. */
.trusted-seller-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:#e6f4f1;color:#0369A1;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.seller-rating-summary{color:#b45309;font-weight:800;font-size:12px;white-space:nowrap}
.seller-rating-summary span{color:#64748b;font-weight:600}
.ad-card .trusted-seller-badge{margin:2px 0 0;font-size:9px;padding:2px 7px}

/* Банер кампании (Администрация → Банер кампании). */
.banner-campaign{position:relative;margin-bottom:16px}
.banner-campaign-label{position:absolute;top:8px;left:8px;z-index:2;padding:3px 9px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

.ad-title {
    font-size: 13px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 5px;
}

.ad-title:hover {
    text-decoration: underline;
}

.ad-price {
    font-size: 14px;
    font-weight: bold;
    color: #2d3748;
}

.featured-section {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.featured-section h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 5px;
    display: inline-block;
}

.top-banner-ad {
    max-width: 1200px;
    margin: 15px auto 0 auto;
    padding: 0 20px;
    width: 100%;
}

.pre-footer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.related-ads-section {
    max-width: 1200px;
    margin: 30px auto 10px auto;
    padding: 0 20px;
    width: 100%;
}

.related-ads-container {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
}

.related-ads-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.related-ads-header h3 {
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 4px;
}

.slider-controls {
    display: flex;
    gap: 8px;
}

.slider-btn {
    background: #e2e8f0;
    color: #333;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.slider-btn:hover {
    background: var(--primary-green);
    color: white;
}

.related-slider-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 5px;
}

.related-slider-track::-webkit-scrollbar {
    height: 6px;
}

.related-slider-track::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.related-ad-card {
    min-width: 220px;
    max-width: 220px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 6px;
    display: inline-block;
}

.footer-col p, .footer-col ul {
    font-size: 13px;
    line-height: 1.6;
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #94a3b8;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-bottom {
    background: #002150;
    text-align: center;
    padding: 15px;
    font-size: 12px;
    color: #8fa3c4;
    border-top: 1px solid #0b3a72;
}

@media (max-width: 992px) {
    .ads-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .main-wrapper {
        grid-template-columns: 1fr;
    }
    .footer-container {
        grid-template-columns: 1fr;
    }
}


/* --- SVG Category Icons Grid Styles --- */


/* --- MODERN UI/UX CATEGORY GRID (Soft Filled Line-Art) --- */
.cat-grid-container {
    max-width: 1160px;
    margin: 20px auto 0 auto;
    padding: 0 20px;
    width: 100%;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.cat-grid-title {
    font-size: 18px;
    font-weight: 700;
    color: #002f34;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.cat-svg-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 16px;
    align-items: start;
}

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    text-decoration: none;
    color: #1e293b;
    padding: 8px;
    transition: transform 0.25s ease;
}

.cat-icon-bg {
    width: 86px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    border-radius: 44% 56% 51% 49% / 52% 44% 56% 48%;
    background: var(--tint, #e3f2fd);
    transition: background .35s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}

.cat-icon-bg::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: inherit;
    transition: inset .3s ease;
}

.cat-icon-bg svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 100%;
    max-height: 100%;
    fill: none !important;
    stroke: #002f34 !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    transition: transform 0.3s ease;
}

.cat-label {
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    color: #334155;
    max-width: 130px;
    transition: color 0.2s ease;
}

.cat-item:hover .cat-icon-bg {
    background: var(--hover, #90caf9);
    transform: scale(1.12) rotate(var(--turn, 6deg));
}

.cat-item:hover .cat-label {
    color: var(--color-primary);
}

/* Color Variants */
.cat-blue { --tint: #e3f2fd; --hover: #90caf9; --turn: 6deg; }
.cat-gold { --tint: #fff3e0; --hover: #ffcc80; --turn: -6deg; }
.cat-mint { --tint: #e8f5e9; --hover: #a5d6a7; --turn: 6deg; }
.cat-lilac { --tint: #ede7f6; --hover: #b39ddb; --turn: -5deg; }
.cat-pink { --tint: #fce4ec; --hover: #f48fb1; --turn: -8deg; }
.cat-aqua { --tint: #e0f7fa; --hover: #80deea; --turn: 5deg; }

@media (max-width: 1024px) {
    .cat-svg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .cat-svg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
    .cat-icon-bg { width: 72px; height: 64px; }
    .cat-icon-bg svg { width: 32px !important; height: 32px !important; }
    .cat-label { font-size: 11px; }
}
@media (max-width: 420px) {
    .cat-svg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Publishing date and town shown immediately after the seller attribution on listing cards. */
.ad-published-meta{font-size:10.5px;line-height:1.45;color:#7b8794;margin-top:3px;overflow-wrap:anywhere}

/* Sponsored tiles in listing grids match the footprint and visual language of ad cards. */
.ads-grid > .responsive-banner {
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 220px;
    margin: 0;
    overflow: visible;
}
.ads-grid > .responsive-banner > .sponsored-grid-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 220px;
    height: 100%;
    margin: 0;
    padding: 22px 16px;
    border: 1px solid #cfe4df;
    border-radius: 12px;
    background: linear-gradient(145deg, #eef8f5, #f8fbff);
    color: #254b48;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.ads-grid > .responsive-banner > .sponsored-grid-card > strong { font-size: 18px; }
.sponsored-grid-label { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #dff2ed; color: #26786e; font-size: 11px; font-weight: 700; }
.sponsored-grid-caption { color: #64748b; font-size: 13px; }

/* Distinct sponsored tile using the exact image/details structure of ad cards. */
.sponsored-listing-card { border-color: #c7e2dc; background: #fff; }
.sponsored-listing-card .sponsored-listing-visual { cursor: default; overflow: hidden; background: #123d45; }
.sponsored-listing-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sponsored-listing-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: #176d63; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.sponsored-listing-art-copy { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 5px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.sponsored-listing-art-copy > span { color: #c5fff0; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.sponsored-listing-art-copy > strong { color: #fff; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.12; }
.sponsored-listing-details { justify-content: flex-start; gap: 7px; padding: 11px; }
.sponsored-listing-kicker { color: #64817b; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.sponsored-listing-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; line-height: 1.35; }
.sponsored-listing-copy { margin: 0; color: #64748b; font-size: 12px; line-height: 1.4; }
.sponsored-listing-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; align-self: flex-start; margin-top: auto; padding: 8px 10px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }
.sponsored-listing-cta:hover,.sponsored-listing-cta:focus-visible { background: var(--color-primary-hover); color: #fff; }

/* Second inline promotion: shares the standard listing card layout and dimensions. */
.publish-listing-card { border-color: #ded5ef; }
.publish-listing-card .sponsored-listing-visual { background: #202154; }
.publish-listing-card .sponsored-listing-badge { color: #574082; }
.publish-listing-card .sponsored-listing-art-copy > span { color: #f9d9ad; }
.publish-listing-card .sponsored-listing-kicker { color: #79648f; }
.publish-listing-card .sponsored-listing-cta { background: #67509a; }
.publish-listing-card .sponsored-listing-cta:hover,
.publish-listing-card .sponsored-listing-cta:focus-visible { background: #503c7d; }

/* ==========================================
   Единна дизайн система — „Динамична & Продажбена"
   Статус баджове, карти на обяви и CTA бутони.
   Тези класове са идентични на всички страници:
   промяна тук = промяна в целия сайт.
   ========================================== */

/* Базова система за баджове */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

/* Варианти на баджовете */
.badge--new {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.badge--popular {
  background-color: #FEF3C7;
  color: #D97706;
}

.badge--top {
  background-color: #F3E8FF;
  color: #7C3AED;
}

.badge--vip {
  background-color: #FEF08A;
  color: #854D0E;
}

/* Позициониране на баджа върху изображението — еднакво за всички мрежи карти */
.hp-listing-image .badge,
.listing-image .badge,
.ad-thumb .badge,
.ad-related-image-link .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

/* Карта на обява — повърхност, рамка и сянка от новата палитра */
.listing-card,
.market-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Компонент „Карта на обява" (BEM): готов за използване навсякъде */
.classified-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  position: relative;
}

.classified-card__title {
  color: var(--color-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.classified-card__price {
  color: var(--color-price);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.classified-card__meta {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* ==========================================
   Универсални бутони и линкове (глобални компоненти)
   Използвайте .btn + модификатор на ВСЯКА страница:
     .btn            — неутрална основа
     .btn-cta        — главен конверсионен бутон (--color-cta)
     .btn-primary    — основно действие (--color-primary)
     .btn-secondary  — контурно вторично действие
     .btn-ghost      — тихо третично действие
   Промяна на стойност в :root = промяна на всеки бутон и линк в сайта.
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background-color: var(--color-surface);
  color: var(--color-heading);
  font-family: var(--font-base);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Главен конверсионен бутон (CTA) */
.btn-cta {
  background-color: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-on-cta);
}

.btn-cta:hover {
  background-color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

/* Основно действие (търсене, публикуване, навигация в формуляри) */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-cta);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Контурно вторично действие */
.btn-secondary {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

/* Тихо третично действие */
.btn-ghost {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Единни текстови линкове — ховър, фокус и активни състояния */
.link,
.link-muted {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.16s ease;
}

.link:hover,
.link:focus-visible,
.link:active,
.link-muted:hover,
.link-muted:focus-visible,
.link-muted:active {
  color: var(--color-link-hover);
}

.link:hover,
.link:focus-visible {
  text-decoration: underline;
}

.link-muted { color: var(--color-muted); }

/* Единно фокус-състояние за клавиатурна навигация в целия сайт */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}