/* ========================================
   BILHETERIA HUGO - STYLES
   ======================================== */

/* CSS Variables */
:root {
    --color-primary: #1b3f6b;
    --color-primary-dark: #142f50;
    --color-primary-light: #2a5a8f;
    --color-white: #ffffff;
    --color-light: #f5f7fa;
    --color-gray-100: #f0f2f5;
    --color-gray-200: #e4e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-accent: #ff6b35;
    --color-success: #10b981;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   HEADER
   ======================================== */

/* ========================================
   HEADER
   ======================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Header Top Bar - Hidden as per new design or kept if needed, but likely removing for cleaner look
   If user wants it back, we can uncomment. For now, matching the clean "Fever" look usually implies no top bar or a very subtle one.
   I will keep the CSS but ensure it's handled or removed if not in HTML (it was removed in HTML update actually).
*/

/* Header Main */
.header-main {
    background: var(--color-white);
    padding: 27px 0;
    /* Increased by 15px each side = 30px total height */
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Left Group */
.header-left-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Vertical Divider */
.vertical-divider {
    width: 1px;
    height: 24px;
    background-color: var(--color-gray-200);
}

/* Logo */
.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    /* Adjusted size */
    width: auto;
    transition: transform var(--transition-fast);
}

.logo-mobile {
    display: none;
}

.logo:hover img {
    transform: scale(1.02);
}

/* Search Container */
.search-container {
    flex: 1;
    max-width: 600px;
    /* Wider search bar */
    margin: 0 24px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    /* More squared/subtly rounded like reference */
    padding: 10px 16px;
    gap: 12px;
    transition: all var(--transition-fast);
    height: 48px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-bar:focus-within {
    border-color: var(--color-gray-400);
    /* Darker border on focus, not necessarily primary color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

/* Hidden mobile search on desktop */
.search-mobile {
    display: none;
}

.search-input {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-gray-900);
    background: transparent;
}

.search-input::placeholder {
    color: var(--color-gray-500);
}

/* Rolling Placeholder Styles */
.search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.rolling-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--color-gray-500);
    font-size: 0.9375rem;
    pointer-events: none;
    white-space: nowrap;
}

.rolling-prefix {
    flex-shrink: 0;
}

.rolling-words {
    display: inline-block;
    overflow: hidden;
    margin-left: 4px;
}

.rolling-word {
    display: inline-block;
    animation: rollWord 0.4s ease-out;
    -webkit-animation: rollWord 0.4s ease-out;
}

@-webkit-keyframes rollWord {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes rollWord {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-input:focus~.rolling-placeholder,
.search-input:not(:placeholder-shown)~.rolling-placeholder {
    display: none;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Ghost Buttons (Location, Categories) */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.9375rem;
    position: relative;
    /* Ensure tooltip is relative to this */
    font-weight: 500;
    color: var(--color-gray-700);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.btn-ghost svg {
    width: 20px;
    height: 20px;
    color: var(--color-gray-500);
}

.btn-ghost:hover svg {
    color: var(--color-gray-900);
}

/* Create Event Button (Producer) */
.btn-create-event {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(27, 63, 107, 0.3);
}

.btn-create-event:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 63, 107, 0.4);
}

.btn-create-event svg {
    width: 18px;
    height: 18px;
}

/* Search container reduced width when producer button is visible */
.search-container.search-reduced {
    max-width: 400px;
}

/* Create event button on mobile - smaller size */
@media (max-width: 1024px) {
    .btn-create-event {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .btn-create-event span {
        display: none;
    }

    .btn-create-event svg {
        width: 18px;
        height: 18px;
    }

    /* Reduce mobile search when producer button is visible */
    .mobile-search.search-reduced {
        max-width: calc(100% - 60px);
    }

    /* Hide desktop create event button on mobile */
    .btn-create-event {
        display: none !important;
    }
}

/* Icon Buttons (Heart, User) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-icon:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.header-btn-icon svg {
    width: 24px;
    height: 24px;
}


/* Mobile Elements */
.header-actions-mobile {
    display: none;
    /* Hidden on desktop */
}

.desktop-only {
    display: flex !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .header-content {
        padding: 0 16px;
        gap: 12px;
    }

    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
        height: 32px;
    }

    /* Search Desktop Hidden */
    .search-desktop {
        display: none;
    }

    /* Mobile Actions */
    .header-actions-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        /* Push to right */
    }

    .btn-mobile-location {
        padding: 0;
        font-size: 0.875rem;
        color: var(--color-gray-900);
        margin-right: 8px;
    }

    .btn-mobile-location:hover {
        background: transparent;
    }

    .btn-mobile-search-toggle,
    .btn-mobile-user {
        width: 36px;
        height: 36px;
    }

    .btn-mobile-search-toggle svg,
    .btn-mobile-user svg {
        width: 22px;
        height: 22px;
    }

    /* Mobile Search Bar */
    .search-mobile {
        display: flex;
        padding: 12px 16px;
    }

    .search-mobile .search-bar {
        flex: 1;
        height: 42px;
        padding: 8px 14px;
    }

    /* Mobile Create Event Button (inside search bar) */
    .btn-create-event-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
        border: none;
        border-radius: 50%;
        color: var(--color-white);
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(27, 63, 107, 0.3);
        transition: all var(--transition-fast);
        margin-left: 8px;
    }

    .btn-create-event-mobile:hover {
        background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
        transform: scale(1.05);
    }

    .btn-create-event-mobile svg {
        width: 16px;
        height: 16px;
    }
}

