/* =====================================================================
   Responsive fixes only — the theme colours are NOT changed here.
   ===================================================================== */

/* Career: privacy checkbox was 100% wide → horizontal scroll */
.formbold-checkbox { position: relative; }
.formbold-checkbox input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}

/* Header: menu must not wrap on laptops */
.mainmenu-nav .mainmenu > li > a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .mainmenu-nav .mainmenu > li > a { padding: 13px 11px; font-size: 15px; }
}
.header-right .rainbow-gradient-btn { white-space: nowrap; }

/* Products mega menu was 900px wide and stuck off-screen → aligned to the header */
@media (min-width: 1200px) {
    .rainbow-header .mainmenu .mega-menu { position: static; }
    .rainbow-header .mainmenu .mega-menu .submenu {
        right: 12px;
        left: auto;
        width: min(900px, calc(100vw - 40px));
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .rainbow-header .mainmenu .mega-menu .submenu { grid-template-columns: repeat(3, 1fr); }
}

/* General safety: nothing wider than the screen */
img { max-width: 100%; height: auto; }
table, iframe, video { max-width: 100%; }
@media (max-width: 767.98px) {
    .table-responsive-sm, .cs-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   Full-device pass (phones 320px → 4K): readable text + finger-friendly targets
   ===================================================================== */

/* Bootstrap sizes use rem, and this theme makes 1rem = 10px → buttons/pagination were 10–11px */
.btn { --bs-btn-font-size: 15px; }
.pagination { --bs-pagination-font-size: 15px; }
.dropdown-menu { --bs-dropdown-font-size: 15px; }

/* Header top bar: phone / WhatsApp / social icons were 9–16px tall tap areas */
.header-top-news a.text-white { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.header-top-news .social-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin-left: 2px !important; margin-right: 2px !important; }
.header-top-news #languageSelect { min-height: 32px; }

/* Footer links: give every link a 32px-high tap area */
.rainbow-footer .rainbow-footer-widget ul li a,
.rainbow-footer .rainbow-footer-widget ul li .cc-link { display: inline-flex; align-items: center; min-height: 32px; }
.rainbow-footer .rainbow-footer-widget ul li { margin-top: 0; margin-bottom: 2px; }

/* Slider arrows/dots (reviews, blog): inside the screen and big enough to tap */
.slick-dots li button { min-width: 24px; min-height: 24px; }
.review-slider .slick-prev, .review-slider .slick-next { width: 32px; height: 32px; z-index: 2; }
@media (max-width: 767.98px) {
    .review-slider .slick-prev { left: 0; }
    .review-slider .slick-next { right: 0; }
}

/* Bootstrap carousel dots (product page sliders): 24px tall tap area, same look */
.carousel-indicators [data-bs-target] { border-top-width: 11px; border-bottom-width: 11px; }

/* Checkboxes (partner / career / login forms) */
.checkbox-group input[type="checkbox"],
.form-check-input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; }

/* Long words / URLs never push the page sideways */
h1, h2, h3, h4, h5, h6, p, li, td, th, a { overflow-wrap: break-word; }

/* Very small phones (320–359px) */
@media (max-width: 359.98px) {
    .rainbow-gradient-btn, .btn-default { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Phones in landscape: the full-screen hero must not hide the whole page */
@media (max-height: 500px) and (orientation: landscape) {
    .cc-banner--bottom .cc-banner__inner { padding-top: 10px; padding-bottom: 10px; }
    .cc-banner__msg { font-size: 13px; }
}

/* Large screens (2K / 4K): keep text lines readable */
@media (min-width: 1920px) {
    .cs-content .container, .cookie-page .container { max-width: 1320px; }
}

/* Logo links: the clickable box matches the logo image */
.logo a, .header-left .logo a { display: inline-block; }