/* Custom Styles for The Uruguay Suite Portal */

:root {
    --bg-accent: #f4f4f5;
    /* Zinc 100 */
    --accent-color: #18181b;
    /* Zinc 900 */
}

/* Background transition */
body {
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background Glow Effect */
#bg-glow {
    background: radial-gradient(circle at center, var(--accent-color), transparent);
}

/* Smooth color transitions for sections */
body[data-active-color="blue"] {
    background-color: #eff6ff;
    /* blue-50 */
    --accent-color: #3b82f6;
}

body[data-active-color="amber"] {
    background-color: #fffbeb;
    /* amber-50 */
    --accent-color: #f59e0b;
}

body[data-active-color="magenta"] {
    background-color: #fdf4ff;
    /* magenta-50 */
    --accent-color: #d946ef;
}

body[data-active-color="zinc"] {
    background-color: #fafafa;
    /* zinc-50 */
    --accent-color: #71717a;
}

body[data-active-color="red"] {
    background-color: #fef2f2;
    /* red-50 */
    --accent-color: #ef4444;
}

body[data-active-color="green"] {
    background-color: #f0fdf4;
    /* green-50 */
    --accent-color: #22c55e;
}

/* Reveal Animation on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glassmorphism enhancements */
.glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #fafafa;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

/* Specific button overrides based on active color if needed */
.dynamic-shadow {
    box-shadow: 0 10px 30px -10px var(--accent-color);
}

/* Subscription Carousel Styles - Card Aesthetics Only */
.subscription-card {
    pointer-events: auto;
    cursor: pointer;
}

.subscription-card:hover {
    cursor: pointer;
}

.subscription-card a {
    pointer-events: auto;
}

/* Card widths for different screen sizes */
@media (max-width: 767px) {
    .subscription-card {
        width: calc(85vw - 2rem);
        min-width: calc(85vw - 2rem);
        max-width: calc(85vw - 2rem);
    }
}

/* Medium screens: Show 2.5 cards */
@media (min-width: 768px) {
    .subscription-card {
        width: calc(40% - 1rem);
        min-width: calc(40% - 1rem);
        max-width: calc(40% - 1rem);
    }
}

/* Large screens: Show 3.5 cards */
@media (min-width: 1024px) {
    .subscription-card {
        width: calc(28.5% - 1.33rem);
        min-width: calc(28.5% - 1.33rem);
        max-width: calc(28.5% - 1.33rem);
    }
}

/* Extra large screens: Show 3.5 cards (keep same) */
@media (min-width: 1280px) {
    .subscription-card {
        width: calc(28.5% - 1.33rem);
        min-width: calc(28.5% - 1.33rem);
        max-width: calc(28.5% - 1.33rem);
    }
}

/* App Cards Carousel Styles */
#app-cards-container {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

#app-cards-container::-webkit-scrollbar {
    height: 8px;
}

#app-cards-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

#app-cards-container::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 10px;
}

#app-cards-container::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

.app-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: calc(85vw - 2rem);
    min-width: calc(85vw - 2rem);
    max-width: calc(85vw - 2rem);
    pointer-events: auto;
    cursor: pointer;
    flex-shrink: 0;
}

/* Medium screens: Show 2.5 app cards */
@media (min-width: 768px) {
    .app-card {
        width: calc(40% - 1rem);
        min-width: calc(40% - 1rem);
        max-width: calc(40% - 1rem);
    }
}

/* Large screens: Show 3.5 app cards */
@media (min-width: 1024px) {
    .app-card {
        width: calc(28.5% - 1.33rem);
        min-width: calc(28.5% - 1.33rem);
        max-width: calc(28.5% - 1.33rem);
    }
}