/* pizzeria-shop.css  –  FULL REWRITE
   Colour scheme: White / Orange / Black
   Last update: 30 Aug 2025
*/

/* =========================================================
   ROOT THEME COLORS (for easy tweaks)
   ========================================================= */
:root{
  --pz-black:#000000;
  --pz-white:#ffffff;
  --pz-grey:#f4f4f4;
  --pz-border:#ccc;
  --pz-orange:#ff7a00; /* main accent (formerly yellow) */
}

/* =========================================================
   GLOBAL WRAPPER + WATERMARK BACKGROUND
   ========================================================= */
.pizzeria-shop-wrapper{
  width:100%;
  max-width:2000px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:sans-serif;
  background:var(--pz-white);
  color:var(--pz-black);
  position:relative; /* needed for watermark layer */
  overflow-x:hidden;
}
/* Watermark layer: tiled logo with soft transparency */
.pizzeria-shop-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("http://450gradi.com/wp-content/uploads/2025/08/Logo-lato-cuore-2.png");
  background-repeat:repeat;
  background-position:0 0;
  background-size:220px auto; /* adjust tile density here */
  opacity:0.08;               /* transparency of the watermark */
  z-index:0;
  pointer-events:none;
}
/* Ensure all content sits above the watermark */
.pizzeria-shop-wrapper > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   CATEGORY BAR
   ========================================================= */
.pizzeria-categories-scroll{
  display:flex;
  overflow-x:auto;
  padding:10px;
  background:var(--pz-white);
  border-bottom:2px solid var(--pz-orange);
  min-height:90px;
}

.pizzeria-cat-item{
  min-width:120px;
  margin-right:15px;
  text-align:center;
  cursor:pointer;
  border-radius:8px;
  border:2px solid transparent;
  padding:6px;
  background:var(--pz-white);
  transition:border-color .3s, box-shadow .3s;
  position:relative;
}
.pizzeria-cat-item:hover{
  border-color:var(--pz-orange);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.pizzeria-cat-imgwrap{
  width:60px;height:60px;
  margin:0 auto 4px;
  overflow:hidden;
  border-radius:50%;
  background:var(--pz-grey);
}
.pizzeria-cat-imgwrap img{
  width:100%;height:100%;object-fit:cover;
}

.pizzeria-cat-name{font-size:.85rem;color:var(--pz-black);}

.pizzeria-cat-item.active{
  border-color:var(--pz-orange);
}
.pizzeria-cat-item.active::after{
  content:"";
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:70%;height:3px;
  background:var(--pz-orange);
  border-radius:2px;
}

/* =========================================================
   PRODUCT GRID & CARDS
   ========================================================= */
.pizzeria-products-grid{
  flex:1;
  padding:15px 15px 120px; /* space for footer */
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-gap:12px;
}

.pizzeria-product-card,
.pizzeria-bundle-card{
  position:relative;
  background:var(--pz-white);
  border:2px solid var(--pz-orange);
  border-radius:12px;
  padding:8px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  color:var(--pz-black);
  transition:transform .15s;
}
.pizzeria-product-card:hover,
.pizzeria-bundle-card:hover{
  transform:translateY(-3px);
}

.pizzeria-info-icon{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--pz-orange);
  color:var(--pz-black);
  font-size:.8rem;line-height:22px;
  cursor:pointer;text-align:center;
  user-select:none;
}

.pizzeria-prod-imgwrap,
.pizzeria-bundle-imgwrap{
  width:100%;height:130px;overflow:hidden;
  margin-bottom:6px;border-radius:10px;
  background:var(--pz-grey);
}
.pizzeria-prod-imgwrap img,
.pizzeria-bundle-imgwrap img{
  width:100%;height:100%;object-fit:cover;
}

.pizzeria-prod-name{
  font-size:.9rem;font-weight:bold;
  margin:4px 0;min-height:30px;
}
.pizzeria-prod-price{
  color:var(--pz-black);font-weight:bold;margin-bottom:4px;
}

/* =========================================================
   FOOTER CART PREVIEW (STANDARD MODE)
   ========================================================= */
.pizzeria-cart-preview{
  position:fixed;left:0;bottom:0;width:100%;z-index:999;
  background:var(--pz-black);
  color:var(--pz-orange);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px;
}
.pizzeria-cart-icon{font-size:1.2rem;margin-left:15px;}
.pizzeria-cart-count{
  background:var(--pz-orange);color:var(--pz-black);border-radius:50%;
  padding:3px 7px;font-size:.8rem;margin-left:6px;
}
.pizzeria-cart-total{font-size:1.1rem;font-weight:bold;margin-right:15px;}
.pizzeria-cart-button{
  background:var(--pz-orange);color:var(--pz-black);
  border:none;border-radius:20px;
  font-size:.9rem;padding:8px 16px;margin-right:15px;
  cursor:pointer;transition:opacity .2s;
}
.pizzeria-cart-button:hover{opacity:.85;}

