/* Stale CapsLock indicator inside ClassiPress /profile/ — hide it. The icon
   leaks through when ClassiPress's password-change UI is hidden, sitting
   awkwardly below the "Generate Password" button. We never need it. */
#caps-warning { display: none !important; }

/* appthemes_notices -> brand cards (success green / error red), all surfaces */
body .content .notice {
  margin: 0 0 18px; padding: 13px 16px; border-radius: 11px;
  font-size: 14.5px; line-height: 1.5;
  background: #f6f4ec; border: 1px solid var(--zem-line,#e8e4dc);
  border-left: 4px solid var(--zem-olive,#6b8e23); color: var(--zem-ink,#2d3b1f);
}
body .content .notice.success { background:#eef4e2; border-color:#cfe0ae; border-left-color:var(--zem-olive,#6b8e23); }
body .content .notice.error   { background:#f7ecea; border-color:#e8cfc9; border-left-color:#b8503f; color:#6e2f24; }
body .content .notice div { margin: 0; }

/* Belt for older stylesheets that look for body.js instead of html.js. NO
   !important — when WP's user-profile.js calls $('.wp-pwd').show() after
   the user clicks "Generate Password", the inline style:display:block must
   win over our default-hide. */
body .hide-if-js  { display: none; }
body .hide-if-no-js { display: revert; }

/* ──────────────────────────────────────────────────────────────
 * Profile-page password UX: show the password input by default.
 * ──────────────────────────────────────────────────────────────
 * WordPress 4.3+ hides the change-password input behind a
 * "Generate Password" button — users have to click it before
 * they can even SEE a password field. For /profile/ on a small
 * site this is friction: most users want to type their own
 * password, not have one generated. We invert the default:
 *
 *   • Password input visible from page-load (.wp-pwd reveal)
 *   • Hidden initially: HIDE / CANCEL buttons — they only make
 *     sense after Generate has run; if the user typed manually
 *     they don't need them
 *   • Generate button stays visible as an OPTIONAL helper
 *
 * Higher specificity (body .wp-pwd) so this wins over the
 * generic `body .hide-if-js { display: none }` rule above.
 * ────────────────────────────────────────────────────────────── */
body .wp-pwd.hide-if-js {
  display: block;
}
body .wp-pwd .wp-hide-pw,
body .wp-pwd .wp-cancel-pw {
  display: none;
}
/* Tighten the spacing between the inline "Generate" button and the
   password input so they don't look disconnected. */
body .wp-pwd .wp-generate-pw {
  margin-bottom: 8px;
}

/* ──────────────────────────────────────────────────────────────
 * 8. Mobile-only layout fixes
 * ──────────────────────────────────────────────────────────────
 * Three issues observed on 375px viewport:
 *  a) "Новини" / "Времето" / "Ключови думи" sidebar widgets land
 *     below all listing content. The page has a "load more"
 *     auto-scroll which keeps appending listings, so users never
 *     actually reach these widgets. Dead weight on mobile —
 *     hide and reclaim the vertical space.
 *  b) Header social row wraps: RSS sits on row 1 next to the
 *     "Здравейте..." greeting, then Facebook + Twitter fall to
 *     row 2 alone. Visually awkward. Switch to flex+center+wrap
 *     so the greeting and icon strip layer predictably.
 *  c) Footer menu items render flush-left on the green strip
 *     instead of centered. Fix with text-align + inline-block.
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* (a) Hide news / weather / keyword-tag widgets */
  #text-13,        /* Новини      */
  #text-5,         /* Времето     */
  #tag_cloud-3 {   /* Ключови думи */
    display: none !important;
  }

  /* (b) Header social row — ONE LINE: icons left, greeting right.
     The .zem-social-row span (JS-injected below) is positioned absolute
     so the greeting text flows independently to the right. Pad-left on
     the <p> reserves room for the icon strip.

     ClassiPress's .srvicon comes with ~50px width/padding baked in. We
     override to a compact 18px icon + 6px gap so 3 icons fit in 78px,
     leaving plenty of room for the greeting on a 375px viewport. */
  .header_top_res p {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    line-height: 1.35;
    min-height: 30px;
    padding: 3px 4px;            /* icons + greeting are now in-flow flex items */
    margin: 0;
    font-size: 11px;
    text-align: right;
  }
  /* ClassiPress sets the inline "Вход" anchor to display:block + 6px padding,
     which makes it a 40px-tall flex item in the band. Normalize to inline so
     it baseline-aligns with the surrounding "[" "]" brackets. */
  .header_top_res p a:not(.srvicon) {
    display: inline-flex !important;
    align-items: center;
    padding: 2px 2px !important;
    line-height: 1.35 !important;
  }
  .header_top_res p .zem-social-row {
    order: -1;                   /* icons render first (left) ... */
    flex: 0 0 auto;
    margin-right: auto;          /* ... and push the greeting to the right */
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .header_top_res p .zem-greet {
    flex: 0 1 auto;
    min-width: 0;                /* greeting shrinks + wraps; never overlaps icons */
    text-align: right;
  }
  .header_top_res p .zem-acct {
    white-space: nowrap;         /* [ Dashboard | Logout ] stays one unit; no orphan ] */
  }
  /* Higher specificity than ClassiPress's `.header_top_res p a.srvicon`
     (needed: body+a tags push specificity above the original rule). */
  body .header_top_res p a.srvicon {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-position: center !important;
    background-size: 16px 16px !important;
  }
  body .header_top_res p a.srvicon::before {
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* (c) Footer menu — center the nav items on the green strip.
     ClassiPress floats menu items left and adds "|" separators via
     ::before. On flex+wrap layout those "|" start each visual row
     and look broken. Override both. */
  .footer_menu_res {
    text-align: center;
    padding: 8px 0;
  }
  /* theme gives .footer_main_res margin-right:-32px (desktop artifact) ->
     16px horizontal overflow on several mobile pages. Neutralize globally. */
  .footer_main_res {
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* search field at 16px (prevents iOS focus-zoom); nav select comfortable */
  #searchform #s, .editbox_search { font-size: 16px !important; min-height: 44px !important; box-sizing: border-box !important; }
  select.tinynav, .tinynav { min-height: 44px !important; font-size: 15px !important; }
  #footer-nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
  }
  #footer-nav-menu li {
    display: inline-block;
    float: none !important;
    padding: 0;
    margin: 0;
  }
  /* Kill the "|" pseudo separators on both sides — flex gap handles spacing */
  #footer-nav-menu li::before,
  #footer-nav-menu li::after {
    content: none !important;
  }
  /* ClassiPress draws the "|" separators as a 1px white border-left on
     every item but the first. With flex+wrap the line shows at the start
     of each wrapped row. Strip them — the flex gap already separates. */
  #footer-nav-menu li {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* ──────────────────────────────────────────────────────────────
   * (d) Green nav bar: dropdown + НОВА ОБЯВА on same row.
   * ──────────────────────────────────────────────────────────────
   * ClassiPress floats the tinynav <select> left and the orange CTA
   * button right inside .header_menu_res, but on 360px-wide mobile
   * they break to two rows with empty space between. Switch the
   * container to flex+space-between so they sit on one row,
   * vertically centered. */
  .header_menu_res {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }
  /* Hide the legacy clearfix div — as a flex sibling it eats ~95px of
     width and prevents space-between from pushing button to the right. */
  .header_menu_res > .clr {
    display: none !important;
  }
  /* Dropdown grows to fill all remaining space between left edge and
     button. min-width:0 + width:auto is required so flex-grow actually
     overrides the select's intrinsic content-width. max-width caps it
     so the CTA can't shrink. */
  .header_menu_res .tinynav {
    float: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 160px);   /* leave at least 160px for the CTA */
    margin: 0 !important;
    padding: 8px 28px 8px 10px;       /* room on the right for the native caret */
    height: 38px;
  }
  .header_menu_res .obtn,
  .header_menu_res a.btn_orange {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    margin-left: auto !important;     /* belt for space-between */
  }

  /* ──────────────────────────────────────────────────────────────
   * (e) Listing cards .post-block-out overflow their parent by 29px.
   * ──────────────────────────────────────────────────────────────
   * .alm-listing parent: x=18, right=342, w=324 (matches cats box).
   * .post-block-out:     x=18, right=371, w=353 (overflows by 29px)
   * ClassiPress sets a hard width on the card based on desktop sidebar
   * math, but on mobile the parent column is narrower. Clip to parent. */
  body .post-block-out {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* ──────────────────────────────────────────────────────────────
   * (e.2) Listing card on mobile — title next to image (right of it),
   * price on its own full-width row below the image+title row, then
   * meta, then description.
   * ──────────────────────────────────────────────────────────────
   *
   * Strategy: CSS grid + display:contents on the inner .post-right.full
   * wrapper, so its children (h3, price-wrap, meta, desc) become direct
   * grid items of .post-block alongside .post-left. We can then place
   * each child by named grid-area regardless of the fixed DOM order
   * (ClassiPress outputs: image, price, title, meta, desc).
   *
   * Layout:
   *   "image title"   ← image left 100×100, title wraps in right column
   *   "price price"   ← price full-width row below (fits any length)
   *   "meta  meta"    ← meta full-width below price
   *   "desc  desc"    ← description full-width at bottom
   *
   * Price always gets its own full-width row so long strings like
   * "По договаряне" (~173px) never overflow.
   */
  body .post-block-out .post-block {
    display: grid !important;
    grid-template-columns: 100px 1fr;
    grid-template-areas:
      "image title"
      "price price"
      "meta  meta"
      "desc  desc";
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
    position: static !important;
  }
  /* display:contents lifts .post-right.full's children into the grid */
  body .post-block-out .post-right.full {
    display: contents !important;
  }
  /* Image — top-left, never stretches */
  body .post-block-out .post-left {
    grid-area: image;
    float: none !important;
    margin: 0 !important;
    width: 100px !important;
    align-self: start;
  }
  body .post-block-out .post-left img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
    display: block;
    border-radius: 4px;
  }
  /* Title — right column next to image, wraps freely.
     overflow-wrap:anywhere lets long Cyrillic words like
     "ВЪЗДУХОПРОПУСКЛИВА" (~180px) break inside the 168px-wide
     title cell instead of overflowing the card right edge. */
  body .post-block-out .post-right.full > h3,
  body .post-block-out .post-right.full > h2 {
    grid-area: title;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: 15px !important;
    align-self: center;   /* short titles center against the 100px image; taller titles define the row and flow naturally */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    min-width: 0;
  }
  /* Price chip — own full-width row, left-aligned (under the image) */
  body .post-block-out .tags.price-wrap {
    grid-area: price;
    position: static !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center;
  }
  body .post-block-out .tags.price-wrap .tag-head {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    line-height: 1.2 !important;
  }
  body .post-block-out .tags.price-wrap .post-price {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
  }
  /* Meta — full-width row below price */
  body .post-block-out .post-right.full > p.post-meta {
    grid-area: meta;
    margin: 0 !important;
    align-self: start;
  }
  /* Description — full-width row at bottom */
  body .post-block-out .post-right.full > p.post-desc {
    grid-area: desc;
    margin: 4px 0 0 0 !important;
  }
  /* ClassiPress's float clearfix divs would break the grid → hide them */
  body .post-block-out .post-right.full > .clr {
    display: none !important;
  }

  /* ──────────────────────────────────────────────────────────────
   * (f) Footer .dotted — bring back as a short, centred separator.
   *     Original had it full-width tied to the (empty) sidebar widget
   *     area, dangling weirdly. Trim to a 60%-wide centred line so it
   *     reads as a deliberate divider above the copyright.
   * ────────────────────────────────────────────────────────────── */
  .footer .footer_main .dotted {
    display: block;
    width: 60%;
    margin: 0 auto 12px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
    height: 0;
    min-height: 0;
    padding: 0;
  }

  /* ──────────────────────────────────────────────────────────────
   * (g) Below-the-fold AdSense widget #custom_html-5 — sits in the
   *     content_right widget area, just above the footer on mobile.
   *     Contains an <ins.adsbygoogle> slot that renders a 300×250
   *     filler. Useful on desktop sidebar, dead weight on mobile.
   * ────────────────────────────────────────────────────────────── */
  #custom_html-5 {
    display: none !important;
  }

}

