body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f8;
    margin:0; padding:0; color:#333;
}

div.bg-dark {
    background-color: #1f2937 !important;
    min-height: 100vh; padding-top:20px;
}
div.bg-dark h4 {
    text-align:center; margin-bottom:20px; font-weight:600; color:#fff;
}
div.bg-dark a {
    color:#cbd5e1; text-decoration:none; padding:10px 15px; display:block; border-radius:5px; transition:all 0.2s;
}
div.bg-dark a:hover { background-color:#374151; color:#fff; }

.card {
    background-color:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.08);
    padding:15px; margin-bottom:15px; transition:transform 0.2s;
}
.card:hover { transform: translateY(-2px); }

button {
    border:none; border-radius:6px; padding:10px 15px; cursor:pointer; transition:all 0.2s;
}
button:hover { opacity:0.9; }

input, select {
    padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; width:100%; margin-bottom:10px; outline:none; transition:border-color 0.2s;
}
input:focus, select:focus { border-color:#3b82f6; box-shadow:0 0 4px rgba(59,130,246,0.3); }

#cart { list-style:none; padding:0; margin:0 0 10px 0; }
#cart li { padding:5px 0; border-bottom:1px solid #e5e7eb; }
#total { font-size:18px; font-weight:600; margin-top:10px; color:#111827; }

@media (max-width:768px){
    div.bg-dark { width:100%; height:auto; position:relative; }
    .d-flex { flex-direction:column; }
}