/* PizzaLayer Skin - Pizza Order App */


/* ==================== NEW CSS =======================*/

.pztp-mobileorder-wrapper { display:flex; flex-direction:column; width:100%;height:100vh; overflow:hidden; }
#pztp-mobileorder-header { padding:1em; text-align:center; background:#fff;margin-bottom:0; }
#pztp-logo { width:80px; border-radius:50%; }

/* Nav: tabs row + responsive dropdown */
#pztp-mobileorder-nav{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:.5rem;
  background:var(--pz-surface);
  height:auto;
  padding:.5rem 1rem;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-bottom:1px solid var(--pz-border);
}

#pztp-mobileorder-nav::-webkit-scrollbar{ height:6px; }
#pztp-mobileorder-nav::-webkit-scrollbar-thumb{ background:var(--pz-border); border-radius:999px; }

#pztp-mobileorder-nav-dropdown{
  display:none;
  width:100%;
  padding:12px 14px;
  font-size:1rem;
  background:var(--pz-surface-alt);
  border:1px solid var(--pz-border);
  border-radius: var(--pz-radius-sm);
}

/* Modern tab buttons */
.tab-btn{
  position:relative;
  border:none;
  background:transparent;
  padding:.65rem .9rem;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:var(--pz-muted);
  border-radius:999px;
  transition: background .2s ease, color .2s ease, transform .06s ease;
  outline: none;
}

.tab-btn:hover{ background:rgba(0,0,0,.04); color:var(--pz-text); }
@media (prefers-color-scheme: dark){
  .tab-btn:hover{ background:rgba(255,255,255,.06); }
}

/* Active tab pill + underline indicator */
.tab-btn.active{
  color:var(--pz-primary);
  background:var(--pz-primary-50);
}
.tab-btn.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-10px;
  height:3px;
  background:var(--pz-primary);
  border-radius:999px;
}

/* Keyboard focus */
.tab-btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pz-primary) 30%, transparent);
}

#pztp-mobileorder-preview { flex-shrink:0; display:flex; justify-content:center; align-items:center; height:40%; background:#fff;overflow:hidden;padding:1% 0; }
#pztp-mobileorder-content { flex-grow:1; overflow-y:auto; padding:1em; border:solid 1px rgba(0,0,0,.2);}

.tab-content { display:none; opacity:0; transform:translateY(10px); transition:opacity 0.4s, transform 0.4s; }
.tab-content.active { display:block; opacity:1; transform:translateY(0); }
.options-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(25%,1fr)); gap:10px; margin-top:1em; }
.option-card { background:#fff; border:1px solid #ccc; border-radius:8px; padding:8px; text-align:center; cursor:pointer; transition:transform 0.2s,box-shadow 0.2s,border-color 0.3s; }
.option-card:hover { transform:scale(1.03); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.option-card.selected { border:2px solid #007cba; background:#e6f4fa; box-shadow:0 0 8px rgba(0,124,186,0.3); }
.option-circle { width:60px; height:60px; border-radius:50%; background:#aaa; margin:0 auto 8px; }
.option-title { font-weight:bold; margin-bottom:4px; }
.option-description { font-size:0.8em; color:#555; margin-bottom:15px; }
.add-remove-btn { padding:4px 8px; background:#007cba; color:#fff; border:none; border-radius:4px; cursor:pointer; transition:background 0.3s; }
.add-remove-btn:hover { background:#005f8d; }
#pztp-mobileorder-footer { background:#fff; padding:0.5em 1em; }
#nav-controls { display:flex; justify-content:space-between; }
#footer-summary { display:flex; justify-content:space-between; align-items:center; margin-top:0.5em; }
.order-box { margin-top:15px; padding:10px; border-radius:8px; background:rgba(0,0,0,0.6); }
.order-box label { color:#fff; display:block; margin-bottom:5px; }
.order-box input { width:100%; padding:8px; border:none; border-radius:4px; background:rgba(0,0,0,0.6); color:#fff; }
@media(max-width:500px) {
  #pztp-mobileorder-nav { display:none; }
  #pztp-mobileorder-nav-dropdown { display:block; }
  .options-grid { display:flex; flex-direction:column; }
  .option-card {  }
  .option-circle { width:60px; height:60px; margin-right:8px; }
  .option-title { flex:1; text-align:left; }
  .option-description { display:none; }
  .option-action { margin-left:auto; }
}



.tab-btn.active, .tab-btn:hover { background:#f8d7da; }
.option-card { border-color:#f5c6cb; }
.option-card.selected { border-color:#dc3545; background:#f8d7da; }
.add-remove-btn { background:#dc3545; }
.add-remove-btn:hover { background:#c82333; }
#pztp-mobileorder-header { background:#f9e0e0; }
#pztp-mobileorder-nav { background:#fef2f2; }
#pztp-mobileorder-preview { background:#fff5f5; }
#pztp-mobileorder-footer { background:#f9e0e0; }

.pztp-live-preview-placeholder{overflow:hidden;}