/* ============================================================
   MALTALIST — MAIN STYLESHEET
   File: style.css

   TABLE OF CONTENTS:
   1.  CSS Variables    — all colors, fonts, sizes in one place
   2.  Reset            — remove browser default styles
   3.  Base             — body font, background, links
   4.  Layout           — the "container" that centers content
   5.  Header           — sticky top bar
   6.  Hero / Search    — big search area at the top
   7.  Categories       — 12 category card grid
   8.  Listings         — recent ads grid
   9.  Footer           — bottom links and copyright
   10. Responsive       — tablet (768px) and desktop (1024px) rules
============================================================ */


/* ============================================================
   1. CSS VARIABLES (Design Tokens)

   Think of these as "named settings" for the whole design.
   If you want to change the accent color, you change it in
   ONE place here and it updates everywhere automatically.
============================================================ */
:root {
    /* --- COLORS --- */
    --c-bg:              #FAFAF7;   /* Page background: warm off-white */
    --c-surface:         #FFFFFF;   /* Cards and panels: pure white */
    --c-section-alt:     #F4F0E8;   /* Alternate section background: sandy cream */

    --c-text:            #1C1C1A;   /* Main text: near-black with warm tone */
    --c-text-muted:      #787774;   /* Secondary text: medium gray */
    --c-text-light:      #ABA8A4;   /* Placeholder / timestamps: light gray */

    --c-accent:          #D4521F;   /* Primary accent: terracotta orange */
    --c-accent-dark:     #B8451A;   /* Accent on hover: slightly darker */
    --c-accent-pale:     #FDF1EC;   /* Very light accent: for icon backgrounds */

    --c-border:          #E8E3DC;   /* Default border: warm light gray */
    --c-border-strong:   #D0C9C1;   /* Stronger border: for hover states */

    /* --- TYPOGRAPHY --- */
    --font:              'Outfit', sans-serif;

    /* --- SPACING --- */
    --space-xs:    4px;
    --space-s:     8px;
    --space-m:    16px;
    --space-l:    24px;
    --space-xl:   40px;
    --space-2xl:  64px;

    /* --- SHAPES --- */
    --radius-s:    6px;
    --radius-m:   12px;
    --radius-l:   20px;

    /* --- SHADOWS --- */
    /* Cards at rest */
    --shadow-card:       0 1px 3px rgba(28,28,26,0.06), 0 2px 8px rgba(28,28,26,0.04);
    /* Cards on hover */
    --shadow-hover:      0 4px 20px rgba(28,28,26,0.10), 0 1px 4px rgba(28,28,26,0.06);

    /* --- TRANSITIONS --- */
    /* Standard smooth animation for hover effects */
    --ease:              0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   2. RESET
   Browsers add their own margins, paddings, etc.
   This removes them so we start from zero.
============================================================ */

/* Apply box-sizing to everything.
   This means padding is included in the element's total width. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default blue underline from all links */
a {
    color: inherit;
    text-decoration: none;
}

/* Remove bullet points from lists */
ul, ol { list-style: none; }

/* Make images fill their container without overflow */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Make buttons use our font, not the browser default */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}


/* ============================================================
   2b. MOBILE OVERFLOW FIX
   Prevents horizontal scroll on all pages at mobile widths.
============================================================ */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Long words / URLs in user content must wrap */
p, h1, h2, h3, h4, h5, h6,
.listing-title, .listing-desc,
.listing-detail-title, .listing-detail-desc,
.saved-card h3, .profile-content,
.message-bubble, .chat-message {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Images and embeds must never exceed their container */
img, video, iframe, embed, object {
    max-width: 100%;
}

/* List-view card: fixed 200px thumb collapses on small screens */
@media (max-width: 600px) {
    .listings-grid--list .listing-img-wrap {
        width: 100%;
        max-width: 100%;
        height: 180px;
    }
    .listings-grid--list .listing-card {
        flex-direction: column;
    }
}


/* ============================================================
   3. BASE
   The foundation: font, background color, text color.
============================================================ */

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    /* Makes text look sharper on screens (especially Mac/iPhone) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   4. LAYOUT — CONTAINER
   The container is a wrapper that:
   - takes full width on mobile
   - limits width to 1200px on large screens
   - adds side padding so content doesn't touch the screen edge
============================================================ */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;       /* Center the container horizontally */
    padding: 0 var(--space-m);  /* 16px side padding on mobile */
}


/* ============================================================
   5. HEADER
   Sticky bar at the top of every page.
   Stays visible as you scroll down.
============================================================ */

.header {
    position: sticky;     /* Stick to the top */
    top: 0;
    z-index: 100;         /* Sit above all other content */
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

/* The inner row: logo | nav | actions */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;         /* Fixed header height */
    gap: var(--space-m);
}

/* ----- LOGO ----- */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;       /* Logo never shrinks */
}

/* The "ML" orange square badge */
.logo-badge {
    width: 32px;
    height: 32px;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

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

/* ----- NAVIGATION (hidden on mobile) ----- */
.header-nav {
    display: none;  /* Hidden by default — shown at 768px+ */
    align-items: center;
    gap: var(--space-l);
}

.header-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-muted);
    transition: color var(--ease);
}

.header-nav a:hover {
    color: var(--c-text);
}

/* ----- ACTIONS: Sign In + Post Ad ----- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-shrink: 0;
}

/* Sign In — plain text, hidden on mobile */
.btn-signin {
    display: none;  /* Shown at 768px+ */
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-s);
    transition: color var(--ease);
}

.btn-signin:hover {
    color: var(--c-text);
}

/* Post Ad — the orange call-to-action button */
.btn-post-ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    white-space: nowrap;  /* Don't wrap to two lines */
    transition: background var(--ease), transform var(--ease);
}

.btn-post-ad:hover {
    background: var(--c-accent-dark);
}

/* Slight press-down effect on click */
.btn-post-ad:active {
    transform: scale(0.97);
}

/* ----- HAMBURGER BUTTON (mobile only, hidden on desktop) ----- */
.btn-hamburger {
    display: flex;            /* Visible on mobile by default */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--c-text);
    border-radius: var(--radius-s);
    transition: background var(--ease);
}

.btn-hamburger:hover {
    background: var(--c-section-alt);
}


/* ============================================================
   5b. MOBILE MENU
   The full-height drawer that slides in from the right.
   CSS transitions handle the animation.
   JavaScript (bottom of page) toggles the "is-open" class.
============================================================ */

/* Dark backdrop behind the menu panel */
.mobile-overlay {
    position: fixed;
    inset: 0;               /* Covers the entire screen */
    background: rgba(28, 28, 26, 0.45);
    z-index: 200;
    /* Hidden by default: invisible and unclickable */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* JS adds "is-open" → overlay fades in and becomes clickable */
.mobile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* The white menu panel */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    /* min(300px, 88vw) = 300px, but never wider than 88% of the screen */
    width: min(300px, 88vw);
    height: 100dvh;            /* dvh = works correctly on iPhone Safari */
    background: var(--c-surface);
    z-index: 300;              /* Sits above the overlay */
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(28,28,26,0.10);
    overflow-y: auto;
    /* Start position: completely off the right edge of the screen */
    transform: translateX(100%);
    /* Smooth spring-like slide animation */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* JS adds "is-open" → panel slides in from the right */
.mobile-menu.is-open {
    transform: translateX(0);
}

/* Top row inside the menu: logo on the left, X on the right */
.mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-m);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

/* X (close) button */
.btn-menu-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    border-radius: var(--radius-s);
    transition: background var(--ease), color var(--ease);
}

.btn-menu-close:hover {
    background: var(--c-section-alt);
    color: var(--c-text);
}

/* Navigation link list */
.mobile-menu-links {
    flex: 1;
    padding: var(--space-s) 0;
}

/* Each navigation link row */
.mobile-menu-link {
    display: block;
    padding: 15px var(--space-l);
    font-size: 16px;
    font-weight: 500;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    transition: background var(--ease), color var(--ease);
}

.mobile-menu-link:first-child {
    border-top: 1px solid var(--c-border);
}

.mobile-menu-link:hover {
    background: var(--c-accent-pale);
    color: var(--c-accent);
    padding-left: 28px;       /* Slight indent on hover */
}

/* Sign In + Post Ad buttons at the bottom of the menu */
.mobile-menu-actions {
    padding: var(--space-l);
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    flex-shrink: 0;
}

/* Sign In — outlined button */
.mobile-btn-signin {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-s);
    transition: border-color var(--ease), background var(--ease);
}

.mobile-btn-signin:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-pale);
    color: var(--c-accent);
}

/* Make the Post Ad button full-width inside the mobile menu */
.mobile-menu-actions .btn-post-ad {
    justify-content: center;
    padding: 12px;
    font-size: 15px;
}


/* ============================================================
   6. HERO / SEARCH SECTION
   The first thing users see: title + search bar + quick links.
============================================================ */

.hero {
    background-color: var(--c-section-alt);
    border-bottom: 1px solid var(--c-border);
    padding: 48px 0 44px;
    text-align: center;
}

.hero-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.025em;  /* Tighten letter-spacing for large headings */
    line-height: 1.15;
    margin-bottom: var(--space-s);
}

.hero-subtitle {
    font-size: 15px;
    color: var(--c-text-muted);
    margin-bottom: var(--space-xl);
}

/* ----- SEARCH FORM ----- */
.search-form {
    max-width: 660px;
    margin: 0 auto var(--space-l);
}

/* The white search bar container */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    /* Smooth transition when the user focuses inside */
    transition: border-color var(--ease), box-shadow var(--ease);
}

/* When anything inside the search bar is focused, highlight the border */
.search-bar:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-pale);
}

/* The magnifying glass icon inside the search bar */
.search-icon {
    flex-shrink: 0;
    margin-left: var(--space-m);
    color: var(--c-text-muted);
    pointer-events: none;  /* The icon itself is not clickable */
}

/* The text input where you type */
.search-input {
    flex: 1;              /* Takes all available horizontal space */
    border: none;
    outline: none;        /* No default blue outline on focus */
    font-family: var(--font);
    font-size: 15px;
    color: var(--c-text);
    background: transparent;
    padding: 14px var(--space-m);
    min-width: 0;         /* Prevents overflow on small screens */
}

.search-input::placeholder {
    color: var(--c-text-light);
}

/* The location dropdown (hidden on mobile) */
.search-location {
    display: none;  /* Shown at 640px+ */
    border: none;
    border-left: 1px solid var(--c-border);
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-text);
    background: transparent;
    padding: 14px var(--space-m);
    cursor: pointer;
    min-width: 140px;
    /* Remove default arrow on some browsers */
    appearance: auto;
}

/* The orange search button */
.search-btn {
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    padding: 0 var(--space-l);
    min-height: 50px;     /* Same height as the input fields */
    flex-shrink: 0;
    transition: background var(--ease);
    border-radius: 0;     /* Square edge — it's already inside the rounded container */
}

.search-btn:hover {
    background: var(--c-accent-dark);
}

/* ----- MOBILE LOCATION ROW -----
   Shown below the search bar on phones (<640px).
   Hidden on 640px+ where the inline dropdown appears inside the bar. */
.search-location-row {
    display: flex;           /* Visible on mobile by default */
    align-items: center;
    gap: var(--space-s);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: 0 var(--space-m);
    margin-top: var(--space-s);
    box-shadow: var(--shadow-card);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.search-location-row:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-pale);
}

.location-pin-icon {
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.search-location-mobile {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-text);
    background: transparent;
    padding: 13px 0;
    cursor: pointer;
}

/* ----- QUICK LINKS ----- */
.hero-quicklinks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;      /* Wrap to next line on small screens */
    gap: var(--space-s);
    font-size: 13px;
}

.quicklinks-label {
    color: var(--c-text-muted);
    margin-right: 2px;
}

.hero-quicklinks a {
    color: var(--c-accent);
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color var(--ease);
    padding-bottom: 1px;
}

.hero-quicklinks a:hover {
    border-bottom-color: var(--c-accent);
}


/* ============================================================
   7. CATEGORIES SECTION
   Grid of 12 clickable category cards.
============================================================ */

.categories {
    padding: var(--space-2xl) 0;
    background: var(--c-bg);
}

/* The row above the grid: "Browse by Category" + "View all" link */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-l);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--c-text);
}

.section-viewall {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-accent);
    transition: opacity var(--ease);
    white-space: nowrap;
}

.section-viewall:hover {
    opacity: 0.75;
}

/* ----- CATEGORIES GRID ----- */
/* Mobile: 2 columns. Grows to 3, then 4 on larger screens. */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-s);
}

/* ----- SINGLE CATEGORY CARD ----- */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-l) var(--space-m);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    gap: var(--space-s);
    /* Smooth hover transitions */
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    cursor: pointer;
}

.cat-card:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);  /* Float up slightly */
}

/* The icon container: square with pale orange background */
.cat-icon {
    width: 48px;
    height: 48px;
    background: var(--c-accent-pale);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    flex-shrink: 0;
}

.cat-icon svg {
    width: 24px;
    height: 24px;
}

.cat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

/* The ad count below the name */
.cat-count {
    font-size: 12px;
    color: var(--c-text-muted);
}


/* ============================================================
   8. LISTINGS SECTION
   Grid of recent ad cards with photos, prices, and details.
============================================================ */

.listings-section {
    padding: var(--space-2xl) 0;
    background: var(--c-section-alt);
    border-top: 1px solid var(--c-border);
}

/* ----- LISTINGS GRID ----- */
/* Mobile: 1 column. Grows to 2, then 3 on larger screens. */
.listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

/* ----- SINGLE LISTING CARD ----- */
/* "position: relative" is needed so the save button can be
   positioned in the corner of the card. */
.listing-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: box-shadow var(--ease), transform var(--ease);
}

.listing-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* NEW badge — top-left, only when listing is < 72h old (is-new class) */
.listing-card.is-new::before {
    content: 'NEW';
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: #D4521F;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 3;
    pointer-events: none;
    letter-spacing: .03em;
}

/* When premium + new: NEW moves right to leave room for heart icon */
.listing-card.is-premium.is-new::before {
    left: auto;
    right: 60px;
}

/* Hide old span badge when ::before NEW is active */
.listing-card.is-new .listing-badge--new {
    display: none;
}

/* Premium listing — no gold border, standard card outline */
.listing-card.is-premium {
    border: 1px solid #E5E5E0;
}

/* Premium badge — matches detail page .info-premium-badge style */
.listing-card.is-premium::after {
    content: '⭐ Premium';
    position: absolute;
    top: 8px;
    left: 8px;
    background: #FEF3C7;
    color: #9B6B00;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
}

/* The link that covers the card content (image + info) */
.listing-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ----- IMAGE AREA ----- */
/* "padding-top: 66.66%" creates a 3:2 aspect ratio box.
   The image is then positioned absolutely to fill it. */
.listing-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 66.66%;  /* 3:2 ratio — height = 2/3 of width */
    background: var(--c-border);
    overflow: hidden;
}

/* The actual photo */
.listing-img-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Fill the box, crop if needed */
    transition: transform 0.4s ease;
}

/* Zoom the photo slightly when hovering the card */
.listing-card:hover .listing-img-wrap img {
    transform: scale(1.04);
}

/* Placeholder for listings without a photo (jobs, services) */
.listing-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    font-size: 13px;
    font-weight: 500;
}

/* Jobs placeholder: warm sand background */
.listing-placeholder--jobs {
    background: #EDE8DF;
    color: #7A6E5F;
}

/* Services placeholder: soft green background */
.listing-placeholder--services {
    background: #E8EFE4;
    color: #4A6742;
}

