/*
Theme Name: ListingHive Child
Template: listinghive
Version: 1.4.33
*/


/* Hide the "Added on" line from the container box */
body .hp-listing--view-block .hp-listing__created-date {
  display: none !important;
}

/* Hide the category label from the container box and individual listing page */
body .hp-listing--view-block .hp-listing__categories,
body .hp-listing--view-page .hp-listing__categories {
  display: none !important;
}

/* Hide the “Sort by” dropdown on Listings page */
body .hp-form--pivot {
  display: none !important;
}




/* Hide the "All Categories" radio button in the filter pane */
.hp-field--radio>ul>li>label {
    display: none;
}



/* Hide listing category count on homepage */
body .hp-listing-category__item-count {
    display: none;
}


/* Change the text color for listings on the homepage -> Useless for this environment but was needed on Local*/
.hp-listing__title,
.hp-listing__attribute,
.hp-listing__price {
    color: #000 !important; /* Change the color to black (or any other color) */
} 




/* Make form field labels slightly larger on mobile */
@media (max-width: 768px) {
  .hp-field__label span,
  .hp-form__label span {
    font-size: 14px !important; /* adjust: try 15–16px */
  }
}

/* Make form field labels slightly larger on desktop */
@media (min-width: 769px) {
  .hp-field__label span,
  .hp-form__label span {
    font-size: 13px !important; /* adjust: try 16–18px */
  }
}



/* Hide the message button */
.hp-listing--view-block .hp-listing__action--message {
    display: none;
}










/*
=============================================
Hide Attribute Labels on Listing Cards
=============================================
*/

/* This targets the <strong> tag to hide the label on cards */
.hp-listing--view-block .hp-listing__attribute strong {
    display: none;
}



/*
=======================================================
Un-bold and Re-color Attribute Labels on Single Page
=======================================================
*/
.hp-listing__attributes--secondary .hp-listing__attribute strong {
    font-weight: normal !important;
    color: #000 !important; 
}









/* --- FORCE ATTRIBUTES TO ONE COLUMN ON DESKTOP --- */

/* Target the specific grid items inside the secondary attributes block */
.hp-listing__attributes--secondary .hp-col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Add a bit of breathing room between the newly stacked attributes */
.hp-listing__attributes--secondary .hp-col-lg-6 {
    margin-bottom: 4px !important;
}






/* --- Improve UI for single listing page attributes--- */

/* 1. Soften the label (e.g., 'Brand:') to move it to the background */
.hp-listing__attribute strong {
    font-weight: 500; /* Regular to Medium weight, never bold */
    color: #777; /* Discrete dark grey */
    margin-right: 5px; /* Adds a bit of space before the value */
}

/* 2. Soften the icons */
.hp-listing__attributes .hp-icon {
    margin-right: 8px; /* Elegant spacing */
    font-size: 14px; /* Matches normal text size */
}









/*
=============================================
Change Attribute Value Color on Single Listing Page
=============================================
*/

/* This targets the attribute text itself on single listing pages */
.hp-listing--view-page .hp-listing__attributes--ternary .hp-listing__attributes--secondary .hp-listing__attribute {
    color: #000 !important; /* Set color to pure black */
}



/* --- DESCRIPTION FONT SIZE (Desktop vs Mobile) --- */

/* 1. Desktop Default */
.hp-listing--view-page .hp-listing__description {
    color: #000 !important;
    font-size: 16px !important; /* Target size for Desktop */
    line-height: 1.6 !important; /* Readable spacing */
}

/* 2. Mobile Specific Adjustment (Screens narrower than 768px) */
@media only screen and (max-width: 768px) {
    .hp-listing--view-page .hp-listing__description {
        font-size: 14px !important; /* Smaller size for Mobile */
        line-height: 1.5 !important;
    }
}



/*
=============================================
Change Attribute Icon Color on Single Listing Page
=============================================
*/
/* This targets the <i> tag (the icon) inside the attribute */
.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__attribute i {
    color: #000 !important; /* Set icon color to pure black */
}



/*
=============================================
Remove Space Below Description Title and change Title color
=============================================
*/

/* This targets the "Descriere" title and removes its bottom margin */
.hp-listing--view-page h5.hp-section__title {
    margin-bottom: 0 !important;
    color: #000 !important;
}





