/*
Template:       classima
Theme Name:     Classima Child
Theme URI:      http://radiustheme.com/demo/wordpress/classima
Author:         RadiusTheme
Author URI:     https://www.radiustheme.com
Description:    Classima is a clean and modern WordPress Theme best suited for Classified Listing. This theme comes with all necessary features and pages for a Classified Listing website.
Version:        1.3
Text Domain:    classima
Tags:           two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog
License:        Envato split License
License URI:    https://themeforest.net/licenses/terms/regular
*/

/* Share icons: all below label text */
li.list-group-item.rtcl-sidebar-social {
    display: flex !important;
    flex-wrap: wrap !important;
}
li.list-group-item.rtcl-sidebar-social .share-label {
    flex: 0 0 100% !important;
    margin-bottom: 8px;
}

/* ===========================================
   MOBILE OPTIMIZATIONS (nur Telefon)
   =========================================== */
@media (max-width: 575.98px) {

    /* Horizontalen Overflow verhindern */
    html, body {
        overflow-x: hidden !important;
    }

    /* MyAccount-Navigation: komplett ausserhalb schieben */
    .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation {
        left: -300px !important;
    }

    /* --- 1. Volle Breite: Grauer Hintergrund weg, kein Container-Padding --- */
    .site-content,
    .elementor-section,
    .elementor-widget-wrap,
    .elementor-element {
        background-color: #fff !important;
    }

    .site-content .content-area {
        padding: 10px 0 !important;
    }

    .site-content > .container,
    .site-content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Banner/Breadcrumb und Footer: Padding beibehalten */
    .theme-banner .container,
    .theme-banner-breadcrumb .container,
    footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Elementor sections full width */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* --- 2. Listing Grid: 2 Spalten, kompakt, volle Breite --- */
    .rt-el-listing-grid .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #content .listing-grid-each {
        max-width: 100% !important;
    }

    /* Cards: rund, kein grauer Rand, leichter Schatten */
    #content .listing-grid-each .rtin-item {
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        overflow: hidden;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
    }

    #content .listing-grid-each .rtin-item .rtin-thumb img {
        border-radius: 12px 12px 0 0;
    }

    /* Compact card content */
    #content .listing-grid-each .rtin-item .rtin-content {
        padding: 8px 10px !important;
    }

    /* Smaller title */
    #content .listing-grid-each .rtin-item .rtin-content .rtin-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* Price: korallrot wie im Referenzbild */
    #content .listing-grid-each .rtin-item .rtcl-price {
        font-size: 15px !important;
        color: #e8405e !important;
        font-weight: 700 !important;
    }

    /* Category badges: farbige Pills */
    #content .listing-grid-each .rtin-item .rtin-content .rtin-cat a {
        background-color: #fff0f3 !important;
        color: #e8405e !important;
        border: 1px solid #fccdd5 !important;
        border-radius: 12px !important;
        padding: 2px 8px !important;
        font-size: 11px !important;
        display: inline-block;
        margin-bottom: 4px;
    }

    /* Featured Badge: farbiger Verlauf */
    .listing-grid-each.featured-listing .rtin-thumb .rtcl-badge-featured,
    .rtcl-badge-featured {
        background: linear-gradient(135deg, #f85c70, #ff8a65) !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Meta: kompakter, helle Icons */
    #content .listing-grid-each .rtin-item .rtin-content .rtin-meta li {
        font-size: 12px !important;
    }

    #content .listing-grid-each .rtin-item .rtin-content .rtin-meta li i,
    #content .listing-grid-each .rtin-item .rtin-content .rtin-meta li svg {
        color: #f85c70 !important;
    }

    /* Hide extra meta (views, date) for cleaner cards */
    .rt-el-listing-grid .col-12 .listing-grid-each .rtin-content .rtin-meta li.view,
    .rt-el-listing-grid .col-12 .listing-grid-each .rtin-content .rtin-meta li.date {
        display: none;
    }

    /* --- 3. Archive/Search Listing Grid volle Breite --- */
    .rtcl-listings.rtcl-grid-view.columns-xs-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-column-gap: 8px !important;
    }

    #content .rtcl-listings.rtcl-grid-view {
        grid-column-gap: 8px !important;
        padding: 0 4px;
    }

    /* --- 4. Header: leichter Schatten statt harter Linie --- */
    .site-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    /* --- 5. Sidebar auf Mobile: kein extra Padding --- */
    .sidebar-widget-area {
        padding: 0 8px !important;
    }

    /* --- 6. Content blocks: kein box-shadow, kompaktes Padding --- */
    .site-content .content-area .site-content-block {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .site-content .content-area .site-content-block .main-content {
        padding: 10px 8px !important;
    }

    /* --- 7. Listing Single Page: volle Breite --- */
    .classima-listing-single {
        padding: 0 8px !important;
    }

    /* --- 8. Buttons/Links: farbiger auf Mobile --- */
    .rt-el-listing-grid .load-more-wrapper .load-more-btn {
        background: linear-gradient(135deg, #f85c70, #e8405e) !important;
        border: none !important;
        border-radius: 25px !important;
        color: #fff !important;
        padding: 10px 30px !important;
    }

    /* --- 9. Location Pin farbig --- */
    #content .listing-grid-each .rtin-item .rtin-content .rtin-meta li.loc i {
        color: #f85c70 !important;
    }

    /* --- 10. Footer: Widgets und Sprachumschalter ausblenden --- */
    .footer-top-area {
        display: none !important;
    }

    .wpml-ls-statics-footer {
        display: none !important;
    }

    /* Footer bottom: etwas Padding */
    .footer-bottom-area .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* --- 11. Hamburger-Menue: Rechtliche Links Trennlinie --- */
    .offscreen-navigation .menu li.mp-legal-separator {
        border-top: 1px solid #e2e8f0;
        margin-top: 8px;
        padding-top: 8px;
    }

    .offscreen-navigation .menu li.mp-legal-separator a {
        font-size: 13px;
        color: #64748b;
    }

    /* Hinweistext für leere Ansprechpartner-Liste */
    #rtcl-store-managers:empty::after {
        content: "Noch keine Ansprechpartner hinzugefügt. Nutzen Sie den Button oben, um Ansprechpartner einzuladen.";
        display: block;
        padding: 20px 16px;
        text-align: center;
        color: #94a3b8;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Website-Feld Hinweis */
    #rtcl-website + .rtcl-form-notice::after,
    input[name="meta[website]"] + small::after {
        content: " (optional)";
        color: #94a3b8;
    }
}