/* The category label on top of the image (e.g. "Real Estate") */
.listing-badge {
    position: absolute;
    bottom: var(--space-s);
    left: var(--space-s);
    background: rgba(28, 28, 26, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.03em;
    /* Frosted glass blur effect */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* The heart save button (top-right corner of image) */
.listing-save-btn {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    z-index: 2;           /* Sit above the card link so it's clickable */
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: color var(--ease), background var(--ease), transform var(--ease);
}

.listing-save-btn:hover {
    color: var(--c-accent);
    background: #fff;
    transform: scale(1.1);
}

/* ----- TEXT CONTENT (below the image) ----- */
.listing-body {
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;  /* Takes remaining height in the card */
}

/* Price: big and bold */
.listing-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.01em;
}

/* The "/ month" or "/ yr" suffix after the price */
.listing-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--c-text-muted);
}

/* Title: 2-line clamp — cuts off with "..." if too long */
.listing-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.4;
    /* The three lines below limit text to 2 lines maximum */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Row at the bottom of the card: location + time */
.listing-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;     /* Push to the bottom of the card */
    padding-top: var(--space-s);
}

.listing-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--c-text-muted);
}

.listing-time {
    font-size: 12px;
    color: var(--c-text-light);
}

/* "View all listings" button below the grid */
.listings-cta {
    text-align: center;
    margin-top: var(--space-xl);
}

.btn-view-all {
    display: inline-block;
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-s);
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.btn-view-all:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-pale);
}


/* ============================================================
   9. FOOTER
============================================================ */

.footer {
    background: #28241F;  /* Dark warm near-black */
    color: #8A8480;
    padding: var(--space-2xl) 0 var(--space-l);
}

/* Top row: brand column + link columns side by side */
.footer-top {
    display: flex;
    flex-direction: column;  /* Stack on mobile */
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: var(--space-l);
}

/* Footer logo inherits the .logo styles but with white text */
.footer-logo .logo-name {
    color: #fff;
}

.footer-tagline {
    font-size: 14px;
    color: #5A5652;
    margin-top: var(--space-s);
    line-height: 1.7;
}

/* The three link columns */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
}

.footer-col h4 {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-m);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-col a {
    display: block;
    font-size: 14px;
    color: #6A6662;
    margin-bottom: var(--space-s);
    transition: color var(--ease);
}

.footer-col a:hover {
    color: #A8A4A0;
}

/* Bottom bar: copyright */
.footer-bottom {
    display: flex;
    flex-direction: column;  /* Stack on mobile */
    gap: 4px;
    font-size: 13px;
    color: #4A4642;
}


/* ============================================================
   10. RESPONSIVE — TABLET (640px and above)
   Screen width: 640px+ covers large phones (iPhone Pro Max,
   Android) and small tablets in portrait mode.
============================================================ */

@media (min-width: 640px) {

    /* Show the inline location dropdown inside the search bar */
    .search-location {
        display: block;
    }

    /* Hide the mobile location row — no longer needed */
    .search-location-row {
        display: none;
    }

    /* Listings: switch to 2 columns */
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ============================================================
   RESPONSIVE — TABLET (768px and above)
   Screen width: 768px+ covers tablets and small laptops.
============================================================ */

@media (min-width: 768px) {

    /* Wider container padding on tablets */
    .container {
        padding: 0 var(--space-xl);
    }

    /* Hide the hamburger button — desktop has full navigation */
    .btn-hamburger {
        display: none;
    }

    /* Hide the mobile menu and overlay — never needed on desktop */
    .mobile-overlay,
    .mobile-menu {
        display: none;
    }

    /* Show header nav links and sign in button */
    .header-nav {
        display: flex;
    }

    .btn-signin {
        display: inline-flex;
    }

    /* Bigger hero title */
    .hero-title {
        font-size: 42px;
    }

    .hero {
        padding: 64px 0 56px;
    }

    /* Categories: 3 columns on tablet */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-m);
    }

    /* Footer top: side by side instead of stacked */
    .footer-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .footer-brand {
        max-width: 200px;
        flex-shrink: 0;
    }

    .footer-links {
        flex: 1;
        max-width: 520px;
    }

    /* Footer bottom: horizontal */
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }

}


/* ============================================================
   RESPONSIVE — DESKTOP (1024px and above)
   Screen width: 1024px+ covers laptops and desktop monitors.
============================================================ */

@media (min-width: 1024px) {

    /* Even bigger hero title on desktop */
    .hero-title {
        font-size: 52px;
    }

    .hero {
        padding: 80px 0 68px;
    }

    /* Categories: 4 columns = 3 rows of 4 for 12 categories */
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Listings: 3 columns (shows 8 cards in a 3-3-2 pattern) */
    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* ============================================================
   11. KATEGORIJAS LAPA — BREADCRUMB
   Plāna josla zem header: "Home › Real Estate"
   Palīdz lietotājam orientēties un atgriezties atpakaļ
============================================================ */

/* Ārējais konteiners: balta josla ar apakšas apmali */
.breadcrumb-nav {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0;
}

/* Horizontāls saraksts ar padding */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 12px 0;
    font-size: 13px;
}

/* Saites stils (Home) */
.breadcrumb a {
    color: var(--c-accent);
    font-weight: 500;
    transition: opacity var(--ease);
}

.breadcrumb a:hover {
    opacity: 0.75;
}

/* "›" separators starp posmiem */
.breadcrumb-sep {
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1;
}

/* Aktīvā lapa (Real Estate) — tumšāks, bold */
.breadcrumb-current {
    color: var(--c-text);
    font-weight: 600;
}


/* ============================================================
   12. KATEGORIJAS HERO
   Mazāka hero sekcija nekā homepage — parāda kategorijas kontekstu.
   Izmanto tās pašas .search-form, .search-bar klases kā homepage.
============================================================ */

.cat-page-hero {
    background-color: var(--c-section-alt);
    border-bottom: 1px solid var(--c-border);
    /* Mazāks padding nekā homepage hero (48px 0 44px) */
    padding: 36px 0 32px;
    text-align: center;
}

/* Ikona virs virsraksta */
.cat-hero-icon {
    width: 52px;
    height: 52px;
    background: var(--c-accent-pale);
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    margin: 0 auto var(--space-m);
}

.cat-hero-icon svg {
    width: 26px;
    height: 26px;
}

/* Kategorijas lapa: mazāks virsraksts (sāk mobilajā ar 24px) */
.cat-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--space-s);
}

.cat-hero-subtitle {
    font-size: 15px;
    color: var(--c-text-muted);
    margin-bottom: var(--space-m);
}

/* Statistikas josla: "● 1,243 active listings" */
.cat-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: var(--space-l);
}

/* Zaļš pulsējošs punkts = "live data" indikatiors */
.stats-live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;   /* zaļa krāsa = aktīvs */
    border-radius: 50%;
    flex-shrink: 0;
    /* Pulsēšanas animācija — CSS keyframes */
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Kategorijas lapas search forma ir mazliet kompaktāka */
.cat-page-hero .search-form {
    max-width: 580px;   /* mazliet šaurāka nekā homepage (660px) */
}


/* ============================================================
   13. APAKŠKATEGORIJU RESTS
   Galvenais kategorijas lapas elements — 11 apakškategoriju kartes
   Mobile: 1 kolonna | Tablet 640px+: 2 | Desktop 1024px+: 3
============================================================ */

.subcats {
    padding: var(--space-2xl) 0;
    background: var(--c-bg);
}

/* Teksts pa labi no "Browse Real Estate" virsraksta */
.subcats-total {
    font-size: 13px;
    color: var(--c-text-muted);
    font-weight: 500;
}

/* Rests: mobilajā 1 kolonna */
.subcats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

/* Viena apakškategorijas karte */
.subcat-card {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    /* Vienmērīgas pārejas hover efektam */
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    cursor: pointer;
}

.subcat-card:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Uz hover: ikona kļūst nedaudz tumšāka */
.subcat-card:hover .subcat-icon {
    background: var(--c-accent);
    color: #fff;
}

/* Kvadrātveida ikonu konteiners */
.subcat-icon {
    width: 52px;
    height: 52px;
    background: var(--c-accent-pale);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    flex-shrink: 0;   /* Ikona nekad nesaspiežas */
    transition: background var(--ease), color var(--ease);
}

.subcat-icon svg {
    width: 24px;
    height: 24px;
}

/* Teksta bloks (nosaukums + skaits + apraksts) */
.subcat-text {
    flex: 1;   /* Aizpilda visu pieejamo platumu */
    min-width: 0;  /* Novērš teksta pārplūšanu */
}

.subcat-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 2px;
}

/* Sludinājumu skaits: oranžs badge */
.subcat-count {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-accent);
    background: var(--c-accent-pale);
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 4px;
}

/* Īss apraksts zem skaita */
.subcat-desc {
    font-size: 13px;
    color: var(--c-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Bultiņa labajā pusē */
.subcat-arrow {
    color: var(--c-border-strong);
    flex-shrink: 0;
    transition: color var(--ease), transform var(--ease);
}

.subcat-card:hover .subcat-arrow {
    color: var(--c-accent);
    transform: translateX(3px);  /* Kustas pa labi uz hover */
}


/* ============================================================
   14. POPULĀRIE MEKLĒJUMI
   Tag stila linki — ātrie meklēšanas ceļveži
============================================================ */

.popular-section {
    padding: var(--space-xl) 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

/* Virsraksts ar ikonu pa kreisi */
.popular-heading {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--space-m);
    letter-spacing: -0.01em;
}

.popular-heading svg {
    color: var(--c-accent);
    flex-shrink: 0;
}

/* Konteiners tagiem — automātiski pāriet jaunā rindā */
.popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

/* Viens populārais meklēšanas tags */
.popular-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 100px;  /* pilnīgi noapaļots */
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    transition: border-color var(--ease), color var(--ease), background var(--ease);
    white-space: nowrap;
}

.popular-tag:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-pale);
}


/* ============================================================
   15. PREMIUM LISTING BADGE
   Zeltains badge uz sludinājuma bildes augšas kreisā stūrī.
   .listing-badge--premium ir modifikators — pievieno klāt
   pamatstilam .listing-badge
============================================================ */

/* Noklusētais .listing-badge ir apakšā kreisajā stūrī (no style.css).
   Šis modifikators: maina pozīciju un krāsu uz premium/zeltainu */
.listing-badge--premium {
    bottom: auto;
    top: var(--space-s);
    left: var(--space-s);
    background: #FEF3C7;
    color: #9B6B00;
    border-radius: 20px;
    font-weight: 600;
}

/* Kategorijas badge novieto apakšā, lai nav pārklāšanās ar premium */
.listing-badge--cat {
    bottom: var(--space-s);
    top: auto;
    left: var(--space-s);
}


/* ============================================================
   16. UZTICAMĪBAS SEKCIJA (WHY MALTALIST)
   3 iemesli, kāpēc izmantot MaltaList — pārliecina lietotāju
============================================================ */

.trust-section {
    padding: var(--space-2xl) 0;
    background: var(--c-bg);
}

/* Centrēts virsraksts */
.trust-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    text-align: center;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-xl);
}

/* Mobilajā: kolonnas viena virs otras */
.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
}

/* Viens uzticamības elements */
.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-l);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
}

/* Ikonu konteiners */
.trust-icon {
    width: 56px;
    height: 56px;
    background: var(--c-accent-pale);
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    margin-bottom: var(--space-m);
}

.trust-icon svg {
    width: 26px;
    height: 26px;
}

.trust-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: var(--space-xs);
}

.trust-text {
    font-size: 14px;
    color: var(--c-text-muted);
    line-height: 1.5;
}


/* ============================================================
   17. RESPONSĪVIE STILI — KATEGORIJAS LAPA
   Pievieno responsīvos breakpointus esošajiem @media blokiem
   (tās pašas platuma robežas kā homepage)
============================================================ */

/* ----- TABLET 640px+ ----- */
@media (min-width: 640px) {

    /* Apakškategorijas: 2 kolonnas */
    .subcats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ----- TABLET 768px+ ----- */
@media (min-width: 768px) {

    /* Kategorijas hero virsraksts: lielāks */
    .cat-hero-title {
        font-size: 32px;
    }

    .cat-page-hero {
        padding: 48px 0 40px;
    }

}

/* ----- DESKTOP 1024px+ ----- */
@media (min-width: 1024px) {

    /* Apakškategorijas: 3 kolonnas */
    .subcats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Uzticamības sekcija: 3 kolonnas blakus */
    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Kategorijas hero virsraksts: vēl lielāks uz liela ekrāna */
    .cat-hero-title {
        font-size: 38px;
    }

    .cat-page-hero {
        padding: 56px 0 48px;
    }

}


/* ============================================================
   18. LISTINGS PAGE — PAGE HERO
   Kompakts lapas virsraksts ar titulu, statistiku un mini search
============================================================ */

.page-hero {
    background: var(--c-section-alt);
    border-bottom: 1px solid var(--c-border);
    padding: 24px 0;
}

/* Iekšējais rindas izkārtojums: teksts pa kreisi, search pa labi */
.page-hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.page-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Statistika: "● 487 listings · Updated 5 minutes ago" */
.page-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-muted);
}

/* Mini search forma (šaurāka nekā homepage) */
.page-hero-search {
    width: 100%;
}

/* Search bar uz šīs lapas — mazāks augstums */
.page-search-bar {
    max-width: 400px;
}

.page-search-bar .search-input {
    padding: 11px var(--space-m);
    font-size: 14px;
}

.page-search-bar .search-btn {
    min-height: 44px;
    font-size: 13px;
    padding: 0 var(--space-m);
}


/* ============================================================
   19. LISTINGS PAGE BODY
   Konteiners ap filtru + sludinājumu sadaļu
============================================================ */

.listings-page-body {
    padding: var(--space-l) 0 var(--space-2xl);
    background: var(--c-bg);
}


/* ============================================================
   20. MOBILĀ FILTRU JOSLA
   Redzama tikai uz maziem ekrāniem (< 1024px).
   Satur: "Filters (3)" poga | rezultātu skaits | sort dropdown
============================================================ */

.filters-mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-m);
}

/* "Filters" poga ar funnel ikonu */
.filters-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-s);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease);
    flex-shrink: 0;
}

.filters-toggle-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Oranžais cipars uz "Filters" pogas: aktīvo filtru skaits */
.filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 100px;
    padding: 0 5px;
}

/* Rezultātu skaits mobilajā */
.mobile-results-count {
    font-size: 13px;
    color: var(--c-text-muted);
    flex: 1;
    text-align: center;
}

/* Šķirošanas dropdown mobilajā */
.mobile-sort-select {
    font-family: var(--font);
    font-size: 13px;
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: 7px 10px;
    background: var(--c-surface);
    cursor: pointer;
    flex-shrink: 0;
}


/* ============================================================
   21. GALVENAIS IZKĀRTOJUMS: FILTRI + SLUDINĀJUMI
   Mobilajā: 1 kolonna (filtri kā bottom sheet)
   Desktop 1024px+: 2 kolonnas (filtri kreisajā pusē)
============================================================ */

.listings-layout {
    display: flex;
    gap: var(--space-l);
    align-items: flex-start;
}

/* Sludinājumu sadaļa aizpilda visu brīvo platumu */
.listings-main {
    flex: 1;
    min-width: 0; /* Novērš overflow platos gratos */
}


/* ============================================================
   22. FILTRU PANELIS / BOTTOM SHEET
   Mobilajā (< 1024px): fixed bottom sheet, slīd augšup
   Desktop (1024px+): sticky sānpanelis kreisajā pusē
============================================================ */

/* --- MOBILAIS STĀVOKLIS (noklusējums) --- */
.filters-sidebar {
    /* Full-screen overlay mobilajā skatā */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background: var(--c-surface);
    border-radius: 0;
    box-shadow: none;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    /* Sākumā paslēpts zem ekrāna apakšas */
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    /* Piespiešanās ritināšana uz skārienierīcēm */
    -webkit-overflow-scrolling: touch;
}

