/* Base styles for Buduslugi website */

:root {
    --primary-color: #f2c94c;
    --secondary-color: #333333;
    --light-color: #ffffff;
    --background-color: #f9f9f9;
    --text-color: #333333;
    --border-radius: 4px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Use a modern font for a more polished look */
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;

    /* Prevent unwanted horizontal scrollbars caused by full-width backgrounds */
    overflow-x: hidden;
}

/* Top bar */
.top-bar {
    background-color: #000;
    color: var(--light-color);
    font-size: 0.8rem;
    padding: 0.3rem 0;
}

.top-bar-inner {
    display: flex;
    /* Align all items to the start so the social icon sits close to the contact links */
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

/* Keep Facebook near contact links, but push the admin icon to the far right */
.top-bar .top-admin {
    margin-left: auto;
}

/* Language switcher in the top bar */
.top-lang-switcher {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}
.top-lang-switcher a,
.top-lang-switcher span {
    color: var(--light-color);
    text-decoration: none;
    font-size: 0.8rem;
}
.top-lang-switcher a:hover {
    text-decoration: underline;
}

.top-bar a {
    color: var(--light-color);
    text-decoration: none;
    margin-right: 0.5rem;
}

.top-bar a:hover {
    text-decoration: underline;
}

/* Contact icons in top bar */
.top-bar .icon {
    width: 16px;
    height: 16px;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.top-bar .contact-link {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    color: var(--light-color);
    text-decoration: none;
}
.top-bar .contact-link:hover {
    text-decoration: underline;
}
.top-bar .top-social a {
    display: inline-flex;
    align-items: center;
}
.top-bar .top-social img {
    width: 16px;
    height: 16px;
}

/* Remove extra right margin for the social icon so it sits closer to phone and email */
.top-bar .top-social a {
    margin-right: 0;
}

/* Icon styling for Font Awesome icons used in header and footer */
/* Increase the icon sizes in the top bar for better visibility */
.top-bar i,
.top-bar .top-social i {
    margin-right: 0.4rem;
    font-size: 1.3rem;
    vertical-align: middle;
    color: inherit;
}

.top-bar .top-social i {
    /* Remove right margin from the standalone social icon */
    margin-right: 0;
}

/* Admin icon in top bar */
.top-bar .top-admin a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    margin-right: 0;
}
.top-bar .top-admin a:hover {
    text-decoration: underline;
}
.top-bar .top-admin i {
    margin-right: 0;
    font-size: 1.3rem;
}

.footer-cta i {
    margin-right: 0.5rem;
    font-size: 1.3rem;
    vertical-align: middle;
}

/* Logo */
.logo-wrapper {
    display: flex;
    align-items: center;
}

.logo {
    /* Adjust logo size so it remains prominent without overwhelming the header.
       Reduced further (about another 5%) from the previous value */
    height: 154px;
    width: auto;
    margin-right: 0.5rem;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

header {
    /* Apply a graphic banner in the header with a subtle white overlay. On larger screens
       the banner is repeated horizontally, while on mobile it is replaced with a more
       vertically oriented version. */
    background-color: var(--light-color);
    /* 15 % white overlay softens the underlying banner */
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
        url('icons/top-remont-pc-nysa.jpg');
    /* Do not repeat the desktop banner; scale it to cover the full width
       of the header while preserving aspect ratio. Use top center to ensure
       the main elements remain visible without distortion. */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    color: var(--secondary-color);
    padding: 0.5rem 0;
    border-bottom: 4px solid var(--primary-color);

    /* Make the header span the full width of the viewport. Without this, the
       background pattern can appear truncated on very wide screens because
       the header content is constrained by the container. The negative 50vw
       margins push the header out of the container’s width and allow the
       background to extend across the entire viewport. */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

/* Mobile header background: use a vertically oriented banner and avoid repeating. */
@media (max-width: 768px) {
    header {
        background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
            url('icons/tlotopmobilki-nysa-remont.webp');
        background-repeat: no-repeat;
        /* Cover the width with a reasonable height to accommodate the logo and menu. */
        background-size: cover;
        background-position: top center;
    }
}

/*
 * Align the logo centrally in the header for desktop layouts.
 * Stack the logo and navigation vertically and center them horizontally.
 */
header .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.site-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--light-color);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
    /* Center the navigation items horizontally */
    justify-content: center;
    /* Reduce gap between navigation items to allow more tiles in a single row */
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Style all navigation links as tiles to match the quote and blog buttons. Each link gets a
   yellow background, bold text and rounded corners. The hover state uses a slightly darker
   yellow, and the active page uses a more orange shade. */
    /* Deprecated navigation button styling (replaced by glass tile design).
       The old yellow navigation styles are commented out but retained
       for reference in case they are needed again. */
    /*
    .main-nav a {
        background-color: var(--primary-color);
        color: var(--secondary-color);
        padding: 0.3rem 0.6rem;
        border-radius: var(--border-radius);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        position: relative;
        transition: background-color 0.3s, color 0.3s;
    }
    .main-nav a:hover {
        background-color: #e5b437;
        color: var(--secondary-color);
    }
    .main-nav a.active {
        background-color: #ff9800;
        color: var(--secondary-color);
    }
    .main-nav ul {
        display: flex;
        justify-content: center;
        gap: 0.6rem;
        list-style: none;
    }
    */

/* Hero with background image */
.hero-with-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--light-color);
    padding: 4rem 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}

