/*
Theme Name: Plitka
Theme URI:
Description: Custom child theme for Plitka Company, based on Entr by EnvoThemes.
Author: Plitka Company
Author URI:
Version: 1.0.1
Template: entr
License: GNU General Public License v3.0 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: plitka
Tags: e-commerce, woocommerce
*/

.page-wrap #content-footer-section {
    background-color: #000000;
}

/* -----------------------------------------------
   plitka_footer_menu shortcode
   Each top-level item = one column.
   Usage: [plitka_footer_menu menu="main-menu"]
----------------------------------------------- */
.plitka-footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.plitka-footer-menu__col {
    flex: 1 1 0;
    min-width: 120px;
}

.plitka-footer-menu__heading {
    display: block;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 0.75rem;
    text-decoration: none;
}

.plitka-footer-menu__heading:hover {
    color: #cccccc;
}

.plitka-footer-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plitka-footer-menu__list li {
    margin-bottom: 0.4rem;
}

.plitka-footer-menu__list a {
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.plitka-footer-menu__list a:hover {
    color: #ffffff;
}

/* -----------------------------------------------
   Responsive hero heading — element 713f818
   Fluid font sizes so text never overflows on
   small phones. !important needed to beat
   Elementor's post-628.css specificity.
----------------------------------------------- */
.elementor-628 .elementor-element.elementor-element-713f818 .envo-extra-heading-title {
    font-size: clamp(22px, 7vw, 70px) !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-628 .elementor-element.elementor-element-713f818 .envo-extra-title-focus {
    font-size: clamp(28px, 9vw, 85px) !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* element 8bdac57 — "Примеры выполненных работ..." heading */
.elementor-628 .elementor-element.elementor-element-8bdac57 .elementor-heading-title {
    font-size: clamp(18px, 5.5vw, 40px) !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Solo items (no children) — keep heading size */
.plitka-footer-menu__list--solo a {
    font-size: 13px;
}

/* -----------------------------------------------
   Header layout overrides
   Logo 20% | Menu 65% | Header-right 15%
----------------------------------------------- */

/* Logo column */
.site-heading {
    width: 20%;
    flex-shrink: 0;
    flex-grow: 0;
}

.site-branding-logo img {
    max-height: 48px;
    width: auto;
}

.site-title,
h1.site-title {
    font-size: 14px;
    line-height: 1.3;
}

/* Menu column */
.menu-heading {
    width: 65%;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Nav link font size */
.menu-heading .nav > li > a {
    font-size: 13px;
}

/* Header-right (cart, account, etc.) */
.header-right {
    width: 15%;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: unset;
}

/* Mobile */
@media (max-width: 767px) {

    /* --- Site heading: flex so logo takes 40% --- */
    .site-heading {
        width: 90%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .site-heading .site-branding-logo {
        width: 40%;
        float: none;
        flex-shrink: 0;
        margin-right: 12px;
    }

    .site-heading .site-branding-text {
        float: none;
    }

    .site-branding-logo img {
        max-height: 36px;
    }

    .menu-heading {
        width: 100%;
    }

    /* --- Header-right: burger LEFT, icons RIGHT --- */
    .header-right {
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header-right .menu-button.visible-xs {
        float: none;
        margin-left: 0;
        margin-right: auto; /* pushes all icons to the right */
        order: -1;
    }
}

/* -----------------------------------------------
   Mobile nav panel (hc-offcanvas-nav) restyling
----------------------------------------------- */

/* White background for the whole panel */
.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: #ffffff !important;
}

/* Dark text for all nav links */
.hc-offcanvas-nav li:not(.custom-content) a {
    color: #333333;
}

.hc-offcanvas-nav li:not(.custom-content) a:hover {
    color: #000000;
}

/* Close row + Back row — white background, no dark separator */
.hc-offcanvas-nav .nav-content > .nav-close:first-child a,
.hc-offcanvas-nav .nav-title + .nav-close a.has-label,
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav .nav-back a {
    background: #ffffff !important;
    color: #333333 !important;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.hc-offcanvas-nav li.nav-close a:hover,
.hc-offcanvas-nav .nav-back a:hover {
    background: #f5f5f5 !important;
}

/* Close button X — made with borders, not background.
   Override border-color to black and make icon bigger. */
.hc-offcanvas-nav .nav-close-button span::before,
.hc-offcanvas-nav .nav-close-button span::after {
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
}

/* Taller close-button row */
.hc-offcanvas-nav .nav-content > .nav-close a:not(.has-label) {
    height: 56px;
}

/* Remove separator line above first menu item */
.hc-offcanvas-nav .nav-wrapper > .nav-content > ul:first-of-type
    > li:first-child:not(.nav-back):not(.nav-close)
    > .nav-item-wrapper > .nav-item-link {
    border-top: none;
}

/* Open/active parent item — replace blue highlight with #d4ccc3 */
.hc-offcanvas-nav.nav-levels-expand li.level-open,
.hc-offcanvas-nav.nav-levels-none li.level-open {
    background: #d4ccc3;
}

.hc-offcanvas-nav.nav-levels-expand li.level-open > .nav-item-wrapper > a,
.hc-offcanvas-nav.nav-levels-none li.level-open > .nav-item-wrapper > a {
    background: #d4ccc3;
    border-color: #bfb8b0;
}

.hc-offcanvas-nav.nav-levels-expand li.level-open > .nav-item-wrapper > a:hover,
.hc-offcanvas-nav.nav-levels-none li.level-open > .nav-item-wrapper > a:hover {
    background: #c8c0b7;
}

/* -----------------------------------------------
   CF7 Contact Form — Elementor popup
----------------------------------------------- */

.contact-form-wrap {
    padding: 8px 0 0;
}

.contact-form-wrap .form-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a1a;
}

.contact-form-wrap .form-description {
    font-size: 14px;
    color: #666666;
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Grid rows inside the form */
.contact-form-wrap .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 16px;
}

.contact-form-wrap .row:last-child {
    margin-bottom: 0;
}

.contact-form-wrap [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

.contact-form-wrap .col-sm-6  { width: 50%; }
.contact-form-wrap .col-sm-10 { width: 83.333%; }
.contact-form-wrap .col-sm-2  { width: 16.667%; }
.contact-form-wrap .col-sm-12 { width: 100%; }

/* Inputs & textarea */
.contact-form-wrap .wpcf7-form-control.wpcf7-text,
.contact-form-wrap .wpcf7-form-control.wpcf7-tel,
.contact-form-wrap .wpcf7-form-control.wpcf7-email,
.contact-form-wrap .wpcf7-form-control.wpcf7-textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #d4ccc3;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.contact-form-wrap .wpcf7-form-control.wpcf7-text:focus,
.contact-form-wrap .wpcf7-form-control.wpcf7-tel:focus,
.contact-form-wrap .wpcf7-form-control.wpcf7-email:focus,
.contact-form-wrap .wpcf7-form-control.wpcf7-textarea:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.contact-form-wrap .wpcf7-form-control::placeholder {
    color: #aaaaaa;
}

.contact-form-wrap .wpcf7-form-control.wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Validation error state */
.contact-form-wrap .wpcf7-not-valid {
    border-color: #d0021b !important;
}

.contact-form-wrap .wpcf7-not-valid-tip {
    display: block;
    font-size: 12px;
    color: #d0021b;
    margin-top: 4px;
}

/* Submit button */
.contact-form-wrap .wpcf7-form-control.wpcf7-submit {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    background: #1a1a1a;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.contact-form-wrap .wpcf7-form-control.wpcf7-submit:hover {
    background: #333333;
}

.contact-form-wrap .wpcf7-form-control.wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Footer row alignment */
.contact-form-wrap .form-footer {
    align-items: center;
    margin-bottom: 0;
}

.contact-form-wrap .form-note {
    font-size: 12px;
    color: #999999;
    margin: 0;
    line-height: 1.4;
}

.contact-form-wrap .required-mark {
    color: #d0021b;
    font-weight: 700;
}

/* CF7 response messages */
.contact-form-wrap .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 4px;
    border: none;
}

.contact-form-wrap .wpcf7-mail-sent-ok {
    background: #eaf6ec;
    color: #2e7d32;
}

.contact-form-wrap .wpcf7-mail-sent-ng,
.contact-form-wrap .wpcf7-aborted,
.contact-form-wrap .wpcf7-spam-blocked,
.contact-form-wrap .wpcf7-validation-errors,
.contact-form-wrap .wpcf7-acceptance-missing {
    background: #fdecea;
    color: #c62828;
}

/* Spinner */
.contact-form-wrap .wpcf7-spinner {
    display: none;
}

/* -----------------------------------------------
   plitka_sale_banner shortcode — 5 style variants
   Usage: [plitka_sale_banner text="..." discount="10%" style="row"]
   Styles: row | banner | card | ribbon | pulse
----------------------------------------------- */

/* -- Shared base -------------------------------- */
.psb {
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.4;
}

/* ================================================
   1. ROW — thin full-width info bar
   ================================================ */
.psb--row {
    width: 100%;
    padding: 10px 20px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 14px;
}

.psb--row__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1170px;
    margin: 0 auto;
}

.psb--row .psb__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #FF9900;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap;
}

.psb--row .psb__text {
    flex: 1;
}

/* ================================================
   2. BANNER — large bold full-width block
   ================================================ */
.psb--banner {
    width: 100%;
    background: linear-gradient(135deg, #FF9900 0%, #e68200 100%);
    color: #ffffff;
    padding: 36px 24px;
    text-align: center;
}

.psb--banner__inner {
    max-width: 800px;
    margin: 0 auto;
}

.psb--banner__discount {
    font-size: clamp(48px, 10vw, 96px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.psb--banner__text {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================
   3. CARD — compact card with icon
   ================================================ */
.psb--card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff;
    border: 2px solid #FF9900;
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 480px;
    box-shadow: 0 2px 12px rgba(255, 153, 0, 0.15);
}

.psb--card__icon {
    flex-shrink: 0;
    color: #FF9900;
    margin-top: 2px;
}

.psb--card__body {
    flex: 1;
}

.psb--card__text {
    margin: 0 0 6px;
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.5;
}

.psb--card__discount {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

/* ================================================
   4. RIBBON — corner ribbon + text block
   ================================================ */
.psb--ribbon {
    position: relative;
    overflow: hidden;
    background: #fff5e6;
    border-left: 4px solid #FF9900;
    border-radius: 4px;
    padding: 20px 24px 20px 24px;
    max-width: 560px;
}

.psb--ribbon__corner {
    position: absolute;
    top: 0;
    right: 0;
    background: #FF9900;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-bottom-left-radius: 4px;
    white-space: nowrap;
}

.psb--ribbon__text {
    margin: 0;
    font-size: 15px;
    color: #1a1a1a;
    padding-right: 70px;
    line-height: 1.6;
}

/* ================================================
   5. PULSE — animated glowing strip
   ================================================ */
@keyframes psb-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.6); }
    50%       { box-shadow: 0 0 0 10px rgba(255, 153, 0, 0); }
}

.psb--pulse {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 22px;
    background: #FF9900;
    color: #ffffff;
    border-radius: 4px;
    animation: psb-pulse-glow 2s ease-in-out infinite;
}

.psb--pulse__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    color: #FF9900;
    font-weight: 800;
    font-size: 18px;
    padding: 4px 14px;
    border-radius: 3px;
    white-space: nowrap;
}

.psb--pulse__text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
}

/* ================================================
   6. SHIMMER — full-width row, sweeping gradient
   ================================================ */
@keyframes psb-shimmer-sweep {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.psb--shimmer {
    width: 100%;
    background: #FF9900;
    padding: 11px 20px;
    overflow: hidden;
    position: relative;
}

/* The sweeping shimmer layer */
.psb--shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.15) 52%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: psb-shimmer-sweep 2.4s linear infinite;
    pointer-events: none;
}

.psb--shimmer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1170px;
    margin: 0 auto;
}

.psb--shimmer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    color: #FF9900;
    font-weight: 800;
    font-size: 15px;
    padding: 3px 12px;
    border-radius: 3px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.psb--shimmer__text {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

/* ================================================
   Button — shared base + per-style variants
   ================================================ */
.psb__btn {
    display: inline-block;
    flex-shrink: 0;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    white-space: nowrap;
    line-height: 1;
}

.psb__btn:hover {
    text-decoration: none;
}

/* row — small pill, outlined white */
.psb__btn--row {
    margin-left: auto;
    padding: 5px 14px;
    font-size: 12px;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 3px;
}

.psb__btn--row:hover {
    background: transparent;
    color: #ffffff;
}

/* banner — large solid dark button */
.psb__btn--banner {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    font-size: 15px;
    color: #FF9900;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 4px;
}

.psb__btn--banner:hover {
    background: transparent;
    color: #ffffff;
}

/* card — full-width orange button */
.psb__btn--card {
    display: block;
    margin-top: 12px;
    padding: 9px 16px;
    font-size: 13px;
    text-align: center;
    color: #ffffff;
    background: #FF9900;
    border: none;
    border-radius: 4px;
}

.psb__btn--card:hover {
    background: #e68200;
    color: #ffffff;
}

/* ribbon — inline text-style link */
.psb__btn--ribbon {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 16px;
    font-size: 13px;
    color: #ffffff;
    background: #FF9900;
    border-radius: 3px;
}

.psb__btn--ribbon:hover {
    background: #e68200;
    color: #ffffff;
}

/* pulse — inverted: dark bg, orange text */
.psb__btn--pulse {
    margin-left: auto;
    padding: 6px 16px;
    font-size: 13px;
    color: #FF9900;
    background: #1a1a1a;
    border-radius: 3px;
}

.psb__btn--pulse:hover {
    background: #000000;
    color: #FF9900;
}

/* shimmer — white button, orange text */
.psb__btn--shimmer {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 13px;
    color: #FF9900;
    background: #ffffff;
    border-radius: 3px;
}

.psb__btn--shimmer:hover {
    opacity: 0.88;
    color: #FF9900;
}

/* -- Responsive fixes for sale banners ----------- */
@media (max-width: 600px) {
    .psb--card {
        flex-direction: column;
    }

    .psb--ribbon__text {
        padding-right: 60px;
    }

    .psb--pulse {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Mobile — stack columns */
@media (max-width: 600px) {
    .contact-form-wrap .col-sm-6,
    .contact-form-wrap .col-sm-10,
    .contact-form-wrap .col-sm-2,
    .contact-form-wrap .col-sm-12 {
        width: 100%;
    }

    .contact-form-wrap .form-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .contact-form-wrap .form-footer .col-sm-2 {
        width: 100%;
    }
}