/* ========================================
   MODAL
   ======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--transition-base);
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-gray-200);
}

.modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-gray-500);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Search */
.modal-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-gray-100);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    transition: all var(--transition-fast);
}

.modal-search:focus-within {
    background: var(--color-white);
    border-color: var(--color-primary);
}

.modal-search .search-icon {
    color: var(--color-gray-400);
}

.modal-search-input {
    flex: 1;
    font-size: 0.9375rem;
    background: transparent;
    color: var(--color-gray-800);
}

.modal-search-input::placeholder {
    color: var(--color-gray-400);
}

/* Use My Location Button */
.btn-use-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(27, 63, 107, 0.08);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-use-location:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-use-location.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-use-location svg {
    width: 20px;
    height: 20px;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--color-gray-400);
    font-size: 0.8125rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

/* States List */
.states-list {
    display: grid;
    gap: 4px;
}

.states-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.states-list li:hover {
    background: var(--color-gray-100);
}

.state-abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(27, 63, 107, 0.1);
    border-radius: var(--radius-sm);
}

.state-name {
    font-size: 0.9375rem;
    color: var(--color-gray-700);
}

/* ========================================
   MAIN CONTENT
   ======================================== */

.main-content {
    min-height: 60vh;
}

.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 80px 24px;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Old Responsive Section Cleared - New styles are integrated into the HEADER section above for better organization. 
   See @media (max-width: 1024px) block in HEADER section.
*/

@media (max-width: 768px) {
    .hero {
        padding: 40px 16px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .modal {
        max-height: 90vh;
    }

    .modal-header {
        padding: 16px 20px;
    }

    .modal-body {
        padding: 16px;
    }

    /* Mobile Header Redesign */
    .header-content {
        flex-wrap: nowrap;
        /* Force single line */
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        gap: 8px;
        /* Tighter gap */
    }

    .logo img {
        height: 28px;
        /* Slightly smaller logo for mobile alignment */
    }

    .header-actions-mobile {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 1;
        min-width: 0;
        margin-top: 10px;
        position: relative;
        left: -20px;
        /* Move container 20px to the left */
    }



    /* Push profile button to the right edge */
    .btn-mobile-user {
        margin-right: -20px;
    }

    .btn-mobile-location,
    .btn-mobile-categories,
    .btn-mobile-user {
        height: 36px;
        /* Larger buttons */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        padding: 0 10px;
        background: var(--color-gray-100);
        color: var(--color-text-primary);
        border: none;
        gap: 4px;
        /* Maintain gap between icon and text */
        width: auto;
        flex-shrink: 1;
        /* Allow buttons to shrink */
        min-width: 0;
    }

    /* Keep user button circular */
    .btn-mobile-user {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;
        /* Keep user button fixed size */
    }

    .btn-mobile-location span {
        font-size: 0.75rem;
        /* Smaller text */
        font-weight: 500;
        white-space: nowrap;
    }

    .btn-mobile-categories span {
        font-size: 0.75rem;
        /* Smaller text */
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Truncate text if needed */
        max-width: 100px;
        /* Max width to prevent breaking layout */
    }

    .btn-mobile-location svg,
    .btn-mobile-categories svg,
    .btn-mobile-user svg {
        width: 14px;
        /* Smaller icons matching text scale */
        height: 14px;
        flex-shrink: 0;
    }

    /* Utility class for screen readers / hiding text */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Mobile Search Bar logic - Always visible below */
    .search-mobile {
        display: block !important;
        width: calc(100% - 32px);
        margin: 0 auto;
        /* Center with no top margin */
        padding-bottom: 8px;
    }

    .search-mobile .search-bar {
        width: 100%;
        max-width: 100%;
        height: 48px;
        border-radius: var(--radius-full);
        background: var(--color-gray-100);
    }

    .header-content {
        flex-wrap: wrap;
    }

    /* Mobile Logo - bigger size */
    .logo-mobile {
        height: 40px !important;
    }

    /* Location button - full text, clickable */
    .btn-mobile-location {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10;
    }

    .btn-mobile-location span {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap;
    }

    /* User button - add lateral margin */
    .btn-mobile-user {
        margin-right: -12px !important;
    }
}

/* Location Tooltip Bubble */
.location-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
    background: var(--color-white);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 180px;
    animation: fadeIn 0.3s ease;
    border: 1px solid var(--color-gray-100);
}

.tooltip-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray-100);
    border-top: 1px solid var(--color-gray-100);
}