.hero-with-bg .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--border-radius);
}

.hero-with-bg .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Call to action button and links */
.call-to-action a,
.call-to-action .btn {
    color: var(--secondary-color);
}

/* Ensure contact links in call-to-action section are white if on dark background */
.call-to-action {
    text-align: center;
    margin-top: 2rem;
    color: var(--secondary-color);
}

.call-to-action a {
    color: var(--primary-color);
    font-weight: bold;
}

/* Override link colours in footer and hero if needed */
footer .contact-info a,
.top-bar a {
    color: var(--light-color);
}

footer .contact-info a:hover,
.top-bar a:hover {
    text-decoration: underline;
}

/* Lightbox styles */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#lightbox .lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--border-radius);
}

/* Simple gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* Restore original proportions for images in the "Przykładowe realizacje" slider.
   Do not constrain the height; let images scale naturally with their aspect ratio. */
.home-slider a img {
    width: 100%;
    height: auto;
    display: block;
}

/* Blog preview module on the home page */
.home-blog-preview {
    margin: 2rem 0;
}

.home-blog-preview h2 {
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    color: var(--secondary-color);
    font-weight: 600;
    text-align: left;
}

.home-blog-card {
    display: flex;
    flex-wrap: wrap;
    background: var(--background-color-light, #fff7e2);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.home-blog-card .blog-card-image {
    flex: 0 0 160px;
    max-width: 160px;
    overflow: hidden;
}

.home-blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-blog-card .blog-card-content {
    flex: 1;
    padding: 1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-blog-card .blog-card-content h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.home-blog-card .blog-card-content p {
    margin: 0.6rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.home-blog-card .blog-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.home-blog-card .blog-card-actions .blog-read-more {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}

.home-blog-card .blog-card-actions .blog-all-posts {
    font-size: 0.85rem;
    color: var(--secondary-color);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .home-blog-card {
        flex-direction: column;
    }
    .home-blog-card .blog-card-image {
        flex: none;
        max-width: 100%;
        height: 180px;
    }

    /* On small screens, reduce the font size and clamp the height of the blog excerpt
       to prevent the card from filling the entire viewport. */
    .home-blog-card .blog-card-content p {
        font-size: 0.85rem;
        max-height: 4rem;
        overflow: hidden;
    }
}
.gallery-grid .gallery-item {
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--light-color);
    border: 1px solid #ddd;
}
.gallery-grid .gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: var(--light-color);
    cursor: pointer;
    user-select: none;
    padding: 0 1rem;
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--light-color);
    cursor: pointer;
}

.lang-switcher {
    display: flex;
    gap: 0.5rem;
    /* push the language switcher to the far right within the header */
    margin-left: auto;
}

.lang-switcher a,
.lang-switcher span {
    /* Inherit the header colour so language links are visible on light backgrounds */
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
}

.lang-switcher a:hover {
    text-decoration: underline;
}

