/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ── Product Category Filter + Images widget ───────────────────────────────── */
.product-categories .wd-cat-has-img .wd-cat-img-lable {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-categories .wd-cat-img-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}

.product-categories .wd-cat-img-thumb--placeholder {
    opacity: 0.35;
}

.product-categories .wd-cat-has-img .wd-cat-img-name {
    flex: 1;
    min-width: 0;
}

/* ── Suppress Woodmart hover cart-icon & spinner on the loop "Request a Quote" button ── */
.wd-add-btn > a.ped-loop-quote-btn::before,
.wd-add-btn > a.ped-loop-quote-btn:hover::before,
.wd-add-btn-replace > a.ped-loop-quote-btn::before,
.wd-add-btn-replace > a.ped-loop-quote-btn:hover::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}
.wd-add-btn > a.ped-loop-quote-btn::after,
.wd-add-btn > a.ped-loop-quote-btn:hover::after,
.wd-add-btn-replace > a.ped-loop-quote-btn::after,
.wd-add-btn-replace > a.ped-loop-quote-btn:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/*PROGRESSIVE — Contact Form 7 styles*/


/* ---- field rows / layout ---- */
.pre-cf7-form .pre-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pre-cf7-form .pre-field{display:flex;flex-direction:column;gap:7px;margin:0 0 20px}

/* ---- labels ---- */
.pre-cf7-form .pre-field label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#0D0D0D;margin:0}

/* ---- inputs, select, textarea ---- */
.pre-cf7-form input[type=text],
.pre-cf7-form input[type=tel],
.pre-cf7-form input[type=email],
.pre-cf7-form select,
.pre-cf7-form textarea{
    width:100%;
    font-family:"DM Sans",sans-serif;
    font-size:15px;
    color:#0D0D0D;
    background:#fff;
    border:1px solid #E0E0E0;
    border-radius:4px;
    padding:13px 14px;
    outline:none;
    box-sizing:border-box;
    transition:border-color .14s ease,box-shadow .14s ease;
}
.pre-cf7-form textarea{resize:vertical;min-height:130px}

/* select: WoodMart forces a fixed height that clips the option text.
   Force auto height + line-height and draw our own dropdown arrow. */
.pre-cf7-form select{
    height:auto !important;
    min-height:50px;
    line-height:1.4 !important;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
}

/* CF7 wraps each control in span.wpcf7-form-control-wrap — make it full width */
.pre-cf7-form .wpcf7-form-control-wrap{display:block;width:100%}

/* ---- focus ---- */
.pre-cf7-form input:focus,
.pre-cf7-form select:focus,
.pre-cf7-form textarea:focus{
    border-color:#C9A84C;
    box-shadow:0 0 0 3px rgba(201,168,76,.18);
}

/* ---- submit button (gold CTA) ---- */
.pre-cf7-form .pre-submit{margin:4px 0 0}
.pre-cf7-form input[type=submit],
.pre-cf7-form .wpcf7-submit{
    width:100%;
    font-family:"DM Sans",sans-serif;
    font-weight:700 !important;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#0D0D0D !important;
    background:#C9A84C !important;
    background-color:#C9A84C !important;
    background-image:none !important;
    border:2px solid #C9A84C !important;
    border-radius:4px !important;
    padding:15px 30px;
    cursor:pointer;
    box-shadow:none !important;
    text-shadow:none !important;
    transition:background .16s ease;
}
.pre-cf7-form input[type=submit]:hover,
.pre-cf7-form .wpcf7-submit:hover{
    background:#D9B95C !important;
    background-color:#D9B95C !important;
    color:#0D0D0D !important;
    border-color:#D9B95C !important;
}

/* ---- helper note under the form ---- */
.pre-cf7-form .pre-note{font-size:13px;color:#555;text-align:center;margin:14px 0 0}

/* ---- CF7 validation / response messages ---- */
.pre-cf7-form .wpcf7-not-valid-tip{color:#CC2200;font-size:12.5px;margin-top:5px}
.pre-cf7-form .wpcf7-not-valid{border-color:#CC2200 !important}
.pre-cf7-form .wpcf7-response-output{margin:16px 0 0 !important;border-radius:4px;font-size:14px}

/* ---- loader spinner alignment ---- */
.pre-cf7-form .wpcf7-spinner{margin:0 0 0 12px}

/* ---- responsive ---- */
@media (max-width:768px){
    .pre-cf7-form .pre-row{grid-template-columns:1fr}
}

/* ── JoinChat WhatsApp button — clear WoodMart's mobile/tablet sticky toolbar ──
   body.sticky-toolbar-on is a static class (on whenever the setting is enabled),
   but the toolbar itself (.wd-toolbar) and WoodMart's own padding/scroll-to-top
   shift only apply up to 1024px — above that the toolbar is hidden and buttons
   go back to their normal stacked position. Mirror that same breakpoint so on
   desktop the WhatsApp button reverts to JoinChat's default position (stacked
   above the scroll-to-top button) instead of staying lifted by 67px. */
@media (max-width:1024px){
    body.sticky-toolbar-on .joinchat {
        --bottom: 67px;
    }
}

/* ── Hide JoinChat WhatsApp button while the WooCommerce mini-cart sidebar is open ──
   WoodMart doesn't add a body-level class for this, only the sidebar itself gets
   .wd-opened, so :has() is used to detect it from the button's side. */
body:has(.cart-widget-side.wd-opened) .joinchat {
    display: none !important;
}

/* ── Hide JoinChat WhatsApp button while the mobile nav (off-canvas menu) is open ── */
body:has(.mobile-nav.wd-opened) .joinchat {
    display: none !important;
}

/* ── Header Builder: Languages Toggle element ──────────────────────────────── */
.wd-lang-toggle-list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wd-lang-toggle-item {
    margin: 0 !important;
    list-style: none;
}
.wd-lang-toggle-link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border-radius: 30px;
    background-color: rgba(120, 120, 120, .15);
    color: inherit;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    opacity: .6;
    transition: background-color .2s ease, opacity .2s ease, color .2s ease;
}
.wd-lang-toggle-item.active .wd-lang-toggle-link {
    background-color: rgba(120, 120, 120, .3);
    opacity: 1;
}
.wd-lang-toggle-link:hover {
    opacity: 1;
    color: #fff;
}
.wd-lang-toggle-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Mobile: hide the active language pill, keep only the other language(s) so
   tapping it switches — mirrors WoodMart's own mobile-header breakpoint. ── */
@media (max-width: 1024px) {
    .wd-lang-toggle-item.active {
        display: none;
    }
}