.tooltip-content {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

.tooltip-loader {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 480px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.states-list li {
    animation: fadeIn var(--transition-base) ease forwards;
}

.states-list li:nth-child(1) {
    animation-delay: 0ms;
}

.states-list li:nth-child(2) {
    animation-delay: 20ms;
}

.states-list li:nth-child(3) {
    animation-delay: 40ms;
}

.states-list li:nth-child(4) {
    animation-delay: 60ms;
}

.states-list li:nth-child(5) {
    animation-delay: 80ms;
}

.states-list li:nth-child(6) {
    animation-delay: 100ms;
}

.states-list li:nth-child(7) {
    animation-delay: 120ms;
}

.states-list li:nth-child(8) {
    animation-delay: 140ms;
}

.states-list li:nth-child(9) {
    animation-delay: 160ms;
}

.states-list li:nth-child(10) {
    animation-delay: 180ms;
}

/* Scrollbar Styling */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ========================================
   Categories Modal
   ======================================== */

.categories-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    /* Dimmed background */
    z-index: 2000;
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    padding: 40px;
    /* Space around the modal */
    display: none;
    /* Hidden by default */
}

.categories-modal-overlay.active {
    display: flex;
    /* Flex when active */
}

.categories-modal-overlay .categories-modal {
    width: 100%;
    max-width: 1200px;
    /* Large but not full width */
    height: auto;
    max-height: 90vh;
    /* Leave some space */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}

.categories-modal .modal-header {
    padding: 24px 40px;
    border-bottom: none;
}

.categories-modal .modal-header h2 {
    font-size: 2rem;
    font-weight: 700;
}

.categories-modal .modal-close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-gray-100);
}

.categories-modal .modal-body {
    padding: 20px 40px 60px;
    overflow-y: auto;
    flex: 1;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* Smaller cards */
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    /* Very subtle border */
    border-radius: var(--radius-md);
    /* Slightly less rounded */
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-base);
    box-shadow: none;
    /* Minimalist: no default shadow */
    height: 120px;
    /* Smaller fixed height */
}

.category-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Soft shadow on hover */
    color: var(--color-text-primary);
    /* Keep text color */
}

.category-icon {
    width: 32px;
    /* Smaller icon */
    height: 32px;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
    /* Softer icon color */
    transition: color var(--transition-base);
}

.category-card:hover .category-icon {
    color: var(--color-primary);
    /* Color only on hover */
}

.category-card span {
    font-weight: 500;
    /* Lighter font weight */
    text-align: center;
    font-size: 0.9rem;
    /* Smaller text */
    line-height: 1.2;
    color: var(--color-text-secondary);
}

.category-card:hover span {
    color: var(--color-text-primary);
}

/* Mobile Responsiveness for Categories */
@media (max-width: 768px) {
    .categories-modal .modal-header {
        padding: 16px 20px;
    }

    .categories-modal .modal-header h2 {
        font-size: 1.25rem;
    }

    .categories-modal .modal-body {
        padding: 0 20px 40px;
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 cols on mobile for smaller cards */
        gap: 12px;
        padding-top: 10px;
    }

    .category-card {
        height: 100px;
        padding: 12px 8px;
    }

    .category-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
    }

    .category-card span {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Back to 2 cols for very small screens */
    }
}

/* ========================================
   REFIM CAROUSEL - PEEK STYLE
   ======================================== */

