/* ==========================================================================
   Targeted fixes for template.css (kept byte-identical to the reference
   template) not quite matching this project's actual markup/data shape.
   This file overrides just the specific rules that fight the real markup,
   loaded last, after template.css.
   ========================================================================== */

/* style.css sets `.panel-menu { right: -300px; z-index: 999999 !important; }`
   with NO media query, so it applies at every width. template.css's own
   desktop rule only sets a width for aside#panel-menu and never sets
   `right`, assuming nothing else would push it off-screen — but here
   style.css already has. Result: the right-hand sidebar was permanently
   parked off-screen at every width the aside is actually meant to be
   visible at (>=768px -- template.css hides it outright below that). This
   used to only be patched at >=992px, which left it parked off-screen and
   invisible for the whole 768-991.99px tablet range too. */
@media (min-width: 768px) {
    aside#panel-menu.panel-menu {
        right: 0 !important;
        z-index: 100 !important;
    }
}

/* template.css's `.grid-item a { border: 1px ...; padding: 8px; }` was
   written assuming exactly one <a> per box (the reference template links
   the whole box to one ad). Our boxes hold two DIFFERENT real listings, so
   each row needs its own <a href> — but that made `.grid-item a` match
   both rows and box each one separately instead of the pair. Move the box
   chrome onto the wrapping .ad-card2 div and strip it back off the rows.
   Giving .ad-card2 `position: relative` here is also what makes the
   reference template's own box-card1::after divider (below) resolve its
   `bottom: 50%` against something sane instead of the viewport. */
.grid-item .ad-card2 {
    border-width: 1px;
    border-color: rgb(169, 169, 169);
    border-style: solid;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    padding: 8px;
    position: relative;
    display: block;
}
.grid-item .ad-card2 > a.row {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* template.css's `#main::after` paints a decorative strip using
   images/bg-aside.png, which was never part of the shipped image set —
   the browser was rendering an empty, scrollbar-looking gap next to the
   sidebar for a background image that 404s. Drop the pseudo-element
   entirely, at every width, rather than fake an image that was never
   designed. */
#main::after {
    content: none !important;
    display: none !important;
}

/* The client does not want the sidebar to have its own independent
   scroll region (template.css's `.wrapper-aside { height: 90vh;
   overflow-y: auto }` plus `aside#panel-menu { position: fixed }` pins the
   sidebar to the viewport and scrolls its category list separately from
   the page, like the raw reference template's index3 test page never
   demonstrated). The flexbox two-column layout below (>=768px) already
   takes the sidebar out of fixed/absolute positioning entirely, which is
   what actually fixes this -- these overrides just undo the "independent
   scroll box" sizing template.css put on top of it. */
.wrapper-aside {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    direction: rtl !important;
    /* template.css's 20px right padding plus the ~15px the template's own
       (now removed) scrollbar took on that side, so the sidebar's content
       keeps the approved template's exact width and position. */
    padding-right: 35px !important;
}
aside#panel-menu ul {
    max-height: none !important;
    overflow: visible !important;
}

/* The right-hand category sidebar only renders on pages that declare a
   `sidebar` section (see layouts/app.blade.php's @hasSection('sidebar')
   gate) -- currently the homepage and the search/category listing page.
   Pages that don't request it (product pages, "ثبت آگهی", etc.) get their
   #main back at full width instead of template.css's unconditional
   280px/300px reservation for it. */
