:root {
    --primary: #01a8f7;
    --primary-dark: #0077b6;
    --secondary: #e5b701;
    --bg-dark: #0a0f1d;
    --bg-card: #1e293b;
    --border-dark: rgba(255, 255, 255, 0.1);
}

.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.hover-bg-primary:hover { background-color: var(--primary-dark); }
.ring-primary:focus { --tw-ring-color: var(--primary); }
.text-secondary { color: var(--secondary); }
.bg-secondary { background-color: var(--secondary); }
.hover-text-secondary:hover { color: var(--secondary); }

.shadow-primary {
    --tw-shadow-color: rgba(1, 168, 247, 0.3);
    --tw-shadow: var(--tw-shadow-color) 0px 4px 15px;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.product-popular-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border-dark);
    background-color: var(--bg-card);
}

.btn-simple {
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
    border-radius: 10px;
}

.btn-simple:active {
    box-shadow: none;
    transform: translateY(1px);
}

.flash-sale-product {
    border: 1px solid var(--border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-card);
    border-radius: 16px;
}

.tab-button-simple {
    border: 1px solid var(--primary);
    transition: all 0.2s;
    border-radius: 9999px;
    background-color: transparent;
    color: #94a3b8;
}

.tab-button-simple.active-tab {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(1, 168, 247, 0.3);
}

.simple-box, .card-simple {
    border: 1px solid var(--border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-card);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.card-simple:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(1, 168, 247, 0.15);
    transform: translateY(-2px);
}

.input-simple {
    border: 1px solid var(--border-dark);
    background-color: #0f172a;
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s;
}

.input-simple:focus {
    box-shadow: 0 0 0 3px rgba(1, 168, 247, 0.2);
    border-color: var(--primary);
    outline: none;
}

.option-card {
    border: 1px solid var(--border-dark);
    background-color: var(--bg-card);
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 12px;
}

.option-card:hover {
    border-color: #475569;
    background-color: #2d3748;
}

.option-card.active {
    background-color: #1e293b;
    color: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 168, 247, 0.2);
}

.rank-number-simple {
    @apply flex items-center justify-center w-6 h-6 mr-3 text-xs font-bold rounded-full bg-blue-600 text-white shadow-md;
}

.pb-mobile-footer { padding-bottom: 80px; }

.rating-star { color: var(--secondary); }

.review-card {
    border: 1px solid var(--border-dark);
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
}

.review-card:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.5);
}

.wheel-container-simple {
    border: 1px solid var(--border-dark);
    background-color: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 1.5rem;
    border-radius: 24px;
}

#wheel {
    background-color: #1e293b;
    border: 4px solid #334155;
}

#result-modal-content {
    border: 1px solid var(--border-dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    background-color: var(--bg-card);
    border-radius: 20px;
    color: white;
}