main {
    padding: 2rem 0;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.pricing-card {
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background: var(--light-color);
    padding: 1rem;
}
.pricing-card h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
}
.pricing-table th,
.pricing-table td {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    vertical-align: top;
}
.pricing-table th {
    font-weight: 600;
}
.pricing-footnote {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Simple pricing table (admin-managed) */
.pricing-table-wrap {
    overflow-x: auto;
    margin-top: 1.25rem;
}
.pricing-simple-table {
    width: 100%;
    border-collapse: collapse;
    /* Remove large minimum width so the table can shrink on mobile devices */
    min-width: 480px;
    /* Fixed layout keeps columns aligned across rows */
    table-layout: fixed;
}
.pricing-simple-table th,
.pricing-simple-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    vertical-align: top;
}
.pricing-simple-table th {
    font-weight: 700;
}
.pricing-updated {
    margin: 0.5rem 0 0;
    opacity: 0.9;
}
.pricing-disclaimer {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Hero section */
.hero {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 3rem 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    text-align: center;
}

.hero h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.1rem;
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.card {
    background-color: var(--light-color);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    background-color: var(--light-color);
}

.card-content {
    padding: 1rem;
}

.card-content h3 {
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}

.card-content p {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.card-content .meta {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.5rem;
}

.card-actions {
    padding: 0 1rem 1rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #e5b437;
}

/* Testimonials */
.testimonial {
    background-color: var(--light-color);
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.testimonial p {
    font-style: italic;
    margin-bottom: 0.5rem;
}

.testimonial .author {
    font-weight: bold;
    text-align: right;
}

/* Testimonial image */
.testimonial-image {
    max-width: 80px;
    height: auto;
    float: left;
    margin-right: 1rem;
    border-radius: var(--border-radius);
}

/* Blog link styling */
/* Highlight the blog link in the header so it looks like a button and matches the site palette. */
/* Style for special menu buttons (blog and quote) */
.main-nav .blog-menu-link a.blog-link-anchor,
.main-nav .quote-menu-link a.quote-link-anchor {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
}
.main-nav .blog-menu-link a.blog-link-anchor:hover,
.main-nav .quote-menu-link a.quote-link-anchor:hover {
    background-color: #e5b437;
    color: var(--secondary-color);
}
/* Blog call-to-action paragraphs placed under service notes */
.blog-link-paragraph {
    margin-top: 1rem;
}
/* Reuse the .btn styles for the blog button but allow custom hover color */
.blog-link-btn {
    /* ensure text color stands out on the primary background */
    color: var(--secondary-color);
}
.blog-link-btn:hover {
    background-color: #e5b437;
    color: var(--secondary-color);
}

/* Quote link button inside the brand banner uses the same styling as blog link buttons */
.quote-link-btn {
    color: var(--secondary-color);
}
.quote-link-btn:hover {
    background-color: #e5b437;
    color: var(--secondary-color);
}

/* -----------------------------------------------------------------------------
 * Custom glass tile navigation and button styles
 *
 * These rules override the default navigation and button styles to implement
 * a modern “glass” aesthetic. The main navigation becomes a responsive grid
 * on mobile (2 columns) and collapses into a single row on larger viewports.
 * Each navigation link is styled as a translucent tile with a 1px border,
 * subtle blur, drop shadow and scale effect on hover. The CTA links (quote
 * and blog) span the full width of the grid on mobile and use the primary
 * colour for emphasis. All buttons (.btn) reuse the glass style but with
 * slightly higher opacity and dark text to remain legible on light
 * backgrounds.
 */

/* Use CSS grid for the main navigation on all screen sizes.  On mobile
   the menu appears in two columns, while on larger screens the grid
   automatically creates as many columns as there are links so that
   everything fits in a single row without uneven widths. */
.main-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding-left: 0;
    /* Force all rows to equal height so half-size tiles match the height of full-width tiles */
    grid-auto-rows: 1fr;
    /* Center the navigation group inside its container by automatic margins */
    margin: 0 auto;
}

@media (min-width: 768px) {
    .main-nav ul {
        /* On desktop show all navigation items in a single row.  The flex
           container distributes available space evenly across tiles and
           prevents wrapping. */
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .main-nav ul li {
        flex: 1 1 0;
    }
}

/* Base tile style for navigation links.  The padding and font size are
   increased slightly to make the tiles more prominent on mobile, and
   the semi‑transparent background creates a “glass” effect. */
.main-nav a {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 0.9rem 1.3rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;

    /* Prevent the label from wrapping onto a second line */
    white-space: nowrap;
    /* Ensure all tiles share the same minimum height */
    min-height: 54px;
    height: 100%;
}

@media (min-width: 768px) {
    /* On larger screens the navigation tiles can be slightly more compact so
       that all links fit neatly in a single row. Reduce padding and
       font-size while maintaining the glass effect. */
    .main-nav a {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    .main-nav a i {
        margin-right: 0.4rem;
        font-size: 1.2rem;
    }
}

/* Hover/active effects only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
    .main-nav a:hover {
        transform: scale(1.03);
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
}
.main-nav a:active {
    transform: scale(0.97);
}
.main-nav a.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    /* Ensure the active link text remains white instead of falling back to a dark colour */
    color: #fff;
}

/* Make the home, quote and blog tiles span full width on narrow screens */
.main-nav .home-menu-link,
.main-nav .quote-menu-link,
.main-nav .blog-menu-link {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .main-nav .home-menu-link,
    .main-nav .quote-menu-link,
    .main-nav .blog-menu-link {
        grid-column: auto;
    }
}


/* Icon styling within the navigation tiles */
.main-nav a i {
    margin-right: 0.45rem;
    /* Increase icon size slightly to match larger tile size */
    font-size: 1.45rem;
    /* Default icons use the primary colour for a cohesive accent */
    color: var(--primary-color);
}


/* Glass style for all standard buttons, matching the navigation tiles */
.btn {
    display: inline-block;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.btn:hover {
    transform: scale(1.03);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.btn:active {
    transform: scale(0.97);
}

/* Quote estimator table styles */
.quote-section {
    margin-top: 1rem;
}
.quote-section h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}
.quote-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    /* Use fixed layout so columns maintain consistent widths across rows */
    table-layout: fixed;
}
.quote-table th,
.quote-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 0.9rem;
}
.quote-table th {
    background-color: var(--background-color);
    color: var(--secondary-color);
    font-weight: 600;
}
.quote-table td.item-total {
    /* Give the total column enough space so values never collide with the quantity input */
    min-width: 110px;
}

/* Define reasonable column widths for quote tables. The first column (service) is the largest,
   followed by unit, quantity and total. */
.quote-table th:nth-child(1), .quote-table td:nth-child(1) {
    /* Allocate slightly less space to the service column to free room for the quantity column */
    width: 35%;
}
.quote-table th:nth-child(2), .quote-table td:nth-child(2) {
    /* Unit column remains the same */
    width: 20%;
}
.quote-table th:nth-child(3), .quote-table td:nth-child(3) {
    /* Increase width of the quantity column so the input fields appear closer to the left */
    width: 25%;
    /* Prevent the input from visually spilling into the next column on narrow screens */
    overflow: hidden;
}
.quote-table th:nth-child(4), .quote-table td:nth-child(4) {
    /* Expand the total column slightly to maintain balance */
    width: 20%;
    white-space: nowrap;
}
.quantity-input {
    /* Keep the input constrained to its cell to avoid overlapping the "Łącznie" column */
    width: 100%;
    max-width: 70px;
    box-sizing: border-box;
    display: block;
    padding: 0.3rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
}
.bathroom-quote {
    margin: 1rem 0;
    background-color: var(--light-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.bathroom-quote label {
    display: inline-block;
    margin-right: 1rem;
    font-size: 0.9rem;
}
.bathroom-quote input[type="radio"] {
    margin-right: 0.3rem;
}
.bathroom-area label {
    display: block;
    margin-top: 0.5rem;
}

/* Responsive improvements for the quote tables */
.quote-category {
    /* Allow horizontal scrolling on very small devices */
    overflow-x: auto;
}
.quote-table {
    /* Let table width adjust to content; prevent wrapping on extremely narrow screens */
    width: 100%;
    border-collapse: collapse;
}
@media (max-width: 600px) {
    /* Relax white-space constraints on mobile to avoid overflow */
    .quote-table th,
    .quote-table td {
        white-space: normal;
    }
    .quote-table th:nth-child(1), .quote-table td:nth-child(1),
    .quote-table th:nth-child(2), .quote-table td:nth-child(2),
    .quote-table th:nth-child(3), .quote-table td:nth-child(3),
    .quote-table th:nth-child(4), .quote-table td:nth-child(4),
    .quote-table th:nth-child(5), .quote-table td:nth-child(5) {
        width: auto;
    }

    /* Reduce padding and font size in quote tables on small screens. Position units
       and quantity inputs with additional left padding for better separation from
       service names. */
    .quote-table th, .quote-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.8rem;
    }
    .quote-table td:nth-child(2),
    .quote-table td:nth-child(3) {
        /* Keep these fields aligned left on mobile; avoid pushing the quantity input into the total column. */
        padding-left: 0.6rem;
    }
    .quantity-input {
        width: 70px;
    }

    /* Stack buttons in brand banner on mobile to avoid them sticking together */
    .brand-banner-inner .brand-text a.btn,
    .brand-banner-inner .brand-text a.quote-link-btn {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Additional styles for quote summary and actions */
.quote-summary {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
}
.quote-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Custom call-to-action section for bathroom and home/apartment renovation pages */
.home-cta {
    margin: 2rem 0;
    text-align: center;
}
.home-cta-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.home-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--primary-color);
    /* Use the secondary colour for text so the button text appears dark like other buttons */
    color: var(--secondary-color);
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.home-cta .cta-btn i {
    margin-right: 0.4rem;
}
.home-cta .cta-btn:hover {
    filter: brightness(0.9);
}
.quote-actions .btn {
    padding: 0.6rem 1rem;
}
.send-form {
    margin-top: 1rem;
    background: var(--light-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.send-form input[type="text"],
.send-form input[type="tel"] {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    margin-top: 0.25rem;
}

/* Provide spacing for the blog icon inside header and buttons */
/* Icon spacing for blog and quote links/buttons */
.blog-link-anchor i,
.blog-link-btn i,
.quote-link-anchor i,
.quote-link-btn i {
    margin-right: 0.4rem;
    font-size: 1rem;
    vertical-align: middle;
}

.testimonial-stars {
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #f2b01e;
}

/* Star rating input */
.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0.25rem;
}
.star-input input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.star-input label {
    cursor: pointer;
    font-size: 1.6rem;
    color: #c9c9c9;
    transition: transform 0.1s ease;
}
.star-input label:hover {
    transform: scale(1.05);
}
.star-input label:hover,
.star-input label:hover ~ label {
    color: #f2b01e;
}
.star-input input:checked ~ label {
    color: #f2b01e;
}
.testimonial::after {
    content: "";
    display: block;
    clear: both;
}

/* Contact form */
form.contact-form {
    display: grid;
    gap: 1rem;
    background-color: var(--light-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

form.contact-form input,
form.contact-form textarea,
form.contact-form select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
}

form.contact-form label {
    font-weight: bold;
}

form.contact-form button {
    padding: 0.7rem 1rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
}

form.contact-form button:hover {
    background-color: #e5b437;
}

/* Contact page two-column layout */
.contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.contact-form-wrapper {
    flex: 2 1 300px;
}

/* Contact feed (Facebook timeline) in contact page */
.contact-feed {
    flex: 1 1 280px;
    border: 2px solid var(--primary-color);
    padding: 1rem;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
}
.contact-feed h2 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.sample-box {
    border: 2px solid var(--primary-color);
    padding: 0.5rem;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
}

.sample-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Home page contact and sample projects section */
.home-contact {
    background-color: var(--background-color);
    padding: 2rem 1rem;
    margin-top: 2rem;
    border-radius: var(--border-radius);
}
.home-contact h2 {
    text-align: center;
    margin-bottom: 1rem;
}
.home-contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.home-contact-form {
    flex: 2 1 300px;
}
.home-contact-samples {
    flex: 1 1 280px;
    border: 2px solid var(--primary-color);
    padding: 1rem;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
}
.home-contact-samples h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}
.home-slider {
    position: relative;
    overflow: hidden;
}
.home-slide {
    display: none;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}
.home-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
}
.home-slide.active {
    display: block;
}
.home-slider-prev,
.home-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--light-color);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.home-slider-prev {
    left: -16px;
}
.home-slider-next {
    right: -16px;
}

/* Hero slider on home page */
.hero-slider {
    position: relative;
    height: 60vh;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
}
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: var(--light-color);
}

/* Mobile fix: prevent hero text from being cut off on small screens */
@media (max-width: 768px) {
    .hero-slider {
        height: 72vh;
        min-height: 420px;
    }
    .hero-slider .hero-content {
        width: calc(100% - 32px);
        padding: 0 8px;
        top: 48%;
    }
    .hero-slider .hero-content h1 {
        font-size: 1.8rem;
        line-height: 1.15;
        margin: 0 0 0.75rem;
    }
    .hero-slider .hero-content p {
        font-size: 1rem;
        line-height: 1.35;
        margin: 0;
    }
}
.hero-slider-prev,
.hero-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.4);
    color: var(--light-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}
.hero-slider-prev { left: 15px; }
.hero-slider-next { right: 15px; }

/* Home portfolio section */
.home-portfolio {
    padding: 2rem 0;
    text-align: center;
}
.home-portfolio h2 {
    margin-bottom: 1rem;
}
.portfolio-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.portfolio-grid a {
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.portfolio-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease-in-out;
}
.portfolio-grid a:hover img {
    transform: scale(1.05);
}

/* Footer */
footer {
    /* Reset default footer styles; new footer styles defined separately */
    background-color: transparent;
    color: inherit;
    padding: 0;
    margin-top: 0;
}

/* Bottom call-to-action bar above footer */
.footer-cta {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 1rem 0;
}
.footer-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-cta-text {
    font-size: 1.1rem;
    font-weight: bold;
}
.footer-cta-phone {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
}
.footer-cta-phone .icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

/* New footer layout */
.site-footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding-top: 2rem;
}
.site-footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 0 1rem 1.5rem;
}
.footer-logo-text {
    flex: 1 1 300px;
    max-width: 50%;
}
.footer-logo-img {
    /* Enlarge footer logo further to improve visibility. Width is increased while
       preserving aspect ratio. */
    width: 350px;
    height: auto;
    margin-bottom: 0.5rem;
}
.footer-description {
    font-size: 0.9rem;
    max-width: 500px;
    line-height: 1.4;
}
.site-footer .contact-info {
    flex: 1 1 250px;
    font-size: 0.9rem;
}
.site-footer .contact-info a {
    color: inherit;
    text-decoration: none;
}
.site-footer .contact-info a:hover {
    text-decoration: underline;
}
.footer-copy {
    background-color: var(--secondary-color);
    color: var(--light-color);
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.8rem;
}

