@charset “UTF-8”;
/* ============================================================================
FOB2 INTERNATIONAL - CSS UNIFICATO COMPLETO v2

VERSIONE: 2.0 - Con fix integrati

MODIFICHE RISPETTO A v1:
✓ Fix header mobile: altezza adattata al logo (no spazi turchesi)
✓ Fix scritte carousel: sfondo turchese leggibile
✓ Fix bandiere: posizionate per non sovrapporsi ad hamburger
✓ Ottimizzazioni mobile portrait/landscape

SOSTITUISCE:

- style.css, patch.css, mobile-style.css (vecchi)
- styleunificato.css v1 (se presente)

LAYOUT MENU - OPZIONE B:

- Desktop (>1024px): Menu orizzontale classico
- Tablet/Mobile (<1024px): Hamburger menu
  ============================================================================ */

/* ============================================================================

1. RESET E FONDAMENTA
   ============================================================================ */

html {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}

body {
overflow-x: hidden;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 11pt;
font-weight: 400;
color: #3A2821;
background-color: #FFF;
-webkit-font-smoothing: antialiased;
}

td, th {
font-family: Helvetica, Arial, sans-serif;
font-size: 11pt;
font-weight: 400;
color: #3A2821;
-webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
box-sizing: border-box;
}

a:link {
color: #352C28;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #352C28;
}

a:hover {
text-decoration: none;
color: #352C28;
}

a:active {
text-decoration: none;
color: #352C28;
}

/* ============================================================================
2. CLASSI UTILITY E LEGACY
============================================================================ */

#clickable {
display: block;
width: 100%;
height: 100%;
}

#slides {
display: none;
}

/* ============================================================================
3. LAYOUT PRINCIPALE - HEADER
============================================================================ */

#header {
position: relative;
width: 100%;
height: 140px;
top: 0;
left: 0;
background: #20B2AB;
z-index: 1000;
}

#header2 {
top: 0;
width: 100%;
height: auto;
background: #20B2AB;
}

#header_content {
position: relative;
width: 960px;
height: 140px;
margin: 0 auto;
background: #20B2AB;
display: flex;
justify-content: space-between;
align-items: center;
}

#logo {
float: left;
width: 150px;
height: 140px;
z-index: 1003;
background: url(../img/_generic/logoFOB2international.jpg);
}

#logo img {
width: 400px;
height: 140px;
}

/* ============================================================================
4. MENU DESKTOP - Visibile solo >1024px
============================================================================ */

#menu {
float: left;
width: 350px;
height: 15px;
margin-left: 400px;
margin-top: 101px;
font-size: 9.5pt;
display: flex;
align-items: center;
}

#menu a {
color: #FFF;
}

.menu_item {
float: left;
position: relative;
padding-left: 8px;
padding-right: 8px;
border-right: #94867E 1px solid;
}

.menu_item_last {
float: left;
padding-left: 10px;
padding-right: 10px;
}

#menu_selected a {
color: #94867E;
}

#lang {
position: absolute;
width: 300px;
height: 20px;
top: 20px;
right: 0px;
text-align: right;
font-size: 10pt;
color: #94867E;
}

#lang a {
color: #FFF;
}

/* ============================================================================
5. HAMBURGER MENU - Visibile <1024px
============================================================================ */

.hamburger-btn {
display: none;
flex-direction: column;
background: none;
border: none;
padding: 10px;
cursor: pointer;
gap: 4px;
margin: 0 15px 0 0;
z-index: 9999;
}

.hamburger-btn span {
display: block;
width: 25px;
height: 3px;
background-color: #FFF;
transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(7px, 7px);
}

.hamburger-btn.active span:nth-child(2) {
opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}

.menu-line {
width: 30px;
height: 2px;
background-color: #333;
margin-bottom: 8px;
}

#menuToggle {
font-size: 26px;
color: #000;
cursor: pointer;
margin-left: 10px;
}

/* ============================================================================
6. DROPDOWN MENU
============================================================================ */