/* JS pievieno .is-open → slīd uz augšu */
.filters-sidebar.is-open {
    transform: translateY(0);
}

/* Tumšais fons aiz filtru paneļa (mobilais) */
.filters-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 26, 0.45);
    z-index: 350;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.filters-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Vilkšanas indikatorts (pelēka josliņa, redzama tikai mobilajā) */
.sheet-handle-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--c-border-strong);
    border-radius: 2px;
}

/* Filtru galvene: "Filters" + X poga */
.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-s) var(--space-l) var(--space-m);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--c-surface);
    z-index: 10;
}

.filters-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
}

/* X aizvēršanas poga (redzama tikai mobilajā) */
.filters-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    border-radius: var(--radius-s);
    transition: background var(--ease), color var(--ease);
}

.filters-close-btn:hover {
    background: var(--c-section-alt);
    color: var(--c-text);
}

/* Filtru saturs ar padding */
.filters-body {
    padding: 0 var(--space-m);
}

/* Filtru apakšdaļa: Apply + Clear pogas */
.filters-footer {
    position: sticky;
    bottom: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    padding: var(--space-m) var(--space-l);
    display: flex;
    gap: var(--space-s);
    flex-shrink: 0;
}

/* "Show results" — oranža primārā poga */
.btn-apply-filters {
    flex: 1;
    padding: 12px;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--ease), transform var(--ease);
}

.btn-apply-filters:hover {
    background: var(--c-accent-dark);
}

.btn-apply-filters:active {
    transform: scale(0.97);
}

/* "Clear all" — caurspīdīga sekundārā poga */
.btn-clear-filters {
    padding: 12px 16px;
    background: transparent;
    color: var(--c-text-muted);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease);
    white-space: nowrap;
}

.btn-clear-filters:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}


/* ============================================================
   23. FILTRU GRUPAS (ACCORDION SECTIONS)
   Katra filtru sadaļa var tikt atvērta vai aizvērta.
============================================================ */

.filter-group {
    border-bottom: 1px solid var(--c-border);
}

.filter-group:last-child {
    border-bottom: none;
}

/* Klikšķināmais virsraksts katrā grupā */
.filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-m) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* Ikona + teksts kreisajā pusē */
.filter-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
}

.filter-group-title svg {
    color: var(--c-text-muted);
    flex-shrink: 0;
}

/* Bultiņa — griežas kad grupa ir atvērta */
.filter-chevron {
    color: var(--c-text-muted);
    transition: transform var(--ease);
    flex-shrink: 0;
}

.filter-group.is-open .filter-chevron {
    transform: rotate(180deg); /* Griežas otrādi = atvērts */
}

/* search.html filtru galvenēs izmanto .filter-group-label + .filter-group-arrow */
.filter-group-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.filter-group-arrow {
    color: var(--c-text-muted);
    transition: transform var(--ease);
    flex-shrink: 0;
}

.filter-group.is-open .filter-group-arrow {
    transform: rotate(180deg);
}

/* Saturs kas tiek animēts atvērojot/aizverot */
.filter-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-bottom: 0;
}

/* Kad atvērts: padding apakšā */
.filter-group.is-open .filter-group-body {
    padding-bottom: var(--space-m);
}


/* ============================================================
   24. CHECKBOX SARAKSTS (LOCATION, PROPERTY TYPE, FEATURES)
============================================================ */

/* Saraksts bez bullet pointiem; scrolla ja pārāk garš */
.filter-checklist {
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    /* Custom scrollbar stils */
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

/* Viens saraksta elements */
.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}

.filter-check:hover .check-label {
    color: var(--c-accent);
}

/* Paslēpt natīvo checkbox — CSS rādīs mūsu pašdarināto */
.filter-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Pašdarinātais checkbox kvadrātiņš */
.check-box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-border-strong);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--ease), background var(--ease);
}

/* Atzīmēts stāvoklis: oranžs fons */
.filter-check input:checked ~ .check-box {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* Ķeksis atzīmētā checkbox iekšpusē */
.filter-check input:checked ~ .check-box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Atrašanās vietas nosaukums */
.check-label {
    flex: 1;
    font-size: 14px;
    color: var(--c-text);
    transition: color var(--ease);
}

/* Skaits iekavās: "(87)" */
.check-count {
    font-size: 12px;
    color: var(--c-text-light);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   25. CENAS DIAPAZONS (PRICE RANGE)
============================================================ */

/* Divi lauciņi blakus: Min — Max */
.price-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
}

/* Viens lauciņš: "€" + ciparu ievade */
.price-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    overflow: hidden;
    transition: border-color var(--ease);
    position: relative;
}

.price-input-wrap:focus-within {
    border-color: var(--c-accent);
}

.price-currency {
    padding: 0 8px;
    font-size: 13px;
    color: var(--c-text-muted);
    background: var(--c-section-alt);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.price-field {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-text);
    padding: 9px 8px;
    background: transparent;
    min-width: 0;
    /* Paslēpt "spinner" bultiņas uz number lauciņa */
    -moz-appearance: textfield;
}
.price-field::-webkit-outer-spin-button,
.price-field::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Domuzīme starp Min un Max */
.price-sep {
    font-size: 16px;
    color: var(--c-text-light);
    flex-shrink: 0;
}

/* Range slīdnis */
.price-slider-wrap {
    margin-bottom: var(--space-m);
}

.price-slider {
    width: 100%;
    height: 4px;
    accent-color: var(--c-accent); /* Krāso slīdni oranžā */
    cursor: pointer;
}

.price-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--c-text-light);
    margin-top: 4px;
}

/* Cenas perioda pogas: Month / Week / Day */
.price-period {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.price-period-label {
    font-size: 13px;
    color: var(--c-text-muted);
}

.price-period-btns {
    display: flex;
    gap: 4px;
}

.period-btn {
    padding: 5px 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text-muted);
    background: var(--c-section-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.period-btn.is-active,
.period-btn:hover {
    background: var(--c-accent-pale);
    color: var(--c-accent);
    border-color: var(--c-accent);
}


/* ============================================================
   26. GUĻAMISTABAS / VANNAS ISTABAS POGU GRUPA
   Pogas rindā: Any | 1 | 2 | 3 | 4 | 5+
============================================================ */

.filter-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Viena poga */
.filter-btn {
    padding: 7px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.filter-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Aktīvā poga — piemēram, "2" guļamistabas */
.filter-btn.is-active {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}


/* ============================================================
   27. DATUMA IZVĒLNE
============================================================ */

.date-input {
    width: 100%;
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: 9px 12px;
    background: var(--c-surface);
    cursor: pointer;
    transition: border-color var(--ease);
}

.date-input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-pale);
}


/* ============================================================
   27b. PAPLAŠINĀTIE FILTRU STILI
   Papildu komponenti: swatch krāsas, wrap checklist, sr-only
============================================================ */

/* Checklist divās kolonnās (Features bloki) */
.filter-checklist--wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

/* Pogu grupa ar wrapping (garākas opciju rindas) */
.filter-btn-group--wrap {
    gap: 5px;
}

.filter-btn-group--wrap .filter-btn {
    padding: 6px 11px;
    font-size: 12.5px;
}

/* Krāsu izvēle — Vehicles Colour filtrs */
.color-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.color-swatch-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.color-swatch-label input:checked + .color-swatch {
    outline: 2.5px solid var(--c-accent);
    outline-offset: 2px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    transition: outline var(--ease), transform var(--ease);
}

.color-swatch-label:hover .color-swatch {
    transform: scale(1.1);
}

.color-swatch-name {
    font-size: 10px;
    color: var(--c-text-muted);
    text-align: center;
    line-height: 1.2;
}

/* Vizuāli paslēpts, bet pieejams ekrānlasītājiem */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* Teksta meklēšanas lauks filtrā (Model, Compatible With) */
.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    transition: border-color var(--ease);
}

.search-input-wrap:focus-within {
    border-color: var(--c-accent);
}

.search-field {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    color: var(--c-text);
    padding: 9px var(--space-m);
    border-radius: var(--radius);
}

.search-field::placeholder {
    color: var(--c-text-light);
    font-style: italic;
}

/* Tukšo rezultātu paziņojums — kad nav sludinājumu */
.listings-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    padding: 64px var(--space-l);
    text-align: center;
    background: var(--c-surface);
    border: 1.5px dashed var(--c-border);
    border-radius: var(--radius-l);
    color: var(--c-text-muted);
}

.listings-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.35;
    stroke: var(--c-text-muted);
}

.listings-empty p {
    font-size: 15px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}

/* ============================================================
   28. REZULTĀTU GALVENE
   Rāda: "Showing 12 of 487" | Sort: dropdown | View: rests/saraksts
============================================================ */

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-bottom: var(--space-m);
    margin-bottom: var(--space-m);
    border-bottom: 1px solid var(--c-border);
}

.results-count {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0;
}

.results-count strong {
    color: var(--c-text);
    font-weight: 700;
}

/* Labā puse: Sort + View toggle */
.results-controls {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

/* Sort: label + dropdown */
.sort-wrap {
    display: none; /* Paslēpts mobilajā (sort ir augšā .filters-mobile-bar) */
    align-items: center;
    gap: 8px;
}

.sort-label {
    font-size: 13px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.sort-select {
    font-family: var(--font);
    font-size: 13px;
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: 7px 10px;
    background: var(--c-surface);
    cursor: pointer;
    transition: border-color var(--ease);
}

.sort-select:focus {
    outline: none;
    border-color: var(--c-accent);
}

/* Grid / List pārslēgšanas pogas */
.view-toggle {
    display: flex;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: none;
    border-right: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}

.view-btn:last-child {
    border-right: none;
}

.view-btn:hover {
    background: var(--c-section-alt);
    color: var(--c-text);
}

/* Aktīvā skata poga */
.view-btn.is-active {
    background: var(--c-accent);
    color: #fff;
}


/* ============================================================
   29. SLUDINĀJUMU KARŠU PAPILDINĀJUMI
   Bed/bath/sqm detaļu rinda zem nosaukuma
============================================================ */

/* Rinda ar īpašuma detaļām */
.listing-details {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
    padding: 6px 0;
}

/* Viens detaļas elements: ikona + teksts */
.listing-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.listing-detail svg {
    color: var(--c-text-light);
    flex-shrink: 0;
}

/* "New" badge — zaļš, apakšējā kreisajā stūrī */
.listing-badge--new {
    /* Pārmanto .listing-badge pozīciju (bottom-left) */
    background: #D4521F; /* terracotta */
    color: #fff;
}


/* ============================================================
   30. SARAKSTA SKATS (LIST VIEW)
   Kad lietotājs pārslēdz uz saraksta skatu,
   .listings-grid--list klase maina karšu izkārtojumu.
============================================================ */

/* Grid izkārtojums pāriet uz 1 kolonnas sarakstu */
.listings-grid--list {
    grid-template-columns: 1fr !important;
}

/* Karte kļūst horizontāla */
.listings-grid--list .listing-card-link {
    flex-direction: row;
}

/* Attēls fiksētā platumā kreisajā pusē */
.listings-grid--list .listing-img-wrap {
    width: 200px;
    flex-shrink: 0;
    padding-top: 0;   /* Atceļ 3:2 aspekta attiecību */
    height: 160px;
}

/* Teksts aizpilda atlikušo platumu */
.listings-grid--list .listing-body {
    padding: var(--space-m) var(--space-l);
    justify-content: center;
}

/* Lielāks nosaukums saraksta skatā */
.listings-grid--list .listing-title {
    -webkit-line-clamp: 1; /* Tikai 1 rinda */
}


/* ============================================================
   31. LAPPUŠOŠANA (PAGINATION)
============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: var(--space-xl);
    flex-wrap: wrap;
}

/* Viens lappuses numurs vai navigācijas poga */
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--space-s);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.page-btn:hover:not(.is-active):not(.is-disabled) {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-pale);
}

/* Aktīvā lapa: terrakota fons */
.page-btn.is-active {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
    cursor: default;
}

/* Atspējota poga (piemēram, "Iepriekšējā" uz 1. lapas) */
.page-btn.is-disabled {
    color: var(--c-text-light);
    background: var(--c-bg);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Navigācijas bultiņas (Iepriekšējā/Nākamā) */
.page-btn--nav {
    color: var(--c-text-muted);
}

/* "..." punkti starp lapas numuriem */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 16px;
    color: var(--c-text-light);
    letter-spacing: 2px;
}


/* ============================================================
   32. TURPINI PĀRLŪKOT — RELATED CATEGORIES
   Saistīto kategoriju kartes sekcijas apakšā
============================================================ */

.continue-section {
    padding: var(--space-xl) 0;
    background: var(--c-section-alt);
    border-top: 1px solid var(--c-border);
}

.continue-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    margin-top: var(--space-l);
}

/* Viena saistītā kategorijas karte */
.continue-card {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.continue-card:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.continue-card-icon {
    width: 40px;
    height: 40px;
    background: var(--c-accent-pale);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    flex-shrink: 0;
}

.continue-card-icon svg {
    width: 20px;
    height: 20px;
}

.continue-card > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.continue-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}

.continue-card-count {
    font-size: 12px;
    color: var(--c-text-muted);
}

.continue-card-arrow {
    color: var(--c-border-strong);
    flex-shrink: 0;
    transition: color var(--ease), transform var(--ease);
}

.continue-card:hover .continue-card-arrow {
    color: var(--c-accent);
    transform: translateX(3px);
}


/* ============================================================
   33. RESPONSĪVIE STILI — LISTINGS LAPA
============================================================ */

/* ----- TABLET 640px+ ----- */
@media (min-width: 640px) {

    /* Page hero: horizontālais izkārtojums */
    .page-hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .page-hero-search {
        width: auto;
    }

    /* Continue browsing: 2 kolonnas */
    .continue-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ----- TABLET 768px+ ----- */
@media (min-width: 768px) {

    .page-hero-title {
        font-size: 26px;
    }

    /* Saraksta skats: platāks attēls */
    .listings-grid--list .listing-img-wrap {
        width: 240px;
        height: 180px;
    }

}

/* ----- DESKTOP 1024px+ ----- */
@media (min-width: 1024px) {

    /* Page hero: lielāks nosaukums */
    .page-hero {
        padding: 32px 0;
    }

    .page-hero-title {
        font-size: 28px;
    }

    /* Paslēpt mobilo filtru joslu — uz desktop ir sidebar */
    .filters-mobile-bar {
        display: none;
    }

    /* FILTERS SIDEBAR: pāriet no bottom sheet uz sticky sānpaneli */
    .filters-sidebar {
        /* Atceļ visus bottom sheet stilus */
        position: sticky;
        top: 76px; /* header augstums (60px) + 16px atstarpe */
        bottom: auto;
        left: auto;
        right: auto;
        width: 268px;
        max-height: calc(100vh - 90px);
        border-radius: 0;
        box-shadow: none;
        transform: none;
        transition: none;
        z-index: auto;
        overflow-y: auto;
        overflow-x: hidden;
        flex-shrink: 0;
        /* Parādīt filtrus (uz mobilo tie bija paslēpti līdz atvēršanai) */
        display: block;
    }

    /* Uz desktop: paslēpt mobilā handle un close pogu */
    .sheet-handle-wrap {
        display: none;
    }

    .filters-close-btn {
        display: none;
    }

    /* Uz desktop filtru header nav apakšas apmale */
    .filters-header {
        border-bottom: none;
        padding-left: 0;
        padding-right: 0;
    }

    .filters-body {
        padding: 0;
    }

    .filters-footer {
        position: static;
        padding: var(--space-l) 0 0;
        border-top: 1px solid var(--c-border);
    }

    /* Parādīt Sort dropdown uz desktop (mobilajā tas ir .mobile-sort-select) */
    .sort-wrap {
        display: flex;
    }

    /* 3 kolonnas sludinājumu rests uz desktop */
    .listings-grid:not(.listings-grid--list) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Continue: 4 kolonnas uz desktop */
    .continue-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Saraksta skats uz desktop: platāks attēls */
    .listings-grid--list .listing-img-wrap {
        width: 280px;
        height: 200px;
    }

}


/* ============================================================
   34. LISTING DETAIL PAGE — BREADCRUMB + IZKĀRTOJUMS
============================================================ */

.breadcrumb-bar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 11px 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}

