/*
 * Theme Name: marktplatzmedia
 */
/* --- Original Styles Below --- */
@import url('assets/css/dashicons.css');

/* --- 1. DEFINE LOCAL FONTS --- */

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Regular.woff2') format('woff2'),
         url('assets/fonts/Roboto-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto-Medium.woff2') format('woff2'),
         url('assets/fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

select {background: white;
}
/* --- 2. APPLY FONTS TO THEME --- */
body, button, input, select, textarea {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Use Regular for all standard text */
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.inserat-header h1,
.auto-content-item .entry-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Use Medium 500 for all headings */
}

/* Inserate Archive Flex Layout */
.inserate-grid {
    display: flex;
    flex-direction: column; /* This stacks the items vertically */
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px; /* A max-width is good for readability in a single column */
}

/* Base styling for all items */
.inserat-item, .auto-content-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow: hidden; /* Important for border-radius on children */
    transition: box-shadow 0.3s ease;
    position: relative; /* Make it a positioning context for the button */
}

.inserat-item:hover, .auto-content-item:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Wrapper link to make the whole card clickable */
.card-link-wrapper {
    display: flex;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    gap: 15px;
    padding: 15px;
}

/* Thumbnail container and image styling */
.post-thumbnail {
    flex-shrink: 0;
    width: 180px;
    height: 150px;
    border-radius: 5px;
    overflow: hidden; /* This is crucial for the zoom effect */
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth animation */
}

/* The Zoom + Animation on Hover */
.inserat-item:hover .post-thumbnail img,
.auto-content-item:hover .post-thumbnail img {
    transform: scale(1.1);
}

/* Content wrapper for text */
.entry-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this element to grow and push the price to the right */
    align-self: stretch; /* Ensures it stretches to the full card height */
}

.entry-meta {
    margin-top: auto; /* Pushes the meta to the bottom */
    color: #464646;
    font-size: 0.9rem;
	width: 85%;
}

/* **NEW**: Style for the price on the right */
.inserat-item .inserat-price {
    font-size: 1.45rem;
    font-weight: bold;
    color: #1c1e12;
    margin: 18px 0 0 20px; /* Spacing from the main content */
    white-space: nowrap;
}
.inserat-item  .inserat-price-anfrage {
	font-size: 1.3rem;
}


/* Styling for the auto-content post */
.auto-content-item {
    padding: 0;
    background-color: #f0f8ff;
    border: unset;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    height: 420px; /* Set a fixed height for the container */
    display: flex; /* Use flexbox to help center content */
}
.auto-content-item-wrapper {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    width: 100%;
    height: 100%; /* Make wrapper fill the parent article's height */
    box-sizing: border-box;
	background-color: #f5f0e6
}

/* Target wrappers WordPress might add, and the iframe itself */
.auto-content-item-wrapper > *,
.auto-content-item-wrapper .wp-block-embed__wrapper,
.auto-content-item-wrapper iframe {
    max-width: 100%;
    width: 100%;
    height: 100%; /* Make the embed fill the height of the wrapper */
    object-fit: cover; /* This can help for images */
}


/* Merkliste (Save for Later) Button */
.merkliste-toggle {
    position: absolute;
	padding:20px;
	top: -10px;
	right:-5px;
    z-index: 5;
    cursor: pointer;
    font-size: 24px;
    color: #5e5d5d;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.merkliste-toggle:hover {
    color: #f0c300; /* A gold-ish hover color */
    transform: scale(1.2);
}

.merkliste-toggle .dashicons-star-filled {
    display: none;
}

.merkliste-toggle.is-saved {
    color: #f5b700; /* A solid gold color for saved items */
}

.merkliste-toggle.is-saved .dashicons-star-empty {
    display: none;
}

.merkliste-toggle.is-saved .dashicons-star-filled {
    display: inline-block;
}

/* Filter Bar Styles */
.inserat-filter-select { 
    width: 100%; 
    padding: 8px; 
    height: 37px; 
}

/* --- FIX: ADDED for Alignment and Layout --- */
.container {
    max-width: 1200px; /* Defines the max width for main content areas */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.post-type-archive-inserat * > .container {
	max-width: unset;
}
]

