/* Runtime override to ensure portfolio blocks have 20px padding on mobile */
@media (max-width: 767px) {
    html body #portfolio .portfolio-block {
        padding: 20px !important;
    }
}

/* Remove thin seam between left and right halves of the promo modal */
.promo-modal__content { overflow: hidden; border-radius: 14px; -webkit-font-smoothing:antialiased; }
.promo-modal__body { display: flex; align-items: stretch; gap: 0; }
.promo-modal__left { flex: 1 1 auto; background-clip: padding-box; border-right: 0 !important; }
.promo-modal__right { flex: 0 0 360px; background-clip: padding-box; border-left: 0 !important; -webkit-transform: translateZ(0); transform: translateZ(0); }
/* Hide any pseudo-element artefacts that can produce a seam */
.promo-modal__right::before,
.promo-modal__right::after { display: none !important; }

/* Ensure website text is selectable by users */
html, body, * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Reduce layout thrashing for Swiper: hint that slides use transforms and enable paint containment */
.reviews-block, .portfolio-modal__thumbs {
    contain: paint;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.reviews-block .swiper-slide,
.portfolio-modal__thumbs .swiper-slide {
    will-change: transform;
}

/* Allow slide shadows to overflow the Swiper container */
.reviews-block.swiper {
    overflow: visible !important;
}

.reviews {
    overflow: visible;
    z-index: 3;
}

/* Also ensure Swiper internals don't clip shadows */
.reviews-block .swiper-wrapper,
.reviews-block .swiper-slide {
    overflow: visible !important;
}

/* Give a little extra space below the slider so shadows have room */
.reviews-block {
    padding-bottom: 1rem;
}

/* Legal notice footer (site-wide) */
.legal-note-wrapper {
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
    padding: 14px 0;
    margin-top: 40px;
}
.legal-note {
    color: #374151;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 767px) {
    .legal-note-wrapper { padding: 12px 0; }
    .legal-note { font-size: 12px; padding: 0 12px; }
}

/* Hero image: avoid right-side clipping on homepage */
.plan-block.hero-plan > .d-flex {
    gap: 24px;
}

.plan-block.hero-plan > .d-flex > .col-8,
.plan-block.hero-plan > .d-flex > .col-4 {
    padding-left: 0;
    padding-right: 0;
}

/* Make promo/contact modal smaller and tighter for Design page */
.promo-modal__dialog{
    max-width: 560px !important;
}
.promo-modal__content{
    border-radius: 14px !important;
}
.promo-modal__body{
    display: block !important; /* single-column layout for compact modal */
}
.promo-modal__left{
    padding: 22px !important;
}
.promo-modal__right{ display: none !important; }

@media (max-width: 420px){
    .promo-modal__dialog{ max-width: 94vw !important; }
    .promo-modal__left{ padding: 14px !important; }
}

/* Vertically center content inside the modal left column */
.promo-modal__body { display: flex !important; align-items: center; }
.promo-modal__left { display: flex !important; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100% !important; flex: 1 1 100% !important; }
.promo-modal__badge { margin-bottom: 6px; margin-left: auto; margin-right: auto; }
.promo-modal__title { margin-top: 0; }

/* Make inputs and labels centered and wider inside modal */
.promo-modal__left .floating-field { width: 80% !important; margin: 8px auto !important; }
.promo-modal__left .floating-label { left: 0 !important; transform-origin: center left; }
.promo-modal__left .custom-input { width: 100% !important; }
.promo-modal__left .promo-modal__text, .promo-modal__left .promo-modal__title { text-align: center !important; }
.promo-modal__left .promo-modal__actions { display: flex; justify-content: center; gap: 12px; }

/* Consent checkbox row: keep checkbox next to label and centered */
.consent-row{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    width:80%;
    margin:10px auto 0;
}
.consent-row .form-check-input{ margin:0 8px 0 0; transform:translateY(0); }
.consent-row .form-check-label{ text-align:left; }
@media (max-width:480px){
    .consent-row{ width:92%; gap:8px; }
}

/* Ensure footer text is centered between 325px and 425px viewport widths */
@media (max-width: 425px) {
    .legal-note-wrapper,
    .footer-block,
    .footer-nav,
    .footer-nav-row,
    .footer-nav-link,
    .footer-consent-link {
        text-align: center !important;
    }

    .footer-nav {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .footer-nav-row {
        display: block !important;
        width: 100% !important;
    }

    /* Make footer columns stack and center inside contacts container */
    #contacts .col-9,
    #contacts .col-3,
    .footer-block {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    /* Ensure phone/time blocks and headings center too */
    #contacts .footer-block .text-12,
    #contacts .footer-nav-link,
    #contacts h5,
    #contacts p,
    #contacts .legal-note {
        text-align: center !important;
    }

    /* Stack footer logo + text and center social icons for small screens */
    .footer-block > .d-flex.justify-content.gap-20,
    .footer-block > .d-flex.justify-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .footer-block img#logo {
        width: 64px !important;
        height: auto !important;
        margin: 0 !important;
    }

    .footer-block .IconMessengers {
        width: 36px !important;
        height: 36px !important;
    }

    .footer-block > .d-flex.justify-content.align-items-center {
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }

    /* Keep messenger icons in a row on small screens */
    .footer-block > .d-flex.justify-content.align-items-center {
        flex-direction: row !important;
    }

    .footer-block > .d-flex.justify-content.align-items-center a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}