.breadcrumb-link {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--ease);
}

.breadcrumb-link:hover {
    color: var(--c-accent);
}

.breadcrumb-sep {
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1;
}

.breadcrumb-current {
    color: var(--c-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Galvenā lapa */
.listing-page {
    padding: var(--space-l) 0 var(--space-2xl);
}

/* 2-kolonnu grid: galerija + info josla */
.listing-layout {
    display: grid;
    grid-template-columns: 1fr;        /* Mobile: 1 kolonna */
    gap: var(--space-l);
    margin-bottom: var(--space-xl);
    align-items: start;
}

/* Pilna platuma sekcijas starp sevi */
.listing-section {
    margin-bottom: var(--space-xl);
}

.listing-section:empty {
    display: none;
}

/* Sekciju virsraksti */
.section-heading {
    font-size: 19px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: var(--space-m);
    padding-bottom: var(--space-s);
    border-bottom: 2px solid var(--c-border);
}


/* ============================================================
   35. FOTO GALERIJA
============================================================ */

.listing-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Galvenais foto konteiners */
.gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-section-alt);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

/* Foto counter "1 / 3" */
.gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: rgba(28,28,26,0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    pointer-events: none;
}

/* Navigācijas bultiņas */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(28,28,26,0.55);
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ease);
    z-index: 2;
}

.gallery-nav:hover {
    background: rgba(28,28,26,0.85);
}

.gallery-nav--prev { left: 10px; }
.gallery-nav--next { right: 10px; }

/* Thumbnail josla */
.gallery-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    padding-bottom: 2px;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 52px;
    border-radius: var(--radius-s);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--ease);
    padding: 0;
    background: var(--c-section-alt);
}

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

.gallery-thumb.is-active {
    border-color: var(--c-accent);
}

.gallery-thumb:hover:not(.is-active) {
    border-color: var(--c-border-strong);
}

/* "View all photos" poga */
.btn-view-photos {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-muted);
    background: none;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: 7px 14px;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}

.btn-view-photos:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}


/* ============================================================
   36. LISTING INFO KOLONNA (labā puse)
============================================================ */

.listing-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sticky tikai uz desktop (iestatīts media query) */

/* Cena */
.info-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.info-price span {
    font-size: 15px;
    font-weight: 400;
    color: var(--c-text-muted);
}

.info-premium-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9B6B00 !important;
    background: #FEF3C7;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Nosaukums */
.info-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.35;
    margin-bottom: 10px;
}

/* Atrašanās vieta + laiks + skatījumi */
.info-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin-bottom: 14px;
}

.info-location {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--c-text);
    font-weight: 500;
}

.info-posted {
    color: var(--c-text-muted);
}

/* Specifikācijas (gultas, vannasistabas, platība) */
.info-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 14px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--c-text);
    font-weight: 500;
}

.spec-item svg {
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.spec-emoji {
    font-size: 15px;
    line-height: 1;
}

.info-divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 16px 0;
}

/* Kontaktu kaste */
.contact-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.btn-contact {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    padding: 13px var(--space-m);
    border-radius: var(--radius-m);
    border: none;
    cursor: pointer;
    transition: background var(--ease);
}

.btn-contact:hover {
    background: var(--c-accent-dark);
}

/* Atklātā kontaktinfo */
.contact-reveal {
    background: var(--c-section-alt);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--c-text);
}

.contact-item svg {
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.contact-link {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Saglabāt + Dalīties */
.action-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.btn-favorite,
.btn-share-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    border-radius: var(--radius-m);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.btn-favorite:hover,
.btn-share-main:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.btn-favorite.is-saved {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-pale);
}

/* Share panelis */
.share-panel {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s);
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.share-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 6px;
    border-radius: var(--radius-s);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease);
}

.share-option:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Ziņot */
.report-row {
    margin-bottom: 16px;
    text-align: center;
}

.btn-report {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font);
    font-size: 12px;
    color: var(--c-text-light);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--ease);
    padding: 4px;
}

.btn-report:hover {
    color: #C0392B;
}

/* Drošības padomi */
.safety-box {
    background: #F0F9F0;
    border: 1.5px solid #C3E6C3;
    border-radius: var(--radius-m);
    padding: var(--space-m);
}

.safety-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2D7A2D;
    margin-bottom: 8px;
}

.safety-title svg {
    stroke: #2D7A2D;
    flex-shrink: 0;
}

.safety-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.safety-list li {
    font-size: 12.5px;
    color: #2D7A2D;
    padding-left: 14px;
    position: relative;
}

.safety-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 600;
}


/* ============================================================
   37. APRAKSTS (Show more / Show less)
============================================================ */

.description-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.description-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text);
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.35s ease;
    white-space: pre-wrap;
}

.description-text.is-expanded {
    max-height: 2000px;
}

.btn-show-more {
    align-self: flex-start;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   37b. PROPERTY / VEHICLE INFORMATION GRID
============================================================ */

.prop-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
}

.prop-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-border);
    gap: 12px;
}

.prop-info-row:nth-last-child(-n+2) {
    border-bottom: none;
}

/* If only 1 row remains (odd total), stretch it full-width */
.prop-info-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-bottom: none;
}

.prop-info-label {
    font-size: 13px;
    color: var(--c-muted);
    flex-shrink: 0;
}

.prop-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    text-align: right;
}

@media (max-width: 600px) {
    .prop-info-grid {
        grid-template-columns: 1fr;
    }
    .prop-info-row {
        border-bottom: 1px solid var(--c-border);
    }
    .prop-info-row:last-child {
        border-bottom: none;
    }
    .prop-info-row:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--c-border);
    }
    .prop-info-row:last-child:nth-child(odd) {
        grid-column: auto;
    }
}


/* ============================================================
   38. FEATURES GRID
============================================================ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--c-text);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
}

.feature-item svg {
    color: var(--c-accent);
    flex-shrink: 0;
}


/* ============================================================
   39. DETAĻU TABULA
============================================================ */

.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-m);
    padding: 11px var(--space-m);
    border-bottom: 1px solid var(--c-border);
    align-items: center;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row:nth-child(even) {
    background: var(--c-section-alt);
}

.detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value {
    font-size: 14px;
    color: var(--c-text);
    font-weight: 500;
}


/* ============================================================
   40. MAP SEKCIJA
============================================================ */

.map-container {
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1.5px solid var(--c-border);
    display: flex;
    flex-direction: column;
}

.map-iframe {
    width: 100%;
    height: 280px;
    border: none;
    display: block;
}

.map-location-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--space-m);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}

.map-location-label svg {
    color: var(--c-accent);
    flex-shrink: 0;
}

.map-privacy-note {
    font-size: 12px;
    color: var(--c-text-muted);
    font-weight: 400;
}

/* Kājene ar adresi + "Get Directions" pogu */
.map-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: 10px var(--space-m);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.btn-get-directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-accent);
    text-decoration: none;
    border: 1.5px solid var(--c-accent);
    border-radius: var(--radius-s);
    padding: 6px 14px;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-get-directions:hover {
    background: var(--c-accent);
    color: #fff;
}

/* Skatīšanās padomi zem kartes */
.viewing-tips-box {
    margin-top: 12px;
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: var(--radius-m);
    padding: var(--space-m);
}

.viewing-tips-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1D4ED8;
    margin-bottom: 8px;
}

.viewing-tips-title svg {
    stroke: #1D4ED8;
    flex-shrink: 0;
}

.viewing-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.viewing-tips-list li {
    font-size: 12.5px;
    color: #1E40AF;
    padding-left: 14px;
    position: relative;
}

.viewing-tips-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: 600;
}


/* ============================================================
   41. PĀRDEVĒJA SADAĻA
============================================================ */

.seller-card {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-m) var(--space-l);
    flex-wrap: wrap;
}

.seller-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.seller-info {
    flex: 1;
    min-width: 140px;
}

.seller-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 2px;
}

.seller-meta {
    font-size: 13px;
    color: var(--c-text-muted);
}

.btn-seller-listings {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-accent);
    text-decoration: none;
    border: 1.5px solid var(--c-accent);
    border-radius: var(--radius-s);
    padding: 8px 16px;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}

.btn-seller-listings:hover {
    background: var(--c-accent);
    color: #fff;
}


/* ============================================================
   42. LĪDZĪGIE SLUDINĀJUMI
============================================================ */

.similar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
}

.similar-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--ease), transform var(--ease);
}

.similar-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.similar-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-section-alt);
}

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

.similar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--c-section-alt);
}

.similar-body {
    padding: var(--space-s) var(--space-m);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.similar-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
}

.similar-price span {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-muted);
}

.similar-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.similar-location {
    font-size: 12px;
    color: var(--c-text-muted);
}

.similar-explainer {
    font-size: 13px;
    color: var(--c-muted);
    margin-bottom: var(--space-s);
}

/* Promoted card — similar listings */
.similar-card.promoted {
    position: relative;
    background: linear-gradient(135deg, var(--c-bg) 0%, rgba(212, 82, 31, 0.04) 100%);
    border: 1px solid rgba(212, 82, 31, 0.18);
}

.promoted-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--c-accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.promoted-badge::before {
    content: "✨ ";
}

.similar-cat-label {
    font-size: 11px;
    color: var(--c-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Copy link tooltip */
.share-option {
    position: relative;
}

.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-text);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--c-text);
}

.copy-tooltip.is-visible {
    opacity: 1;
}


/* ============================================================
   43. LIGHTBOX
============================================================ */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-s);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ease);
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ease);
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-nav--prev { left: 16px; }
.lightbox-nav--next { right: 16px; }

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}


/* ============================================================
   44. SLUDINĀJUMS NAV ATRASTS
============================================================ */

.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-m);
    gap: var(--space-m);
    color: var(--c-text-muted);
}

.not-found-page svg {
    opacity: 0.35;
}

.not-found-page h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.not-found-page p {
    font-size: 15px;
    max-width: 380px;
    line-height: 1.6;
    margin: 0;
}

.not-found-actions {
    display: flex;
    gap: var(--space-m);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-s);
}


/* ============================================================
   45. RESPONSĪVIE STILI — LISTING DETAIL PAGE
============================================================ */

@media (min-width: 640px) {
    .similar-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .map-iframe {
        height: 340px;
    }

    .detail-row {
        grid-template-columns: 160px 1fr;
    }

    .breadcrumb-current {
        max-width: 360px;
    }
}

@media (min-width: 960px) {
    /* 2-kolonnu layout: galerija 60% + info josla 40% */
    .listing-layout {
        grid-template-columns: 1fr 380px;
        gap: var(--space-xl);
    }

    /* Sticky info josla — paliek ekrānā ritinot */
    .listing-info {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--c-border) transparent;
        padding-right: 4px;
    }

    .similar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .map-iframe {
        height: 400px;
    }

    .info-title {
        font-size: 22px;
    }

    .info-price {
        font-size: 28px;
    }
}


/* ============================================================
   46. SEARCH PAGE
============================================================ */

/* Hero sekcija ar meklēšanas formu un rezultātu skaitu */
.search-header-section {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: var(--space-xl) 0 var(--space-l);
}

.search-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.search-heading mark {
    background: none;
    color: var(--c-accent);
    font-style: normal;
}

.search-result-count {
    font-size: 14px;
    color: var(--c-muted);
    margin-bottom: var(--space-m);
}

/* Kategoriju checkbox saraksts filtru panelī */
.cat-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cat-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
}

.cat-filter-item input[type="checkbox"] {
    accent-color: var(--c-accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.cat-filter-label {
    flex: 1;
    font-size: 13px;
}

.cat-filter-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--c-muted);
    background: var(--c-section-alt);
    padding: 2px 7px;
    border-radius: 99px;
}

.search-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-xs);
}

/* Datuma filtrs — pogas */
.date-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.date-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    border: 1.5px solid var(--c-border);
    border-radius: 99px;
    background: var(--c-bg);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.date-btn.is-active,
.date-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

/* Meklēšanas vārdu izcelšana rezultātos */
mark.search-highlight {
    background: rgba(212, 82, 31, 0.14);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
    font-style: normal;
}

/* Promoted badge variants */
.listing-badge--promoted {
    background: rgba(212, 82, 31, 0.88);
}

/* Promoted kartīte meklēšanas rezultātos */
.listing-card.is-search-promoted {
    background: linear-gradient(135deg, var(--c-bg) 0%, rgba(212, 82, 31, 0.04) 100%);
    border-color: rgba(212, 82, 31, 0.18);
}

.listing-promoted-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

/* No-results stāvoklis */
.search-no-results {
    text-align: center;
    padding: 60px var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.no-results-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--c-section-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted);
}

.no-results-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.no-results-sub {
    font-size: 14px;
    color: var(--c-muted);
    max-width: 360px;
    margin: 0;
}

.no-results-actions {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
    justify-content: center;
}

.btn-no-results {
    padding: 9px 20px;
    border-radius: var(--radius-m);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--ease), color var(--ease);
}

.btn-no-results:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.btn-no-results--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.btn-no-results--primary:hover {
    background: var(--c-accent-dark, #b8431a);
    border-color: var(--c-accent-dark, #b8431a);
    color: #fff;
}

/* Populārie meklējumi (no-results) */
.no-results-popular {
    padding-top: var(--space-m);
    border-top: 1px solid var(--c-border);
    width: 100%;
    max-width: 480px;
}

.no-results-popular-heading {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-s);
}

.popular-tag {
    display: inline-block;
    padding: 6px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 99px;
    font-size: 13px;
    color: var(--c-text);
    text-decoration: none;
    margin: 3px;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
    cursor: pointer;
    font-family: var(--font);
    background: var(--c-surface);
}

.popular-tag:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: rgba(212, 82, 31, 0.05);
}

/* List view toggle */
.listings-grid.list-view {
    grid-template-columns: 1fr;
}

.listings-grid.list-view .listing-card {
    flex-direction: row;
}

.listings-grid.list-view .listing-img-wrap {
    width: 160px;
    min-width: 160px;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .listings-grid.list-view .listing-card {
        flex-direction: column;
    }
    .listings-grid.list-view .listing-img-wrap {
        width: 100%;
        min-width: 0;
    }
}

/* Search filter section separator in sidebar */
.search-filter-sep {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: var(--space-s) 0;
}

/* Cenu filtrs search lapā — atkārtoti izmanto .price-inputs no listings.js */
.search-price-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    font-size: 13px;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    flex: 1;
    min-width: 0;
}

.search-price-input:focus {
    outline: none;
    border-color: var(--c-accent);
}

@media (min-width: 1024px) {
    .search-header-section .search-form {
        max-width: 640px;
    }
}


/* ============================================================
   47. BIZNESA KARTĪTE (similar & search sections)
============================================================ */

.business-card {
    border: 1.5px solid rgba(212, 82, 31, 0.22);
    background: linear-gradient(135deg, var(--c-bg) 0%, rgba(212, 82, 31, 0.04) 100%);
    position: relative;
}

.business-card-cover {
    position: relative;
    aspect-ratio: 16 / 9 !important;
}

.business-card-logo {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid #fff;
    object-fit: cover;
    background: #fff;
}

.business-card-body {
    padding: 10px 14px 14px;
    gap: 3px;
}

.business-card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted);
}

.business-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.3;
    margin: 0;
}