/* =========================================================
   PRODUCT MODAL
   ========================================================= */
.pizzeria-prod-modal-overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,.8);display:none;z-index:10000;
  align-items:center;justify-content:center;
}
.pizzeria-prod-modal-content{
  background:var(--pz-white);color:var(--pz-black);
  max-width:600px;width:90%;
  border-radius:10px;padding:20px;position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.pizzeria-prod-modal-close{
  position:absolute;top:10px;right:10px;
  font-size:1.2rem;font-weight:bold;
  cursor:pointer;background:none;border:none;color:var(--pz-black);
}

/* =========================================================
   BUNDLE GRID (CATEGORY 28)
   ========================================================= */
.pizzeria-bundle-grid{display:grid;grid-template-columns:1fr;grid-gap:12px;}

/* =========================================================
   CASSIERA MODE LAYOUT
   ========================================================= */
.pizzeria-cassiera-mode{
  display:flex;flex-direction:row;gap:20px;
  margin:0 auto;max-width:1200px;padding:10px 15px;box-sizing:border-box;
}

/* right side – shop */
.pizzeria-shop-right{
  order:1;flex:0 0 65%;
  max-height:calc(100vh - 60px);overflow-y:auto;
  background:var(--pz-white);
  border:2px solid var(--pz-orange);
  border-radius:12px;
  padding:15px;box-sizing:border-box;
}

/* left side – cart & checkout */
.pizzeria-cassiera-left{
  order:2;flex:0 0 35%;
  max-height:calc(100vh - 60px);overflow-y:auto;
  background:#f9f9f9;
  border:2px solid var(--pz-orange);
  border-radius:12px;
  padding:15px;box-sizing:border-box;
}

.pizzeria-cassiera-left .pizzeria-btn-top{
  border:none;border-radius:6px;
  padding:10px 16px;margin-right:5px;cursor:pointer;
  font-weight:600;font-size:.95rem;
  color:var(--pz-black);
  background:var(--pz-orange);
  transition:opacity .2s;
}
.pizzeria-cassiera-left .pizzeria-btn-top:hover{opacity:.85;}

/* colours for specific buttons */
.pizzeria-btn-green{background:var(--pz-orange) !important;}
.pizzeria-btn-orange{background:var(--pz-orange) !important;}
.pizzeria-btn-blue{background:var(--pz-orange) !important;}
.pizzeria-btn-red{background:var(--pz-orange) !important;}

.pizzeria-cassiera-left h2{margin:0 0 10px;font-size:1.3rem;color:var(--pz-black);}
.pizzeria-cassiera-cart-box{
  background:var(--pz-white);
  border:2px solid var(--pz-orange);
  border-radius:10px;
}
.pizzeria-cassiera-cart-box h2{
  background:#f9f9f9;padding:12px;margin:0;border-bottom:2px solid var(--pz-orange);
}

.pizzeria-cassiera-left label{font-weight:600;display:inline-block;margin-bottom:5px;}
.pizzeria-cassiera-left input[type="text"],
.pizzeria-cassiera-left select{
  width:100%;padding:8px;box-sizing:border-box;
  margin-top:3px;margin-bottom:10px;
  border:1px solid var(--pz-border);border-radius:4px;background:var(--pz-white);color:var(--pz-black);
}

.pizzeria-delivery-btn,
.pizzeria-payment-btn{
  background:var(--pz-white);color:var(--pz-black);
  border:2px solid var(--pz-orange);
  padding:10px 14px;margin-right:5px;cursor:pointer;
  border-radius:6px;font-weight:600;font-size:.9rem;
  transition:background .2s, color .2s;
}
.pizzeria-delivery-btn.active,
.pizzeria-payment-btn.active{
  background:var(--pz-orange);color:var(--pz-black);
}

#pizzeria-cassiera-confirm-btn{
  background:var(--pz-orange);color:var(--pz-black);
  font-weight:700;border-radius:6px;
  padding:10px 16px;cursor:pointer;font-size:1rem;
  transition:opacity .2s;border:none;
}
#pizzeria-cassiera-confirm-btn:hover{opacity:.85;}

#pizzeria-cassiera-cart-list{
  max-height:300px;overflow-y:auto;padding:10px;
}
#pizzeria-cassiera-cart-list > div{
  padding:10px 0;border-bottom:1px solid #eee;
}
#pizzeria-cassiera-cart-list button{
  background:var(--pz-orange);border:none;border-radius:4px;
  padding:6px 8px;margin-left:5px;
  cursor:pointer;font-size:.85rem;color:var(--pz-black);
}

/* =========================================================
   MODALS (GENERAL)
   ========================================================= */
.pizzeria-modal,
.pizzeria-prod-modal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999;
}