/* ─────────────────────────────────────────────────────────────────
 * Single-post tag chips at the bottom of an article — applies to
 * both DESKTOP and MOBILE (outside the @media block).
 *
 * ClassiPress markup is:
 *   <div class="prdetails">
 *     <p class="dashicons-before tags"> a a a a a </p>
 *     <p class="dashicons-before print"> ... </p>
 *   </div>
 *
 * Theme defaults: both <p> are `float: right`, leaving .prdetails
 * collapsed (~10px) so the tag row visually OVERFLOWS below the
 * white .shadowblock card. We rebuild:
 *   1. .prdetails → display: flow-root  (contain the floats)
 *   2. children    → float: none         (out of float flow)
 *   3. .tags       → flex + wrap         (chips + icon flow together)
 *   4. chips       → rounded pill, brand green, tight padding
 *
 * Desktop gets slightly bigger chips than mobile via the (max-width:
 * 600px) override at the very bottom of this rule cluster.
 * ───────────────────────────────────────────────────────────────── */
body .single .prdetails,
body .post .prdetails {
  display: flow-root !important;
  padding: 12px 0 !important;
}
/* Posts whose tags were pruned in the 08.2026 taxonomy cleanup: the theme
   prints a bare "Няма етикети" row — hide it when there are no chips. */