.refim-carousel {
    position: relative;
    width: 100%;
    padding: 50px 0;
    background: var(--color-white);
    overflow: hidden;
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 0 calc(50% - 500px);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Carousel Slides */
.carousel-slide {
    flex-shrink: 0;
    width: 1000px;
    height: 480px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Active slide (main) - full size, centered */
.carousel-slide.active {
    transform: scale(1);
    opacity: 1;
    z-index: 10;
}

/* Next/Preview slides - smaller scale */
.carousel-slide:not(.active) {
    transform: scale(0.9);
    opacity: 0.6;
    z-index: 5;
}

/* Slide Background */
.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}

/* Blue Slide Theme */
.slide-blue .slide-placeholder-image {
    background: linear-gradient(135deg, #1b3f6b 0%, #0d2240 50%, #081526 100%);
}

.slide-blue .slide-placeholder-image span {
    color: rgba(255, 255, 255, 0.2);
}

.slide-blue .refim-highlight {
    color: #4a90d9;
}

.slide-blue .slide-content {
    color: #ffffff;
}

.slide-blue .slide-category {
    color: rgba(255, 255, 255, 0.8);
}

.slide-blue .slide-description {
    color: rgba(255, 255, 255, 0.7);
}

.slide-blue .btn-primary-refim {
    background: #1b3f6b;
    color: #ffffff;
}

.slide-blue .btn-primary-refim:hover {
    background: #2a5a8f;
}

/* White Slide Theme */
.slide-white .slide-placeholder-image {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
}

.slide-white .slide-placeholder-image span {
    color: rgba(27, 63, 107, 0.15);
}

.slide-white .refim-highlight {
    color: #1b3f6b;
}

.slide-white .slide-overlay {
    background: linear-gradient(to right,
            rgba(248, 250, 252, 0.95) 0%,
            rgba(248, 250, 252, 0.8) 30%,
            rgba(248, 250, 252, 0.4) 60%,
            transparent 100%);
}

.slide-white .slide-content {
    color: #1e293b;
}

.slide-white .slide-category {
    color: rgba(30, 41, 59, 0.8);
}

.slide-white .slide-title {
    color: #0f172a;
}

.slide-white .slide-description {
    color: rgba(30, 41, 59, 0.7);
}

.slide-white .badge-age {
    background: #1b3f6b;
}

.slide-white .btn-primary-refim {
    background: #1b3f6b;
    color: #ffffff;
}

.slide-white .btn-play-refim {
    background: rgba(27, 63, 107, 0.1);
    border-color: rgba(27, 63, 107, 0.3);
    color: #1b3f6b;
}

.slide-white .btn-play-refim:hover {
    background: rgba(27, 63, 107, 0.2);
    border-color: rgba(27, 63, 107, 0.5);
}

/* Default placeholder styles */
.slide-placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .slide-placeholder-image {
    transform: scale(1.05);
}

.slide-placeholder-image span {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Slide Overlay (default for blue) */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(10, 25, 41, 0.95) 0%,
            rgba(10, 25, 41, 0.6) 40%,
            rgba(10, 25, 41, 0.2) 70%,
            transparent 100%);
    pointer-events: none;
    border-radius: 20px;
}

/* Slide Content - positioned at bottom */
.slide-content {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    max-width: 420px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.carousel-slide.active .slide-content {
    opacity: 1;
}

.slide-category {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    background: #22c55e;
    color: #ffffff;
}

.slide-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.slide-title .refim-blue {
    color: #4a90d9;
}

.slide-description {
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    max-width: 320px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Slide Action Buttons */
.slide-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-primary-refim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: #1b3f6b;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(27, 63, 107, 0.4);
}

.btn-primary-refim:hover {
    background: #2a5a8f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 63, 107, 0.5);
}

.btn-play-refim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.btn-play-refim svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.btn-play-refim:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(27, 63, 107, 0.7);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 30;
}

.carousel-arrow svg {
    width: 22px;
    height: 22px;
}

.carousel-arrow:hover {
    background: #1b3f6b;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 0 60px;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(27, 63, 107, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator:hover {
    background: rgba(27, 63, 107, 0.6);
}

.indicator.active {
    background: #1b3f6b;
    width: 28px;
    border-radius: 5px;
}

/* ========================================
   REFIM CAROUSEL - RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .carousel-track {
        padding: 0 calc(50% - 325px);
        gap: 0px;
    }

    .carousel-slide {
        width: 650px;
        height: 420px;
    }

    .slide-content {
        left: 28px;
        right: 28px;
        bottom: 28px;
    }

    .slide-title {
        font-size: 2rem;
    }

    .slide-placeholder-image span {
        font-size: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .carousel-track {
        padding: 0 calc(50% - 275px);
        gap: 0px;
    }

    .carousel-slide {
        width: 550px;
        height: 380px;
    }

    .carousel-slide:not(.active) {
        transform: scale(0.85);
        opacity: 0.5;
    }

    .slide-content {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .slide-title {
        font-size: 1.75rem;
    }

    .carousel-arrow {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 768px) {
    .refim-carousel {
        padding: 30px 0;
    }

    .carousel-track {
        padding: 0 calc(50% - 170px);
        gap: 0px;
    }

    .carousel-slide {
        width: 340px;
        height: 400px;
        border-radius: 16px;
    }

    .carousel-slide:not(.active) {
        transform: scale(0.85);
        opacity: 0.5;
    }

    .slide-background {
        border-radius: 16px;
    }

    .slide-overlay {
        border-radius: 16px;
    }

    .slide-content {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .slide-category {
        font-size: 0.65rem;
        margin-bottom: 4px;
    }

    .slide-title {
        font-size: 1.25rem;
        margin-bottom: 6px;
    }

    .slide-description {
        font-size: 0.75rem;
        margin-bottom: 10px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .slide-placeholder-image span {
        font-size: 1rem;
    }

    .btn-primary-refim {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .btn-play-refim {
        width: 34px;
        height: 34px;
    }

    .btn-play-refim svg {
        width: 14px;
        height: 14px;
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .carousel-arrow svg {
        width: 16px;
        height: 16px;
    }

    .carousel-prev {
        left: 6px;
    }

    .carousel-next {
        right: 6px;
    }

    .carousel-indicators {
        margin-top: 16px;
        gap: 8px;
    }

    .indicator {
        width: 8px;
        height: 8px;
    }

    .indicator.active {
        width: 20px;
    }
}

@media (max-width: 480px) {
    .refim-carousel {
        padding: 24px 0;
    }

    .carousel-track {
        padding: 0 calc((100vw - (100vw - 40px)) / 2);
        /* Center single slide on mobile */
        gap: 0px;
    }



    .carousel-slide:not(.active) {
        transform: scale(0.85);
        opacity: 0.4;
    }

    .slide-content {
        left: 20px;
        right: 20px;
        bottom: 30px;
        /* Positioned at the footer per user request */
    }

    .slide-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .slide-description {
        font-size: 0.8rem;
        margin-bottom: 12px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        display: -webkit-box;
        /* Ensure it's displayed */
    }

    .carousel-slide {
        width: calc(100vw - 40px);
        height: 495px;
        /* Refined height: original 520px - 25px */
    }

    .slide-placeholder-image span {
        font-size: 1.1rem;
    }

    .btn-primary-refim {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .carousel-indicators {
        margin-top: 16px;
        gap: 8px;
    }
}