.pizzeria-modal-content{
  background:var(--pz-white);color:var(--pz-black);
  padding:30px;border-radius:12px;
  width:95%;max-width:700px;max-height:90%;
  overflow-y:auto;position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.pizzeria-modal-large .pizzeria-modal-content{
  width:90%!important;height:90%!important;border-radius:0!important;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 50px;
}
.pizzeria-modal-close,
.pizzeria-prod-modal-close{
  position:absolute;top:15px;right:15px;
  font-size:1.3rem;font-weight:bold;background:none;border:none;
  cursor:pointer;color:var(--pz-black);
}

.pizzeria-modal-content h2,
.pizzeria-modal-content h3,
.pizzeria-prod-modal-content h2{
  margin-top:0;margin-bottom:20px;font-size:1.3rem;color:var(--pz-black);
}

/* =========================================================
   SLOT SELECTION TWO-COLUMN LAYOUT
   ========================================================= */
.pizzeria-slot-two-cols{display:flex;gap:40px;width:100%;max-width:1400px;margin-top:20px;}
.pizzeria-slot-col{flex:1;display:flex;flex-direction:column;align-items:center;}
.pizzeria-slot-col h3{font-size:1.5rem;font-weight:bold;margin-bottom:15px;}

.pizzeria-slot-buttons button{
  display:block;width:100%;margin:10px 0;padding:14px 18px;
  border-radius:8px;border:2px solid var(--pz-orange);
  font-size:1.1rem;cursor:pointer;
  background:var(--pz-white);color:var(--pz-black);
  transition:background .2s, color .2s;
}
.pizzeria-slot-buttons button:hover{
  background:var(--pz-orange);color:var(--pz-black);
}

.pizzeria-slot-buttons button.pizzeria-slot-full{
  background:#eee;border-color:#bbb;color:#888;cursor:not-allowed;opacity:.8;
}
.pizzeria-slot-available{}

/* =========================================================
   TEST STEP, TURN BUTTONS
   ========================================================= */
#pizzeria-cassiera-test-step1 label{font-size:1.2rem;font-weight:bold;margin-bottom:8px;}
#pizzeria-cassiera-test-step1 select{
  font-size:1.2rem;padding:10px 14px;border-radius:6px;
  border:1px solid var(--pz-border);margin-right:10px;background:var(--pz-white);color:var(--pz-black);
}
#pizzeria-cassiera-test-step1 button{
  font-size:1.2rem;padding:10px 16px;border-radius:6px;border:none;
  cursor:pointer;background:var(--pz-orange);color:var(--pz-black);font-weight:600;
  transition:opacity .2s;
}
#pizzeria-cassiera-test-step1 button:hover{opacity:.85;}

.pizzeria-turn-btn{
  display:inline-block;margin:5px;padding:10px 14px;border:2px solid var(--pz-orange);
  background:var(--pz-white);cursor:pointer;border-radius:6px;font-size:.9rem;color:var(--pz-black);
  transition:background .2s, color .2s;
}
.pizzeria-turn-btn:hover{background:var(--pz-orange);color:var(--pz-black);}
.pizzeria-turn-btn.active{background:var(--pz-orange);color:var(--pz-black);}

/* =========================================================
   RESPONSIVE – FORCE FULL-WIDTH DESKTOP
   ========================================================= */
@media(min-width:1024px){
  .pizzeria-shop-wrapper,
  .pizzeria-cassiera-mode{
    max-width:none!important;margin-left:0!important;margin-right:0!important;
  }
}

/* =========================================================
   CASSIERA: IMAGELESS CARDS & CATS
   ========================================================= */
.pizzeria-cassiera-mode .pizzeria-products-grid .pizzeria-prod-imgwrap{display:none!important;}
.pizzeria-cassiera-mode .pizzeria-product-card{min-height:auto!important;padding-top:12px;}
.pizzeria-cassiera-mode .pizzeria-products-grid{
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;
}
.pizzeria-cassiera-mode .pizzeria-cat-imgwrap{display:none!important;}
.pizzeria-cassiera-mode .pizzeria-categories-scroll{min-height:50px!important;padding:6px 10px!important;}
.pizzeria-cassiera-mode .pizzeria-cat-item{min-width:100px!important;padding:12px 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.pizzeria-cassiera-mode .pizzeria-cat-name{font-size:.9rem!important;}
.pizzeria-cassiera-mode .pizzeria-info-icon{display:none!important;}

/* =========================================================
   FIXED FOOTER BRAND (BANDA IN BASSO)
   ========================================================= */
.pizzeria-footer-brand{
  position:fixed;left:0;bottom:0;width:100%;height:70px;z-index:9999;
  background:var(--pz-white);         /* white instead of black */
  display:flex;justify-content:center;align-items:center;gap:10px;
  font-weight:bold;font-size:1.25rem;
  color:var(--pz-orange);             /* orange text instead of yellow */
  text-shadow:none;
  border-top:2px solid var(--pz-orange);
  backdrop-filter:saturate(120%) blur(0px);
}
.pizzeria-footer-brand img{height:54px;width:auto;}