/* ============================================================
   MOBILE RESPONSIVE STYLES
   Breakpoints: 768px (tablet), 480px (phone)
   ============================================================ */

/* ============================================================
   TABLET — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* --- Prevent horizontal scroll --- */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* --- Header & Navigation --- */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Nav: hidden off-screen by default, shown on toggle.
       Uses transform for reliable off-screen positioning. */
    .nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 5rem 1.5rem 2rem !important;
        border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: visible !important;
    }

    .nav.active {
        transform: translateX(0) !important;
    }

    .nav-list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .nav-link {
        font-size: 1.1rem !important;
        padding: 12px 20px !important;
        white-space: normal !important;
        border-radius: 12px !important;
        border-bottom: none !important;
    }

    .header-contacts {
        display: none !important;
    }

    .header-wrapper {
        padding: 0.75rem 0 !important;
    }

    .logo-img {
        height: 38px !important;
    }

    .logo-text {
        font-size: 1.5rem !important;
    }

    .logo-tagline {
        font-size: 0.6rem !important;
    }

    /* --- Container --- */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* --- Hero Section --- */
    .hero {
        padding: 80px 0 60px !important;
        min-height: auto !important;
    }

    .hero-content {
        flex-direction: column !important;
    }

    .hero-visual {
        display: none !important;
    }

    section.hero .hero-text {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
    }

    .hero-eyebrow {
        font-size: 0.75rem !important;
    }

    /* --- Section Titles --- */
    .section-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .section-subtitle,
    .section-description {
        font-size: 0.95rem !important;
        padding: 0 10px !important;
    }

    /* --- About Features Grid (index.html) --- */
    .about-features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .about-feature-card {
        padding: 1.5rem !important;
    }

    /* --- Why Choose Grid --- */
    .why-choose-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .why-choose-card {
        padding: 24px 20px !important;
    }

    .why-choose-icon svg {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- News Grid --- */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .news-card {
        padding: 1.25rem !important;
    }

    /* --- Testimonials Grid --- */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .testimonial-card {
        padding: 1.25rem !important;
    }

    /* --- Stats Grid --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* --- CTA Sections --- */
    .program-cta {
        padding: 30px 0 !important;
    }

    .cta-content {
        padding: 0 10px !important;
    }

    .cta-title,
    .program-cta h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .cta-buttons .btn,
    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary {
        width: 100% !important;
        max-width: 320px !important;
        padding: 14px 24px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .cta-features {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .cta-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .cta-icon svg {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-bottom: 24px !important;
    }

    .footer {
        padding: 24px 0 0 !important;
    }

    .footer-brand {
        justify-content: center !important;
    }

    .footer-section {
        text-align: center !important;
    }

    .footer-title::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

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

    .footer-nav li {
        margin-bottom: 4px !important;
    }

    .footer-bottom {
        padding: 16px 0 !important;
    }

    .footer-bottom p {
        font-size: 0.8rem !important;
    }

    /* --- Contact Modal --- */
    .modal-container {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 16px !important;
    }

    .modal-content {
        padding: 20px !important;
    }

    .modal-title {
        font-size: 1.3rem !important;
    }

    /* --- Breadcrumbs --- */
    .breadcrumbs {
        padding: 8px 0 !important;
    }

    .breadcrumbs-nav {
        font-size: 0.8rem !important;
    }

    /* --- Page Hero (about, etc.) --- */
    .page-hero {
        padding: 40px 0 30px !important;
    }

    .page-hero-title {
        font-size: 2rem !important;
    }

    .page-hero-subtitle {
        font-size: 0.95rem !important;
    }

    .page-hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    .page-hero-stat__divider {
        display: none !important;
    }

    /* --- About Page Sections --- */
    .about-intro__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .about-intro__cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .about-timeline__item {
        padding-left: 0 !important;
    }

    .about-advantages__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .about-adv-card {
        padding: 20px !important;
    }

    .about-services__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .about-svc-card {
        padding: 20px !important;
    }

    .about-values__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .about-val-card {
        padding: 20px !important;
    }

    /* --- About CTA --- */
    .about-cta__inner {
        padding: 30px 20px !important;
        text-align: center !important;
    }

    .about-cta__inner h2 {
        font-size: 1.5rem !important;
    }

    .about-cta__buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .about-cta__buttons .btn {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
    }

    /* --- Updates Page --- */
    .updates-list {
        gap: 16px !important;
    }

    .update-card {
        padding: 16px !important;
    }

    /* --- Nagrady (Awards) Page --- */
    .awards-grid,
    .nagrady-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .award-card {
        padding: 16px !important;
    }

    /* --- Vakansii Page --- */
    .vacancies-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Kontakty Page --- */
    .contacts-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .contact-card {
        padding: 20px !important;
    }

    /* --- Program Subpages --- */
    .program-detail-header {
        padding: 40px 0 30px !important;
    }

    .program-detail-title {
        font-size: 1.75rem !important;
    }

    .program-features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .program-info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .program-screenshots-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Scroll to Top --- */
    .scroll-to-top {
        bottom: 20px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* --- General spacing reductions --- */
    section {
        padding: 30px 0 !important;
    }

    .about-section,
    .why-choose-section,
    .news-section,
    .testimonials-section,
    .stats-section {
        padding: 30px 0 !important;
    }
}

/* ============================================================
   PHONE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

    /* --- Even smaller typography --- */
    .section-title {
        font-size: 1.4rem !important;
    }

    .hero-title,
    section.hero .title-line {
        font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    .page-hero-title {
        font-size: 1.6rem !important;
    }

    /* --- Stats 1 column --- */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Nav links smaller --- */
    .nav-link {
        font-size: 1.1rem !important;
        padding: 10px 20px !important;
    }

    /* --- Logo smaller --- */
    .logo-img {
        height: 32px !important;
    }

    .logo-text {
        font-size: 1.3rem !important;
    }

    /* --- Modal full screen --- */
    .modal-container {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* --- Form adjustments --- */
    .form-group-icon {
        flex-direction: column !important;
    }

    .form-icon {
        display: none !important;
    }

    /* --- CTA even smaller --- */
    .cta-title,
    .program-cta h2 {
        font-size: 1.25rem !important;
    }

    /* --- Footer --- */
    .footer-brand {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-brand-name {
        font-size: 1.3rem !important;
    }
}

/* ============================================================
   FINAL MOBILE STABILITY OVERRIDES
   Keep the converted Vite site usable when older CSS layers collide.
   ============================================================ */
@media (max-width: 768px) {

    html {
        font-size: 100% !important;
    }

    body {
        overflow-x: hidden !important;
    }

    .container,
    .page-container,
    .program-container,
    .hero-content,
    .page-hero-content,
    .v3-content,
    .program-hero-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .header-wrapper {
        position: relative !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-width: 0 !important;
        padding-right: 56px !important;
    }

    .logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .logo a,
    .logo-text-block {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .logo-text,
    .logo-tagline {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-menu-toggle {
        position: fixed !important;
        top: 8px !important;
        right: 16px !important;
        z-index: 2000 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #c4333c !important;
        border: 1px solid #c4333c !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 20px rgba(196, 51, 60, 0.28) !important;
        transform: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        width: 23px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
    }

    .nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 1100 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: min(82vw, 340px) !important;
        max-width: 100vw !important;
        height: 100vh !important;
        padding: 86px 22px 28px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: -16px 0 40px rgba(17, 24, 39, 0.16) !important;
        transform: translateX(105%) !important;
        transition: transform 0.25s ease !important;
    }

    .nav.active {
        transform: translateX(0) !important;
    }

    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .nav-link {
        width: 100% !important;
        white-space: normal !important;
    }

    .v3-hero,
    .page-hero,
    .program-hero,
    .program-detail-header {
        overflow: hidden !important;
    }

    .v3-title,
    .page-hero-title,
    .program-hero-title,
    .program-detail-title,
    .section-title {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-wrap: balance;
    }

    .v3-title {
        font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
        line-height: 1.18 !important;
    }

    .v3-subtitle,
    .page-hero-subtitle,
    .program-hero-subtitle,
    .program-detail-subtitle,
    .section-subtitle,
    .section-description {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   ABOUT PAGE ICON HOVER CONSISTENCY
   ============================================================ */
.about-advantages .about-adv-card .about-adv-card__icon,
.about-advantages .about-adv-card .about-adv-card__icon--1,
.about-advantages .about-adv-card .about-adv-card__icon--2,
.about-advantages .about-adv-card .about-adv-card__icon--3,
.about-advantages .about-adv-card .about-adv-card__icon--4,
.about-advantages .about-adv-card .about-adv-card__icon--5,
.about-advantages .about-adv-card .about-adv-card__icon--6 {
    background: rgba(196, 51, 60, 0.08) !important;
    color: #c4333c !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.about-advantages .about-adv-card .about-adv-card__icon svg,
.about-advantages .about-adv-card .about-adv-card__icon--1 svg,
.about-advantages .about-adv-card .about-adv-card__icon--2 svg,
.about-advantages .about-adv-card .about-adv-card__icon--3 svg,
.about-advantages .about-adv-card .about-adv-card__icon--4 svg,
.about-advantages .about-adv-card .about-adv-card__icon--5 svg,
.about-advantages .about-adv-card .about-adv-card__icon--6 svg {
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    transform: none !important;
}

.about-advantages .about-adv-card:hover .about-adv-card__icon,
.about-advantages .about-adv-card:hover .about-adv-card__icon--1,
.about-advantages .about-adv-card:hover .about-adv-card__icon--2,
.about-advantages .about-adv-card:hover .about-adv-card__icon--3,
.about-advantages .about-adv-card:hover .about-adv-card__icon--4,
.about-advantages .about-adv-card:hover .about-adv-card__icon--5,
.about-advantages .about-adv-card:hover .about-adv-card__icon--6 {
    background: #c4333c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(196, 51, 60, 0.22) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
}

.about-advantages .about-adv-card:hover .about-adv-card__icon svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--1 svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--2 svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--3 svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--4 svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--5 svg,
.about-advantages .about-adv-card:hover .about-adv-card__icon--6 svg {
    color: currentColor !important;
    stroke: currentColor !important;
    transform: none !important;
}

/* ============================================================
   HOME WHY-CHOOSE HOVER CONSISTENCY
   ============================================================ */
.why-choose-section .why-choose-card {
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e5e9f0 !important;
    box-shadow: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease !important;
}

.why-choose-section .why-choose-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 4px !important;
    background: #c4333c !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.22s ease !important;
    z-index: 2 !important;
}

.why-choose-section .why-choose-card::after {
    content: none !important;
}

.why-choose-section .why-choose-card:hover {
    background: #ffffff !important;
    border-color: rgba(196, 51, 60, 0.22) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10) !important;
    transform: translateY(-6px) !important;
}

.why-choose-section .why-choose-card:hover::before {
    transform: scaleX(1) !important;
}

.why-choose-section .why-choose-icon {
    background: rgba(196, 51, 60, 0.08) !important;
    color: #c4333c !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

.why-choose-section .why-choose-icon svg {
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    transform: none !important;
}

.why-choose-section .why-choose-card:hover .why-choose-icon {
    background: #c4333c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(196, 51, 60, 0.22) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
}

.why-choose-section .why-choose-card:hover .why-choose-icon svg {
    color: currentColor !important;
    stroke: currentColor !important;
    transform: none !important;
}

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */
.privacy-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    padding: 64px 0 80px;
}

.privacy-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.privacy-summary,
.privacy-content {
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.privacy-summary {
    position: sticky;
    top: 96px;
    padding: 28px;
}

.privacy-content {
    padding: 36px 42px;
}

.privacy-summary h2,
.privacy-content h2 {
    color: #0f172a;
    font-family: var(--font-heading, 'Rubik', sans-serif);
    line-height: 1.25;
}

.privacy-summary h2 {
    font-size: 1.25rem;
    margin: 0 0 16px;
}

.privacy-content h2 {
    font-size: 1.35rem;
    margin: 32px 0 12px;
}

.privacy-content h2:first-child {
    margin-top: 0;
}

.privacy-summary p,
.privacy-content p,
.privacy-content li {
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.75;
}

.privacy-summary p {
    margin: 0 0 14px;
}

.privacy-content p {
    margin: 0 0 12px;
}

.privacy-content ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.privacy-content li {
    margin-bottom: 8px;
}

.privacy-summary a,
.privacy-content a {
    color: #c4333c;
    text-decoration: none;
    font-weight: 700;
}

.privacy-summary a:hover,
.privacy-content a:hover {
    color: #a82a32;
    text-decoration: underline;
}

.privacy-hero .v3-title {
    max-width: 100%;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance;
}

.cookie-notice {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 20px;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cookie-notice__text {
    font-size: 0.95rem;
    line-height: 1.55;
}

.cookie-notice__text a {
    color: #c4333c;
    font-weight: 700;
    text-decoration: none;
}

.cookie-notice__text a:hover {
    color: #a82a32;
    text-decoration: underline;
}

.cookie-notice__btn {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 11px 18px;
    color: #ffffff;
    font: 700 0.92rem/1 var(--font-body, 'Manrope', sans-serif);
    background: #c4333c;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(196, 51, 60, 0.24);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cookie-notice__btn:hover {
    background: #a82a32;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(196, 51, 60, 0.28);
}

.cookie-notice--hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.form-status {
    margin: 14px 0 0;
    min-height: 1.35em;
    color: #64748b;
    font: 600 0.95rem/1.5 var(--font-body, 'Manrope', sans-serif);
    text-align: center;
}

.form-status--success {
    color: #047857;
}

.form-status--error {
    color: #c4333c;
}

@media (max-width: 900px) {
    .privacy-layout {
        grid-template-columns: 1fr;
    }

    .privacy-summary {
        position: static;
    }
}

@media (max-width: 600px) {
    .privacy-hero .v3-title {
        font-size: clamp(1.45rem, 7vw, 1.75rem) !important;
        line-height: 1.16 !important;
    }

    .privacy-hero .v3-subtitle {
        font-size: 0.92rem !important;
    }

    .privacy-section {
        padding: 40px 0 56px;
    }

    .privacy-summary,
    .privacy-content {
        border-radius: 12px;
        padding: 22px;
    }

    .privacy-content h2 {
        font-size: 1.15rem;
    }

    .cookie-notice {
        left: 16px;
        right: 16px;
        bottom: 16px;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .cookie-notice__btn {
        width: 100%;
    }
}

/* ============================================================
   CONTACT MODAL MOBILE POLISH
   The modal markup is reused on React and generated legacy pages.
   Keep these overrides late in the mobile layer so old CSS does not win.
   ============================================================ */
@media (max-width: 640px) {
    .modal-overlay {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        overflow: hidden !important;
        z-index: 5000 !important;
        background: rgba(15, 23, 42, 0.72) !important;
        backdrop-filter: blur(6px);
    }

    .modal-container.modal-v4,
    .modal-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .modal-accent-stripe {
        width: 4px !important;
    }

    .modal-v4 .modal-close,
    .modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        background: #f3f4f6 !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    }

    .modal-v4 .modal-content,
    .modal-content {
        padding: 22px 18px 24px 22px !important;
    }

    .modal-v4 .modal-header,
    .modal-header {
        margin: 0 52px 18px 0 !important;
        text-align: left !important;
    }

    .modal-v4 .modal-title,
    .modal-title {
        margin: 0 0 8px !important;
        font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
    }

    .modal-v4 .modal-subtitle,
    .modal-subtitle {
        max-width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .contact-form {
        gap: 14px !important;
    }

    .form-group-icon,
    .form-group-icon-top {
        display: block !important;
    }

    .form-icon {
        display: none !important;
    }

    .form-field {
        gap: 7px !important;
    }

    .form-field label,
    .form-group label {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0.04em !important;
    }

    .modal-v4 .form-group input,
    .modal-v4 .form-group textarea,
    .form-group input,
    .form-group textarea {
        min-height: 48px !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .modal-v4 .form-group textarea,
    .form-group textarea {
        min-height: 112px !important;
        max-height: 32dvh !important;
    }

    .form-extras {
        margin-top: 2px !important;
        padding: 14px 0 4px !important;
    }

    .checkbox-label {
        gap: 10px !important;
        color: #526179 !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    .checkbox-label a {
        color: #334155 !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-decoration-color: rgba(196, 51, 60, 0.34) !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 3px !important;
    }

    .checkbox-label a:hover {
        color: #c4333c !important;
        text-decoration-color: currentColor !important;
    }

    .checkbox-custom {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
    }

    .form-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .modal-v4 .btn-submit,
    .btn-outline-call {
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 18px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
    }

    .form-privacy {
        margin: 14px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        color: #8b98ad !important;
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
    }

    .form-privacy a {
        color: #526179 !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-decoration-color: rgba(196, 51, 60, 0.28) !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 3px !important;
    }

    .form-privacy a:hover {
        color: #c4333c !important;
        text-decoration-color: currentColor !important;
    }

    .form-status {
        margin-top: 10px !important;
        font-size: 0.9rem !important;
        text-align: left !important;
    }
}