.business-card-tagline {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.business-card-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    background: var(--c-accent);
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

/* Biznesa kartīte meklēšanas rezultātos */
.business-search-card .listing-img-wrap {
    position: relative;
}

.business-search-logo {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2.5px solid #fff;
    object-fit: cover;
    background: #fff;
}

.business-search-tagline {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.4;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.business-search-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-accent);
    white-space: nowrap;
}


/* ============================================================
   48. BIZNESA PROFILA LAPA (business.html)
============================================================ */

/* Cover / Hero */
.business-hero {
    background: var(--c-section-alt);
}

.business-cover {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
}

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

.business-cover-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%);
    pointer-events: none;
}

.business-cover-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-m) 0;
}

.business-cover-meta {
    display: flex;
    align-items: flex-end;
    gap: var(--space-m);
}

.business-page-logo {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    border: 3px solid #fff;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.business-cover-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-bottom: 4px;
}

.biz-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}

.biz-plan-badge {
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.biz-plan-badge--premium    { background: #f59e0b; color: #fff; }
.biz-plan-badge--enterprise { background: #7c3aed; color: #fff; }
.biz-plan-badge--standard   { background: var(--c-accent); color: #fff; }
.biz-plan-badge--basic      { background: #6b7280; color: #fff; }

@media (min-width: 640px) {
    .business-cover         { height: 340px; }
    .business-page-logo     { width: 90px; height: 90px; }
}

@media (min-width: 960px) {
    .business-cover         { height: 420px; }
    .business-page-logo     { width: 110px; height: 110px; }
}

/* Info Layout */
.business-layout {
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
}

@media (min-width: 960px) {
    .business-layout {
        grid-template-columns: 1fr 340px;
        align-items: start;
    }
}

.business-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 4px;
    line-height: 1.2;
}

@media (min-width: 640px) { .business-name { font-size: 28px; } }

.business-tagline {
    font-size: 15px;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-m);
    line-height: 1.5;
}

.business-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-m);
}

.biz-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-section-alt);
    color: var(--c-text-muted);
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--c-border);
}

.biz-location-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--c-text-muted);
}

.biz-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}

.biz-stars { color: #f59e0b; letter-spacing: 1px; }
.biz-review-count { font-weight: 400; color: var(--c-muted); }

.business-description {
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text);
}

/* Contact Panel */
.business-contact-panel {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 960px) {
    .business-contact-panel {
        position: sticky;
        top: 80px;
    }
}

.biz-contact-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-muted);
    margin-bottom: 2px;
}

.biz-contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-m);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    border: 1.5px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease);
    box-sizing: border-box;
}

.biz-contact-btn:hover {
    background: var(--c-section-alt);
    border-color: #aaa;
}

.biz-contact-btn--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    font-weight: 600;
}

.biz-contact-btn--primary:hover {
    filter: brightness(0.92);
    background: var(--c-accent);
}

.biz-contact-btn svg { flex-shrink: 0; }

/* Services */
.business-services-list {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.biz-service-row {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: 13px var(--space-m);
    border-bottom: 1px solid var(--c-border);
}

.biz-service-row:last-child { border-bottom: none; }

.biz-service-info { flex: 1; min-width: 0; }

.biz-service-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
}

.biz-service-duration {
    font-size: 12px;
    color: var(--c-muted);
    margin-top: 2px;
}

.biz-service-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.biz-service-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
    white-space: nowrap;
}

.biz-service-book {
    padding: 6px 14px;
    background: var(--c-section-alt);
    border: 1.5px solid var(--c-border);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: background var(--ease);
}

.biz-service-book:hover { background: var(--c-border); }

/* Gallery */
.business-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 640px) {
    .business-gallery { grid-template-columns: repeat(3, 1fr); }
}

.biz-gallery-item {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
    overflow: hidden;
    cursor: pointer;
}

.biz-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.biz-gallery-item:hover img { transform: scale(1.04); }

/* Hours */
.business-hours-grid {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.biz-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px var(--space-m);
    border-bottom: 1px solid var(--c-border);
    font-size: 14px;
    gap: var(--space-m);
}

.biz-hours-row:last-child { border-bottom: none; }

.biz-hours-row.is-today {
    background: rgba(212, 82, 31, 0.05);
    font-weight: 600;
}

.biz-hours-day {
    color: var(--c-text-muted);
    min-width: 90px;
    text-transform: capitalize;
    flex-shrink: 0;
}

.biz-hours-row.is-today .biz-hours-day { color: var(--c-accent); }

.biz-hours-right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex: 1;
}

.biz-hours-time { color: var(--c-text); }
.biz-hours-time.is-closed { color: var(--c-muted); }

.biz-open-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
}

.biz-open-pill--open   { background: rgba(22,163,74,0.12); color: #16a34a; }
.biz-open-pill--closed { background: rgba(239,68,68,0.10); color: #dc2626; }

/* Map */
.biz-address-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--c-text);
    margin-bottom: var(--space-m);
}

.biz-map-wrap {
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1.5px solid var(--c-border);
    margin-top: var(--space-m);
}

.biz-map-wrap iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}

@media (min-width: 640px) { .biz-map-wrap iframe { height: 340px; } }

.biz-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--radius-m);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: var(--space-m);
    transition: filter var(--ease);
}

.biz-directions-btn:hover { filter: brightness(0.9); }

/* Social */
.biz-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.biz-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-m);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease);
}

.biz-social-btn:hover {
    background: var(--c-section-alt);
    border-color: #aaa;
}

/* Similar businesses grid */
.similar-businesses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
}

@media (min-width: 960px) {
    .similar-businesses-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Not Found stāvoklis */
.business-not-found {
    text-align: center;
    padding: 80px var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.business-not-found-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--c-section-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted);
}

.business-not-found h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.business-not-found p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0;
}


/* ============================================================
   POST AD LAPA — FĀZE A
   Faili: post-ad.html, post-ad.js
   Solis 1: Kategorijas izvēle (4-soļu vednis)
============================================================ */

/* Mobilā menu Post Ad links — terracotta krāsā un ar ikonu */
.mobile-menu-link--post-ad {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-accent);
    font-weight: 600;
}

.mobile-menu-link--post-ad svg {
    flex-shrink: 0;
}

/* Lapas wrapper */
.post-ad-page {
    min-height: calc(100vh - 60px);
    padding-bottom: 90px; /* Vieta mobilajai sticky Continue pogai */
}

/* Lapas galvene */
.post-ad-header {
    text-align: center;
    padding: 32px 0 0;
}

.post-ad-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.2;
}

.post-ad-header p {
    font-size: 15px;
    color: var(--c-text-muted);
    margin-top: 6px;
}


/* ---------------------------------------------------------------
   PROGRESS BAR — 4 soļu vizuāls indikators
--------------------------------------------------------------- */
.pa-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 480px;
    margin: 28px auto 0;
}

/* Viens solis: aplis + etiķete */
.pa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Aplis ar ikonu */
.pa-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E5E5E0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #787774;
    transition: background var(--ease), color var(--ease), box-shadow var(--ease);
    flex-shrink: 0;
}

/* Ikonu rādīšanas loģika: parāda step ikonu, slēpj ✓ */
.pa-step .pa-step-done { display: none; }
.pa-step .pa-step-icon { display: flex; align-items: center; justify-content: center; }

/* Pabeigts solis: zaļš fons, rāda ✓ */
.pa-step.is-done .pa-step-circle {
    background: #10B981;
    color: #fff;
}
.pa-step.is-done .pa-step-icon { display: none; }
.pa-step.is-done .pa-step-done  { display: flex; align-items: center; justify-content: center; }

/* Aktīvais solis: terracotta fons + halo efekts */
.pa-step.is-active .pa-step-circle {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--c-accent-pale);
}

/* Etiķete zem apļa */
.pa-step-label {
    font-size: 11px;
    font-weight: 500;
    color: #787774;
    white-space: nowrap;
}

.pa-step.is-active .pa-step-label {
    color: var(--c-accent);
    font-weight: 600;
}

.pa-step.is-done .pa-step-label {
    color: #10B981;
}

/* Savienojošā līnija starp soļiem */
.pa-connector {
    flex: 1;
    height: 2px;
    background: #E5E5E0;
    margin-bottom: 26px; /* Kompensē etiķetes augstumu */
    min-width: 16px;
    max-width: 80px;
    transition: background 0.3s ease;
}

.pa-connector.is-done {
    background: #10B981;
}


/* ---------------------------------------------------------------
   SOLIS 1: KATEGORIJU IZVĒLE
--------------------------------------------------------------- */
.pa-step1-wrap {
    margin-top: 36px;
}

.pa-step1-header {
    margin-bottom: 20px;
}

.pa-step1-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
}

.pa-step1-header p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin-top: 4px;
}

/* Kategoriju režģis: 2 kolonnas mobilajā */
.pa-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Viena kategorijas kartīte */
.pa-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-surface);
    cursor: pointer;
    gap: 8px;
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hover: pacelšanās + ēna + terracotta apmale */
.pa-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--c-accent);
}

/* Izvēlēts: terracotta apmale + gaiši terracotta fons */
.pa-cat-card.is-selected {
    border-color: var(--c-accent);
    background: var(--c-accent-pale);
}

/* ✓ ikona augšējā labajā stūrī — paslēpta pēc noklusējuma */
.pa-cat-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 22px;
    color: var(--c-accent);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--ease), transform var(--ease);
    line-height: 1;
}

.pa-cat-card.is-selected .pa-cat-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Kategorijas ikona */
.pa-cat-card-icon {
    font-size: 40px;
    color: var(--c-text-muted);
    transition: color var(--ease);
    line-height: 1;
}

.pa-cat-card:hover .pa-cat-card-icon,
.pa-cat-card.is-selected .pa-cat-card-icon {
    color: var(--c-accent);
}

/* Kategorijas nosaukums */
.pa-cat-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

/* Apakškategoriju skaits */
.pa-cat-card-count {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1;
}


/* ---------------------------------------------------------------
   APAKŠKATEGORIJU SEKCIJA
--------------------------------------------------------------- */
.pa-subcat-section {
    margin-top: 32px;
    display: none; /* Paslēpta, līdz izvēlēta kategorija */
}

/* Slide-down + fade-in animācija parādīšanās brīdī */
@keyframes pa-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pa-subcat-section.is-visible {
    display: block;
    animation: pa-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pa-subcat-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 14px;
}

/* Chips konteiners: flexbox wrap */
.pa-subcat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Viens chip */
.pa-subcat-chip {
    padding: 10px 18px;
    border-radius: 24px;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.pa-subcat-chip:hover {
    background: var(--c-accent-pale);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.pa-subcat-chip.is-selected {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.pa-subcat-chip.is-selected:hover {
    background: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
    color: #fff;
}


/* ---------------------------------------------------------------
   CONTINUE POGA
--------------------------------------------------------------- */
.btn-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    border: none;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    cursor: not-allowed;
    background: #E5E5E0;
    color: #787774;
    transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
    white-space: nowrap;
}

/* Enabled stāvoklis — gan kategorija, gan apakškategorija izvēlētas */
.btn-continue:not([disabled]) {
    background: var(--c-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(212, 82, 31, 0.25);
}

.btn-continue:not([disabled]):hover {
    background: var(--c-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 82, 31, 0.32);
}

.btn-continue:not([disabled]):active {
    transform: scale(0.97);
}

/* Desktop: poga pie formas apakšas, labajā stūrī */
.pa-footer-desktop {
    display: none;
    justify-content: flex-end;
    margin-top: 40px;
    padding-bottom: 64px;
}

/* Mobilā: sticky poga pie ekrāna apakšas */
.pa-footer-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: var(--c-surface);
    box-shadow: 0 -4px 20px rgba(28, 28, 26, 0.08), 0 -1px 4px rgba(28, 28, 26, 0.04);
    z-index: 100;
    display: flex;
}

.pa-footer-mobile .btn-continue {
    width: 100%;
    justify-content: center;
}


/* ---------------------------------------------------------------
   POST AD — RESPONSIVITĀTE
--------------------------------------------------------------- */
@media (min-width: 768px) {

    /* Lielāks lapas virsraksts */
    .post-ad-header h1 {
        font-size: 34px;
    }

    .post-ad-header p {
        font-size: 16px;
    }

    /* Lielāki progress apļi uz desktop */
    .pa-step-circle {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .pa-step-label {
        font-size: 13px;
    }

    .pa-connector {
        margin-bottom: 32px;
        max-width: 120px;
    }

    .pa-progress {
        max-width: 560px;
        margin-top: 36px;
    }

    /* Lielāks step 1 virsraksts */
    .pa-step1-header h2 {
        font-size: 24px;
    }

    /* 3 kolonnu kategoriju režģis */
    .pa-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .pa-cat-card {
        padding: 24px 20px;
    }

    .pa-cat-card-icon {
        font-size: 48px;
    }

    .pa-cat-card-name {
        font-size: 16px;
    }

    /* Slēpj mobilās sticky pogas joslu, rāda desktop pogu */
    .pa-footer-mobile  { display: none; }
    .pa-footer-desktop { display: flex; }

    /* Nav papildu padding apakšā uz desktop */
    .post-ad-page {
        padding-bottom: 0;
    }

}


/* ============================================================
   POST AD LAPA — FĀZE B  (Step 2: Details)
   ============================================================ */

/* ── Form sections ────────────────────────────────────────── */
.pa-form-section {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
}

.pa-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 18px 0;
}

/* ── Labels ───────────────────────────────────────────────── */
.pa-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: 6px;
}

.pa-req {
    color: var(--c-accent);
    margin-left: 2px;
}

/* ── Fields ───────────────────────────────────────────────── */
.pa-field {
    margin-bottom: 16px;
}

.pa-field:last-child {
    margin-bottom: 0;
}

.pa-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
    min-height: 18px;
}

/* ── Inputs & textarea ────────────────────────────────────── */
.pa-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 15px;
    color: var(--c-text);
    background: #fff;
    transition: border-color 0.15s;
    outline: none;
}

.pa-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(212,82,31,0.10);
}

.pa-input.has-error,
.pa-field.has-error .pa-input {
    border-color: #E53E3E;
}

.pa-textarea {
    resize: vertical;
    min-height: 110px;
}

/* ── Error + counter ──────────────────────────────────────── */
.pa-error {
    font-size: 12px;
    color: #E53E3E;
    font-weight: 500;
}

.pa-error:empty {
    display: none;
}

.pa-counter {
    font-size: 12px;
    color: #9E9E9E;
    white-space: nowrap;
    flex-shrink: 0;
}

.pa-counter.is-warning {
    color: #E53E3E;
}

/* ── Price row ────────────────────────────────────────────── */
.pa-price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pa-price-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
    min-width: 140px;
    transition: border-color 0.15s;
}

.pa-price-input-group:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(212,82,31,0.10);
}

.pa-currency-prefix {
    padding: 11px 12px 11px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-muted);
    background: #FAFAF8;
    border-right: 1.5px solid var(--c-border);
    user-select: none;
}

.pa-price-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
    min-width: 0;
}

.pa-price-input:focus {
    box-shadow: none !important;
}

.pa-price-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Checkboxes ───────────────────────────────────────────── */
.pa-check-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
    user-select: none;
}

.pa-check {
    width: 18px;
    height: 18px;
    accent-color: var(--c-accent);
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Select ───────────────────────────────────────────────── */
.pa-select-wrap {
    position: relative;
}

.pa-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.pa-select-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--c-text-muted);
}

/* ── Hints ────────────────────────────────────────────────── */
.pa-field-hint {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pa-hint-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pa-hint-btn:hover {
    color: var(--c-accent-dark);
}

/* ── Contact checkboxes section ───────────────────────────── */
.pa-contact-checks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pa-contact-field {
    margin-bottom: 14px;
}

.pa-contact-field:last-child {
    margin-bottom: 0;
}

/* ── Map ──────────────────────────────────────────────────── */
.pa-map-wrap {
    margin-top: 14px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--c-border);
    background: #FAFAF8;
}