/* ===========================================
   VIEW SWITCHER - Mobile Styling
   =========================================== */
@media (max-width: 575.98px) {
    /* Make listing-archive-top flex on mobile for title + switcher side by side */
    .site-content .listing-archive-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
        box-shadow: none !important;
        border-bottom: 1px solid #f1f5f9;
    }

    .site-content .listing-archive-top .rtin-title {
        font-size: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Hide the ordering dropdown on mobile - keep only view switcher */
    .site-content .listing-archive-top .listing-sorting .rtcl-ordering {
        display: none !important;
    }

    /* Style view-switcher icons bigger and more prominent */
    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher {
        display: inline-flex !important;
        gap: 6px;
    }

    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a {
        border: 1px solid #e2e8f0 !important;
        padding: 8px !important;
        border-radius: 6px !important;
        background: #f8fafc;
    }

    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a:last-child {
        margin-left: 0 !important;
    }

    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a.active {
        background: #0891b2 !important;
        border-color: #0891b2 !important;
    }

    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a.active i,
    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a.active svg {
        color: #fff !important;
        fill: #fff !important;
    }

    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a i,
    .site-content .listing-archive-top .listing-sorting .rtcl-view-switcher > a svg {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* ===========================================
   Vergleichs-Seitenleiste breiter für deutsche Buttons
   =========================================== */
#rtcl-compare-wrap {
    width: 320px !important;
    right: -320px;
}
#rtcl-compare-wrap.open {
    right: 0;
}
#rtcl-compare-btn-wrap a {
    font-size: 0.8em !important;
}

/* ===========================================
   Store Sub-Menü: Tabs breit genug für Text (global)
   =========================================== */
.rtcl-account-sub-menu ul li a {
    width: auto !important;
    padding: 0 24px !important;
    white-space: nowrap;
}

/* ===========================================
   Rechtliche Links nur im Mobile-Menü zeigen
   =========================================== */
.main-header .menu li.mp-legal-separator,
.main-header .menu li.mp-legal-item,
.main-navigation-area .menu li.mp-legal-separator,
.main-navigation-area .menu li.mp-legal-item {
    display: none !important;
}