/* Target the logo element and set the height */
	@media (min-width: 768px){
.header-logo {
    max-height: 60px; /* Display the image to be 40 pixels tall */
    max-width: 60px;  /* IMPORTANT: Keep the image's proportions correct */
		}
	}
	
/* --- Mobile Logo Size Fix --- */
@media (max-width: 767px) {
    /* Target the custom logo image specifically */
    img.custom-logo {
        width: 50px !important;  /* Force the width directly */
        height: 50px !important; /* Let height adjust proportionally */
    }
}



/* Remove borders/shadows from listing cards on MOBILE */
@media (max-width: 767px) {
    .hp-listing--view-block {
        border: none !important;
        box-shadow: none !important;
    }
    
}



/* =============================================
Fix Select2 Dropdown Colors (Universal)
=============================================
*/

/* 1. Target the "Highlighted" state (Hover on desktop) */
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ffbf00 !important;
    color: #fff !important;
}

/* 2. Target the "Selected" state (Active item on mobile/desktop) */
/* This is the missing piece for mobile! */
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #ffbf00 !important;
    color: #fff !important;
}

/* 3. Remove native blue tap highlight on mobile */
.select2-results__option {
    -webkit-tap-highlight-color: transparent !important;
}




/*Changing the background color for chat bubbles to align with theme: */
/* 1. Sent Messages (Your Brand Gold) */
.hp-message--view-block.hp-message--sent {
    background-color: #fff3b4 !important; /* A very pale, soft gold */
    color: #333333 !important;            /* Dark grey text for readability */
}

/* 2. Received Messages (Clean Neutral Grey) */
.hp-message--view-block.hp-message--received {
    background-color: #f5f5f5 !important; /* Light grey */
    color: #333333 !important;            /* Dark grey text */
    border: 1px solid #e0e0e0 !important; /* Subtle border for definition */
}








/*Make the footer menus smaller and force them on 2 columns */
@media (max-width: 767px) {
.site-footer .footer-widgets .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Create two equal columns */
        gap: 15px; /* Space between widgets */
    }

    /* 2. Force the widgets to fit into those grid cells */
    .site-footer .footer-widgets .col-xs-12 {
        width: 100% !important;     /* Reset theme's 100% width force */
        max-width: 100% !important;
        padding: 0 !important;      /* Remove extra padding to save space */
    }

    /* 3. Make Titles Smaller */
    .site-footer .widget__title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
    }

    /* 4. Make Content (Links & Text) Smaller */
    .site-footer .widget_nav_menu ul li a,
    .site-footer .widget_text,
    .site-footer .textwidget p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .site-footer {
        margin-top: 10px !important; /* Slightly less whitespace on mobile */
        padding-top: 10px !important;
    }
    
    /* Ensure widgets don't push the bottom bar too far down on mobile */
    .site-footer .footer-widgets {
        padding-bottom: 1px !important;
    }
}

/* Add breathing room between the useful links and the Terms & Conditions bar */
.site-footer .footer-widgets {
    margin-bottom: 5px !important; /*This is the space between the "Terms&Conditions"section and the line above it */
}

@media (max-width: 767px) {
    /* Ensure the gap is proportional on smaller screens */
    .site-footer .footer-widgets {
        padding-bottom: 5px !important; /* This is the white space below the Useful Links / footer */
    }
}


/* Remove the padding below the copyright section */
body .site-footer {
    padding-top: 10px !important;    /* Space above*/
    padding-bottom: 0px !important;  /* Zero space below */
    margin-bottom: 0px !important;
}

/* Desktop Footer Useful Links Smaller Size */
@media (min-width: 767px){
.site-footer .widget_nav_menu ul li a {
    font-size: 13px !important; /* Adjust as needed */
}
}






/*Add padding for the user listings table on the edges */
@media (max-width: 767px){
/* Force the table to have breathing room on the sides */
    .hp-listings.hp-table {
        width: calc(100% - 5px) !important; /* Full width minus 5px on each side */
        margin-left: 5px !important;         /* Push 5px from the left edge */
        margin-right: 5px !important;        /* Push 5px from the right edge */
        overflow: hidden !important;          /* Keeps the corners rounded */
    }
}






