/*
Theme Name: iBid Child
Theme URI: https://ibid.modeltheme.com/
Template: ibid
Author: ModelTheme
Author URI: http://modeltheme.com/
Description: Multi Vendor Auctions WooCommerce Theme
Version: 1.0
Text Domain: ibid
Tags: custom-header, custom-menu, featured-images, post-formats, sticky-post
*/
/* Theme customization starts here
------------------------------------------------------- */

/* Plain text/paragraph blocks that should match the theme's .section-subtitle
   typography. Add the CSS class "subtitle-text" to the block (Advanced ->
   Additional CSS class(es)). font-family / line-height are intentionally left
   to inherit from the body, exactly like .section-subtitle does, so they stay
   in sync with the Theme Options body font. */
.subtitle-text {
    color: #666666;
    font-size: 16px;
    font-weight: 300;
}

/* Bump the theme's .section-subtitle from its default 15px to 16px. Kept in
   sync with .subtitle-text above. */
.section-subtitle {
    font-size: 16px;
}

/* Section titles are black by default. To make a single title magenta, add the
   class "title-magenta" on that heading (the magenta color comes from the theme
   primary, output in functions.php). Plain specificity so .text-white
   .section-title (titles on dark backgrounds) keep their white color. */
.section-title {
    color: #000000;
}

/* Same 25px breathing room above the subtitle that the theme uses on
   .title-subtile-holder. Applies to every heading block. */
.title-subtile-holder .section-subtitle {
    margin-top: 25px;
}

/* --- Title/subtitle alignment helpers ------------------------------------
   Default (no class) keeps the theme's centered layout. To change a single
   heading, add ONE of these as an "Additional CSS class" on the element
   (Elementor: Advanced -> CSS Classes; shortcode: Extra class name). The
   class may sit on the holder itself or on a wrapping element. */
.align-left .section-title,
.align-left .section-subtitle {
    text-align: left;
}
.align-left .section-subtitle {      /* subtitle is 70% wide + auto-centered; pin left */
    margin-left: 0;
    margin-right: auto;
}
.align-left .svg-border {            /* the little hammer divider */
    text-align: left;
}

.align-center .section-title,
.align-center .section-subtitle {
    text-align: center;
}
.align-center .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}
.align-center .svg-border {
    text-align: center;
}

/* Drop the parent theme's 70% width cap on the subtitle so it spans the full
   content width (parent: .section-subtitle { width:70%; margin:0 auto }). */
.section-subtitle {
    width: auto;
}

.align-right .section-title,
.align-right .section-subtitle {
    text-align: right;
}
.align-right .section-subtitle {
    margin-left: auto;
    margin-right: 0;
}
.align-right .svg-border {
    text-align: right;
}

/* --- Inline text color helpers -------------------------------------------
   Wrap a piece of text in a span to recolor just that part, e.g.:
   <span class="txt-magenta">COLOR THIS</span>. Default text stays as-is.
   .txt-magenta gets the theme primary color from functions.php (stays in sync
   with Theme Options); .txt-black forces black where needed. */
.txt-black {
    color: #000000 !important;
}

/* --- Sticky footer --------------------------------------------------------
   The parent theme sets html/body/#page to a fixed height:100% (style.css:350
   and css/style.css:42). That neither pushes the footer down on short pages
   nor contains chrome taller than the viewport, which is what caused the stray
   scrollbar. Replace it with a proper flex column layout: #page is at least
   one screen tall and the footer is pushed to the very bottom. */
html,
body {
    height: auto;
}
#page {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#page > footer {
    margin-top: auto;
}
/* Tudnivalók is a short page, so the sticky-footer margin-top:auto pushes the
   footer to the bottom of the viewport and leaves a big empty gap above it.
   Drop the min-height there so #page is exactly content-tall -> no free space
   -> footer sits right after the content (its own 70/60px padding remains). */
body.page-id-29595 #page {
    min-height: 0;
}
/* ...and balance the gap above the footer with the one below it (60px): drop
   the content area's 50px bottom padding and trim the footer's top padding from
   70px to 60px, on this page only. */
body.page-id-29595 .high-padding.content-area {
    padding-bottom: 0;
}
body.page-id-29595 footer .container.footer-top {
    padding-top: 40px;
}

/* Homepage CTA links ("regisztrálj" / "jelentkezz be") that open the
   login/register popup. Magenta, link-like; no href so there is no page jump. */
.auth-link {
    color: #e20074;
    cursor: pointer;
    font-weight: 600;
}
.auth-link:hover {
    color: #e83390;
    text-decoration: none;
}
/* The "A licitáláshoz regisztrálj, vagy jelentkezz be!" CTA only makes sense for
   logged-out visitors. WordPress adds the `logged-in` body class for signed-in
   users, so hide it for them. */
body.logged-in .logged-out-only {
    display: none !important;
}

/* Reserve price ("minimálár") is not used on this site. The reserve text was
   already blanked, but the styled <p class="reserve hold/free"> element stayed
   in place — and p.reserve.hold has a blue background (style.css:8638), so it
   showed up as an empty blue bar (e.g. in "Aukciós tevékenységeim" next to the
   product). Hide the reserve indicator entirely. */
.reserve.hold,
.reserve.free,
p.reserve,
.ibid-auction-no-reserve {
    display: none !important;
}

/* --- Auction product listing ----------------------------------------------
   In the shop loop the auction product has no vc_col-md-* class, so it falls
   back to WooCommerce's small ~30% floated column: the 300px thumbnail (and
   the countdown overlaid on it) gets squeezed and looks shifted. Center the
   card and let it grow so the image shows at full size. VC grid products
   (vc_col-md-*) are excluded so multi-column layouts elsewhere stay intact. */
.woocommerce ul.products li.product:not([class*="vc_col-md"]) {
    display: block;
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: 500px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.woocommerce ul.products li.product:not([class*="vc_col-md"]) a img {
    width: 100%;
    height: auto;
}

/* --- Mobile responsive fixes --------------------------------------------- */
@media (max-width: 767px) {
    /* Tudnivalók page: the WPBakery [vc_empty_space height="50px"] spacers are
       too tall on phones — halve them. (!important is required to beat the
       inline height:50px WPBakery prints on .vc_empty_space.) */
    body.page-id-29595 .vc_empty_space {
        /* height: 25px !important; */
    }

    /* Section divider (the little hammer .svg-border): the theme forces the SVG
       to a fixed 400px width on mobile, which overflows narrow phones and so it
       can't centre. Let it shrink to fit its container, keeping the ratio. */
    .title-subtile-holder .svg-border svg {
        max-width: 100%;
        height: auto;
    }

    /* Homepage product grid (Licitálj section): on phones ul.products has
       -15px side margins that cancel the container's 15px gutter, so the
       product cards bleed to the very screen edge. Drop those margins so the
       grid keeps a comfortable inset from the edges. */
    .home .woocommerce ul.products {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}