@media (min-width: 992px) {
    #main:not(.has-sidebar) {
        width: 100% !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* On a page with a sidebar, template.css positions #main and aside
   independently (margin-right column reservation + absolute/fixed
   sidebar) with no relationship between their heights. That's invisible
   on the homepage, where the ad grid is always taller than the category
   menu, but a category page can have just one or two listings while the
   sidebar's full category tree, links and social icons run much taller
   -- #main ends early and the absolutely-positioned aside dangles on
   past it, stretching the whole document's scrollable height far below
   the visible content and leaving a blank gap under the short listing
   column (and no way to tell the page actually has that much empty
   space until you scroll into it). It's worse below 992px: template.css
   never reserves any column width for the sidebar there at all (that
   only starts at min-width:992px), so the absolutely-positioned aside
   just sat on top of #main's content instead of beside it. Lay the two
   columns out with flexbox instead, from the same 768px breakpoint
   where the sidebar stops being display:none: both back in normal flow,
   side by side, `align-items: stretch` makes them share one height
   (whichever column's content is taller), and `flex: 0 0 auto` on the
   aside sizes it from template.css's own width rule for the current
   breakpoint (300px under 992px, 280px at/above it) instead of a
   hardcoded number here. The homepage (frontend/index3) doesn't extend
   layouts.app -- it's its own standalone template with the same
   #main + aside pair inside a plain `.wrapper` div instead of
   `.page.has-sidebar-layout` -- so it needs the same treatment under
   that selector too. There aside already comes before #main in the
   markup, so it doesn't need `order` to land on the right side, but the
   rule is harmless there either way. */
@media (min-width: 768px) {
    .page.has-sidebar-layout,
    .wrapper {
        display: flex;
        align-items: stretch;
    }
    .page.has-sidebar-layout #main.has-sidebar,
    .wrapper #main.has-sidebar {
        width: auto !important;
        margin-right: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .page.has-sidebar-layout aside#panel-menu,
    .wrapper aside#panel-menu {
        position: static !important;
        flex: 0 0 auto;
        order: -1;
    }
}

/* Highlight the category currently being viewed (or the ancestor branch
   leading to it) in the sidebar's category tree, so users browsing a
   category listing page can see where they are without needing a
   separate breadcrumb/category route to tell them. */
.menu li > a.category-nav-active {
    color: #00398f !important;
    font-weight: 700;
}

/* The current category's filters are listed right under it in the
   category tree; undo the menu row's `line-height: 3` inside them and
   indent them so they read as belonging to that category. */
.menu .category-nav-filters {
    line-height: 1.5;
    padding-right: 12px;
    margin-bottom: 8px;
    border-right: 2px solid #e3eaf6;
}

.menu .category-nav-filters .accordion {
    margin-top: 4px !important;
}

/* The reference template's box-card1::after divider still uses
   `bottom: 50%`, which is 50% of the WHOLE two-listing box's height
   (299px from template.css), not of box-card1 itself. That only lines
   up with the real seam when both listings happen to be exactly half
   that height each - real titles wrap to one or two lines depending on
   length, so the line kept landing inside the first listing instead of
   between the two. Make box-card1 itself the positioning context and
   pin the line to ITS bottom edge, so it always sits at the true seam
   no matter how tall the first listing's content actually renders. */
.crd3 .row.mb-2.box-card1,
.crd2 .row.mb-2.box-card1 {
    position: relative;
}
.crd3 .row.mb-2.box-card1::after,
.crd2 .row.mb-2.box-card1::after {
    bottom: 0 !important;
}

/* The "vs" swap icon (.ad-card-swap) used to be positioned absolute
   against .ad-card2's fixed height (top:0;bottom:0;margin:auto;left:52px
   in template.css), so it floated at a constant spot regardless of where
   the divider line above actually landed - never mind its literal size.
   It's now a plain-flow sibling placed in the markup between box-card1
   and box-card2, given zero height so it takes no layout space and its
   single point sits exactly on the seam between the two rows - no need
   to know box-card1's real (dynamic, content-dependent) rendered height.
   Horizontally, the reference template (rendered directly from
   /template/index.html - see the .ad-card-swap circle sitting on the
   photo/text seam in both stacked rows there) puts the icon at the
   boundary between the photo column and the text column, not at the
   row's horizontal center. That boundary is a constant 136px from the
   row's left edge regardless of breakpoint, because .col-left is pinned
   to `width: 136px !important` unconditionally (col-4 vs col-5 never
   actually matters once that override applies). The previous
   `calc(50% - 3px)` put the icon deep inside the WIDE text column
   instead, where it landed on top of the second listing's title. Kept
   OUT of box-card1/box-card2 (not nested in the link) so .ad-card2's
   `overflow:hidden` and the anchors' own image rules never touch it. */
.crd3 .ad-card-swap,
.crd2 .ad-card-swap {
    position: relative;
    display: block;
    width: auto;
    height: 0;
    margin: 0;
    line-height: 0;
    top: auto;
    bottom: auto;
    left: auto;
    z-index: 3;
}
.crd3 .ad-card-swap img,
.crd2 .ad-card-swap img {
    position: absolute;
    /* box-card1 carries Bootstrap's .mb-2 (margin-bottom: .5rem !important),
       which is what actually separates the two listings - the seam the
       divider (::after, bottom:0 on box-card1) is pinned to sits ABOVE
       that gap, at box-card1's own border edge. This zero-height marker
       lands in normal flow AFTER the gap (right where box-card2 starts),
       so without this offset the icon's center (translateY(-50%)) sat on
       box-card2's top edge instead of the divider. Shifting just the img
       up by that same .5rem re-centers it on the seam - and only the
       img, so the .5rem gap between the two listing photos/rows itself
       (unrelated to the icon) is left exactly as it was. */
    top: -.5rem;
    /* Same horizontal spot as template.css's own rule (32px icon,
       `left:-53px; right:0; margin:auto` across the card's padding box),
       re-expressed against this marker, which spans the card's content
       box (8px padding + 1px border narrower on each side). */
    left: calc(50% - 26.5px);
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* template.css gives .ad-card2 a fixed height (299px desktop / 303px
   mobile) sized for a box holding two stacked listings. A listing with
   no swap option renders alone in that box (see frontend/index3's
   ad-grid loop), so the fixed height just left a big empty gap below
   it. Let a single-listing box size to its own content instead. */
.grid-item .ad-card2.single-ad {
    height: auto !important;
}

/* The reference template's card footer always holds a badge (left) and
   the time (right). A listing without a badge renders the time alone,
   which the footer's space-between would park on the left - keep it on
   the right where the template has it. */
.ad-card-footer > .ad-card-time:only-child {
    margin-left: auto;
}

/* The filters sidebar's "clear filters" link (the template has no filter
   header box to hold it). */
.filters-reset {
    color: #00398f;
    font-size: 13px;
}

/* A separate "معاوضه" CSS badge used to sit here to flag swap listings,
   but it duplicated the site's own watermark (also "معاوضه", also pinned
   to this same top-left corner, baked into every listing photo -- see
   Watermark.php) once that watermark's crop bug was fixed and both
   started rendering on top of each other. Removed in favor of the single
   watermark already on the photo. */

/* Ad boxes the visitor already opened (tracked client-side in
   localStorage, see script.js's markViewedAdBoxes -- works for guests too,
   unlike the account's server-side "recent views") get a muted border/
   background and dimmed title, so scrolling back to a listing grid shows
   at a glance which ones were already checked. */
.grid-item .ad-card2.is-viewed {
    border-color: #c3cad4;
    background-color: #eef1f5;
}
.grid-item .ad-card2.is-viewed .commercial-title {
    color: #8a929d;
}
.grid-item .ad-card2.is-viewed .ad-card-photo img {
    opacity: .6;
    filter: grayscale(55%);
}
.grid-item .ad-card2.is-viewed::before {
    content: "دیده‌شده";
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 4;
    padding: 0 7px;
    font-size: 10px;
    line-height: 18px;
    color: #fff;
    background: rgba(60, 66, 75, .82);
    border-radius: 9px;
    pointer-events: none;
}

/* Flags, on the listing's own half of the swap box, that the ad-owner set
   up more than one swap option (see swap-ad-box.blade.php) - matches
   .badge-negotiable's sizing so it sits at the same visual weight in the
   card footer, just in the site's brand color instead of blue. */
.badge-swap-options {
    background: #ff7a00;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    padding: 3px;
    border-radius: 4px;
    white-space: nowrap;
    direction: rtl;
}

/* Badge group on the swap box's lower half (swap-ad-box.blade.php): the
   "گزینه‌ی معاوضه" flag plus the listing's "قابل مذاکره" and swap-option
   count, kept on one line in the footer's left slot. */
.ad-card-footer .ad-card-badges {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    direction: rtl;
}
.ad-card-footer .ad-card-badges .badge-negotiable,
.ad-card-footer .ad-card-badges .badge-swap-options {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.ad-card-footer .ad-card-badges + .ad-card-time {
    min-width: 0;
    flex: 1 1 auto;
}
.ad-card-footer .ad-card-badges i {
    font-size: 9px;
}

/* Unread-messages dot on the header's account button and "چت و تماس"
   link (header-chat-link / header-unread-poller partials), toggled live
   by polling so it appears without a page refresh. */
.header-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e53935;
    border: 2px solid #fff;
    box-sizing: content-box;
}
.header-unread-dot.is-pulsing {
    animation: header-unread-pulse 1s ease-out 3;
}
@keyframes header-unread-pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .6); }
    100% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
}
/* Keep each header toolbar item (ورود / چت و تماس / پشتیبانی / ثبت آگهی)
   on one line with its icon beside the text, like the static template -
   the flex toolbar was shrinking them until the labels wrapped. */