/* Admin navigation */
.admin-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-nav li {
    margin: 0.5rem 0;
}

.admin-nav a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
}

.admin-nav a:hover {
    text-decoration: underline;
}

/* Admin content editor helpers */
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.admin-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit;
    line-height: 1.4;
}

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

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.contact-info p {
    margin: 0.25rem 0;
}

.service-area {
    font-style: italic;
    margin-top: 0.5rem;
}

/* Services overview section styling */
.services-overview {
    /* Return to the original solid yellow background. This section spans the full
       viewport width and uses the primary colour defined in CSS variables. */
    background-color: var(--primary-color);
    color: var(--secondary-color);
    margin-top: 2rem;
    /* Stretch the section across the full viewport width regardless of the parent container. */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    /* Add horizontal padding to align content with the container edges (approx. 5% of viewport) */
    padding: 2rem 5vw;
    border-radius: 0;
}

/* Wrap content inside services-overview so it aligns with the main container even on a full-width background. */
.services-overview .services-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Brand banner section with the paint roller image */
.brand-banner {
    background-color: var(--background-color);
    padding: 2rem 0;
    margin-top: 2rem;
}
.brand-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}
.brand-banner .brand-text {
    flex: 1 1 50%;
    max-width: 550px;
}
.brand-banner .brand-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}
.brand-banner .brand-text p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
    line-height: 1.6;
}
.brand-banner .brand-image {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand-banner .brand-image img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Form container inside the brand banner */
.brand-form {
    flex: 1 1 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 450px;
}
.brand-form p {
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.5;
}

.quote-form div {
    margin-bottom: 1rem;
}
.quote-form label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--secondary-color);
    font-weight: 600;
}
.quote-form input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 1rem;
}