/* ========================================
   LOGIN PAGE STYLES
   ======================================== */

.login-page {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 360px;
    position: relative;
    padding: 30px;
    background: #FFFFFF;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
}

.login-close {
    position: absolute;
    top: 20px;
    /* Inside top */
    right: 20px;
    /* Inside right */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
    text-decoration: none;
    background: transparent;
    border-radius: 50%;
}

.login-close:hover {
    background-color: #f1f5f9;
    color: var(--color-text-primary);
}

.login-close svg {
    width: 24px;
    height: 24px;
}

.login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo-container {
    margin-bottom: 20px;
    /* Reduced margin */
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-logo {
    height: 40px;
    /* Reduced height */
    width: auto;
}

.login-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    /* Reduced margin */
    width: 100%;
}

.login-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    /* Reduced font size */
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    /* Reduced margin */
    line-height: 1.4;
}

.login-benefits li svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.btn-login-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 20px;
    background-color: var(--color-white);
    border: 1px solid #1b3f6b;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

.btn-login-social i {
    font-size: 20px;
    position: absolute;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.btn-login-social:hover {
    background-color: #f1f5f9;
    /* Light gray hover */
    border-color: #163256;
    /* Slightly darker blue border on hover */
    transform: translateY(-1px);
    /* Subtle lift */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-login-social .icon-facebook {
    color: #1877F2;
}

@media (max-width: 480px) {
    .login-close {
        top: 10px;
        right: 10px;
    }

    .btn-login-social {
        font-size: 0.9rem;
        padding: 12px 20px;
    }

    .btn-login-social i {
        font-size: 18px;
        width: 20px;
        height: 20px;
        left: 20px;
    }
}

/* Favorites Page Styles */
.favorites-page {
    background-color: var(--color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: var(--color-white);
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.favorites-logo-container {
    flex: 0 0 auto;
}

.favorites-logo {
    height: 32px;
    width: auto;
}

.favorites-search-container {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.favorites-search-bar {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    padding: 8px 16px;
    /* Reduced from 10px to match button height */
    border-radius: 50px;
    width: 100%;
    max-width: 400px;
    border: 1px solid #1b3f6b;
    transition: border-color 0.3s ease;
}

.favorites-search-bar:hover,
.favorites-search-bar:focus-within {
    border-color: #1b3f6b;
}

.favorites-search-bar i {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
}

.favorites-search-input {
    border: none;
    background: transparent;
    outline: none;
    margin-left: 10px;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.favorites-home-btn {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    border: 1px solid #1b3f6b;
    /* Blue border fixed */
    padding: 8px 16px;
    border-radius: 20px;
    background-color: rgba(240, 240, 240, 0.5);
    /* Subtle gray background */
}

.favorites-search-bar {
    background-color: rgba(240, 240, 240, 0.5) !important;
    /* Force transparent gray to match if needed, or keep current */
}

.favorites-home-btn:hover {
    color: #1b3f6b;
    border-color: #1b3f6b;
}

/* Mobile Search Container */
.favorites-search-mobile {
    display: none;
    padding: 16px 24px;
    background-color: var(--color-white);
    border-bottom: 1px solid #e0e0e0;
}

.favorites-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.favorites-empty-state {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 300px;
}

.favorites-icon-wrapper {
    font-size: 3rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.favorites-empty-state h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.favorites-empty-state p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .favorites-search-container {
        display: none;
        /* Hide header search on mobile */
    }

    .favorites-search-mobile {
        display: block;
        /* Show mobile search below header */
    }

    .favorites-search-mobile .favorites-search-bar {
        max-width: 100%;
        /* Full width on mobile */
    }

    .favorites-home-btn span {
        display: none;
        /* Hide text if needed, but keeping full text per request unless space issue */
    }

    /* Adjust home button for mobile if needed, but user asked for full text "Voltar..." which might be long.
       Let's keep it but maybe reduce font size if needed. */
    .favorites-home-btn {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .favorites-home-btn i {
        font-size: 1.2rem;
        margin-left: 0 !important;
    }
}

/* Mobile Header - Single Row Layout */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .header-main {
        padding: 8px 0;
        /* Reduced padding for mobile */
    }

    .header-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 12px 10px 12px 16px;
        /* Reduced right padding */
    }

    .header-left-group {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-left: -5px;
    }

    .header-actions {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .header-actions-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        margin-right: -8px;
        /* Pull right to edge */
    }

    .btn-mobile-location,
    .btn-mobile-categories {
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .btn-mobile-location {
        margin-right: -5px;
    }

    .btn-mobile-user {
        margin-right: 0;
    }
}


/* Desktop Only Adjustments for Favorites Page */
@media (min-width: 1025px) {
    .favorites-header {
        padding: 24px 32px;
        /* Increased padding */
    }

    .favorites-logo {
        height: 48px;
        /* Increased logo size from 32px */
    }

    .favorites-search-container {
        justify-content: flex-end;
        /* Align search to the right */
        padding-right: 24px;
        /* Space between search and home button */
    }
}

/* ========================================
   LOGIN MODAL STYLES
   ======================================== */

.login-logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.login-modal-logo {
    height: 48px;
    width: auto;
}

.login-modal-content {
    padding: 0 10px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--color-gray-900);
    transition: all var(--transition-fast);
    background-color: var(--color-gray-100);
}

.form-input:focus {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 63, 107, 0.1);
}

.btn-submit-refim {
    margin-top: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.btn-submit-refim:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    opacity: 0.95;
}

.btn-submit-refim:active {
    transform: translateY(0);
}

.login-modal {
    max-width: 440px;
}

/* Password Toggle Styles */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--color-gray-700);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   REFIM CARDS SECTION - HORIZONTAL SCROLL
   ======================================== */

.refim-cards-section {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding: 60px 0;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 24px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.section-title .refim-highlight {
    color: #4a90d9;
}

.section-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    transition: all var(--transition-fast);
}

.section-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Cards Wrapper */
.refim-cards-wrapper {
    position: relative;
    width: 100%;
}

/* Horizontal Scroll Container */
.refim-cards-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    padding: 8px 24px;
    width: 100%;
}

.refim-cards-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera */
}

/* Navigation Arrows */
.cards-arrow {
    position: absolute;
    top: 140px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.cards-arrow-left {
    left: 12px;
}

.cards-arrow-right {
    right: 12px;
}

.cards-arrow svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: all var(--transition-fast);
}

.cards-arrow:hover {
    background: var(--color-primary);
}

.cards-arrow:hover svg {
    color: var(--color-white);
}

.cards-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* Individual Card */
.refim-card {
    flex: 0 0 280px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    cursor: pointer;
}

.refim-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Card Image Area */
.refim-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* Card Placeholder (same style as carousel) */
.refim-card-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a3a5c 0%, #0d1f33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.refim-card-placeholder span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.refim-card-placeholder .refim-highlight {
    color: #4a90d9;
    font-weight: 700;
}