/* Change the hamburger menu options (make all text black, display sub-menus by default, remove arrow icon and hide the home page)*/
@media (max-width: 767px){
/* 1. Hide the "Home" page from the hamburger menu */
    /* Targeting the specific ID you found */
    #menu-item-285 {
        display: none !important;
    }

    /* 2. Force the sub-menu items to appear permanently */
    li.menu-item--user-account ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        padding-left: 20px !important;
        margin-top: 5px !important;
        border: none !important;
    }

    /* 3. Hide the arrow next to the email (Nuclear Option) */
    /* We target every possible place the theme might be putting that arrow */
    li.menu-item--user-account > a::after, 
    li.menu-item--user-account > a::before,
    li.menu-item--user-account::after {
        display: none !important;
        content: "" !important; /* Wipes out the arrow symbol */
        border: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 4. Fix colors for sub-menu pages (Black Text) */
    li.menu-item--user-account a,
    li.menu-item--user-account ul.sub-menu li a {
        color: #000000 !important; 
        font-weight: 500 !important; 
    }
}






/* --- Fix Bottom Copyright Bar (Final Polish) --- */

/* 1. Global Styles (Desktop defaults) */
.site-footer .footer-navbar {
    display: flex !important;           /* Use Flexbox for row layout */
    justify-content: center !important; /* Center items horizontally */
    align-items: center !important;     /* Center items vertically */
    flex-wrap: wrap !important;         /* Allow wrapping */
    padding: 5px 0;
    font-size: 12px;
    color: #666;
    text-align: center !important;      /* Ensures text inside items is centered */
}

/* 2. Style the links */
.site-footer .footer-navbar a {
    color: #666;
    text-decoration: none;
    margin: 0 5px;
    font-weight: 500;
}

.site-footer .footer-navbar a:hover {
    color: #ffbf00; /* Gold on hover */
}




/* Fix Mobile Footer: Shrink arrow and gap to fit email */
@media (max-width: 767px) {
    /* 1. Target the arrow specifically in the footer */
    .site-footer .widget_nav_menu li::before {
        font-size: 10px !important;    /* fix: makes the arrow smaller */
        margin-right: 0px !important;  /* Reduces the empty space after the arrow */
        width: auto !important;        /* Ensures the arrow doesn't take extra invisible space */
        top: 9px !important;
    }

    /* 2. Target the text item (li) to pull it closer if needed */
    .site-footer .widget_nav_menu li {
        padding-left: 8px !important;    /* Removes extra left padding if the theme adds it */
    }
}








/* Set Hero Image + Text for secondary pages*/

.header-hero {
    background-image: none !important;
    background-color: #000000 !important;

    /* control the thickness of the background band */
    padding-top: 20px !important; 
    padding-bottom: 20px !important; 
    border-bottom: 1px solid #bfa15f; /* Optional: subtle golden line on the bottom */
    
}

/* 2. Style the text */
.header-hero h1, .page-title {
    /* Eliminate the default padding which increases the height of the band */
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
    line-height: 1 !important; 
    
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    color: #ffbf00 !important;

    /* Reflex effect */
    -webkit-box-reflect: below -5px linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
}

/* Adjust sizes also on mobile */
@media only screen and (max-width: 768px) {
    .header-hero {
        padding-top: 20px !important; 
        padding-bottom: 20px !important;
    }
    .header-hero h1, .page-title {
        font-size: 18px !important;
        letter-spacing: 3px !important;
    }
}
/*Enlarge the band on Desktop view so the text is fully visible */
@media (min-width: 768px) {
    .header-hero {
        padding-bottom: 60px !important; 
    }
}
/* Target the description paragraph/text under the main title in the hero section */
.header-hero p {
    color: #ffbf00 !important; /* Apply the brand gold/orange color */
    font-weight: 400 !important; /* Keep the text clean and readable */
    margin-top: 3px !important; /* Add a tiny bit of breathing room below the main title */
}





