@import 'https://fonts.googleapis.com/css?family=Raleway:700,regular,italic,700italic&display=swap';
@import 'https://fonts.googleapis.com/css?family=Mrs+Sheppards:regular&display=swap';

/*
 * Template DiCapuaPresepi
 * Copyright 2022 Salvatore Nastro & Raffaele De Martino
 * https://www.linkedin.com/in/raffaele-de-martino-informatico/
*/

.font-comic { font-family:'Comic Sans MS'; }
.font-raleway { font-family:'Raleway'; }
.font-sheppards { font-family:'Mrs Sheppards'; }
.font-arial { font-family:Arial; }
.color-white { color:white!important; }
.color-sand { color:#ff9900!important; }
.color-red { color:red!important; }

.btn-marine { color:#ff9900; background:#102d50; padding-left:10px; padding-right:10px; border-radius:15px; }
.btn-marine:hover { color:white; }
.pointer { cursor:pointer; }

header { height:150px; background:#360606; }
.header-logo { margin-top:15px; height:120px; }
.header-sider { height:150px; }
.header-container { height:150px; }
.header-titolo { height:80px; }
.header-titolo h2 { color:white; text-shadow:0px 0px 0px rgb(32 18 77), 1px 1px 0px rgb(30 16 75), 2px 2px 0px rgb(28 14 73), 3px 3px 0px rgb(26 12 71), 4px 4px 0px rgb(24 10 69), 5px 5px 0px rgb(22 8 67), 6px 6px 0px rgb(20 6 65), 7px 7px 0px rgb(18 4 63); }
.header-menu { height:70px; }
.header-menu nav li.nav-item { background:#102d50; }
.header-menu nav li.nav-item:first-child { padding-left:10px; border-radius:15px 0 0 15px; }
.header-menu nav li.nav-item:last-child { padding-right:10px; border-radius:0 15px 15px 0; }

main { min-height:calc(100vh - 150px); /*background:#ccc;*/ }

footer { color:white; background:#580a0a; }
footer a { color:#ff9900!important; font-size:10pt; line-height:20px; }
footer b { float:left; padding-right:10px; }
footer ul li.nav-link>a { color:#ff9900; }

.home-carousel .carousel-item { height:300px; }
.chi-siamo { color:#404040; font-size:14pt; line-height:28px; }
.login { font-size:14pt; }
.login input { padding:10px 15px; font-size:16pt; border-radius:25px; border:1px solid #ccc; }

.modal-header .close { font-size:2.5rem; }
.modal-content { min-height:80vh; }

#catalogo #menu li { list-style:none; padding:0; margin-bottom:-1px; background-color:#fff; border-bottom:1px solid rgba(0,0,0,.125); }
#catalogo #menu li div { padding:0.75rem 1.25rem; }
#catalogo #menu li a { color:#253a58; font-size:12pt; font-weight:bold; }
#catalogo #menu li.select>a { color:#3c78d8; }
#catalogo #menu li:hover { background:#d9d9d9; }
#catalogo #menu li:hover>a { color:#3c78d8; }
#catalogo #menu li>a:hover { text-decoration:none; }
#catalogo #menu li.sub div { padding-left:2.5rem; color:red; }

/* Terzo livello menu (raggruppamenti: Movimento -> CM 7/10/12) */
#catalogo #menu li.sub-title div{
	padding-left:2.5rem;
	font-weight:800;
	text-transform:uppercase;
	background:#f3f3f3;
}
#catalogo #menu li.sub-title2 div{
	padding-left:3.25rem;
	font-weight:800;
	background:#fafafa;
}
#catalogo #menu li.sub-item3 div{
	padding-left:4.25rem;
	color:red;
}

#catalogo #articoli input[type=number]::-webkit-inner-spin-button,
#catalogo #articoli input[type=number]::-webkit-outer-spin-button { opacity:1; width:30px; height:30px; }


/* Gruppi collassabili (Movimento CM 7/10/12) */
#catalogo #menu li.sub-cm{ list-style:none; }
#catalogo #menu button.cm-toggle{
	padding: .5rem 1rem;
	padding-left:3.25rem;
	font-weight:800;
	background:#fafafa;
	border:0;
	width:100%;
	text-align:left;
	cursor:pointer;
}
#catalogo #menu button.cm-toggle:focus{ outline: none; }
#catalogo #menu ul.cm-list{
	display:none;
	margin:0;
	padding:0;
}
#catalogo #menu ul.cm-list.open{ display:block; }
.cart-add-alert { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:100; background:#00000080; }
.cart-add-alert div { position:absolute; bottom:40vh; left:35vw; width:30vw; height:20vh; text-align:center; transition:bottom 300ms ease-in-out; }
.cart-add-alert p { font-size:20px; line-height:16vh; font-weight:bold; }

#articoli .catalogo-articoli>div>div { margin:0; border:1px solid #ccc; }
#articoli .catalogo-articoli>div>div:hover { border:1px solid #3c78d8; box-shadow:0 0 2px 1px #3c78d8; }
#articoli .articolo-image { height:200px; }
#articoli .articolo-price { line-height:32px; font-size:11pt; font-weight:normal; }
#articoli p { height:5.5rem; }
#articoli span { position:absolute; top:5px; left:5px; color:yellow; background:red; padding:2px 5px; border-radius:10px; }
#carrello tbody th, #carrello tbody td { vertical-align:middle; }
#carrello tbody img { width:auto; height:60px; }

/* --------------------
 * Mobile optimization
 * -------------------- */

/* Tablet and down */
@media (max-width: 991.98px) {
  header { height:auto; padding-bottom:10px; }
  .header-container, .header-sider { height:auto; }
  .header-logo { margin-top:10px; height:90px; }
  .header-titolo { height:auto; padding-top:5px; padding-bottom:5px; }
  .header-menu { height:auto; }

  /* Social icons: keep small and centered */
  .header-sider img { width:36px; height:36px; object-fit:contain; }

  /* Home carousel */
  .home-carousel .carousel-item { height:220px; }

  /* Catalog cards */
  #articoli .articolo-image { height:170px; }
  #articoli p { height:auto; min-height:0; }

  /* Modal */
  .modal-content { min-height:auto; }
}

/* Phone */
@media (max-width: 575.98px) {
  header { padding-top:10px; }
  .header-logo { height:75px; }
  .header-titolo h2 { font-size:22px; }

  /* Cart: make table scrollable on small screens */
  #carrello table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #carrello thead, #carrello tbody, #carrello tr { white-space:nowrap; }
  #carrello tbody img { height:48px; }

  /* Add-to-cart alert */
  .cart-add-alert div { left:10vw; width:80vw; height:auto; }
  .cart-add-alert p { font-size:18px; line-height:1.3; padding:18px 10px; }

  footer a { font-size:11pt; }
}



/* ===== MOBILE: Carrello - scroll orizzontale + barra indicatore ===== */
@media (max-width: 768px) {
  /* evita che la pagina scorra orizzontalmente: lo scroll è solo nella tabella */
  #carrello { overflow-x: hidden; }

  #carrello .cart-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; /* spazio per la barra */
  }

  /* Mantiene una larghezza minima così appare lo scroll quando serve */
  #carrello .cart-table-scroll table{
    min-width: 720px;
  }

  /* Barra indicatore (tipo "scroll hint") */
  #carrello .cart-scroll-hint{
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #ffffff;
    padding: 8px 16px 10px 16px;
    margin-top: -8px;
  }
  #carrello .cart-scroll-track{
    width: 100%;
    height: 6px;
    background: #d9d9d9;
    border-radius: 999px;
    overflow: hidden;
  }
  #carrello .cart-scroll-thumb{
    height: 6px;
    background: #102d50;
    border-radius: 999px;
    width: 40px;
    transform: translateX(0);
    transition: transform 80ms linear;
  }
}

/* ===============================
   CATEGORIA ATTIVA (SOTTOLINEATA)
   =============================== */

.menu-link.active,
.menu-title.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

/* quando una sottocategoria è attiva,
   evidenzia anche il gruppo CM */
.menu-group.active-parent > .menu-title {
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

/* Sottolinea la categoria selezionata nel catalogo */
#catalogo #menu li.select > a{
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Sottolinea il gruppo CM aperto/selezionato (se ha classe .active) */
#catalogo #menu button.cm-toggle.active{
  text-decoration: underline !important;
  text-underline-offset: 4px;
}