#dropdownMenu {
display: none;
position: fixed;
top: 90px;
right: 10px;
width: 280px;
background-color: #20B2AB;
padding: 15px 0;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 9998;
}

#dropdownMenu.show {
display: block;
}

#dropdownMenu ul {
list-style: none;
padding: 0;
margin: 0;
}

#dropdownMenu li {
padding: 12px 20px;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
}

#dropdownMenu li:last-child {
border-bottom: none;
}

#dropdownMenu li:hover {
background-color: rgba(0, 0, 0, 0.1);
}

#dropdownMenu a {
text-decoration: none;
color: #FFF;
display: block;
font-weight: 500;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
}

.language-menu {
position: absolute;
top: 100%;
right: 0;
background-color: #20B2AB;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
align-items: center;
}

/* ============================================================================
7. BANDIERE SELEZIONE LINGUA
============================================================================ */

.language-container {
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
z-index: 10001;
}

.language-icon {
margin-right: 10px;
}

.language-icon img {
width: 30px;
height: auto;
border-radius: 0;
cursor: pointer;
transition: transform 0.2s ease;
}

.language-icon img:hover {
transform: scale(1.1);
}

/* ============================================================================
8. CONTAINER PRINCIPALE CONTENUTI
============================================================================ */

#container {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

#main_text_box {
position: relative;
clear: both;
width: 960px;
max-width: 100%;
height: auto;
margin-top: 5px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
text-align: left;
line-height: 20px;
font-size: 11pt;
-webkit-font-smoothing: antialiased;
}

/* ============================================================================
9. CAROUSEL IMMAGINI PRODOTTI
============================================================================ */

#img_container {
position: relative;
clear: both;
width: 960px;
max-width: 100%;
height: 400px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}

.carousel-item {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
margin: 10px;
}

.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
}

/* SCRITTE CAROUSEL CON SFONDO LEGGIBILE - FIX INTEGRATO */
#button_products {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: auto;
max-width: 90%;
height: auto;
padding: 12px 25px;

/* Sfondo turchese semi-trasparente per leggibilità */
background: rgba(32, 178, 171, 0.85);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

font-size: 16pt;
color: #FFF;
text-align: center;
font-weight: bold;
line-height: 1.3;