/* Consent field styling for the quote form */
.quote-form .consent-field {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.quote-form .consent-field input[type="checkbox"] {
    width: auto;
    margin-top: 0.3rem;
}
.quote-form .consent-field label {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--secondary-color);
}

/* Consent field styling for contact and testimonial forms */
.contact-form .consent-field {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.contact-form .consent-field input[type="checkbox"] {
    width: auto;
    margin-top: 0.3rem;
}
.contact-form .consent-field label {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--secondary-color);
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    /* Show a compact top bar on small screens */
    .top-bar {
        display: block;
    }
    .top-bar .container {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    .top-bar a {
        font-size: 0.9rem;
    }
    .top-bar i {
        margin-right: 0.35rem;
    }
    /* Stack header elements vertically and center them */
    header .header-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    /* Reduce logo size for mobile and apply a further 5% reduction */
    .logo {
        height: 108px;
    }
    /* Stack navigation links vertically and center them */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .main-nav a {
        padding: 0.3rem 0;
        font-size: 0.9rem;
    }
    /* Place language switcher below navigation */
    .lang-switcher {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    /* Stack footer columns on small screens */
    .site-footer .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-logo-text {
        max-width: 100%;
    }
    .footer-logo-img {
        width: min(320px, 90vw);
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    /* Add spacing for sitemap in mobile layout */
    .footer-sitemap {
        margin-top: 1rem;
    }
    .footer-map {
        margin-top: 1rem;
    }
}

/* Footer sitemap styling */
.footer-sitemap {
    flex: 1 1 200px;
    font-size: 0.9rem;
}
.footer-sitemap .sitemap-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}
.footer-sitemap .sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-sitemap .sitemap-links li {
    margin-bottom: 0.3rem;
}
.footer-sitemap .sitemap-links a {
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-sitemap .sitemap-links a:hover {
    text-decoration: underline;
}

/* Footer map styling */
.footer-map {
    flex: 1 1 250px;
    font-size: 0.9rem;
}
.footer-map .map-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}
.footer-map iframe {
    width: 100%;
    height: 250px;
    border: 0;
    border-radius: var(--border-radius);
}

/* Home page Facebook feed section */
.home-facebook {
    margin-top: 2rem;
    background-color: var(--light-color);
    padding: 2rem 0;
}

/* Premium two-column layout (FB + useful content) */
.home-facebook-grid {
    border: 2px solid var(--primary-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.home-facebook-left {
    flex: 0 0 500px;
    max-width: 500px;
}

.home-facebook-left h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1.4rem;
    color: var(--secondary-color);
    text-align: left;
}

/* Keep FB plugin readable; FB supports width roughly 180..500px */
.home-facebook-left .fb-page,
.home-facebook-left .fb-page span,
.home-facebook-left .fb-page iframe {
    width: 100% !important;
}

.fb-fallback {
    margin: 0.6rem 0 0 0;
    text-align: left;
}
.fb-fallback a {
    color: var(--secondary-color);
    font-weight: 600;
}

.home-facebook-right {
    flex: 1 1 auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.home-facebook-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: left;
}

.home-facebook-card h3 {
    margin: 0 0 0.6rem 0;
    color: var(--secondary-color);
    font-size: 1.1rem;
}

.home-facebook-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.home-project-teaser {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.home-project-thumb {
    display: block;
    width: 110px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
}

.home-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-project-more {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--secondary-color);
    font-weight: 600;
}

@media (max-width: 900px) {
    .home-facebook-grid {
        flex-direction: column;
    }
    .home-facebook-left {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .home-project-thumb {
        width: 100px;
        height: 76px;
    }
}

.services-overview h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.service-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-list li {
    margin-bottom: 0.4rem;
    position: relative;
    padding-left: 1.2rem;
}

.service-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1;
}

@media (min-width: 768px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }
}

/* Facebook promo popup */
.popup-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 2000;
}

.popup-overlay.is-open {
    display: flex;
}

.popup-card {
    width: min(980px, 100%);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    position: relative;
}

.popup-media {
    background-size: cover;
    background-position: center;
    min-height: 220px;
}

.popup-body {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.popup-logo {
    width: min(220px, 70%);
    height: auto;
    margin: 0 auto;
    display: block;
}

.popup-body h3 {
    margin: 0;
    font-size: 1.25rem;
}

.popup-body p {
    margin: 0;
    color: #333;
}

.popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #1877F2;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
}

.popup-btn:hover {
    opacity: 0.95;
}

.popup-secondary {
    border: none;
    background: transparent;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.25rem;
}

.popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    cursor: pointer;
    font-size: 26px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 820px) {
    .popup-card {
        grid-template-columns: 1fr;
    }
    .popup-media {
        min-height: 180px;
    }
}

