/* order.css - Wiederherstellung des klassischen Looks */

body {
    background-color: #4a372d; /* Der warme Braunton aus dem Original */
    color: #fdfdfd;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}


#orderForm {
    width: 100%;
    max-width: 550px;
    text-align: center;
}

#row_names, #row_company, #row_vat_id {
    width: 100%;
    margin: 0;
    padding: 0;
}

#orderForm h2 {
    font-family: 'Rockwell', 'Courier Bold', serif;
    font-size: 32px;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* Labels über die Felder setzen */
#orderForm label {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

#orderForm label span {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #d1b8a5; /* Beiger Ton für die Labels */
}

/* Die charakteristischen weißen Felder */
#orderForm input, 
#orderForm select, 
#orderForm textarea {
    width: 100%;
    /*padding: 12px;*/
    border: none;
    border-radius: 4px;
    background-color: #fffdec; /* Das typische Off-White */
    color: #333;
    font-size: 16px;
    text-align: center; /* Text in Feldern zentrieren */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Textarea braucht Höhe */
#orderForm textarea {
    height: 80px;
    resize: none;
}

/* Berechnete Felder (Readonly) dezent absetzen */
#orderForm input[readonly] {
    background-color: #f5f2d0;
    font-weight: bold;
}

/* Trennlinie wie im Original */
hr {
    border: 0;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 30px 0;
}

/* Die neue Lagerampel - zentriert */

/* Container für die Verfügbarkeit */
.stock-container {
    margin: 20px 0;
    text-align: center;
}

.stock-container span {
    color: #d1b8a5;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: -15px;
}

/* Das Badge */
.stock-badge {
    display: inline-flex;
    align-items: center; /* Zentriert Punkt und Text vertikal auf einer Linie */
    justify-content: center; /* Zentriert das Badge selbst im Container */
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Der pulsierende Punkt */
.stock-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin-right: 10px; /* Abstand zum Text */
    position: relative;
    flex-shrink: 0; /* Verhindert, dass der Punkt zusammengedrückt wird */
    margin-bottom: 0 !important;
}

.dot-green {
    background-color: #4caf50;
    box-shadow: 0 0 8px #4caf50;
}

/* Orange für niedrigen Lagerbestand */
/*.stock-orange { color: #ff9800; }*/
.dot-orange {
    background-color: #ff9800;
    box-shadow: 0 0 8px #ff9800;
}

/* Rot für ausverkauft */
/*.stock-red { color: #f44336; }*/
.dot-red {
    background-color: #f44336;
    box-shadow: 0 0 8px #f44336;
}

/* Animation für den grünen Punkt */
.dot-green::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background-color: #4caf50;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(1); opacity: 0.8; }
    70% { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}