z-index: 15;
```

}

#button_products a {
color: #FFF;
}

#img_shadow {
position: relative;
clear: both;
width: 960px;
max-width: 100%;
height: 40px;
margin: 0 auto;
background: url(../img/_generic/img_shadow.jpg) no-repeat center;
background-size: contain;
}

/* ============================================================================
10. CERCHI PRODOTTI INTERATTIVI
============================================================================ */

.circle-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
width: 100%;
height: auto;
}

.circle {
border: 3px solid transparent;
border-radius: 50%;
width: 468px;
height: 468px;
background-color: rgba(70, 70, 70, 0.3);
color: #fff;
text-align: center;
font-size: 16px;
cursor: pointer;
margin: 10px;
transition: border-color 0.3s ease;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.circle:hover {
border-color: #00FFFF;
}

.circle-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.circle-text {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
color: white;
font-size: 14px;
opacity: 1;
}

/* ============================================================================
11. POPUP DESCRIZIONI PRODOTTI
============================================================================ */

#popup {
display: none;
position: absolute;
background-color: white;
border: 2px solid #20B2AB;
border-radius: 10px;
padding: 20px;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 10000;
font-size: 14pt;
line-height: 1.6;
cursor: pointer;
transition: opacity 0.3s ease;
text-align: center;
}

/* ============================================================================
12. VIDEO RESPONSIVE
============================================================================ */

.video-responsive {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-height: 600px;
}

.video-responsive iframe,
.video-responsive video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
background-color: transparent;
}

.video-responsive.vertical {
padding-bottom: 75%;
max-height: 700px;
max-width: 500px;
margin: 0 auto;
}

/* ============================================================================
13. WHATSAPP ICON FISSO
============================================================================ */

.whatsapp-icon {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9000;
}

.whatsapp-icon img {
border-radius: 50%;
width: 120px;
height: 120px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.whatsapp-icon img:hover {
transform: scale(1.05);
}

/* ============================================================================
14. FOOTER
============================================================================ */

#footer-container {
width: 100%;
margin: 0 auto;
}

#footer {
bottom: 0;
width: auto;
height: auto;
padding: 20px;
font-size: 14pt;
background: #20B2AB;
text-align: center;
color: #FFF;
z-index: 1;
}

/* ============================================================================
15. THUMBS CONTAINER
============================================================================ */

#thumbs_container {
position: relative;
clear: both;
width: 960px;
max-width: 100%;
height: 150px;
margin: 0 auto;
}

.thumb {
float: left;
width: 300px;
height: 150px;
margin-right: 30px;
background: url(../img/_generic/thumb_shadow.jpg) no-repeat bottom;
}

/* ============================================================================
16. PAGINA CONTATTI
============================================================================ */

.contatti_titolo {
font-size: 18pt;
}

.contatti_linea {
clear: both;
width: 100%;
height: 1px;
border-bottom: 1px dotted #999;
margin-bottom: 10px;
}

/* ============================================================================
17. LAYOUT COLONNE
============================================================================ */

#contenitore {
display: table;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
}

#colrow {
display: table-row;
height: 100%;
}

#colsx {
display: table-cell;
float: left;
width: 50%;
height: 100%;
}

#coldx {
display: table-cell;
float: right;
width: 50%;
height: 100%;
}

/* ============================================================================
18. RESPONSIVE DESKTOP (>1024px)
============================================================================ */

@media screen and (min-width: 1025px) {

#menu {
    display: flex !important;
}

.hamburger-btn {
    display: none !important;
}

#dropdownMenu {
    top: 150px;
    right: 20px;
}

}

/* ============================================================================
19. RESPONSIVE TABLET (769px - 1024px)
============================================================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {

#header_content {
    width: 95%;
    max-width: 960px;
    padding: 0 20px;
}

#logo {
    width: 140px;
}

#logo img {
    max-width: 350px;
    height: auto;
}

#menu {
    display: none !important;
}

.hamburger-btn {
    display: flex !important;
}

#img_container,
#main_text_box,
#thumbs_container {
    width: 95%;
    max-width: 960px;
}

#img_container,
.carousel-item {
    height: 350px;
}

.circle {
    width: 350px;
    height: 350px;
}

.circle-text span {
    font-size: 22pt !important;
}

}

/* ============================================================================
20. RESPONSIVE MOBILE (<768px) - CON FIX HEADER E MENU INTEGRATO
============================================================================ */

@media screen and (max-width: 768px) {

/* HEADER MOBILE - FIX: Altezza adattata al logo (no spazi) */
#header {
    height: auto;
    min-height: auto;
}

#header_content {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 8px 15px;
    flex-wrap: nowrap;
}

#logo {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    float: left;
    background: none;
    background-image: none;
    padding: 5px 0;
}

#logo img {
    max-width: 120px;
    width: auto;
    height: auto;
    display: block;
}

#menu {
    display: none !important;
}

.hamburger-btn {
    display: flex !important;
    align-self: center;
    margin: 0 0 0 auto;
    padding: 5px;
}

/* DROPDOWN MENU MOBILE - FIX: Sempre visibile quando aperto */
#dropdownMenu {
    position: fixed !important;
    top: 10px !important;  /* Molto in alto per essere sempre visibile */
    left: 50% !important;
    transform: translateX(-50%) !important;  /* Centra orizzontalmente */
    right: auto !important;
    width: 90% !important;
    max-width: 320px !important;
    z-index: 99999 !important;  /* Sopra tutto */
    margin-top: 0 !important;
}

/* CONTENUTI MOBILE */
#main_text_box,
#img_container,
#img_shadow,
#thumbs_container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
}

#img_container {
    height: 250px;
    margin: 10px auto;
}

.carousel-item {
    height: 250px;
    margin: 0;
}

/* SCRITTE CAROUSEL MOBILE - FIX INTEGRATO */
#button_products {
    font-size: 14pt;
    padding: 10px 20px;
    bottom: 15px;
    max-width: 85%;
}

.circle-container {
    width: 95%;
    padding: 20px 10px;
    margin: 0 auto;
}

.circle {
    width: 280px;
    height: 280px;
    margin: 10px 5px;
}

.circle-text {
    bottom: 5px;
}

.circle-text span {
    font-size: 20pt !important;
}

#popup {
    max-width: 90%;
    width: 90%;
    left: 5% !important;
    right: 5% !important;
    font-size: 12pt;
    padding: 15px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

.video-responsive,
.video-responsive.vertical {
    max-height: 400px;
    padding-bottom: 75%;
    max-width: 100%;
}

/* BANDIERE MOBILE - FIX: Non si sovrappongono ad hamburger */
.language-container {
    top: 8px;
    right: 60px;
    gap: 8px;
}

.language-icon img {
    width: 24px;
}

.whatsapp-icon {
    bottom: 20px;
    right: 20px;
}

.whatsapp-icon img {
    width: 80px;
    height: 80px;
}

#footer {
    font-size: 12pt;
    padding: 15px 10px;
}

#main_text_box {
    width: 95%;
    margin: 18px auto;
    text-align: left;
}

#main_text_box span {
    font-size: 16pt;
}

}

/* ============================================================================
21. RESPONSIVE SMARTPHONE PICCOLI (<480px) - FIX MENU VERTICALE
============================================================================ */

@media screen and (max-width: 480px) {

#header_content {
    padding: 6px 10px;
}

#logo {
    padding: 3px 0;
}

#logo img {
    max-width: 100px;
}

.hamburger-btn {
    margin: 0 0 0 auto;
    padding: 3px;
}

.hamburger-btn span {
    width: 22px;
    height: 2px;
}

/* DROPDOWN MENU PICCOLI - FIX CRITICO: Centrato e sempre visibile */
#dropdownMenu {
    position: fixed !important;
    top: 15px !important;  /* Molto in alto */
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 85% !important;
    max-width: 280px !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;  /* Ombra forte */
}

#img_container,
.carousel-item {
    height: 220px;
}

#button_products {
    font-size: 12pt;
    padding: 8px 15px;
    bottom: 10px;
}

.circle {
    width: 240px;
    height: 240px;
}

.circle-text span {
    font-size: 18pt !important;
}

.language-container {
    top: 6px;
    right: 55px;
}

.language-icon img {
    width: 22px;
}

.whatsapp-icon img {
    width: 70px;
    height: 70px;
}

}

/* ============================================================================
22. RESPONSIVE SMARTPHONE LANDSCAPE
============================================================================ */

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {

/* Header compatto in landscape */
#header_content {
    padding: 5px 15px;
}

#logo {
    padding: 3px 0;
}

#logo img {
    max-width: 100px;
}

#img_container,
.carousel-item {
    height: 280px;
}

.circle {
    width: 300px;
    height: 300px;
}

#main_text_box {
    width: 90%;
}

}

/* ============================================================================
23. FIX SAFARI iOS
============================================================================ */

@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 768px) {

    body {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    .rslides li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .video-responsive iframe,
    .video-responsive video {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

}

/* ============================================================================
FINE CSS UNIFICATO FOB2 v2.0

MODIFICHE v2.0:
✓ Fix header mobile: altezza si adatta al logo (no spazi turchesi sotto)
✓ Fix scritte carousel: sfondo turchese semi-trasparente leggibile
✓ Fix bandiere: posizionate per non sovrapporsi ad hamburger
✓ Ottimizzazioni carousel altezza mobile

COME USARE:

1. Salva come: style/styleunificato.css
1. Sostituisci il file esistente sul server
1. Ricarica sito con CTRL+F5

COMPATIBILITÀ:
✓ Desktop >1024px: Menu classico
✓ Tablet 769-1024px: Hamburger menu
✓ Mobile <768px: Hamburger menu + header compatto
✓ Tutte le funzionalità preservate
============================================================================ */