/* Minimal Custom CSS - Only for features Tailwind can't handle */

/* CSS Variables for Theme Colors (set dynamically by theme.js) */
/* These are set via JavaScript in theme.js, but we define defaults here */
:root {
    --color-primary: #4a4a6b;
    --color-secondary: #ff9f41;
    --color-primary-hover: #3a3a5b;
    --color-text: #000000;
    --color-text-light: #666666;
    --color-background: #ffffff;
    --color-background-alt: #f5f5f5;
    --font-sans: 'Hind Siliguri', sans-serif;
    --max-width-container: 448px;
}

/* Tailwind v4 Utility Classes using CSS Variables */
/* These allow us to use classes like bg-primary, text-primary, etc. */
.bg-primary {
    background-color: var(--color-primary);
}
.bg-secondary {
    background-color: var(--color-secondary);
}
.bg-primary-hover {
    background-color: var(--color-primary-hover);
}
.bg-background {
    background-color: var(--color-background);
}
.bg-background-alt {
    background-color: var(--color-background-alt);
}

.text-primary {
    color: var(--color-primary);
}
.text-secondary {
    color: var(--color-secondary);
}
.text-primary-hover {
    color: var(--color-primary-hover);
}
.text-text {
    color: var(--color-text);
}
.text-text-light {
    color: var(--color-text-light);
}

.border-primary {
    border-color: var(--color-primary);
}
.border-secondary {
    border-color: var(--color-secondary);
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary) !important;
}
.hover\:bg-primary-hover:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Sidebar menu hover - make text and icons white when hovering */
.hover\:bg-primary:hover .text-primary,
.hover\:bg-primary:hover span {
    color: white !important;
}

/* Gradient utilities for primary color */
.from-primary {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary-hover {
    --tw-gradient-to: var(--color-primary-hover);
}
.hover\:from-primary-hover:hover {
    --tw-gradient-from: var(--color-primary-hover);
}
.hover\:to-primary:hover {
    --tw-gradient-to: var(--color-primary);
}

/* Font Family */
.font-sans {
    font-family: var(--font-sans);
}

/* Max Width Container */
.max-w-container {
    max-width: var(--max-width-container);
}

/* Cursor pointer for all clickable elements */
button,
a,
[role='button'],
input[type='button'],
input[type='submit'],
input[type='reset'],
label[for],
.cursor-pointer {
    cursor: pointer;
}

/* Banner images should not be clickable */
.banner-item img {
    cursor: default;
    pointer-events: none;
}

/* Font Display Optimization - Ensure text remains visible during font load */
@font-face {
    font-family: 'bootstrap-icons';
    font-display: swap;
}

/* Horizontal Scrolling Lists - Mobile First Design */
.quiz-tournament-list,
.subscription-pack-list {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.quiz-tournament-list::-webkit-scrollbar,
.subscription-pack-list::-webkit-scrollbar {
    display: none;
}

/* Fixed width for horizontal scroll items */
.quiz-tournament-list > * {
    display: inline-block;
    width: 85%;
    margin-right: 1rem;
    vertical-align: top;
    flex-shrink: 0;
}

.quiz-tournament-list > *:last-child {
    margin-right: 0;
}

.subscription-pack-list > * {
    display: inline-block;
    width: 85%;
    margin-right: 1rem;
    vertical-align: top;
    flex-shrink: 0;
}

.subscription-pack-list > *:last-child {
    margin-right: 0;
}

/* Banner Carousel - Minimal CSS for transitions (Tailwind handles most styling) */
.banner-item {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-carousel .banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

.banner-carousel .banner-item.active {
    position: absolute;
    opacity: 1;
    z-index: 2;
}

.banner-indicator.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    width: 8px !important;
    height: 8px !important;
    transform: none;
}

/* Category selection state */
.category-item.selected {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Loading spinner animation */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Toast animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Filter for primary color on images */
.filter-primary {
    filter: brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(800%)
        hue-rotate(220deg) brightness(90%) contrast(95%);
}

/* Offcanvas menu open state */
.offcanvas-open {
    transform: translateX(0) !important;
}

.overlay-visible {
    display: block !important;
}

/* Ordered list styling for terms & conditions */
ol.list-decimal > li.list-item {
    list-style-position: inside;
    margin-left: 0;
    padding: 1rem;
}

ol.list-decimal > li.list-item::marker {
    font-weight: bold;
    color: black;
}

ol.list-decimal > li.list-item > h6 {
    display: inline;
    margin-left: 0.5rem;
    margin-bottom: 0;
}

/* OTP input active state */
.otp-input.otp-active,
.otp-input:focus {
    border-width: 2px !important;
    border-color: var(--color-primary) !important;
}

/* Offcanvas menu open state */
.offcanvas-open {
    transform: translateX(0) !important;
}

.overlay-visible {
    display: block !important;
}

/* Menu overlay - semi-transparent backdrop */
#menuOverlay {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Menu overlay - semi-transparent backdrop */
#menuOverlay {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Payment success page — promotional banner carousel */
.success-banner-item {
    display: block;
    width: 100%;
    height: 100%;
}

.success-banner-carousel .success-banner-item,
#successBannerContainer.success-banner-carousel .success-banner-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease-in-out;
    z-index: 1;
}

.success-banner-carousel .success-banner-item.active,
#successBannerContainer.success-banner-carousel .success-banner-item.active {
    opacity: 1;
    z-index: 2;
}

#successBannerContainer.success-banner-carousel {
    position: absolute;
    inset: 0;
}

.success-banner-indicator {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
}

.success-banner-indicator.active {
    width: 1.25rem !important;
    border-radius: 9999px;
    background-color: var(--color-primary) !important;
}

.success-banner-nav button {
    backdrop-filter: blur(6px);
}

@keyframes success-banner-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.success-banner-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: success-banner-shimmer 1.4s ease-in-out infinite;
}

/* 
Disclaimer Box Styling
This is a small box that appears below the subscription form, containing disclaimers about auto-renewal and free trial. It is styled to be semi-transparent with a blurred background, centered text,
*/

.disclaimer-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    color: #374151;
    background: rgba(246, 244, 244, 0.777);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    padding: 4px 10px;
    border-radius: 6px;

    font-size: 12px;
}