/* Favorite Button */
.favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-btn svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
    transition: all var(--transition-fast);
}

.favorite-btn:hover {
    background: var(--color-white);
    transform: scale(1.1);
}

.favorite-btn:hover svg {
    color: #ff6b6b;
}

.favorite-btn.active svg {
    fill: #ff6b6b;
    color: #ff6b6b;
}

/* Card Info */
.refim-card-info {
    padding: 16px 4px;
}

/* Card Location */
.refim-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.refim-card-location svg {
    width: 14px;
    height: 14px;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.refim-card-location span {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

/* Card Title */
.refim-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 4px;
    line-height: 1.4;
}

.refim-card-title .refim-highlight {
    color: #4a90d9;
}

/* Card Date */
.refim-card-date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: 8px;
}

/* Card Price */
.refim-card-price {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.refim-card-price strong {
    color: var(--color-gray-900);
    font-weight: 700;
}

/* Large Cards Variant (Destaques da Semana) */
.refim-cards-large .refim-card {
    flex: 0 0 320px;
}

.refim-cards-large .refim-card-image {
    aspect-ratio: 4 / 5;
}

.refim-cards-large .refim-card-placeholder span {
    font-size: 1.1rem;
}

.refim-cards-large .refim-card-title {
    font-size: 1.1rem;
}

.refim-cards-large .refim-card-info {
    padding: 18px;
}

/* Top 10 Section Styles */
.refim-top10-section .section-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.top10-badge {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1b3f6b;
    letter-spacing: -1px;
}

.top10-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

/* Esconder quebra de linha no desktop */
.mobile-break {
    display: none;
}

.rank-badge {
    position: absolute;
    bottom: -15px;
    left: 8px;
    font-size: 8rem;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}



.top10-card:hover .rank-badge {
    color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Top 10 Card Info Styles */
.top10-card .refim-card-info {
    padding: 16px 4px;
    background: transparent;
}

.top10-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.top10-card-venue {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 2px;
    line-height: 1.4;
}

.top10-card-date {
    font-size: 0.8rem;
    color: #4a90d9;
    font-weight: 500;
}

.refim-card-location-text {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 4px;
}

/* ========================================
   REFIM CARDS RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
    .refim-cards-section {
        padding: 40px 16px;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .refim-card {
        flex: 0 0 220px;
    }

    .cards-arrow {
        width: 40px;
        height: 40px;
    }

    .cards-arrow svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 600px) {
    .refim-cards-section {
        padding: 32px 12px;
    }

    .section-header {
        margin-bottom: 20px;
        padding: 0 4px;
    }

    .section-title {
        font-size: 1.125rem;
    }

    /* Top 10 Mobile Title Layout */
    .refim-top10-section .section-title {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .refim-top10-section .top10-badge {
        font-size: 2.5rem;
        line-height: 1;
    }

    .top10-subtitle {
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-gray-600);
        line-height: 1.3;
    }

    .mobile-break {
        display: inline;
    }

    .section-link {
        font-size: 0.875rem;
    }

    .refim-cards-wrapper {
        gap: 8px;
    }

    .refim-cards-scroll {
        gap: 12px;
    }

    .refim-card {
        flex: 0 0 180px;
    }

    .refim-card-placeholder span {
        font-size: 0.8125rem;
    }

    .refim-card-info {
        padding: 12px 2px;
    }

    .refim-card-title {
        font-size: 0.9375rem;
    }

    .refim-card-location span,
    .refim-card-date {
        font-size: 0.75rem;
    }

    .refim-card-price {
        font-size: 0.8125rem;
    }

    .favorite-btn {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px;
    }

    .favorite-btn svg {
        width: 16px;
        height: 16px;
    }

    .cards-arrow {
        width: 32px;
        height: 32px;
    }

    .cards-arrow svg {
        width: 22px;
        height: 22px;
    }
}

/* ========================================
   PRODUCERS SECTION
   ======================================== */

.producers-section {
    background: linear-gradient(135deg, #e8eef5 0%, #d4e0ed 50%, #c5d5e8 100%);
    padding: 60px 60px;
    margin-top: 40px;
}

.producers-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.producers-content {
    flex: 1;
    max-width: 500px;
}

.producers-logo {
    height: 40px;
    width: auto;
    margin-bottom: 24px;
}

.producers-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1b3f6b;
    line-height: 1.2;
    margin-bottom: 32px;
}

.producers-title .refim-highlight {
    color: #4a90d9;
}

.producers-features {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

.producer-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 200px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    color: #1b3f6b;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

.producer-feature p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.producer-feature strong {
    color: #1e293b;
}

.producers-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-producer-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: #1b3f6b;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(27, 63, 107, 0.3);
}

.btn-producer-primary:hover {
    background: #163256;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 63, 107, 0.4);
}

.btn-producer-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: transparent;
    color: #1b3f6b;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #1b3f6b;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-producer-secondary:hover {
    background: rgba(27, 63, 107, 0.1);
    transform: translateY(-2px);
}