.right-toolbar > span {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Logged in, the account name is a <button> inside a .dropdown div, while
   چت و تماس / پشتیبانی are inline links with their own line-height - so
   the name's text sat off the others' line. Give every toolbar item the
   same box (28px, content centered) so all labels share one line. */
.right-toolbar > span,
.right-toolbar > span > .dropdown {
    display: inline-flex;
    align-items: center;
}
.right-toolbar .my-account,
.right-toolbar .btn-help,
.right-toolbar .support a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    line-height: 28px;
    border: 0;
}
.header-chat-link .header-unread-dot {
    top: -2px;
    right: -6px;
}

/* Search filters' price in words ("۱۵ میلیون تومان") under each price box,
   filled live by script.js - same look as the ad form's .price-words. */
.filter-price-words {
    color: #0f7b3f;
    font-size: 12px;
    min-height: 18px;
    margin-top: 4px;
}
.filter-price-input {
    font-weight: 600;
    letter-spacing: .5px;
}

/* Listing grids (homepage, category, location and search results) show
   three swap boxes per row on wide screens instead of template.css's two.
   Below 1280px the main column (next to the 280px sidebar) is too narrow
   for three boxes with the fixed 136px photo column, so it stays at two.
   `.grid-2` keeps narrower spots (the ad page's related listings) at two.
   template.css caps #ads at 716px (two ~350px boxes); widen that cap to
   fit three boxes of the same width, or they'd just get squeezed. */
@media (min-width: 1280px) {
    .grid-container:not(.grid-2) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #ads.grid-container:not(.grid-2) {
        max-width: 1082px;
    }
}