:root {
    --glass-bg: rgba(255, 255, 255, 0.9);
    --primary-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent: #00d2ff;
    --navy: #1a1a2e;
}

body {
    background: #f0f2f5; font-family: 'Inter', sans-serif;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 20px 20px;
}

.main-card { border: none; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.bg-sidebar { background: var(--navy); }

/* Accordion Design */
.accordion-item { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.accordion-button { background: transparent !important; color: #fff !important; font-weight: 600; padding: 20px 10px; }
.accordion-button:not(.collapsed) { color: var(--accent) !important; box-shadow: none; }
.accordion-button::after { filter: invert(1); }

/* Inputs */
.form-control, .form-select { border-radius: 10px; padding: 12px; font-size: 15px; }
.bg-dark { background-color: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; }

/* Fix for invisible dropdown text */
#qrAccordion .form-select option {
    background-color: #1a1a2e !important; /* Matches your --navy variable */
    color: white !important;
    padding: 10px;
}

/* Improve the look of the select box itself */
.bg-dark.text-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Ensure the focused state remains readable */
.form-select:focus {
    background-color: #2c3e50 !important;
    color: white !important;
}

/* QR Stage */
#canvas-wrapper { 
    background: white; padding: 30px; border-radius: 30px; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.05); transition: 0.3s;
}
#canvas-wrapper:hover { transform: translateY(-5px); }

/* Buttons */
.btn-premium { background: var(--primary-grad); border: none; color: white; padding: 14px; border-radius: 12px; font-weight: 700; transition: 0.3s; }
.btn-premium:hover { box-shadow: 0 10px 20px rgba(118, 75, 162, 0.3); transform: scale(1.01); }

/* Logo Upload Hidden Input */
.custom-file-upload { position: relative; }
.btn-fake { width: 100%; background: transparent; border: 1px dashed var(--accent); color: var(--accent); padding: 12px; border-radius: 10px; cursor: pointer; }
#logo-upload { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }


@media (max-width: 991px) {
    .main-card { border-radius: 0; }
    .bg-sidebar { border-radius: 0; }
}