/* This aligns the items in the filter bar (category list and form) to the bottom edge */
.inserat-filter-container {
    align-items: flex-end;
}


/* --- Desktop Navigation --- */

#site-navigation > ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

#site-navigation > ul a {
  text-decoration: none;
  font-size: 1.3rem;
  padding: 10px 0;
  display: block;
}

#site-navigation > ul > li:not(:last-child) > a {
  margin-right: 30px;
}

.header-ads-container {
  display: flex;
  justify-content: space-evenly;
}

.header-m-container > * {
    background: #eee;
    height: 200px;
    width: 500px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Mobile Menu Styles (New) --- */

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle .dashicons {
    font-size: 36px;
    color: #333;
    line-height: 1;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.header-m-container {
    display: flex;
    justify-content: space-evenly;
}

#site-navigation {
    align-self: end;
}

.page-header {
    display: none;
}

 .logo-nav {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
 }

/* --- STICKY NAVIGATION WRAPPER --- */
.logo-nav-sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.oxy-container-54628-108,
.oxy-container-54575-108,
.oxy-container-54689-108,
.oxy-container-54927-108,
.oxy-container-53415-108,
.oxy-container-54405-108{
	position:sticky;
	top:var(--header-height-offset);
	z-index:999;
	background: var(--bde-background-color) /* Prevent content from showing through */

}

/* --- Inserat Archive Layout --- */
.inserat-archive-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.inserat-archive-sidebar {
    position: sticky;
	top:var(--search-offset);
    /* Adjusted for sticky header. You may need to tweak 
    this value based on the final height of your sticky nav. */
}
.inserat-archive-main {
    flex: 3 1 0; /* Let it grow and shrink */
    min-width: 0; /* Prevent overflow issues with flex items */
	width:100%;
}
.filter-categories ul {
    list-style: none;
    padding-left: 0;
}

.search-form-sticky-wrapper {
    position: sticky;
    z-index: 90; /* Below header, above content */
	top: var(--search-offset);
    background: var(--bde-background-color); /* Prevent content from showing through */
    padding-top:6px;
	padding-bottom: 10px; 
	
}

.reserved span:first-child {
    text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.reserved-text {
    color: var(--primary-color);
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}


@media (max-width: 768px) {
    .inserat-archive-container {
        flex-direction: column;
    }
    .inserat-archive-sidebar,
    .search-form-sticky-wrapper {
        position: static;
        width: 100%;
    }
    .search-form-sticky-wrapper {
        padding-top: 0;
    }
}


@media (max-width: 600px) {
    .logo-nav {
        justify-content: space-between;
        align-items: center;
        width: 100%; 
        padding: 10px; /* Add some padding */
        position: relative; /* FIX: Anchors the absolute positioned menu */
    }

    .menu-toggle {
        display: block; /* Show on mobile */
    }

    #site-navigation {
        display: none; /* Hide nav by default on mobile */
        width: 100%;
        position: absolute;
        top: 100%; 
        left: 0;
        background: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
        margin: 0; /* Override desktop margin */
    }

    #site-navigation.toggled {
        display: block; /* Show when toggled */
    }

    #site-navigation ul {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    #site-navigation ul li {
        width: 100%;
        text-align: center;
    }

    #site-navigation ul li a {
        padding: 15px;
        display: block;
        border-bottom: 1px solid #eee;
        margin-right: 0 !important; /* Override desktop margin */
    }

    #site-navigation ul li:last-child a {
        border-bottom: none;
    }

    .header-m-container {
        display: none; /* Hide header ads on mobile */
    }
}

.werbebanner-container {
	max-width:400px;
	background: red;
}


#inserate-grid-container {
	min-height: 1000px;
}

.inserat-item {
    position: relative; /* Ensure parent is positioned for absolute children */
}

.inserat-top-label {
    position: absolute;
	z-index:60;
    top: 0;
    width: auto;
    padding: 4px 12px;
    color: #464646;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
	left: 50%;
  	transform: translate(-50%, 0%);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.handler-nickname-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #d2ba00; /* Gold color to match handler listings */
	border-top-left-radius: 4px;
    color: #464646;
    padding: 5px 12px;
    font-size: 1em;
    font-weight: bold;
    z-index: 5;
}

