.qrcompleto-button-container {
    margin-bottom: 20px;
}

.qrcompleto-qr-container {
    text-align: center;
    margin-bottom: 20px;
}

.pedidos-lista {
    list-style-type: none;
    padding: 0;
}

.pedido-item {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pedido-status {
    font-weight: bold;
}

.pedido-productos ul {
    margin-top: 10px;
}

.pedido-delivery-info {
    margin-top: 15px;
}

@media (min-width: 768px) {
    .pedido-content {
        display: flex;
        flex-direction: row;
    }

    .pedido-details {
        flex: 2;
        padding-right: 20px;
    }

    .pedido-qr {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Estilos para el escáner de QR */
#qrcompleto-scanner {
    margin-bottom: 20px;
}

#qrcompleto-area-select {
    margin-bottom: 10px;
}

#qrcompleto-start-scan {
    margin-bottom: 10px;
}

#qrcompleto-scanner-container {
    max-width: 100%;
    margin-bottom: 20px;
}

/* Estilos para el pull-to-refresh */
.pedidos-lista {
    transition: transform 0.3s ease;
}

/* ==== Apple Liquid Glass Makeover (scoped) ==== */
:root {
  --glass-bg: rgba(255,255,255,0.14);
  --glass-border: rgba(255,255,255,0.28);
  --glass-blur: 20px;
  --radius-lg: 20px;
}

.pedido-item,
#qrcompleto-scanner,
#qrcompleto-order-details,
.qrcompleto-qr-container img {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.pedido-item { padding: 20px; transition: transform .25s ease, box-shadow .25s ease; }
.pedido-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }

.pedidos-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

/* Status badge glow */
.pedido-status { padding: 6px 12px; border-radius: 10px; box-shadow: 0 0 20px rgba(255,255,255,.25); color:#fff; }
.pedido-status[style*="blue"] { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.pedido-status[style*="purple"] { background: linear-gradient(135deg,#8e2de2,#4a00e0); }
.pedido-status[style*="green"] { background: linear-gradient(135deg,#00b09b,#96c93d); }
.pedido-status[style*="orange"] { background: linear-gradient(135deg,#f7971e,#ffd200); }
.pedido-status[style*="teal"] { background: linear-gradient(135deg,#20e3b2,#29ffc6); }

/* Buttons */
.qrcompleto-product-ready, .qrcompleto-button-container a.button, #qrcompleto-start-scan {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#4facfe,#00f2fe);
  color:#fff !important;
  border:0; border-radius: 14px;
  padding: 10px 16px; font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.qrcompleto-product-ready:hover, .qrcompleto-button-container a.button:hover, #qrcompleto-start-scan:hover {
  transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.3);
}
.qrcompleto-product-ready:disabled {
  background: rgba(255,255,255,.2); color: rgba(255,255,255,.7) !important; box-shadow:none;
}

/* Liquid ripple */
.qrcompleto-product-ready::before, .qrcompleto-button-container a.button::before, #qrcompleto-start-scan::before {
  content:""; position:absolute; top:var(--y,50%); left:var(--x,50%);
  transform: translate(-50%,-50%);
  width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,.35);
  transition: width .45s ease, height .45s ease;
}
.qrcompleto-product-ready:hover::before, .qrcompleto-button-container a.button:hover::before, #qrcompleto-start-scan:hover::before {
  width:260%; height:260%;
}

/* Scanner frame */
#qrcompleto-scanner-container {
  border-radius: 16px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  display: block !important;
  width: 100%;
  min-height: 320px;   /* 🔥 Aumenta la altura visible */
  background: #000;
}

#qrcompleto-scanner-container::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  border: 3px solid rgba(0,255,150,.7);
  box-shadow: 0 0 24px rgba(0,255,150,.6);
  animation: glassGlow 2s ease-in-out infinite;
  pointer-events:none;
  z-index: 2;
}

@keyframes glassGlow { 0%,100%{opacity:.9} 50%{opacity:.4} }

/* Video de la cámara */
#qrcompleto-scanner-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;   /* 🔥 Forzar a llenar el contenedor */
  object-fit: cover;         /* Mantener proporción llenando */
  object-position: center;   /* Centrado */
  background: #000;
}

/* Canvas para el QR oculto */
#qrcompleto-scanner-canvas {
  display: none !important;
}

/* Evita reglas de temas que pongan height:0 a videos */
#qrcompleto-scanner video,
#qrcompleto-scanner .wp-video,
#qrcompleto-scanner .responsive-video {
  height: auto !important;
}

/* Progreso */
.pedido-progreso {
  border-bottom: 1px dashed rgba(255,255,255,.25);
  padding-bottom: 6px;
}

/* Fade-in */
.pedido-item, #qrcompleto-order-details, #qrcompleto-scanner {
  opacity:0;
  transform: translateY(10px);
  animation: fadeInUp .45s ease forwards;
}

@keyframes fadeInUp {
  to { opacity:1; transform:none; }
}