/* FAQ page styles */
.faq-page h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.faq-page .faq-list {
    margin-top: 1rem;
}
.faq-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
}
.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    outline: none;
    list-style: none;
    position: relative;
    padding-right: 1.2rem;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
}
.faq-item[open] summary::after {
    content: '−';
}
.faq-answer {
    margin-top: 0.5rem;
}

/* Home FAQ snippet */
.home-faq-snippet {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--background-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
}
.home-faq-snippet h3 {
    margin-bottom: 0.5rem;
}
.home-faq-snippet p {
    margin-bottom: 0.5rem;
}
.home-faq-snippet a.btn {
    margin-top: 0.5rem;
}

/* Home testimonials and FAQ preview sections */
/* Home testimonials styling */
/* Testimonials container on the home page */
.home-testimonials {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--background-color);
    /* surround with a subtle yellow border instead of a vertical stripe */
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* extra bottom padding to ensure button does not overlap content on small screens */
    padding-bottom: 1rem;
}
.home-testimonials h2 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}
/* Slider container with fixed height to prevent page reflow */
.home-testimonials .testimonials-slider {
    position: relative;
    /* Increase the minimum height so an extra line of text fits without overlapping the button */
    min-height: 260px;
}
/* Each testimonial uses absolute positioning and fades */
.home-testimonials .testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--light-color);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.home-testimonials .testimonial-slide.active {
    opacity: 1;
}
.home-testimonials .testimonial-stars {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.home-testimonials .testimonial-text {
    font-style: italic;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.home-testimonials .testimonial-author {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Ensure the "see all testimonials" button has space below the slider */
.home-testimonials > .btn {
    margin-top: 1rem;
    display: inline-block;
    /* Elevate the button above the slider to prevent text overlap on mobile */
    position: relative;
    z-index: 3;
}

/* FAQ preview collapsible items */
.home-faq-preview .faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
}
.home-faq-preview .faq-item:first-of-type {
    border-top: none;
}
.home-faq-preview .faq-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
    font-weight: 600;
    display: block;
}
.home-faq-preview .faq-item summary::-webkit-details-marker {
    display: none;
}
.home-faq-preview .faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    line-height: 1;
}
.home-faq-preview .faq-item[open] summary::after {
    content: '–';
}
.home-faq-preview .faq-item p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
}
.testimonials-prev,
.testimonials-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--light-color);
    cursor: pointer;
    font-size: 1.2rem;
    /* hide manual navigation arrows on the home page slider */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.testimonials-prev {
    left: -16px;
}
.testimonials-next {
    right: -16px;
}

