:root {
    --primary: #d4af37;
    --bg-dark: #121212;
    --card-bg: #1e1e1e;
    --text: #e0e0e0;
    --danger: #cf6679;
    --success: #03dac6;
}
body { background: var(--bg-dark); color: var(--text); margin: 0; font-family: 'Cairo', sans-serif; }
.hidden { display: none !important; }

/* الهيدر المتكيف */
header {
    background: var(--card-bg); padding: 15px; display: flex;
    justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary);
    flex-wrap: wrap; gap: 10px;
}
.salon-branding { display: flex; align-items: center; gap: 10px; }
.salon-branding img { height: 40px; border-radius: 5px; }

/* الكاشير والمنيو المصور */
.pos-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* للتابلت والكمبيوتر */
    gap: 20px; padding: 20px;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px;
}
.service-item {
    background: var(--card-bg); border: 1px solid #333; border-radius: 10px;
    text-align: center; cursor: pointer; overflow: hidden; transition: 0.2s;
}
.service-item img { width: 100%; height: 100px; object-fit: cover; }
.service-info { padding: 10px; }

/* أزرار ولوحات */
button { background: var(--primary); color: black; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold;}
input, select { padding: 10px; margin: 5px 0; background: #333; color: white; border: 1px solid #555; border-radius: 5px; width: 100%; box-sizing: border-box;}
.admin-card { background: var(--card-bg); padding: 20px; margin: 10px; border-radius: 10px; }

/* 📱 التجاوب مع الموبايل (السر هنا) */
@media (max-width: 768px) {
    .pos-grid { grid-template-columns: 1fr; } /* السلة تنزل تحت المنيو في الموبايل */
    header { flex-direction: column; text-align: center; }
    .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
}