body p.dashicons-before.tags:not(:has(a)) {
  display: none !important;
}
body .single .dashicons-before.tags,
body p.dashicons-before.tags,
body .dashicons-before.print {
  float: none !important;
}
body .single .dashicons-before.tags,
body p.dashicons-before.tags {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px !important;
  padding: 0 !important;
  position: static !important;
  margin: 0 0 8px !important;
}
/* Dashicons label glyph as a real flex item — re-flows with the chips. */
body .dashicons-before.tags::before {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: #8a8a78;
  font-size: 16px !important;
  line-height: 1 !important;
}
/* Rounded pill chips — brand green on light-green pill. */
body .dashicons-before.tags > a,
body .dashicons-before.tags > a:link,
body .dashicons-before.tags > a:visited {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 3px 10px !important;
  background: #eef2e4 !important;
  color: #536c2e !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body .dashicons-before.tags > a:hover {
  background: #dbe6c4 !important;
  border-color: #b9c79f;
  text-decoration: none !important;
}
/* Mobile: slightly tighter chip padding + smaller font to pack into
   the narrow card width. */
@media (max-width: 600px) {
  body .dashicons-before.tags > a,
  body .dashicons-before.tags > a:link,
  body .dashicons-before.tags > a:visited {
    padding: 2px 8px !important;
    font-size: 11px !important;
  }
  body .single .dashicons-before.tags,
  body p.dashicons-before.tags {
    gap: 4px 5px !important;
  }
  body .dashicons-before.tags::before {
    font-size: 15px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Defensive: let listing titles break inside very long unbreakable
 * tokens (e.g. "сапани,буксири,стоманени" — author forgot the spaces
 * after commas → browser sees one ~22-char "word" and the title
 * column overflows / pushes the layout around).
 *
 * `overflow-wrap: break-word` only kicks in when the word genuinely
 * doesn't fit; normal-width words still wrap at whitespace as usual.
 * Applies to BOTH desktop and mobile (mobile already had this inside
 * its @media block — duplicated here is fine, identical declarations).
 * ───────────────────────────────────────────────────────────────── */
.post-block-out .post-right.full > h3,
.post-block-out .post-right.full > h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}