/* FAQ preview container on the home page */
.home-faq-preview {
    margin-top: 2rem;
    background-color: var(--background-color);
    padding: 1rem;
    /* surround with a subtle yellow border instead of a left stripe */
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.home-faq-preview h2 {
    margin-bottom: 0.75rem;
}
.faq-preview-list {
    list-style: none;
    margin-bottom: 1rem;
}
.faq-preview-list li {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.home-faq-preview .btn {
    margin-top: 0.5rem;
}


/* Custom pages: admin-managed HTML + images */
.custom-page-content {
    /* Prevent long URLs from breaking the layout */
    overflow-wrap: anywhere;
}
.custom-page-content a {
    /* Make admin-inserted links look like links */
    text-decoration: underline;
    font-weight: 600;
}
.custom-page-content img,
.custom-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Extra safety on mobile so images never overflow */
@media (max-width: 768px) {
    .custom-page-content img,
    .custom-image img {
        width: 100%;
    }
}



/* FIX: quote units alignment – keep units away from service text */
.quote-table td:nth-child(2),
.quote-table th:nth-child(2) {
    text-align: right;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}

/* mobile safety */
@media (max-width: 768px) {
    .quote-table td:nth-child(2),
    .quote-table th:nth-child(2) {
        text-align: right;
        padding-left: 0.25rem;
        padding-right: 0.6rem;
    }
}
/* Google reviews section (Testimonials page) */
.google-reviews-section{
  margin: 18px 0 10px;
}
.google-reviews-section h2{
  margin: 10px 0 12px;
}
.google-review-screens{
  display: grid;
  gap: 14px;
  margin: 14px 0 8px;
}
.google-review-screens.one{
  grid-template-columns: 1fr;
}
.google-review-screens img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
}
.google-note{
  font-size: 14px;
  opacity: .8;
  margin-bottom: 12px;
}


/* === Google Reviews screenshots – FIX proporcji === */
.google-review-screens{
  display: flex;
  justify-content: center;
  align-items: center;
}

.google-review-screens img{
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  display: inline-block;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* mobile */
@media (max-width: 768px){
  .google-review-screens img{
    width: 100% !important;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------------
 * Custom overrides to fix navigation, buttons and background
 * These rules are appended after existing definitions to ensure they
 * override earlier styles with the same specificity.
 */

/* The earlier helper overrides for navigation layout and padding have
   been superseded by the unified grid rules above.  They are left
   commented out for reference. */
/*
 .main-nav a {
    padding: 0.85rem 1.2rem;
 }
 @media (min-width: 768px) {
    .main-nav ul li {
        flex: 1 1 auto;
    }
 }
*/

/* Override blog and quote menu link tiles to match the glass aesthetic used for other tiles */
.main-nav .blog-menu-link a.blog-link-anchor,
.main-nav .quote-menu-link a.quote-link-anchor {
    /* Use the same base styling as the other navigation tiles for blog and quote links */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    padding: 0.9rem 1.3rem;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* =======================================================================
 * January 2026 UI refinements
 *
 * These rules further tweak the navigation, buttons and CTAs based on user
 * feedback. They ensure that the navigation is centered on desktop, tiles
 * are slightly larger on mobile, and all general buttons adopt a solid
 * colour style similar to the home page call‑to‑action buttons. In addition
 * the hover state for CTAs uses a stronger yellow rather than turning
 * white. These overrides appear at the end of the stylesheet to ensure
 * higher priority in the cascade.
 */

/* Navigation: enlarge tiles and maintain two‑column grid on small screens */
@media (max-width: 768px) {
    /* Force grid layout even if earlier rules attempted to stack items */
    .main-nav ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* Reduce gaps between mobile tiles for a more compact layout */
        gap: 5px !important;
        /* Reset flex properties from older mobile overrides */
        flex-direction: initial !important;
        align-items: initial !important;
    }
    /* Mobile tile sizing: revert to earlier more compact size */
    .main-nav a {
        /* Decrease padding further to make tiles narrower */
        padding: 0.8rem 1.2rem !important;
        font-size: 0.95rem !important;
        min-height: 50px !important;
    }
}

/* Navigation: center logo and menu on larger screens and fine‑tune sizing */
@media (min-width: 768px) {
    /* Centre the entire header contents on desktop.  Stack the logo and
       navigation vertically and centre them horizontally. */
    header .header-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Centre the logo wrapper and add a bit of spacing below */
    .logo-wrapper {
        margin: 0 auto 0.5rem;
    }
    /* Make the navigation bar fill the available width and centre its contents */
    .main-nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /* Centre the navigation items within the ul */
    .main-nav ul {
        justify-content: center;
    }
    /* Reduce horizontal padding and font size slightly so long labels fit
       within a single row */
    .main-nav a {
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* --------------------------------------------------------------------------
 * Social and floating media icons
 *
 * Define consistent sizing for social icons in the top bar and for the
 * floating WhatsApp button. The images are scaled relative to the top bar
 * height and are displayed inline without text. The floating button is
 * fixed to the bottom right corner and grows slightly on hover for
 * desktop users. The Facebook "like" banner under the activity section
 * gets its own margins and maximum width so it scales responsively.
 */
.top-bar .top-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Increase spacing between icons by an additional 5px (total margin 16px) */
    margin-left: 16px;
}
.top-bar .top-social img {
    /* Further enlarge icons by 15% (32px total height) */
    height: 32px;
    width: auto;
    display: block;
}

/* Floating WhatsApp button */
.floating-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}
.floating-whatsapp a {
    display: block;
    /* Make floating WhatsApp button 30% larger */
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.floating-whatsapp a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
    .floating-whatsapp a:hover {
        transform: scale(1.07);
    }
}

/* Facebook like button below Facebook activity */
.fb-like-link {
    margin-top: 12px;
}
.fb-like-link img {
    /* Reduce like button image to 20% smaller */
    max-width: 184px;
    height: auto;
    display: inline-block;
}

/* Center the Facebook like button within the Facebook activity panel */
.home-facebook-left .fb-like-link {
    text-align: center;
}

/* Adjust Facebook activity heading: use a slightly smaller, tighter font and center align it */
.home-facebook-left h2 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Floating social media panel: vertical bar above the WhatsApp bubble */
.floating-social {
    position: fixed;
    right: 20px;
    bottom: 120px; /* place above the WhatsApp button (which sits at bottom: 20px) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9998;
}
.floating-social a {
    display: block;
    /* Make the panel icons 10% larger than before */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 3px 9px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}
.floating-social a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
    .floating-social a:hover {
        transform: scale(1.1);
    }
}

/* Adjust navigation tile heights once more: 
   - On mobile screens reduce min-height to 46px (4px less)
   - On desktop screens reduce min-height to 51px (3px less)
   and tweak padding accordingly. */
@media (max-width: 768px) {
    .main-nav a {
        padding: 0.75rem 1.1rem !important;
        font-size: 0.95rem !important;
        min-height: 46px !important;
    }
}
@media (min-width: 768px) {
    .main-nav a {
        /* Reduce desktop tile height by an additional 3px and adjust padding */
        min-height: 48px !important;
        padding-top: 0.50rem;
        padding-bottom: 0.50rem;
    }
}

/* General button styling: use solid colour with dark text, matching the
   existing call‑to‑action tiles. Previously we applied a glass effect to
   buttons (.btn); this override restores a solid background for better
   contrast on light backgrounds. */
/* Apply the same solid yellow styling to all standard buttons and call‑to‑action links. */
.btn,
.btn-outline,
.blog-link-btn,
.quote-link-btn,
.blog-read-more,
.btn-quote,
.btn.cta-btn {
    background: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.btn:hover,
.btn-outline:hover,
.blog-link-btn:hover,
.quote-link-btn:hover,
.blog-read-more:hover,
.btn-quote:hover,
.btn.cta-btn:hover {
    background-color: #e5b437;
    transform: scale(1.03);
}

.btn:active,
.btn-outline:active,
.blog-link-btn:active,
.quote-link-btn:active,
.blog-read-more:active,
.btn-quote:active,
.btn.cta-btn:active {
    transform: scale(0.97);
}

/* Call‑to‑action buttons on custom pages: stronger hover colour instead of
   turning white. Override the brightness filter from earlier definitions. */
.home-cta .cta-btn:hover {
    background-color: #e5b437;
    filter: none;
}

/* Ensure icons within blog and quote tiles use the accent colour and proper spacing */
.main-nav .blog-menu-link a.blog-link-anchor i,
.main-nav .quote-menu-link a.quote-link-anchor i {
    margin-right: 0.45rem;
    /* Increase icon size slightly to match the main tile icons */
    font-size: 1.45rem;
    color: var(--primary-color);
}

@media (hover: hover) and (pointer: fine) {
    .main-nav .blog-menu-link a.blog-link-anchor:hover,
    .main-nav .quote-menu-link a.quote-link-anchor:hover {
        transform: scale(1.03);
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
}
    .main-nav .blog-menu-link a.blog-link-anchor:active,
    .main-nav .quote-menu-link a.quote-link-anchor:active {
        transform: scale(0.97);
    }
    .main-nav .blog-menu-link a.blog-link-anchor.active,
    .main-nav .quote-menu-link a.quote-link-anchor.active {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        color: #fff;
    }

/* Removed legacy glass-style button overrides.  Buttons are now styled
   uniformly earlier in the stylesheet with a solid primary colour. */

/* The default background colour (#f9f9f9) defined at the top of the file
   is used for the entire site.  The warm beige override has been removed
   to restore the original white look. */
/*
:root {
    --background-color: #f7efe0;
}
body {
    background-color: var(--background-color);
}
*/

/* Remove the global !important overrides for the navigation tiles.
   The glass navigation styling is now defined by the base rules above. */
/*
.main-nav a {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}
.main-nav a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
.main-nav a.active {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
*/