/* By default (large screens), hide the ellipsis and show the rest of the title */
.truncated-title .truncation-indicator {
    display: none;
}
.truncated-title .title-remainder {
    display: inline;
}

/* On smaller screens, show the ellipsis and hide the rest of the title */
@media (max-width: 1200px) {
    .truncated-title .truncation-indicator {
        display: inline;
    }
    .truncated-title .title-remainder {
        display: none;
    }
	.paeg {
		flex-direction: column;
  		align-items: center;
		margin-top:20px;
		gap: 20px;
}}

@media (max-width: 970px) {
	.paeg {
		flex-direction: column;
  		align-items: center;
		margin-top:20px;
		gap: 20px;
}}

@media (max-width: 1350px) {
	.inserat-archive-sidebar,
	.search-form-sticky-wrapper{
		top:100px;
}
}

@media (max-width: 1500px) {
	#searchform * {
		margin-bottom:4px;
	}
	.inserat-search-form-inner {
		display: unset !important;
	}
}

@media (max-width: 1119px) {
	.card-link-wrapper {
		flex-direction:column;
}
	.inserat-item .inserat-price{
		margin: unset;
		padding-bottom:20px;
	}
	.inserat-archive-sidebar,
	.search-form-sticky-wrapper{
		top:38px;
}}
#wp-block-file--media-5cb5c5fe-bc30-48de-881d-42269f428ed6 {
  display: none;
}

[type="checkbox"], [type="radio"] {
  accent-color: var(--primary-color);
}

.marktplatz-logo {
	width:350px;	
	max-width:350px;
}

.inserate-notice{
	& a {
border-radius: 4px;
padding: 12px 25px;
background: green;
text-decoration: none;
background-color: var(--primary-color);
color: white;
font-size:1.1rem;
		 &:hover {
  background-color: var(--primary-hover-color);
 color: white;
}
}	
	& p {
font-size: 1.2rem;
  font-weight: 600;
  padding: 10px;
  background: #ffdd3c;
 border-radius: 4px;
	}}
.nav {
display: block;
  position: sticky;
  top: 20px;
  text-transform: uppercase;
  border-top: 5px solid #5d6532;
  border-bottom: 5px solid #5d6532;
  border-left: 5px solid #5d6532;
  border-right: 5px solid #5d6532;
	}


.inserat-item.premium-biete {
    border: 3px solid var(--border-color-premium);
}
.inserat-item.premium-suche {
    border: 3px dashed var(--border-color-premium-suche);
}

.inserat-item.gratis {
    border: 1px solid var(--border-color-main);
}
.inserat-item.role-handler.premium-suche{
	border: 3px dashed var(--border-color-handler);
}
.inserat-item.role-handler.premium-biete{
	border: 3px solid var(--border-color-handler);
}

.wc_payment_method.payment_method_stripe_klarna {
  display: flex !important;
}
.wc_payment_methods.payment_methods.methods li:last-child {
  margin-bottom:20px;
}
.form-row.woocommerce-SavedPaymentMethods-saveNew {
	visibility:hidden;
}

form.woocommerce-form.woocommerce-form-login.login p.lost_password{
    display:none;
}

form.woocommerce-form.woocommerce-form-login.login p.form-row, #mpm-password-reset-form p.form-row{
    display: flex;
    flex-direction: column;
}

form.woocommerce-form.woocommerce-form-login * input, #mpm-password-reset-form * input {
    max-width: 400px;
}

form.woocommerce-form.woocommerce-form-login * button[type=submit], #mpm-password-reset-form * button[type=submit]{
    width: max-content;
    margin-top: 16px;
    padding: 12px 20px;
    border: none;
    color: white;
    background: var(--primary-color);
    border-radius: 5px;
	&:hover{
		cursor: pointer;
		background: var(--primary-hover-color);
	}
}
#pm-unread-count{
	visibility:hidden;
}
.woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide{
  input#account_display_name,
  label[for="account_display_name"],
  #account_display_name_description{
  display: none;
  }
}

p.order-again{
	display:none;
}

mark {
	color:unset !important;
}