/* ThaiPBS Red Primary Color Theme Override */
:root {
    /* ThaiPBS Red color palette */
    --color-red-50: #ffebee;
    --color-red-100: #ffcdd2;
    --color-red-200: #ef9a9a;
    --color-red-300: #e57373;
    --color-red-400: #ef5350;
    --color-red-500: #f44336;
    --color-red-600: #e53935;
    --color-red-700: #d32f2f;
    --color-red-800: #c62828;
    --color-red-900: #b71c1c;
    --color-red-950: #8b0000;

    /* Override primary colors with ThaiPBS red */
    --color-primary-50: var(--color-red-50);
    --color-primary-100: var(--color-red-100);
    --color-primary-200: var(--color-red-200);
    --color-primary-300: var(--color-red-300);
    --color-primary-400: var(--color-red-400);
    --color-primary-500: var(--color-red-500);
    --color-primary-600: var(--color-red-600);
    --color-primary-700: var(--color-red-700);
    --color-primary-800: var(--color-red-800);
    --color-primary-900: var(--color-red-900);
    --color-primary-950: var(--color-red-950);

    /* Update StickyMobile highlight color to ThaiPBS red */
    --highlight-color: #d32f2f;
    --red-primary: #d32f2f;
    --red-primary-dark: #c62828;
    --red-primary-light: #e53935;
}

/* Update button styles to use red primary */
.bg-highlight {
    background-color: var(--red-primary) !important;
    color: white;
}

.bg-highlight:hover:not(:disabled) {
    background-color: var(--red-primary-dark) !important;
}

.color-highlight {
    color: var(--red-primary) !important;
}

/* Update form focus states */
.form-control:focus {
    border-color: var(--red-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25) !important;
}

/* Update OTP input focus */
.otp:focus {
    border-color: var(--red-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25) !important;
}

/* Red button variants */
.btn-red {
    background-color: var(--red-primary);
    color: white;
    border: none;
}

.btn-red:hover:not(:disabled) {
    background-color: var(--red-primary-dark);
    transform: translateY(-1px);
}

.btn-red:disabled {
    background-color: #ef5350;
    opacity: 0.6;
}

/* Number pad button styling */
.number-pad-btn {
    background-color: var(--white);
    border: 2px solid #e5e7eb;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

.number-pad-btn:hover {
    background-color: var(--red-primary);
    color: white;
    border-color: var(--red-primary);
}

.number-pad-btn:active {
    transform: scale(0.95);
}

/* PIN dots styling */
.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e5e7eb;
    transition: all 0.3s ease;
}

.pin-dot.filled {
    background-color: var(--red-primary);
}

/* Dark theme overrides */
:global(.theme-dark) .number-pad-btn {
    background-color: #374151;
    border-color: #4b5563;
    color: var(--white);
}

:global(.theme-dark) .number-pad-btn:hover {
    background-color: var(--red-primary);
    border-color: var(--red-primary);
}

:global(.theme-dark) .pin-dot {
    background-color: #4b5563;
}

:global(.theme-dark) .pin-dot.filled {
    background-color: var(--red-primary);
}