/* --- إعدادات عامة --- */
body {
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

/* --- تصميم جسم الماكينة --- */
.pos-machine {
    background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
    width: 320px;
    padding: 30px 20px 40px;
    border-radius: 20px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.8),
        inset 0 1px 1px rgba(255,255,255,0.1);
    position: relative;
    z-index: 10;
}

.brand {
    color: #555;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    margin-bottom: 10px;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* --- الشاشة --- */
.screen-container {
    background: #000;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 2px solid #333;
}

.screen {
    background-color: #9cb389; /* لون شاشة LCD الأخضر */
    height: 80px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    font-size: 2rem;
    font-weight: bold;
    color: #111;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    font-family: monospace;
    overflow: hidden;
}

/* --- لوحة المفاتيح --- */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.btn {
    background: #3a3a3a;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 0 #111, 0 5px 10px rgba(0,0,0,0.3);
    transition: all 0.1s;
    font-weight: bold;
}

.btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #111;
}

/* ألوان الأزرار الخاصة */
.btn-cancel { background-color: #d32f2f; box-shadow: 0 4px 0 #8e0000; }
.btn-clear { background-color: #fbc02d; color: #333; box-shadow: 0 4px 0 #c49000; }

.enter-row { margin-top: 12px; }
.btn-enter { 
    background-color: #388e3c; 
    box-shadow: 0 4px 0 #1b5e20; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* --- تصميم الإيصال (الفاتورة) --- */
.receipt-slot {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    z-index: 1; /* خلف الماكينة */
}

.paper {
    background: #fff;
    width: 100%;
    min-height: 100px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-size: 0.8rem;
    color: #000;
    text-align: center;
    
    /* إعدادات الأنيميشن */
    margin-top: 100px; /* مخفية داخل الماكينة */
    transition: margin-top 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.paper.printing {
    margin-top: -190px; /* تخرج للأعلى */
}

.paper h3 { margin: 0 0 10px; border-bottom: 1px dashed #000; padding-bottom: 10px; }
.paper .details { text-align: left; margin: 10px 0; font-size: 0.75rem; line-height: 1.4; }
.paper .total { font-size: 1.2rem; font-weight: bold; border-top: 1px dashed #000; padding-top: 10px; margin-top: 10px;}
.paper .barcode { margin-top: 15px; height: 30px; background: repeating-linear-gradient(to right, #000 0, #000 2px, #fff 2px, #fff 4px); }
.footer-text { margin-top:10px; font-size:0.7rem; color: #444; }