.pa-map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--c-text-muted);
    font-size: 14px;
    gap: 8px;
    flex-direction: column;
}

.pa-map-iframe {
    width: 100%;
    height: 220px;
    border: none;
    display: block;
}

.pa-map-status {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--c-text-muted);
    background: #FAFAF8;
}

.pa-map-status--ok  { color: #10B981; }
.pa-map-status--err { color: #E53E3E; }

/* ── Step 2 header (selected category badge) ──────────────── */
.pa-step2-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.pa-step2-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent-pale);
    color: var(--c-accent);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
}

.pa-step2-cat-change {
    font-size: 13px;
    color: var(--c-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pa-step2-cat-change:hover {
    color: var(--c-accent);
}

/* ── Step 2 desktop footer ────────────────────────────────── */
.pa-step2-footer {
    justify-content: space-between !important;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
    margin-top: 8px;
}

/* ── Back button ──────────────────────────────────────────── */
.btn-back {
    background: transparent;
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
    border-radius: 10px;
    padding: 12px 28px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.btn-back:hover {
    background: var(--c-accent-pale);
}

/* ── Mobile Step 2 footer ─────────────────────────────────── */
.pa-footer-mobile--step2 {
    display: flex;
    gap: 10px;
}

.pa-footer-mobile--step2 .btn-back,
.pa-footer-mobile--step2 .btn-continue {
    flex: 1;
}

/* ── Step animation ───────────────────────────────────────── */
@keyframes pa-step-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pa-step-entering {
    animation: pa-step-enter 0.25s ease forwards;
}

/* ── Category change modal ────────────────────────────────── */
.pa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pa-modal {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.pa-modal h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 10px 0;
}

.pa-modal p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0 0 22px 0;
    line-height: 1.5;
}

.pa-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.pa-modal-actions .btn-cancel {
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-text-muted);
    border-radius: 8px;
    padding: 10px 18px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
}

.pa-modal-actions .btn-cancel:hover {
    border-color: #b0b0a8;
    color: var(--c-text);
}

.pa-modal-actions .btn-confirm {
    background: var(--c-accent);
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pa-modal-actions .btn-confirm:hover {
    background: var(--c-accent-dark);
}

/* ── Responsive: 768px+ ───────────────────────────────────── */
@media (min-width: 768px) {

    .pa-form-section {
        padding: 28px 32px;
    }

    .pa-section-title {
        font-size: 17px;
    }

    .pa-map-iframe {
        height: 280px;
    }

    .pa-price-row {
        flex-wrap: nowrap;
    }

    .pa-contact-checks {
        gap: 24px;
    }

    .pa-footer-mobile--step2 { display: none; }

}


/* ============================================================
   intl-tel-input — dizaina integrācija
   ============================================================ */

/* Platums 100% — iti ietver gan karodziņu, gan input */
.iti {
    width: 100%;
}

/* Input lauks atbilst pa-input stilam */
.iti__tel-input,
.iti input[type="tel"] {
    padding: 11px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 15px;
    color: var(--c-text);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.iti__tel-input:focus,
.iti input[type="tel"]:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(212,82,31,0.10);
}

/* Kļūdas stāvoklis */
.pa-field.has-error .iti__tel-input,
.pa-field.has-error .iti input[type="tel"] {
    border-color: #E53E3E;
}

/* Karodziņa + dial code bloks */
.iti--separate-dial-code .iti__selected-flag {
    background-color: #FAFAF7;
    border-radius: 8px 0 0 8px;
    border: 1.5px solid var(--c-border);
    border-right: none;
}

/* Valstu dropdown fonta stils */
.iti__country-list {
    font-family: var(--font);
    font-size: 14px;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border: 1px solid var(--c-border);
}

.iti__country-list .iti__country.iti__highlight,
.iti__country-list .iti__country:hover {
    background: var(--c-accent-pale);
}

/* Mobile — saīsināts saraksts */
@media (max-width: 767px) {
    .iti__country-list {
        max-height: 200px;
    }
}


/* ============================================================
   POST AD LAPA — FĀZE C1 (Specifiskie lauki)
   ============================================================ */

/* ── Specifisko lauku sekcija ─────────────────────────────── */
.pa-specific-fields {
    margin-top: 16px;
    animation: pa-step-enter 0.3s ease-out;
}

.pa-specific-fields-inner {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 24px;
}

.pa-specific-fields-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-specific-fields-title i {
    font-size: 20px;
    color: var(--c-accent);
}

/* ── Lauku tīkls: 2 kolonnas desktop ──────────────────────── */
.pa-specific-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

/* Pilna platuma lauki (radio, multiselect) */
.pa-field--full {
    grid-column: 1 / -1;
}

/* ── Placeholder (apakškat. bez laukiem) ─────────────────── */
.pa-specific-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--c-text-muted);
    text-align: center;
}

.pa-specific-placeholder i {
    font-size: 32px;
    opacity: 0.4;
}

.pa-specific-placeholder p {
    font-size: 14px;
    margin: 0;
}

/* ── Toggle switch ────────────────────────────────────────── */
.pa-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    cursor: pointer;
}

.pa-toggle .pa-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.pa-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #E5E5E0;
    transition: 0.25s;
    border-radius: 28px;
}

.pa-toggle-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.pa-toggle .pa-toggle-input:checked + .pa-toggle-slider {
    background-color: var(--c-accent);
}

.pa-toggle .pa-toggle-input:checked + .pa-toggle-slider::before {
    transform: translateX(22px);
}

.pa-toggle .pa-toggle-input:focus + .pa-toggle-slider {
    box-shadow: 0 0 0 3px rgba(212,82,31,0.15);
}

/* ── Multiselect checkbox group ───────────────────────────── */
.pa-multiselect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    width: 100%;
}

.pa-multiselect-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 14px;
    user-select: none;
    min-height: 44px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.pa-multiselect-item:hover {
    background: var(--c-accent-pale);
    border-color: var(--c-accent);
}

.pa-multiselect-item.checked {
    background: var(--c-accent-pale);
    border-color: var(--c-accent);
    color: var(--c-accent);
    font-weight: 500;
}

.pa-multiselect-item .pa-check {
    accent-color: var(--c-accent);
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Teksts aizpilda atlikušo platumu un aplaužas */
.pa-multiselect-item label,
.pa-multiselect-item span {
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
    cursor: pointer;
    color: var(--c-text);
}

/* ── Radio buttons kā chips ───────────────────────────────── */
.pa-radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pa-radio-item {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1.5px solid var(--c-border);
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

.pa-radio-item:hover {
    background: var(--c-accent-pale);
    border-color: var(--c-accent);
}

.pa-radio-item.selected {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

.pa-radio-item .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}

/* ── Help text ────────────────────────────────────────────── */
.pa-field-help {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

/* ── Select overflow ──────────────────────────────────────── */
.pa-specific-fields select,
.pa-field select {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.pa-specific-fields select option,
.pa-field select option {
    white-space: normal;
}

/* ── Responsive: mobile ───────────────────────────────────── */
@media (max-width: 767px) {
    .pa-specific-fields-grid {
        grid-template-columns: 1fr;
    }

    .pa-field--full {
        grid-column: 1;
    }

    .pa-specific-fields-inner {
        padding: 18px 16px;
    }

    /* Multiselect: 1 kolonna mobilajā */
    .pa-multiselect {
        grid-template-columns: 1fr;
    }

    .pa-multiselect-item {
        padding: 12px 14px;
        min-height: 48px;
    }

    .pa-multiselect-item label,
    .pa-multiselect-item span {
        font-size: 15px;
    }

    /* Radio chips: vertikāli mobilajā */
    .pa-radio-group {
        flex-direction: column;
    }

    .pa-radio-item {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ── Responsive: 768px+ ───────────────────────────────────── */
@media (min-width: 768px) {
    .pa-specific-fields-inner {
        padding: 28px 32px;
    }

    .pa-specific-fields-title {
        font-size: 17px;
    }
}


/* ============================================================
   POST AD LAPA — FĀZE C2
   ============================================================ */

/* Disabled select (Model dropdown pirms Make izvēles) */
.pa-field select:disabled,
.pa-specific-fields select:disabled {
    background-color: #F5F5F2;
    color: #B0B0AC;
    cursor: not-allowed;
    opacity: 0.7;
    border-color: #E5E5E0;
}

/* Number / text input error state inside specific fields section */
.pa-specific-fields input.sf-input-error,
.pa-specific-fields select.sf-input-error {
    border-color: #E53E3E;
    background-color: #FFF5F5;
}

.pa-specific-fields input.sf-input-error:focus,
.pa-specific-fields select.sf-input-error:focus {
    border-color: #E53E3E;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
    outline: none;
}


/* ============================================================
   POST AD LAPA — FĀZE D  (Datumu lauki — type="date")
   ============================================================ */

.pa-field input[type="date"],
.pa-specific-fields input[type="date"] {
    padding: 11px 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 15px;
    width: 100%;
    background: #fff;
    color: var(--c-text);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pa-field input[type="date"]:focus,
.pa-specific-fields input[type="date"]:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(212, 82, 31, 0.12);
    outline: none;
}

.pa-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.4);
    padding: 2px;
}

.pa-field input[type="date"].pa-input,
.pa-specific-fields input[type="date"].pa-input {
    padding: 11px 14px;
}

/* ============================================================
   POST AD LAPA — FĀZE D  (Solis 3: Photos)
   ============================================================ */

/* ── Dropzone ─────────────────────────────────────────────── */
.pa-photo-dropzone {
    min-height: 300px;
    border: 2px dashed #E5E5E0;
    border-radius: 12px;
    background: #FAFAF7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    cursor: pointer;
    padding: 40px 24px;
    transition: background 0.3s, border-color 0.3s;
    margin-bottom: 24px;
}

.pa-photo-dropzone:hover {
    background: #FDF1EC;
    border-color: var(--c-accent);
}

.pa-photo-dropzone.dragover {
    background: #FDF1EC;
    border: 2px solid var(--c-accent);
}

.pa-photo-dropzone.dragover .pa-dz-icon {
    animation: pa-dz-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes pa-dz-pulse {
    from { transform: scale(1);    opacity: 1; }
    to   { transform: scale(1.12); opacity: 0.75; }
}

.pa-dz-icon {
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-dz-icon i { font-size: 64px; }

.pa-dz-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

.pa-dz-hint {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0;
}

/* ── Photo Grid ───────────────────────────────────────────── */
.pa-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

/* ── Photo Item ───────────────────────────────────────────── */
.pa-photo-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #F0EFEB;
}

.pa-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sortable states */
.pa-photo-ghost {
    opacity: 0.4;
    border: 2px dashed var(--c-accent);
}

.pa-photo-chosen {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transform: scale(1.03);
    z-index: 10;
}

/* ── Delete button ────────────────────────────────────────── */
.pa-photo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s;
    z-index: 3;
}

.pa-photo-delete:hover {
    background: #E53E3E;
}

/* ── MAIN badge ───────────────────────────────────────────── */
.pa-photo-main-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--c-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}

/* ── Drag handle ──────────────────────────────────────────── */
.pa-photo-drag-handle {
    position: absolute;
    bottom: 6px;
    left: 6px;
    color: rgba(255,255,255,0.85);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: opacity 0.2s;
}

.pa-photo-drag-handle:active { cursor: grabbing; }

/* ── Add more tile ────────────────────────────────────────── */
.pa-photo-add-more {
    border: 2px dashed #D0C9C1;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    border-radius: 8px;
}

.pa-photo-add-more i { font-size: 26px; }

.pa-photo-add-more:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: #FDF1EC;
}

/* ── Counter ──────────────────────────────────────────────── */
.pa-photo-counter {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: 8px;
}

.pa-photo-counter.error {
    color: #E53E3E;
    font-weight: 500;
}

/* ── Error message ────────────────────────────────────────── */
#pa-photo-error {
    display: none;
    font-size: 13px;
    color: #E53E3E;
    background: #FFF5F5;
    border: 1px solid #FEB2B2;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* ── Progress bar (kompresija) ────────────────────────────── */
.pa-photo-progress {
    display: none;
    font-size: 13px;
    color: var(--c-accent);
    margin-bottom: 12px;
    font-style: italic;
}

/* ── Step 3 header ────────────────────────────────────────── */
.pa-step3-header {
    margin-bottom: 28px;
}

.pa-step3-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
}

.pa-step3-header p {
    font-size: 15px;
    color: var(--c-text-muted);
}

/* ── Step 3 footer (desktop) ──────────────────────────────── */
.pa-step3-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    justify-content: space-between;
}

/* ── Tablet & Desktop ─────────────────────────────────────── */
@media (min-width: 480px) {
    .pa-photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .pa-photo-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .pa-photo-dropzone {
        min-height: 320px;
    }

    .pa-step3-header h2 {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .pa-photo-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
}

/* ============================================================
   FĀZE E — STEP 4: REVIEW & PUBLISH
   ============================================================ */

/* ── Step 4 header ──────────────────────────────────────────── */
.pa-step4-header {
    margin-bottom: 24px;
}
.pa-step4-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 4px;
}
.pa-step4-sub {
    font-size: 15px;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* ── Full preview container ──────────────────────────────────── */
.s4-preview-container {
    background: #fff;
    border: 1.5px solid #E5E5E0;
    border-radius: 14px;
    padding: 0 20px;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
}

/* ── Preview sections (specified styles) ─────────────────────── */
.pa-preview-section {
    border-bottom: 1px solid #E5E5E0;
    padding: 20px 0;
}
.pa-preview-section:last-child { border-bottom: none; }
.pa-preview-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pa-preview-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #787774;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pa-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #D4521F;
    border-radius: 6px;
    color: #D4521F;
    background: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
}
.pa-edit-link:hover {
    background: #D4521F;
    color: white;
}
.pa-preview-photo-main {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    display: block;
}
.pa-preview-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.pa-preview-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
    border: 2px solid transparent;
}
.pa-preview-thumb:hover,
.pa-preview-thumb.active {
    opacity: 1;
    border-color: #D4521F;
}
.pa-preview-no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    color: #94a3b8;
    font-size: 14px;
}
.pa-preview-no-photo i { font-size: 40px; }
.pa-preview-title {
    font-size: 24px;
    font-weight: 700;
    color: #1C1C1A;
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.pa-preview-price-row {
    margin-bottom: 12px;
}
.pa-preview-price {
    font-size: 22px;
    font-weight: 600;
    color: #D4521F;
}
.pa-preview-price--por {
    color: #787774;
    font-size: 18px;
    font-weight: 500;
}
.pa-preview-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 6px;
}
.pa-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #787774;
    font-size: 14px;
}
.pa-preview-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pa-preview-description {
    color: #1C1C1A;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
    font-size: 15px;
}
.pa-preview-fields-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
.pa-preview-fields-list li {
    color: #1C1C1A;
    font-size: 14px;
}
.pa-preview-fields-list li strong {
    color: #787774;
    font-weight: 500;
    margin-right: 6px;
}
.pa-preview-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pa-preview-contact-list li {
    padding: 6px 0;
    color: #1C1C1A;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pa-preview-contact-list li i { font-size: 18px; color: #D4521F; }
.pa-preview-map {
    width: 100%;
    height: 250px;
    border: 1px solid #E5E5E0;
    border-radius: 8px;
    display: block;
}

/* ── Package selection ──────────────────────────────────────── */
.s4-packages-section {
    margin-bottom: 28px;
}
.s4-section-title {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 14px;
}
.s4-pkg-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.s4-pkg-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
.s4-pkg-card:hover {
    border-color: #93c5fd;
}
.s4-pkg-card.is-selected {
    border-color: #2563eb;
    background: #eff6ff;
}
.s4-pkg-badge {
    position: absolute;
    top: -11px;
    left: 16px;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 9px;
    border-radius: 20px;
}
.s4-pkg-badge--gold {
    background: #d97706;
}
.s4-pkg-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s;
}
.s4-pkg-card.is-selected .s4-pkg-radio {
    border-color: #2563eb;
}
.s4-pkg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    display: none;
}
.s4-pkg-card.is-selected .s4-pkg-dot {
    display: block;
}
.s4-pkg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.s4-pkg-name {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.s4-pkg-duration {
    font-size: 13px;
    color: #64748b;
}
.s4-pkg-price {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

/* ── T&C checkboxes ─────────────────────────────────────────── */
.s4-checks-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
.s4-tc-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    line-height: 1.5;
}
.s4-tc-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #2563eb;
    cursor: pointer;
}
.s4-tc-label a {
    color: #2563eb;
    text-decoration: underline;
}