.producers-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.producers-laptop {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.laptop-screen {
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(27, 63, 107, 0.2);
    border: 2px solid #e2e8f0;
}

.dashboard-placeholder {
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}

.dashboard-header {
    background: #1b3f6b;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.dashboard-nav {
    display: flex;
    gap: 6px;
}

.dashboard-nav::before,
.dashboard-nav::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.dashboard-nav::before {
    background: #ef4444;
}

.dashboard-nav::after {
    background: #22c55e;
}

.dashboard-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 80px;
}

.bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

.bar-1 {
    height: 40%;
    background: linear-gradient(to top, #1b3f6b, #2a5a8f);
}

.bar-2 {
    height: 65%;
    background: linear-gradient(to top, #1b3f6b, #2a5a8f);
}

.bar-3 {
    height: 50%;
    background: linear-gradient(to top, #4a90d9, #6ba8e5);
}

.bar-4 {
    height: 85%;
    background: linear-gradient(to top, #1b3f6b, #2a5a8f);
}

.bar-5 {
    height: 70%;
    background: linear-gradient(to top, #4a90d9, #6ba8e5);
}

.chart-line {
    height: 60px;
}

.chart-line svg {
    width: 100%;
    height: 100%;
}

.laptop-base {
    background: linear-gradient(to bottom, #e2e8f0, #cbd5e1);
    height: 16px;
    border-radius: 0 0 4px 4px;
    position: relative;
}

.laptop-base::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 120px;
    height: 8px;
    background: #94a3b8;
    border-radius: 0 0 8px 8px;
}

/* Producers Section Responsive */
@media (max-width: 968px) {
    .producers-container {
        flex-direction: column;
        text-align: center;
    }

    .producers-content {
        max-width: 100%;
    }

    .producers-features {
        justify-content: center;
    }

    .producer-feature {
        align-items: center;
        text-align: center;
    }

    .producers-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .producers-section {
        padding: 40px 16px;
    }

    .producers-title {
        font-size: 1.75rem;
    }

    .producers-features {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .producer-feature {
        max-width: 280px;
    }

    .producers-laptop {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .producers-title {
        font-size: 1.5rem;
    }

    .producers-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-producer-primary,
    .btn-producer-secondary {
        width: 100%;
    }

    .producers-laptop {
        max-width: 280px;
    }

    .chart-bars {
        height: 60px;
    }
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.site-footer {
    background: #1b3f6b;
    color: #ffffff;
    padding: 60px 40px 30px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand {
    max-width: 280px;
}

.footer-logo {
    height: 45px;
    width: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.footer-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact-list svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #4a90d9;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #4a90d9;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #4a90d9;
    transform: translateY(-3px);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Footer Responsive */
@media (max-width: 968px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-brand {
        grid-column: span 2;
        max-width: 100%;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 16px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 40px 24px 24px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-contact-list li {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
}

/* ========================================
   FAQ SECTION
   ======================================== */

.faq-section {
    background: #f8fafc;
    padding: 60px 40px;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 32px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #f1f5f9;
}

.faq-question span {
    flex: 1;
    padding-right: 16px;
}

.faq-icon {
    width: 20px;
    height: 20px;
    color: #4a90d9;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 24px 20px;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 24px;
    }

    .faq-title {
        font-size: 1.25rem;
    }

    .faq-question {
        padding: 16px 20px;
        font-size: 0.9rem;
    }

    .faq-answer p {
        padding: 0 20px 16px;
    }
}

/* ========================================
   LOGIN MODAL STYLES
   ======================================== */

.login-modal {
    max-width: 420px;
}

.login-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-logo-wrapper {
    text-align: center;
    padding: 10px 0;
}

.login-modal-logo {
    height: 48px;
    width: auto;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    color: var(--color-gray-800);
    background: var(--color-gray-100);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-input:focus {
    background: var(--color-white);
    border-color: var(--color-primary);
    outline: none;
}

.form-input::placeholder {
    color: var(--color-gray-400);
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--color-gray-600);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.btn-submit-refim {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 8px;
}

.btn-submit-refim:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-submit-refim:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Login Link */
.login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.login-link:hover {
    color: var(--color-primary-dark);
}

.login-link:hover svg {
    transform: translateX(4px);
}

.login-link svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

/* Account Exists Alert */
.account-exists-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.account-exists-alert:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.account-exists-alert:hover svg {
    transform: translateX(3px);
}

.account-exists-alert svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

/* Input with error state */
.form-input.has-error {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.03);
}

/* ========================================
   PROFILE DROPDOWN
   ======================================== */

.profile-dropdown,
.profile-dropdown-mobile {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-gray-200);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 150;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

.dropdown-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobile dropdown position */
.dropdown-menu-mobile {
    right: -10px;
}

/* ========================================
   INPUT WITH ICON (CHECK MARK)
   ======================================== */

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .form-input {
    padding-right: 40px;
}

.input-with-icon .check-icon {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    color: #10b981;
}

/* ========================================
   CHECKBOX CUSTOM
   ======================================== */

.form-group-checkbox {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-300);
    border-radius: 4px;
    background: var(--color-white);
    transition: all var(--transition-fast);
    position: relative;
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after {
    opacity: 1;
}

/* ========================================
   LOGIN ALERTS
   ======================================== */

/* Email not found alert (below input) */
.email-not-found-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.email-not-found-alert:hover {
    background: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

.email-not-found-alert:hover svg {
    transform: translateX(3px);
}

.email-not-found-alert svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

/* Forgot password alert */
.forgot-password-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.forgot-password-alert:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.forgot-password-alert:hover svg {
    transform: translateX(3px);
}

.forgot-password-alert svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

/* Email Pending Alert (Yellow/Warning) */
.email-pending-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-sm);
}

.email-pending-alert svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Email Confirmed Alert (Green) */
.email-confirmed-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #059669;
    background: rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-sm);
}

.email-confirmed-alert svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Disabled submit button */
.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   PRODUCER MODAL STYLES
   ======================================== */

.producer-modal {
    max-width: 480px;
}

.producer-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Form Row (side by side fields) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-row .form-group {
    margin-bottom: 0;
}

/* Form Divider */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    font-weight: 500;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

/* Select styling */
.form-input select,
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Producer Link - highlight style */
.producer-link {
    margin-top: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(27, 63, 107, 0.05) 0%, rgba(74, 144, 217, 0.08) 100%);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-primary-light);
}

.producer-link:hover {
    background: linear-gradient(135deg, rgba(27, 63, 107, 0.1) 0%, rgba(74, 144, 217, 0.15) 100%);
    border-color: var(--color-primary);
}

/* Responsive for producer modal */
@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .producer-modal {
        max-width: 100%;
    }
}

/* No Events Message */
.no-events-message {
    width: 100%;
    text-align: center;
    padding: 40px;
    color: var(--color-gray-500);
    font-size: 1.1rem;
    font-weight: 500;
}

/* No transition helper for carousel fix */
.carousel-track.no-transition .carousel-slide,
.carousel-track.no-transition .slide-content,
.carousel-track.no-transition .slide-background img {
    transition: none !important;
}


/* Search Dropdown Results */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin-top: 8px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.search-dropdown.active {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-gray-100);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--color-gray-50);
}

.search-result-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-gray-200);
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.search-result-meta {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}