/* Fortare centrare pe mobil (Workaround Elementor Free) */
@media only screen and (max-width: 768px) {
    .force-mobile-center {
        text-align: center !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}





/* --- FORCE TITLE ON LOGIN PAGE (Absolute Center Fix) --- */

/* 1. Target the Hero Section for Page ID 109 */
.page-id-109 .header-hero {
    position: relative !important; /* Essential for absolute positioning inside */
    min-height: 60px !important;   /* Force a minimum height so the bar isn't too thin */
    overflow: hidden !important;   /* Prevents scrollbars if text gets too wide */
}

/* 2. Create the pseudo-element with the text */
.page-id-109 .header-hero::after {
    content: "AUTENTIFICARE";      /* The text to display */
    
    /* Absolute Centering Logic (The "Nuclear" Option) */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Perfect mathematical center */
    
    /* Visual Styling (Gold & Premium) */
    display: block !important;
    width: auto !important;        /* Let it fit the text size */
    white-space: nowrap !important; /* Don't break line */
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    color: #ffbf00 !important;
    font-family: "Playfair Display", serif !important;
    
    /* Reflection Effect */
    -webkit-box-reflect: below -5px linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
    z-index: 10 !important; /* Ensure it sits on top of everything */
}

/* 3. Mobile Adjustments */
@media only screen and (max-width: 768px) {
    .page-id-109 .header-hero::after {
        font-size: 18px !important; /* Smaller text on phones */
        letter-spacing: 3px !important;
    }
    .page-id-109 .header-hero {
        min-height: 50px !important; /* Slightly thinner bar on mobile */
    }
}








/* --- PREMIUM BADGES FOR KEY ATTRIBUTES (SINGLE LISTING ONLY) --- */

/* Target the brand attribute strictly on the single listing page */
.hp-listing--view-page .hp-listing__attribute--brand {
    display: inline-block; /* Make the container wrap tightly around the text */
    background-color: #f4f4f4; /* Very subtle, ultra-light grey background */
    border: 1px solid #ececec; /* Extremely delicate, almost invisible border */
    border-radius: 4px; /* Very slight rounding for a refined, modern look */
    padding: 6px 12px !important; /* Elegant internal breathing room */
    margin-bottom: 15px !important; /* Space between this badge and the next row */
    
    /* Use uppercase and spacing instead of a new font family */
    text-transform: uppercase; /* Turns the brand letter uppercase */
    letter-spacing: 0.6px; /* Adds premium breathing room between letters */
    font-size: 0.9em; /* Slightly smaller to compensate for the uppercase weight */
}

/* Ensure the icon inside this badge aligns perfectly and pops */
.hp-listing--view-page .hp-listing__attribute--brand .hp-icon {
    color: #111111 !important; /* Deep black for premium contrast */
    margin-right: 6px !important; /* Keep the icon close to the text */
}








/* Ensure all thumbnails and single listing images have same ratio. Also fix gray box bug for carousel images*/

/* 1. Desktop Baseline: Force 4/3 ratio for ALL images globally */
.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__images img,
.hp-listing--view-page .hp-listing__image img,
.hp-listing--view-page .hp-listing__images img {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    height: auto !important; /* Allow aspect-ratio to dictate the exact height */
    object-fit: cover !important;
}

/* 2. Safety fallback for containers to prevent gray boxes or clipping */
.hp-listing__image,
.hp-listing__images {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    display: block !important;
}

/* 3. Mobile Override: Change ONLY the grid thumbnails to 3/4 (Portrait) */
@media (max-width: 767px) {
    .hp-listing--view-block .hp-listing__image img,
    .hp-listing--view-block .hp-listing__images img {
        aspect-ratio: 3 / 4 !important; /* Forces portrait mode on mobile grid */
    }
}









/* ==========================================================================
   VENDOR TIER BADGE & PROFILE CARD STYLING
   ========================================================================== */

/* 1. Format the custom vendor badge */
.dynastia-vendor-badge {
    display: inline-block !important;
    background-color: #ffbf00 !important; /* Brand gold/orange color */
    color: #262626 !important; 
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.7px !important;
}

/* 2. Add slight spacing between the icon and the text inside the badge */
.dynastia-vendor-badge i {
    margin-right: 3px !important;
}

/* 3. Clean and center the footer section of the vendor card */
.hp-vendor--view-block .hp-vendor__footer {
    display: flex !important;
    justify-content: center !important; /* Center the content horizontally */
    align-items: center !important;
    border-top: none !important; /* Removes the top dividing gray line */
}

/* 4. Hide the redundant chat icon from the vendor card */
.hp-vendor--view-block .hp-vendor__action--message {
    display: none !important;
}

/* 5. Force badge centering in the attributes container */
.hp-vendor--view-block .hp-vendor__attributes {
    border: none !important;
    text-align: center !important; /* Center text inside */
    justify-content: center !important; /* Center flex elements */
    width: 100% !important;
}

/* 6. Ensure the attribute wrapper takes full width for perfect alignment */
.hp-vendor--view-block .hp-vendor__attribute {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* 7. Neutralize the large bottom PADDING from the elements above the badge */
.hp-vendor--view-block .hp-vendor__content {
    margin-bottom: 0 !important;
    padding-bottom: 0px !important; /* This overrides the 48px green box from the inspector */
}

.hp-vendor--view-block .hp-vendor__details--primary {
    margin-bottom: 0 !important; 
}









/* ==========================================================================
   PRICE DISPLAY FIX (Hide Euro script output on Related/Grid Listings)
   ========================================================================== */

/* 1. Target the specific class generated by the JS function and hide it on grid cards */
.hp-listing--view-block .dynastia-euro {
    display: none !important;
}

/* 2. Ensure the main layout of the lei price remains completely stable */
.hp-listing--view-block .hp-listing__attribute--pret {
    display: inline-block !important;
    margin-bottom: 0 !important;
}






/* ==========================================================================
   PRICE TYPOGRAPHY & MOBILE SPACING FIX
   ========================================================================== */

/* 1. Keep the elegant Playfair font, but force numbers to align properly (lining figures) */
.hp-listing__attribute--pret {
    font-family: inherit !important; /* Reverts back to your main theme font */
    font-variant-numeric: lining-nums !important; /* Forces numbers to sit on the same line */
    font-feature-settings: "lnum" 1 !important;
    font-size: 18px !important; /* Much more elegant and refined size for Desktop */
    font-weight: 400 !important;
}

/* 2. Target mobile screens to fix the spacing and adjust text size */
@media only screen and (max-width: 768px) {
    /* Reduce price size slightly on small screens */
    .hp-listing__attribute--pret {
        font-size: 16px !important; 
    }

    /* Kill the massive native padding inside the footer to pull the price up towards the dividing line */
    .hp-listing--view-block .hp-listing__footer {
        padding-top: 8px !important; /* Overrides the default 16px padding from your screenshot */
        padding-bottom: 8px !important; /* Optional: also reduces bottom space for a tighter card */
    }
}


/* Force numbers to align properly (lining figures) for shoe size and equivalent size attributes */
.hp-listing__attribute--marime-incaltaminte,
.hp-listing__attribute--marime-echivalenta {
    font-variant-numeric: lining-nums !important;
    font-feature-settings: "lnum" 1 !important;
}





/* ==========================================================================
   ULTRA-NARROW MOBILE FIXES (GALAXY FLIP / SMALL SCREENS)
   ========================================================================== */

/* Target screens smaller than 400px (Galaxy Flip, iPhone SE, etc.) */
@media only screen and (max-width: 375px) {
    
    /* 1. Prevent attributes from wrapping to two lines */
    .hp-listing__attribute {
        font-size: 12px !important; /* Slightly scale down text to fit on one line */
        word-break: break-word; /* Ensure it wraps nicely only if absolutely necessary */
    }
    
    .hp-listing__title {
        font-size: 10px !important; 
        word-break: break-word; 
    }

    /* Scale down the attribute icons slightly to match the new text size */
    .hp-listing__attribute i {
        font-size: 12px !important; 
    }
}   








/* ==========================================================================
   EQUAL HEIGHT LISTING CARDS & ALIGNED FOOTERS
   ========================================================================== */

/* 1. Make the listing card a flex container that stretches to full height of the grid row */
.hp-grid__item .hp-listing--view-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
}

/* 2. Allow the main content area (title + attributes) to grow and fill empty space */
.hp-listing--view-block .hp-listing__content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top:5px !important;
}


/* 3. Push the footer (price and heart icon) to the absolute bottom */
.hp-listing--view-block .hp-listing__footer {
    margin-top: auto !important;
}

/* Hide the primary details container (which holds the date) on grid cards to remove the gap */
.hp-grid__item .hp-listing--view-block .hp-listing__details--primary {
    display: none !important;
}






/* ==========================================================================
   MOBILE SPACING ADJUSTMENTS - HIGH SPECIFICITY
   ========================================================================== */

@media (max-width: 767px) {
    /* Use a longer selector chain to force the override against theme defaults */
    html body .hp-grid__item .hp-listing--view-block .hp-listing__content {
        padding-top: 0px !important; 
    }
    
    /* Ensure the image container isn't adding hidden space below it */
    html body .hp-grid__item .hp-listing--view-block .hp-listing__header {
        margin-bottom: 0px !important;
    }
}