/* ── Step 4 desktop footer ──────────────────────────────────── */
.pa-step4-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

/* ── Publish button ─────────────────────────────────────────── */
.btn-publish {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    font-family: inherit;
}
.btn-publish:hover:not(:disabled) {
    background: #1d4ed8;
}
.btn-publish:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Success screen ─────────────────────────────────────────── */
#pa-success-screen {
    max-width: 560px;
    margin: 60px auto 80px;
    padding: 48px 32px 56px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
.pa-success-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.pa-success-icon {
    font-size: 72px;
    color: #16a34a;
    line-height: 1;
}
.pa-success-title {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.pa-success-sub {
    font-size: 15px;
    color: #64748b;
    margin: 0;
    max-width: 360px;
}
.pa-success-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.btn-view-ad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: background .15s;
}
.btn-view-ad:hover { background: #1d4ed8; }
.btn-post-another {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #0f172a;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.btn-post-another:hover { background: #e2e8f0; }
.pa-success-share {
    margin-top: 8px;
    text-align: center;
}
.pa-success-share-label {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
}
.pa-success-share-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
}
.share-btn:hover { opacity: .85; }
.share-btn--wa {
    background: #25d366;
    color: #fff;
}
.share-btn--email {
    background: #f1f5f9;
    color: #0f172a;
    border: 1.5px solid #e2e8f0;
}
.pa-success-tip {
    font-size: 13px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0;
    max-width: 380px;
}

@media (max-width: 600px) {
    #pa-success-screen {
        margin: 24px 12px 48px;
        padding: 36px 20px 40px;
        border-radius: 12px;
    }
    .pa-success-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-view-ad,
    .btn-post-another {
        width: 100%;
        justify-content: center;
    }
}

/* ── Responsive Step 4 ──────────────────────────────────────── */
@media (min-width: 768px) {
    .pa-step4-header h2 { font-size: 28px; }
    .pa-preview-title { font-size: 28px; }
    .pa-preview-price { font-size: 24px; }
}

@media (max-width: 768px) {
    .pa-preview-fields-list {
        grid-template-columns: 1fr;
    }
    .pa-preview-title { font-size: 20px; }
    .pa-preview-price { font-size: 20px; }
}


/* ============================================================
   BUSINESSES LAPA — FĀZE F.5
   businesses.html, businesses.js, businesses-data.js
============================================================ */

/* Aktīvā navigācijas saite */
.header-nav a.nav-active {
    color: var(--c-primary);
    font-weight: 600;
}
.mobile-menu-link.mobile-menu-link--active {
    color: var(--c-primary);
    font-weight: 600;
}

/* ── Page Hero ──────────────────────────────────────────────── */
.biz-page-hero {
    background: var(--c-section-alt);
    border-bottom: 1px solid var(--c-border);
    padding: 32px 0 28px;
}
.biz-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.biz-hero-text h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 6px;
    line-height: 1.25;
}
.biz-hero-text p {
    font-size: 15px;
    color: var(--c-text-muted);
    margin: 0;
}
.biz-hero-search {
    position: relative;
    flex: 0 0 340px;
    max-width: 100%;
}
.biz-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
    display: block;
}
.biz-search-input {
    width: 100%;
    padding: 10px 16px 10px 44px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: var(--c-text);
    transition: border-color var(--ease);
    box-sizing: border-box;
}
.biz-search-input:focus {
    outline: none;
    border-color: var(--c-primary);
}

/* ── Page Body ──────────────────────────────────────────────── */
.biz-page-body {
    padding: 32px 0 64px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.businesses-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Sidebar reuse (sama struktūra kā listings.html) ─────────── */

/* ── Businesses Grid ─────────────────────────────────────────── */
.biz-main {
    min-width: 0;
}
.businesses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* ── Business Card ───────────────────────────────────────────── */
.business-card {
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow var(--ease), transform var(--ease);
    position: relative;
}
.business-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.business-card.is-featured {
    border-color: rgba(212, 82, 31, 0.35);
}
.biz-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Cover attēls */
.biz-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-section-alt);
}
.biz-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.business-card:hover .biz-cover img {
    transform: scale(1.03);
}

/* Featured badge */
.biz-featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #D4521F;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    pointer-events: none;
}

/* Saturs */
.biz-content {
    padding: 16px 16px 20px;
}

/* Header: logo + nosaukums */
.biz-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.biz-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    flex-shrink: 0;
    margin-top: -32px;
    background: white;
}
.biz-title-block {
    flex: 1;
    min-width: 0;
}
.biz-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}
.biz-verified-icon {
    color: #D4521F;
    flex-shrink: 0;
}
.biz-meta {
    font-size: 12px;
    color: var(--c-text-muted);
    margin: 0;
}

/* Reitings */
.biz-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0;
}
.biz-stars {
    display: flex;
    gap: 1px;
    align-items: center;
}
.biz-rating strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}
.biz-rating span {
    font-size: 12px;
    color: var(--c-text-muted);
}

/* Tagline */
.biz-tagline {
    font-size: 13px;
    color: var(--c-text);
    line-height: 1.5;
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Darba laiki */
.biz-hours {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--c-text-muted);
    margin: 6px 0 14px;
}

/* View poga */
.biz-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 16px;
    background: var(--c-primary);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ease);
    box-sizing: border-box;
}
.business-card:hover .biz-view-btn {
    background: var(--c-primary-dark, #b84219);
}

/* No results */
.biz-no-results {
    grid-column: 1 / -1;
    padding: 64px 24px;
    text-align: center;
    color: var(--c-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.biz-no-results p {
    font-size: 15px;
    margin: 0;
}

/* Filtru radio rows */
.filter-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-text);
}
.filter-radio-row input[type="radio"] {
    accent-color: var(--c-primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.filter-radio-row .filter-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-text-muted);
    background: var(--c-section-alt);
    padding: 1px 6px;
    border-radius: 10px;
}

/* Filtru toggle (checkbox) */
.filter-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-text);
}
.filter-toggle {
    accent-color: var(--c-primary);
    width: 16px;
    height: 16px;
}

/* Filtru select */
.filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    background: white;
    appearance: auto;
    margin-top: 4px;
}
.filter-select:focus {
    outline: none;
    border-color: var(--c-primary);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .businesses-layout {
        grid-template-columns: 1fr;
    }
    .filters-sidebar {
        display: none;
    }
    .filters-sidebar.is-open {
        display: flex;
        flex-direction: column;
    }
    /* Mobile filters — chip overflow un padding labojumi */
    .filters-body {
        padding: 0 16px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .filter-group {
        width: 100%;
        box-sizing: border-box;
    }
    .filter-group-body {
        overflow-y: clip;
        overflow-x: visible;
    }
    .filter-btn-group {
        width: 100%;
        box-sizing: border-box;
    }
    .price-inputs {
        box-sizing: border-box;
        width: 100%;
    }
    .filter-group.is-open .filter-group-body {
        padding-bottom: 20px;
    }
    .businesses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .businesses-grid {
        grid-template-columns: 1fr;
    }
    .biz-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .biz-hero-search {
        flex: none;
        width: 100%;
    }
    .biz-hero-text h1 {
        font-size: 20px;
    }
}


/* ============================================================
   AUTH LAPAS — FĀZE I.1
   login.html, signup.html, forgot-password.html
============================================================ */

.auth-page {
    min-height: calc(100vh - 64px - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--c-section-alt);
}

.auth-card {
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.auth-card h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 8px;
}

.auth-card > p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0 0 24px;
}

/* Google button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.btn-google:hover {
    border-color: #aaa;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 20px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    background: white;
    transition: border-color var(--ease);
    box-sizing: border-box;
}
.auth-form input:focus {
    outline: none;
    border-color: var(--c-primary);
}

/* Password wrapper */
.password-wrapper {
    position: relative;
}
.password-wrapper input {
    padding-right: 44px !important;
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color var(--ease);
}
.password-toggle:hover {
    color: var(--c-text);
}

/* Checkbox */
.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    line-height: 1.5;
}
.auth-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--c-primary);
}
.auth-checkbox a {
    color: var(--c-primary);
    text-decoration: underline;
}

/* Submit button */
.btn-submit-auth {
    display: block;
    width: 100%;
    padding: 12px;
    background: #D4521F;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 16px;
    opacity: 1;
    visibility: visible;
    box-sizing: border-box;
}
.btn-submit-auth:hover {
    background: var(--c-primary-dark, #b84219);
}
.btn-submit-auth:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Messages */
.auth-message {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}
.auth-message.error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}
.auth-message.success {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #BBF7D0;
}

/* Footer link row */
.auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--c-text-muted);
}
.auth-footer a {
    color: var(--c-primary);
    font-weight: 500;
    text-decoration: none;
}
.auth-footer a:hover {
    text-decoration: underline;
}

/* Back link */
.auth-back {
    margin-bottom: 20px;
}
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--ease);
}
.auth-back-link:hover {
    color: var(--c-text);
}

/* Forgot password link in label */
.forgot-link {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-primary);
    text-decoration: none;
}
.forgot-link:hover {
    text-decoration: underline;
}

/* ── Header: User Avatar & Dropdown ────────────────────────── */
.header-user-avatar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background var(--ease);
}
.header-user-avatar:hover {
    background: var(--c-section-alt);
}

.user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-border);
    flex-shrink: 0;
}

.user-display-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    min-width: 160px;
    z-index: 200;
    overflow: hidden;
}
.user-dropdown.is-open {
    display: block;
}
.user-dropdown a,
.user-dropdown button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
    color: var(--c-text);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ease);
    box-sizing: border-box;
}
.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--c-section-alt);
}

.header-signout-btn {
    color: #DC2626 !important;
    border-top: 1px solid var(--c-border) !important;
}

/* ── Auth responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px;
        border-radius: 12px;
    }
}

/* Anti-flicker: Sign In un User Avatar parādās tikai pēc Firebase atbildes */
.header-signin,
.header-user-avatar {
    transition: opacity 0.15s ease;
}

/* ── Dropdown hr ──────────────────────────────────────────────── */
.user-dropdown hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 4px 0;
}


/* ============================================================
   PROFILE + MY LISTINGS — FĀZE I.2
   profile.html, my-listings.html, profile.js, my-listings.js
============================================================ */

.profile-page {
    min-height: calc(100vh - 64px - 60px);
    padding: 40px 0 64px;
    background: var(--c-section-alt);
}

.profile-container {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.profile-sidebar {
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
}

.profile-avatar-big {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #D4521F;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    margin: 0 auto 14px;
    line-height: 1;
}

.profile-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
}

.profile-email {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0 0 12px;
    word-break: break-all;
}

.profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #10B981;
    font-weight: 500;
}

.profile-unverified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #DC2626;
    font-weight: 500;
}

.profile-nav {
    margin-top: 20px;
    text-align: left;
}

.profile-nav a,
.profile-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--c-text);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background var(--ease), color var(--ease);
    box-sizing: border-box;
}

.profile-nav a:hover,
.profile-nav button:hover {
    background: #FDF1EC;
    color: var(--c-primary);
}

.profile-nav a.active {
    background: #FDF1EC;
    color: var(--c-primary);
    font-weight: 500;
}

.profile-nav button {
    color: #DC2626;
}

.profile-nav button:hover {
    background: #FEF2F2;
    color: #DC2626;
}

/* ── Main Content ────────────────────────────────────────────── */
.profile-content {
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 32px;
}

.profile-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 24px;
}

/* ── Profile Sections ────────────────────────────────────────── */
.profile-section {
    margin-bottom: 0;
    padding-bottom: 32px;
}

.profile-section + .profile-section {
    padding-top: 32px;
    border-top: 1px solid var(--c-border);
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.profile-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
}

.profile-form-group input[type="text"],
.profile-form-group input[type="email"],
.profile-form-group input[type="tel"],
.profile-form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    background: white;
    transition: border-color var(--ease);
    box-sizing: border-box;
}

.profile-form-group input:focus {
    outline: none;
    border-color: var(--c-primary);
}

.profile-form-group input:disabled {
    background: var(--c-section-alt);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

/* ── Danger Zone ─────────────────────────────────────────────── */
.profile-danger-zone {
    border: 1px solid #FCA5A5;
    border-radius: 10px;
    padding: 20px 24px;
    background: #FEF2F2;
}

.btn-delete-account {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1.5px solid #DC2626;
    color: #DC2626;
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ease);
}

.btn-delete-account:hover:not(:disabled) {
    background: #FEF2F2;
}

.btn-delete-account:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── My Listings tabs ────────────────────────────────────────── */
.listings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 24px;
}

.listings-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--c-text-muted);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: color var(--ease), border-color var(--ease);
}

.listings-tab:hover {
    color: var(--c-text);
}

.listings-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

/* ── Listing Card (my-listings) ──────────────────────────────── */
.my-listing-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    background: white;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    transition: box-shadow var(--ease);
}

.my-listing-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.my-listing-thumb {
    width: 110px;
    height: 82px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}

.my-listing-no-photo {
    width: 110px;
    height: 82px;
    border-radius: 7px;
    background: var(--c-section-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: 28px;
}

.my-listing-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.my-listing-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-listing-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    margin: 0 0 2px;
}

.my-listing-meta {
    font-size: 12px;
    color: var(--c-text-muted);
    margin: 0 0 10px;
}

.my-listing-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-view-listing,
.btn-delete-listing {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid var(--c-border);
    background: white;
    text-decoration: none;
    color: var(--c-text);
    transition: border-color var(--ease), color var(--ease);
    display: inline-flex;
    align-items: center;
}

.btn-view-listing {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

.btn-view-listing:hover {
    background: #FDF1EC;
}

.btn-delete-listing {
    color: #DC2626;
    border-color: #DC2626;
}

.btn-delete-listing:hover {
    background: #FEF2F2;
}

/* Post New Ad button */
.btn-post-new-ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--c-primary);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ease);
    white-space: nowrap;
}

.btn-post-new-ad:hover {
    background: var(--c-primary-dark, #b84219);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--c-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.empty-state i {
    font-size: 52px;
    color: #C5C5C0;
}

.empty-state p {
    font-size: 15px;
    margin: 0;
}

.btn-primary-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: #D4521F;
    color: white !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    margin-top: 4px;
}

.btn-primary-link:hover {
    background: #B8451A;
}

/* Force visibility inside empty-state containers */
.empty-state .btn-primary-link {
    background: #D4521F !important;
    color: white !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Profile + Listings Responsive ──────────────────────────── */
@media (max-width: 860px) {
    .profile-container {
        grid-template-columns: 1fr;
    }
    .profile-sidebar {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 20px;
        text-align: left;
        align-items: start;
    }
    .profile-avatar-big {
        margin: 0;
        grid-row: 1 / 4;
    }
    .profile-nav {
        grid-column: 1 / -1;
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .profile-nav a,
    .profile-nav button {
        width: auto;
        margin-bottom: 0;
    }
    .profile-nav hr {
        display: none;
    }
}

@media (max-width: 540px) {
    .profile-content {
        padding: 20px 16px;
    }
    .my-listing-card {
        grid-template-columns: 1fr;
    }
    .my-listing-thumb,
    .my-listing-no-photo {
        width: 100%;
        height: 180px;
    }
}


/* ============================================================
   AIZSARDZĪBA — FĀZE I.3
   Contact lock, Post Ad popup, auth info banner
============================================================ */

/* ── Contact locked state ────────────────────────────────── */
.contact-locked {
    border: 1px solid #D4521F;
    border-radius: 12px;
    padding: 20px 18px;
    text-align: center;
    background: #FDF1EC;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.contact-locked .lock-icon {
    width: 40px;
    height: 40px;
    background: #D4521F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-bottom: 4px;
}

.contact-locked h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1C1C1A;
    margin: 0 0 4px;
}

.contact-locked p {
    font-size: 13px;
    color: #787774;
    margin: 0 0 8px;
}

.btn-signin-to-contact {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: #D4521F !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-signin-to-contact:hover {
    background: #B8451A !important;
}

.signin-footer {
    font-size: 12px !important;
    color: var(--c-text-muted);
    margin: 4px 0 0 !important;
}

.signin-footer a {
    color: #D4521F;
    font-weight: 500;
    text-decoration: none;
}

.signin-footer a:hover {
    text-decoration: underline;
}

/* ── Sign-in popup overlay ───────────────────────────────── */
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUpPopup {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.signin-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInOverlay 0.18s ease;
}

.signin-popup {
    background: white;
    border-radius: 16px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    animation: slideUpPopup 0.22s ease;
}

.popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--c-text-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease), color var(--ease);
    font-family: inherit;
}

.popup-close:hover {
    background: var(--c-section-alt);
    color: var(--c-text);
}

.popup-icon {
    width: 64px;
    height: 64px;
    background: #FDF1EC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--c-primary);
    margin: 0 auto 16px;
}

.signin-popup h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 8px;
}

.signin-popup p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.btn-popup-signin {
    display: block !important;
    padding: 12px;
    background: #D4521F !important;
    color: white !important;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background 0.2s;
}

.btn-popup-signin:hover {
    background: #B8451A !important;
}

.btn-popup-signup {
    display: block !important;
    padding: 12px;
    background: white !important;
    color: #D4521F !important;
    border: 1px solid #D4521F !important;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s;
}

.btn-popup-signup:hover {
    background: #FDF1EC !important;
}

.popup-continue {
    background: none;
    border: none;
    color: var(--c-text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color var(--ease), background var(--ease);
}

.popup-continue:hover {
    color: var(--c-text);
    background: var(--c-section-alt);
}

/* ── Auth info banner (reason=postad) ────────────────────── */
.auth-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FDF1EC;
    border: 1.5px solid var(--c-primary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-text);
    margin-bottom: 20px;
}

.auth-info-banner i {
    font-size: 18px;
    color: var(--c-primary);
    flex-shrink: 0;
}

/* ── Phase I.3 Responsive ────────────────────────────────── */
@media (max-width: 480px) {
    .signin-popup {
        padding: 36px 20px 24px;
    }

    .contact-locked {
        padding: 24px 16px;
    }
}


/* ============================================================
   LOAD MORE — FĀZE I.4.1
============================================================ */

#load-more-container {
    text-align: center;
    margin: 8px 0 24px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: white;
    border: 1.5px solid #D4521F;
    color: #D4521F;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    min-width: 200px;
}

.btn-load-more:hover {
    background: #FDF1EC;
}

.btn-load-more:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ============================================================
   CLOUDINARY PHOTO UPLOAD — FĀZE I.4.2
============================================================ */

.pa-photo-item.photo-uploading {
    opacity: 0.75;
    pointer-events: none;
}

.pa-photo-item .photo-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    border-radius: inherit;
}

.pa-photo-item .photo-upload-overlay::after {
    content: 'Uploading…';
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.55);
    padding: 4px 10px;
    border-radius: 4px;
}


/* ============================================================
   FAVORITES — FĀZE K
============================================================ */

/* ── Save poga kartē (maza, augšā labajā stūrī) ─────────── */
.listing-card {
    position: relative;
}

.btn-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    z-index: 5;
    color: #1C1C1A;
    font-size: 18px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.btn-favorite:hover {
    background: white;
    transform: scale(1.08);
}

.btn-favorite.is-saved {
    background: #D4521F;
    color: white;
}

/* ── Save poga listing.html (lielā ar tekstu) ───────────── */
.btn-favorite-large {
    background: white;
    border: 1.5px solid #E5E5E0;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1C1C1A;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-favorite-large:hover {
    border-color: #D4521F;
    color: #D4521F;
}

.btn-favorite-large.is-saved {
    background: #FDF1EC;
    border-color: #D4521F;
    color: #D4521F;
}

/* ── My Saved Page ──────────────────────────────────────── */
.saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.saved-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E5E0;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}

.saved-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.saved-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.saved-card-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #F5F5F0;
}

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

.saved-card-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #C0C0B8;
}

.saved-card-content {
    padding: 14px 16px;
}

.saved-card-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1C1C1A;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.saved-price {
    color: #D4521F;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
}

.saved-region {
    color: #787774;
    font-size: 13px;
    margin: 0;
}

.btn-remove-saved {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 5;
    transition: background 0.2s;
}

.btn-remove-saved:hover {
    background: #DC2626;
}

.empty-desc {
    color: #787774;
    font-size: 14px;
    margin: 4px 0 16px;
}


/* ============================================================
   FĀZE J — RE-PUBLISH / EXPIRED LISTINGS
============================================================ */

/* Expired badge on card */
.expired-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #DC2626;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

.my-listing-card.is-expired {
    opacity: 0.75;
    position: relative;
}

.my-listing-card.is-expired .my-listing-thumb,
.my-listing-card.is-expired img.my-listing-thumb {
    filter: grayscale(50%);
}

/* Re-publish buttons */
.btn-republish-quick {
    background: #10B981;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.btn-republish-quick:hover { background: #059669; }
.btn-republish-quick:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-republish-edit {
    background: white;
    color: #D4521F;
    border: 1px solid #D4521F;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-republish-edit:hover {
    background: #FDF1EC;
}

/* End Listing button */
.btn-end-listing {
    background: white;
    color: #787774;
    border: 1px solid #E5E5E0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-end-listing:hover {
    border-color: #DC2626;
    color: #DC2626;
}

/* Tab counts */
.tab-count {
    color: #787774;
    font-size: 13px;
    margin-left: 4px;
}

.listings-tab.active .tab-count {
    color: #D4521F;
}

/* Package picker popup */
.package-picker {
    max-width: 460px;
}

.package-options {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkg-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #E5E5E0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.pkg-option:hover {
    border-color: #D4521F;
    background: #FDF1EC;
}

.pkg-option input[type="radio"] {
    accent-color: #D4521F;
    flex-shrink: 0;
}

.pkg-option.selected {
    border-color: #D4521F;
    background: #FDF1EC;
}

/* Repost banner in post-ad.html */
.repost-banner {
    background: #FDF1EC;
    border: 1px solid #D4521F;
    color: #D4521F;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.repost-banner i {
    font-size: 18px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════ */
/* HELP & FAQ PAGES                                            */
/* ═══════════════════════════════════════════════════════════ */

.help-hero, .faq-hero {
    background: linear-gradient(135deg, #FDF1EC 0%, #FAFAF7 100%);
    padding: 72px 20px 56px;
    text-align: center;
}
.help-hero h1, .faq-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #1C1C1A;
    margin: 0 0 14px;
}
.help-hero p, .faq-hero p {
    font-size: 18px;
    color: #787774;
    margin: 0 auto 32px;
    max-width: 560px;
}
.help-search, .faq-search {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}
.help-search input, .faq-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px 16px 52px;
    border: 1px solid #E5E5E0;
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.help-search input:focus, .faq-search input:focus {
    outline: none;
    border-color: #D4521F;
    box-shadow: 0 0 0 3px rgba(212,82,31,.1);
}
.help-search i, .faq-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #787774;
    pointer-events: none;
}

/* Help Categories Grid */
.help-categories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.help-category-card {
    background: #fff;
    border: 1px solid #E5E5E0;
    border-radius: 16px;
    padding: 32px 24px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.help-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.07);
    border-color: #D4521F;
}
.help-category-icon {
    width: 56px;
    height: 56px;
    background: #FDF1EC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #D4521F;
    font-size: 28px;
}
.help-category-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1C1C1A;
    margin: 0 0 8px;
}
.help-category-card p {
    color: #787774;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.help-category-card .help-card-items {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.help-card-items li {
    font-size: 13px;
    color: #787774;
    padding-left: 16px;
    position: relative;
}
.help-card-items li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #D4521F;
    font-weight: 600;
}

/* FAQ Accordion */
.faq-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}
.faq-category {
    margin-bottom: 52px;
    scroll-margin-top: 80px;
}
.faq-category-title {
    font-size: 22px;
    font-weight: 700;
    color: #1C1C1A;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #FDF1EC;
    display: flex;
    align-items: center;
    gap: 10px;
}
.faq-category-title i {
    color: #D4521F;
    font-size: 24px;
}
.faq-item {
    background: #fff;
    border: 1px solid #E5E5E0;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.faq-item:hover { border-color: #D4521F; }
.faq-item.open  { border-color: #D4521F; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.faq-question {
    padding: 18px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    font-size: 15px;
    color: #1C1C1A;
    user-select: none;
}
.faq-question::after {
    content: '+';
    font-size: 22px;
    color: #D4521F;
    transition: transform .2s;
    line-height: 1;
    flex-shrink: 0;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.faq-answer-inner {
    padding: 0 24px 20px;
    color: #4B4B48;
    font-size: 15px;
    line-height: 1.7;
}
.faq-answer-inner p { margin: 0 0 10px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }
.faq-answer-inner ul, .faq-answer-inner ol {
    margin: 6px 0 10px 20px;
    padding: 0;
}
.faq-answer-inner li { margin-bottom: 5px; }

/* Still need help CTA */
.help-cta-section {
    max-width: 800px;
    margin: 0 auto 80px;
    padding: 0 20px;
}
.help-cta-box {
    background: linear-gradient(135deg, #FDF1EC 0%, #FAFAF7 100%);
    text-align: center;
    padding: 56px 32px;
    border-radius: 20px;
    border: 1px solid #F4D5C7;
}
.help-cta-box h2 { font-size: 26px; color: #1C1C1A; margin: 0 0 10px; }
.help-cta-box p  { color: #787774; font-size: 16px; margin: 0 0 28px; }
.help-cta-box .btn-contact {
    background: #D4521F;
    color: #fff;
    padding: 14px 36px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s, transform .15s;
}
.help-cta-box .btn-contact:hover { background: #B8451A; transform: translateY(-2px); }
.help-cta-meta { margin-top: 20px; font-size: 13px; color: #A8A8A3; }
.help-cta-meta a { color: #D4521F; text-decoration: none; }

/* Mobile */
@media (max-width: 768px) {
    .help-hero h1, .faq-hero h1 { font-size: 28px; }
    .help-hero p, .faq-hero p { font-size: 16px; }
    .help-categories { padding: 36px 16px; grid-template-columns: 1fr; gap: 14px; }
    .faq-container { padding: 36px 16px 60px; }
    .faq-question { font-size: 14px; padding: 15px 18px; }
    .faq-answer-inner { padding: 0 18px 18px; font-size: 14px; }
    .help-cta-box { padding: 40px 20px; }
    .help-cta-box h2 { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════ */
/* DELETE ACCOUNT POPUP                                        */
/* ═══════════════════════════════════════════════════════════ */

.delete-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.delete-popup-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    max-width: 480px;
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.delete-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #787774;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
}
.delete-popup-close:hover { background: #FAFAF7; }
.delete-popup-icon {
    width: 64px;
    height: 64px;
    background: #FEE2E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.delete-popup-icon i { font-size: 32px; color: #DC2626; }
.delete-popup-content h2 {
    font-size: 22px;
    color: #1C1C1A;
    text-align: center;
    margin: 0 0 14px;
}
.delete-popup-warning {
    color: #787774;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.6;
    font-size: 14px;
}
.delete-popup-warning strong { color: #DC2626; }
.delete-popup-list {
    background: #FEF2F2;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 22px;
    list-style: none;
}
.delete-popup-list li {
    padding: 5px 0;
    color: #1C1C1A;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.delete-popup-list li i { color: #DC2626; font-size: 17px; }
.delete-popup-confirm label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #1C1C1A;
}
.delete-popup-confirm input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid #E5E5E0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 14px;
}
.delete-popup-confirm input:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.delete-popup-error {
    background: #FEE2E2;
    color: #DC2626;
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.delete-popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.btn-delete-cancel {
    background: #fff;
    color: #1C1C1A;
    border: 1px solid #E5E5E0;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    transition: background .15s;
}
.btn-delete-cancel:hover { background: #FAFAF7; }
.btn-delete-confirm {
    background: #DC2626;
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    transition: background .15s;
}
.btn-delete-confirm:hover:not(:disabled) { background: #B91C1C; }
.btn-delete-confirm:disabled { background: #FCA5A5; cursor: not-allowed; }
@media (max-width: 540px) {
    .delete-popup-content { padding: 32px 18px; }
    .delete-popup-buttons { flex-direction: column; }
    .btn-delete-cancel, .btn-delete-confirm { width: 100%; text-align: center; }
}

/* ── Verify Email Page ───────────────────────────────────── */
.verify-email-card {
    text-align: center;
}
.verify-email-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
    color: #2563EB;
}
.verify-email-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 20px;
}
.btn-verify-check {
    background: #fff;
    color: #1C1C1A;
    border: 1px solid #E5E5E0;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-verify-check:hover:not(:disabled) {
    background: #FAFAF7;
    border-color: #C5C5BE;
}
.btn-verify-check:disabled { opacity: .6; cursor: not-allowed; }
.verify-email-tips {
    font-size: 13px;
    color: #787774;
    margin-bottom: 20px;
    line-height: 1.5;
}
.btn-link-plain {
    background: none;
    border: none;
    color: #787774;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.btn-link-plain:hover { color: #1C1C1A; }

/* ── Profile verify banner ───────────────────────────────── */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #92400E;
    flex-wrap: wrap;
}
.verify-banner i {
    font-size: 20px;
    color: #F97316;
    flex-shrink: 0;
}
.verify-banner span { flex: 1; min-width: 160px; }
.verify-banner-btn {
    background: #F97316;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.verify-banner-btn:hover:not(:disabled) { background: #EA580C; }
.verify-banner-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Re-published badge (zaļš) ──────────────────────────── */
.republished-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #10B981;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.republished-badge i { font-size: 13px; }

/* Re-published kartīte */
.my-listing-card.is-republished {
    border-color: #6EE7B7;
    background: linear-gradient(to bottom, #F0FDF4 0%, #fff 40%);
}
.my-listing-card.is-republished.is-expired {
    opacity: 0.9;
}

/* View Active Version poga */
.btn-view-new {
    background: #10B981;
    color: #fff;
    border: none;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s;
}
.btn-view-new:hover { background: #059669; color: #fff; }

/* Disabled Re-publish poga */
.btn-republish-disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    border: 1px solid #E5E7EB;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-republish-disabled i { color: #10B981; }

/* ── Launch Offer ─────────────────────────────────────────── */
.launch-offer-badge {
  display: inline-block;
  background: #FDF1EC;
  color: #D4521F;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  margin-left: 12px;
}

.package-card-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.coming-soon-label {
  color: #787774;
  font-style: italic;
  font-size: 14px;
}