/* /Components/BarDetails/AddIngredientModal.razor.rz.scp.css */
.modal-overlay[b-eezb4j663f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-eezb4j663f] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-eezb4j663f 0.3s ease;
}

@keyframes slideIn-b-eezb4j663f {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-eezb4j663f] {
    padding: 1.5rem;
    border-bottom: 2px solid #f5f5dc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-eezb4j663f] {
    color: #3e2723;
    font-size: 1.5rem;
    margin: 0;
}

.modal-close[b-eezb4j663f] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6d4c41;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.modal-close:hover[b-eezb4j663f] {
    background: #f5f5dc;
    color: #3e2723;
}

.modal-body[b-eezb4j663f] {
    padding: 1.5rem;
}

.modal-description[b-eezb4j663f] {
    color: #6d4c41;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.form-group[b-eezb4j663f] {
    margin-bottom: 1rem;
}

.form-group label[b-eezb4j663f] {
    display: block;
    color: #3e2723;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-input[b-eezb4j663f] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #d7ccc8;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus[b-eezb4j663f] {
    outline: none;
    border-color: #6d4c41;
    box-shadow: 0 0 0 3px rgba(109, 76, 65, 0.1);
}

.form-input.error[b-eezb4j663f] {
    border-color: #d32f2f;
}

.form-input:disabled[b-eezb4j663f] {
    background: #f5f5f5;
    cursor: not-allowed;
}

.error-message[b-eezb4j663f] {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.modal-footer[b-eezb4j663f] {
    padding: 1.5rem;
    border-top: 2px solid #f5f5dc;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.modal-button[b-eezb4j663f] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-button.secondary[b-eezb4j663f] {
    background: white;
    color: #6d4c41;
    border: 2px solid #d7ccc8;
}

.modal-button.secondary:hover:not(:disabled)[b-eezb4j663f] {
    background: #f5f5dc;
}

.modal-button.primary[b-eezb4j663f] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.modal-button.primary:hover:not(:disabled)[b-eezb4j663f] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.modal-button:disabled[b-eezb4j663f] {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-spinner[b-eezb4j663f] {
    animation: spin-b-eezb4j663f 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-eezb4j663f {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
    .modal-content[b-eezb4j663f] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header h2[b-eezb4j663f] {
        font-size: 1.25rem;
    }

    .modal-footer[b-eezb4j663f] {
        flex-direction: column;
    }

    .modal-button[b-eezb4j663f] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/BarDetails/BarHeader.razor.rz.scp.css */
.bar-header[b-vyrnzqbfip] {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 0;
    position: relative;
}

.back-button[b-vyrnzqbfip] {
    position: absolute;
    left: 0;
    top: 2rem;
    background: white;
    color: #6d4c41;
    border: 2px solid #d7ccc8;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-button:hover[b-vyrnzqbfip] {
    background: #6d4c41;
    color: white;
    border-color: #6d4c41;
    transform: translateX(-3px);
}

.back-icon[b-vyrnzqbfip] {
    font-size: 1.2rem;
    font-weight: bold;
}

.bar-title[b-vyrnzqbfip] {
    color: #3e2723;
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.bar-status[b-vyrnzqbfip] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.status-badge[b-vyrnzqbfip] {
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.open-badge[b-vyrnzqbfip] {
    background: linear-gradient(135deg, #ff6f00 0%, #ff9800 100%);
    color: white;
}

.supply-badge[b-vyrnzqbfip] {
    background: linear-gradient(135deg, #6d4c41 0%, #8d6e63 100%);
    color: white;
}

.empty-badge[b-vyrnzqbfip] {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    color: white;
}

.status-icon[b-vyrnzqbfip] {
    font-size: 1.1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .bar-header[b-vyrnzqbfip] {
        padding-top: 4rem;
    }

    .back-button[b-vyrnzqbfip] {
        position: static;
        margin-bottom: 2rem;
    }

    .bar-title[b-vyrnzqbfip] {
        font-size: 2rem;
    }
}
/* /Components/BarDetails/BrewCycleResultsComponent.razor.rz.scp.css */
.results-display[b-reo4tcy7ir] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1.5rem;
}

.results-title[b-reo4tcy7ir] {
    color: #d4a574;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.video-name-section[b-reo4tcy7ir] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.3);
}

.video-name-title[b-reo4tcy7ir] {
    color: #d4a574;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-name[b-reo4tcy7ir] {
    color: #e8d4bf;
    font-size: 1rem;
    padding: 0.75rem;
    background: rgba(212, 165, 116, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(212, 165, 116, 0.3);
    margin: 0;
}

.section-title[b-reo4tcy7ir] {
    color: #d4a574;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.owners-section[b-reo4tcy7ir] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.3);
}

.owners-list[b-reo4tcy7ir] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.owner-item[b-reo4tcy7ir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(212, 165, 116, 0.1);
    border-radius: 6px;
    border: 2px solid rgba(212, 165, 116, 0.4);
    color: #d4a574;
    font-weight: 600;
    font-size: 1.1rem;
}

.owner-icon[b-reo4tcy7ir] {
    font-size: 1.5rem;
}

.owner-name[b-reo4tcy7ir] {
    flex: 1;
}

.votes-section[b-reo4tcy7ir] {
    margin-top: 1rem;
}

.votes-chart[b-reo4tcy7ir] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vote-bar[b-reo4tcy7ir] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

.vote-bar.correct-owner[b-reo4tcy7ir] {
    border: 2px solid rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.1);
}

.bar-header[b-reo4tcy7ir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bar-icon[b-reo4tcy7ir] {
    font-size: 1.25rem;
}

.bar-name[b-reo4tcy7ir] {
    flex: 1;
    color: #d4a574;
    font-weight: 600;
    font-size: 1.1rem;
}

.bar-vote-count[b-reo4tcy7ir] {
    color: #a88966;
    font-size: 0.9rem;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.correct-badge[b-reo4tcy7ir] {
    color: #4caf50;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: 12px;
    text-transform: uppercase;
}

.bar-visual[b-reo4tcy7ir] {
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.bar-fill[b-reo4tcy7ir] {
    height: 100%;
    background: linear-gradient(90deg, #d4a574 0%, #b8935d 100%);
    border-radius: 4px;
    transition: width 0.6s ease-out;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.4);
}

.vote-bar.correct-owner .bar-fill[b-reo4tcy7ir] {
    background: linear-gradient(90deg, #4caf50 0%, #388e3c 100%);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.bar-voters[b-reo4tcy7ir] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(212, 165, 116, 0.2);
}

.voters-label[b-reo4tcy7ir] {
    color: #a88966;
    font-size: 0.85rem;
    font-weight: 600;
}

.voter-chip[b-reo4tcy7ir] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(212, 165, 116, 0.15);
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 16px;
    color: #d4a574;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-votes[b-reo4tcy7ir] {
    color: #a88966;
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.brew-cycle-actions[b-reo4tcy7ir] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 165, 116, 0.3);
}

.next-ingredient-button[b-reo4tcy7ir],
.end-brew-cycle-button[b-reo4tcy7ir] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.next-ingredient-button[b-reo4tcy7ir] {
    background: linear-gradient(135deg, #d4a574 0%, #b8935d 100%);
    color: #2c1810;
}

.next-ingredient-button:hover:not(:disabled)[b-reo4tcy7ir] {
    background: linear-gradient(135deg, #e8b686 0%, #d4a574 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}

.end-brew-cycle-button[b-reo4tcy7ir] {
    background: linear-gradient(135deg, #c44536 0%, #a83729 100%);
    color: #fff;
}

.end-brew-cycle-button:hover:not(:disabled)[b-reo4tcy7ir] {
    background: linear-gradient(135deg, #d85648 0%, #c44536 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 69, 54, 0.4);
}

.next-ingredient-button:disabled[b-reo4tcy7ir],
.end-brew-cycle-button:disabled[b-reo4tcy7ir] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button-icon[b-reo4tcy7ir] {
    font-size: 1.2rem;
}

.loading-actions[b-reo4tcy7ir] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #d4a574;
    font-size: 1rem;
}

.button-spinner[b-reo4tcy7ir] {
    font-size: 1.2rem;
    animation: spin-b-reo4tcy7ir 1s linear infinite;
}

@keyframes spin-b-reo4tcy7ir {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/BarDetails/BrewingView.razor.rz.scp.css */
.brewing-empty-state[b-j5x4uzncqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border-radius: 12px;
    min-height: 400px;
}

.brewing-icon[b-j5x4uzncqp] {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    animation: steam-b-j5x4uzncqp 2s ease-in-out infinite;
}

@keyframes steam-b-j5x4uzncqp {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.brewing-empty-state h2[b-j5x4uzncqp] {
    color: #d4a574;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.brewing-empty-state p[b-j5x4uzncqp] {
    color: #a88966;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 500px;
}

.start-brew-button[b-j5x4uzncqp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #d4a574 0%, #b8935d 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.start-brew-button:hover:not(:disabled)[b-j5x4uzncqp] {
    background: linear-gradient(135deg, #e0b68a 0%, #c4a06f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
}

.start-brew-button:disabled[b-j5x4uzncqp] {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-icon[b-j5x4uzncqp],
.button-spinner[b-j5x4uzncqp] {
    font-size: 1.5rem;
}

.button-spinner[b-j5x4uzncqp] {
    animation: spin-b-j5x4uzncqp 1s linear infinite;
}

@keyframes spin-b-j5x4uzncqp {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.brewing-active[b-j5x4uzncqp] {
    padding: 2rem;
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border-radius: 12px;
}

.brewing-header[b-j5x4uzncqp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.brewing-header h2[b-j5x4uzncqp] {
    color: #d4a574;
    font-size: 2rem;
    margin: 0;
}

.brewing-badge[b-j5x4uzncqp] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ff6b35 0%, #f73b00 100%);
    color: #fff;
    font-weight: 600;
    border-radius: 20px;
    font-size: 0.875rem;
    animation: pulse-b-j5x4uzncqp 2s ease-in-out infinite;
}

@keyframes pulse-b-j5x4uzncqp {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.brewing-content[b-j5x4uzncqp] {
    display: flex;
    gap: 2rem;
}

.brewing-left[b-j5x4uzncqp] {
    flex: 2;
    min-width: 0;
}

.brewing-right[b-j5x4uzncqp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.right-upper[b-j5x4uzncqp] {
    flex: 0 1 auto;
}

.right-lower[b-j5x4uzncqp] {
    flex: 0 1 auto;
}
/* /Components/BarDetails/IngredientsView.razor.rz.scp.css */
.add-ingredient-section[b-8eql802ry3] {
    margin-bottom: 2rem;
    text-align: center;
}

.add-ingredient-button[b-8eql802ry3] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.add-ingredient-button:hover[b-8eql802ry3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.button-icon[b-8eql802ry3] {
    font-size: 1.2rem;
}

.max-ingredients-info[b-8eql802ry3] {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 2px solid #ffc107;
    border-radius: 15px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #3e2723;
    font-weight: 500;
}

.info-icon[b-8eql802ry3] {
    font-size: 1.5rem;
}

.ingredients-grid[b-8eql802ry3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.ingredient-card[b-8eql802ry3] {
    background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 3px solid #8d6e63;
    position: relative;
    overflow: hidden;
}

.ingredient-card:hover[b-8eql802ry3] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ingredient-card.used[b-8eql802ry3] {
    opacity: 0.7;
    border-color: #4caf50;
}

.ingredient-thumbnail[b-8eql802ry3] {
    width: 100%;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: #d7ccc8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-thumbnail img[b-8eql802ry3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ingredient-icon[b-8eql802ry3] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.ingredient-name[b-8eql802ry3] {
    color: #3e2723;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6rem;
}

.ingredient-url[b-8eql802ry3] {
    margin-bottom: 0.5rem;
}

.ingredient-url a[b-8eql802ry3] {
    color: #6d4c41;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.ingredient-url a:hover[b-8eql802ry3] {
    color: #3e2723;
    text-decoration: underline;
}

.ingredient-badge[b-8eql802ry3] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    z-index: 10;
}

.delete-button[b-8eql802ry3] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
    z-index: 10;
}

.delete-button:hover[b-8eql802ry3] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.6);
}

.delete-button:active[b-8eql802ry3] {
    transform: scale(0.95);
}

.loading-container[b-8eql802ry3] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-8eql802ry3] {
    font-size: 4rem;
    animation: spin-b-8eql802ry3 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-8eql802ry3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-8eql802ry3] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-8eql802ry3] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-8eql802ry3] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-8eql802ry3] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-8eql802ry3] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-8eql802ry3] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-8eql802ry3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.empty-view[b-8eql802ry3] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-8eql802ry3] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-view h2[b-8eql802ry3] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.empty-view p[b-8eql802ry3] {
    color: #6d4c41;
    font-size: 1.1rem;
}

.contributors-section[b-8eql802ry3] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid #d7ccc8;
}

.section-title[b-8eql802ry3] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

.contributors-list[b-8eql802ry3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.contributor-item[b-8eql802ry3] {
    background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #8d6e63;
}

.contributor-item:hover[b-8eql802ry3] {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.contributor-item.contributed[b-8eql802ry3] {
    border-color: #4caf50;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.contributor-item.not-contributed[b-8eql802ry3] {
    border-color: #ff9800;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.contributor-name[b-8eql802ry3] {
    color: #3e2723;
    font-weight: 600;
    font-size: 1rem;
}

.contributor-status[b-8eql802ry3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.contributor-item.contributed .contributor-status[b-8eql802ry3] {
    color: #2e7d32;
}

.contributor-item.not-contributed .contributor-status[b-8eql802ry3] {
    color: #ef6c00;
}

.status-icon[b-8eql802ry3] {
    font-size: 1.1rem;
}

.status-text[b-8eql802ry3] {
    font-size: 0.85rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .ingredients-grid[b-8eql802ry3] {
        grid-template-columns: 1fr;
    }

    .add-ingredient-button[b-8eql802ry3] {
        width: 100%;
        justify-content: center;
    }

    .max-ingredients-info[b-8eql802ry3] {
        flex-direction: column;
        text-align: center;
    }

    .ingredient-thumbnail[b-8eql802ry3] {
        height: 200px;
    }

    .contributors-list[b-8eql802ry3] {
        grid-template-columns: 1fr;
    }

    .section-title[b-8eql802ry3] {
        font-size: 1.5rem;
    }
}
/* /Components/BarDetails/IngredientVideoComponent.razor.rz.scp.css */
.ingredient-display[b-ni2e63evn7] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1.5rem;
}

.ingredient-title[b-ni2e63evn7] {
    color: #d4a574;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.ingredient-video[b-ni2e63evn7] {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 1rem;
}

[b-ni2e63evn7] .ingredient-video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.ingredient-link[b-ni2e63evn7] {
    text-align: center;
}

.watch-link[b-ni2e63evn7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #d4a574 0%, #b8935d 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.watch-link:hover[b-ni2e63evn7] {
    background: linear-gradient(135deg, #e0b68a 0%, #c4a06f 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}
/* /Components/BarDetails/PlaylistView.razor.rz.scp.css */
.loading-container[b-m5f595opdg] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-m5f595opdg] {
    font-size: 4rem;
    animation: spin-b-m5f595opdg 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-m5f595opdg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-m5f595opdg] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-m5f595opdg] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-m5f595opdg] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-m5f595opdg] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-m5f595opdg] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-m5f595opdg] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-m5f595opdg] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.playlist-header[b-m5f595opdg] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.playlist-icon[b-m5f595opdg] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.playlist-header h2[b-m5f595opdg] {
    color: #3e2723;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.playlist-subtitle[b-m5f595opdg] {
    color: #6d4c41;
    font-size: 1.1rem;
    font-style: italic;
}

.playlist-grid[b-m5f595opdg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.playlist-card[b-m5f595opdg] {
    background: linear-gradient(135deg, #f5f5dc 0%, #efebe9 100%);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 3px solid #8d6e63;
}

.playlist-card:hover[b-m5f595opdg] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.playlist-thumbnail[b-m5f595opdg] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #d7ccc8;
}

.playlist-thumbnail img[b-m5f595opdg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.playlist-card:hover .playlist-thumbnail img[b-m5f595opdg] {
    transform: scale(1.05);
}

.play-overlay[b-m5f595opdg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-card:hover .play-overlay[b-m5f595opdg] {
    opacity: 1;
}

.play-button[b-m5f595opdg] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.play-button:hover[b-m5f595opdg] {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.playlist-info[b-m5f595opdg] {
    padding: 1.25rem;
}

.playlist-song-name[b-m5f595opdg] {
    color: #3e2723;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4rem;
}

.playlist-link[b-m5f595opdg] {
    color: #6d4c41;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    display: inline-block;
}

.playlist-link:hover[b-m5f595opdg] {
    color: #3e2723;
    text-decoration: underline;
}

.empty-view[b-m5f595opdg] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-m5f595opdg] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-view h2[b-m5f595opdg] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.empty-view p[b-m5f595opdg] {
    color: #6d4c41;
    font-size: 1.1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .playlist-grid[b-m5f595opdg] {
        grid-template-columns: 1fr;
    }

    .playlist-header h2[b-m5f595opdg] {
        font-size: 2rem;
    }

    .playlist-subtitle[b-m5f595opdg] {
        font-size: 1rem;
    }

    .playlist-thumbnail[b-m5f595opdg] {
        height: 220px;
    }
}
/* /Components/BarDetails/StatsView.razor.rz.scp.css */
.loading-container[b-7jy46cch68] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-7jy46cch68] {
    font-size: 4rem;
    animation: spin-b-7jy46cch68 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-7jy46cch68 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-7jy46cch68] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-7jy46cch68] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.error-icon[b-7jy46cch68] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-7jy46cch68] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-7jy46cch68] {
    color: #6d4c41;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-7jy46cch68] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-7jy46cch68] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.stats-container[b-7jy46cch68] {
    padding: 1rem 0;
}

.stats-header[b-7jy46cch68] {
    text-align: center;
    margin-bottom: 2rem;
}

.stats-header h2[b-7jy46cch68] {
    color: #3e2723;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.stats-overview[b-7jy46cch68] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card[b-7jy46cch68] {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-7jy46cch68] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-7jy46cch68] {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.stat-content[b-7jy46cch68] {
    flex: 1;
}

.stat-value[b-7jy46cch68] {
    font-size: 2rem;
    font-weight: 700;
    color: #3e2723;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-7jy46cch68] {
    font-size: 0.9rem;
    color: #6d4c41;
    font-weight: 500;
}

.hipsters-section[b-7jy46cch68] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hipsters-section h3[b-7jy46cch68] {
    color: #3e2723;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hipsters-list[b-7jy46cch68] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hipster-card[b-7jy46cch68] {
    background: linear-gradient(135deg, #f5f5dc 0%, #fafafa 100%);
    border: 2px solid #d7ccc8;
    border-radius: 15px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.hipster-card:hover[b-7jy46cch68] {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hipster-card.rank-first[b-7jy46cch68] {
    background: linear-gradient(135deg, #fff9e6 0%, #fffaed 100%);
    border-color: #ffd700;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.hipster-card.rank-second[b-7jy46cch68] {
    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
    border-color: #c0c0c0;
    border-width: 3px;
}

.hipster-card.rank-third[b-7jy46cch68] {
    background: linear-gradient(135deg, #fff5e6 0%, #fff9f0 100%);
    border-color: #cd7f32;
    border-width: 3px;
}

.hipster-rank[b-7jy46cch68] {
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
}

.rank-medal[b-7jy46cch68] {
    font-size: 2.5rem;
    display: block;
}

.rank-number[b-7jy46cch68] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6d4c41;
    display: block;
}

.hipster-name[b-7jy46cch68] {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3e2723;
}

.hipster-stats[b-7jy46cch68] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item[b-7jy46cch68] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-item-value[b-7jy46cch68] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3e2723;
    line-height: 1;
}

.stat-item-label[b-7jy46cch68] {
    font-size: 0.75rem;
    color: #6d4c41;
    font-weight: 500;
    text-transform: uppercase;
}

.stat-divider[b-7jy46cch68] {
    color: #d7ccc8;
    font-size: 1.2rem;
    font-weight: 300;
}

.empty-stats[b-7jy46cch68] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-7jy46cch68] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-stats h3[b-7jy46cch68] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.empty-stats p[b-7jy46cch68] {
    color: #6d4c41;
    font-size: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .stats-overview[b-7jy46cch68] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hipster-card[b-7jy46cch68] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hipster-name[b-7jy46cch68] {
        flex: 1 1 100%;
        order: -1;
    }

    .hipster-stats[b-7jy46cch68] {
        flex: 1;
        justify-content: space-around;
    }

    .stat-item-value[b-7jy46cch68] {
        font-size: 1.1rem;
    }

    .stat-item-label[b-7jy46cch68] {
        font-size: 0.7rem;
    }
}
/* /Components/BarDetails/ViewSwitcher.razor.rz.scp.css */
.view-switcher[b-clsg6uuw4i] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.view-tab[b-clsg6uuw4i] {
    background: white;
    color: #6d4c41;
    border: 2px solid #d7ccc8;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.view-tab:hover[b-clsg6uuw4i] {
    background: #f5f5dc;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.view-tab.active[b-clsg6uuw4i] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border-color: #6d4c41;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.tab-icon[b-clsg6uuw4i] {
    font-size: 1.2rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .view-switcher[b-clsg6uuw4i] {
        flex-direction: column;
    }

    .view-tab[b-clsg6uuw4i] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/BarDetails/VotersList.razor.rz.scp.css */
.voters-list[b-vwt7jf1uol] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.voters-title[b-vwt7jf1uol] {
    color: #d4a574;
    font-size: 1.3rem;
    margin: 0;
    text-align: center;
}

.vote-count[b-vwt7jf1uol] {
    color: #d4a574;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(212, 165, 116, 0.3);
}

.hipsters-list[b-vwt7jf1uol] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hipster-item[b-vwt7jf1uol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    color: #a88966;
    border: 1px solid rgba(212, 165, 116, 0.2);
    transition: all 0.3s ease;
}

.hipster-item.voted[b-vwt7jf1uol] {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.1);
}

.vote-checkmark[b-vwt7jf1uol] {
    color: #4caf50;
    font-size: 1.2rem;
    font-weight: bold;
}

.vote-pending[b-vwt7jf1uol] {
    color: #a88966;
    font-size: 1.2rem;
    opacity: 0.5;
}

.hipster-name[b-vwt7jf1uol] {
    flex: 1;
    font-size: 1rem;
}

.no-hipsters[b-vwt7jf1uol] {
    text-align: center;
    padding: 2rem 1rem;
}

.no-hipsters p[b-vwt7jf1uol] {
    color: #a88966;
    font-size: 1rem;
    font-style: italic;
    margin: 0;
}

.reveal-button[b-vwt7jf1uol] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #d4a574 0%, #b8935d 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
    margin-top: 0.5rem;
    width: 100%;
}

.reveal-button:hover:not(:disabled)[b-vwt7jf1uol] {
    background: linear-gradient(135deg, #e0b68a 0%, #c4a06f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
}

.reveal-button:disabled[b-vwt7jf1uol] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.button-spinner[b-vwt7jf1uol] {
    animation: spin-b-vwt7jf1uol 1s linear infinite;
}

@keyframes spin-b-vwt7jf1uol {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/BarDetails/VotingPanel.razor.rz.scp.css */
.voting-panel[b-gbdtt0nf8x] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.voting-title[b-gbdtt0nf8x] {
    color: #d4a574;
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
}

.voting-submitted[b-gbdtt0nf8x] {
    text-align: center;
    padding: 2rem;
    background: rgba(76, 175, 80, 0.2);
    border: 2px solid rgba(76, 175, 80, 0.4);
    border-radius: 8px;
}

.success-icon[b-gbdtt0nf8x] {
    font-size: 3rem;
    color: #4caf50;
    margin-bottom: 1rem;
}

.voting-submitted p[b-gbdtt0nf8x] {
    color: #81c784;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.voting-revealed[b-gbdtt0nf8x] {
    text-align: center;
    padding: 2rem;
    background: rgba(212, 165, 116, 0.2);
    border: 2px solid rgba(212, 165, 116, 0.4);
    border-radius: 8px;
}

.revealed-icon[b-gbdtt0nf8x] {
    font-size: 3rem;
    color: #d4a574;
    margin-bottom: 1rem;
}

.voting-revealed p[b-gbdtt0nf8x] {
    color: #d4a574;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.voting-info[b-gbdtt0nf8x] {
    text-align: center;
    padding: 1rem;
    background: rgba(212, 165, 116, 0.1);
    border-radius: 6px;
    border: 2px solid rgba(212, 165, 116, 0.3);
}

.beans-count[b-gbdtt0nf8x] {
    color: #d4a574;
    font-size: 1.1rem;
    margin: 0;
}

.beans-count strong[b-gbdtt0nf8x] {
    color: #e0b68a;
    font-size: 1.3rem;
}

.hipsters-list[b-gbdtt0nf8x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hipster-button[b-gbdtt0nf8x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 165, 116, 0.3);
    border-radius: 8px;
    color: #d4a574;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
}

.hipster-button:hover:not(:disabled)[b-gbdtt0nf8x] {
    background: rgba(212, 165, 116, 0.2);
    border-color: rgba(212, 165, 116, 0.5);
    transform: translateX(5px);
}

.hipster-button.selected[b-gbdtt0nf8x] {
    background: rgba(212, 165, 116, 0.3);
    border-color: #d4a574;
}

.hipster-button:disabled[b-gbdtt0nf8x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.hipster-icon[b-gbdtt0nf8x] {
    font-size: 1.5rem;
}

.hipster-name[b-gbdtt0nf8x] {
    flex: 1;
    text-align: left;
}

.selected-icon[b-gbdtt0nf8x] {
    font-size: 1.2rem;
    color: #4caf50;
}

.voting-actions[b-gbdtt0nf8x] {
    display: flex;
    justify-content: center;
}

.cast-beans-button[b-gbdtt0nf8x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #d4a574 0%, #b8935d 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.cast-beans-button:hover:not(:disabled)[b-gbdtt0nf8x] {
    background: linear-gradient(135deg, #e0b68a 0%, #c4a06f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.4);
}

.cast-beans-button:disabled[b-gbdtt0nf8x] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-gbdtt0nf8x] {
    animation: spin-b-gbdtt0nf8x 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-gbdtt0nf8x {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.no-beans-message[b-gbdtt0nf8x] {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 152, 0, 0.1);
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
}

.no-beans-message p[b-gbdtt0nf8x] {
    color: #ffb74d;
    font-size: 1rem;
    margin: 0;
}
/* /Components/ConfirmationModal.razor.rz.scp.css */
.modal-backdrop[b-2zemjlk91e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-2zemjlk91e 0.2s ease-in;
    animation-fill-mode: both;
}

.modal-backdrop.show[b-2zemjlk91e] {
    display: flex;
}

@keyframes fadeIn-b-2zemjlk91e {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-2zemjlk91e] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-2zemjlk91e 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-2zemjlk91e {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-2zemjlk91e] {
    padding: 2rem;
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header[b-2zemjlk91e]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.modal-title[b-2zemjlk91e] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.modal-close[b-2zemjlk91e] {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover[b-2zemjlk91e] {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-body[b-2zemjlk91e] {
    padding: 2rem;
}

.confirmation-message[b-2zemjlk91e] {
    text-align: center;
    padding: 1rem 0;
}

.warning-icon[b-2zemjlk91e] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.confirmation-message p[b-2zemjlk91e] {
    color: #3e2723;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.modal-actions[b-2zemjlk91e] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 0 2rem 2rem;
}

.btn-cancel[b-2zemjlk91e],
.btn-confirm[b-2zemjlk91e] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-2zemjlk91e] {
    background: #efebe9;
    color: #5d4037;
}

.btn-cancel:hover:not(:disabled)[b-2zemjlk91e] {
    background: #d7ccc8;
    transform: translateY(-2px);
}

.btn-confirm[b-2zemjlk91e] {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4);
}

.btn-confirm:hover:not(:disabled)[b-2zemjlk91e] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.6);
}

.btn-cancel:disabled[b-2zemjlk91e],
.btn-confirm:disabled[b-2zemjlk91e] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.spinner[b-2zemjlk91e] {
    animation: spin-b-2zemjlk91e 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-2zemjlk91e {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/CreateBarModal.razor.rz.scp.css */
.modal-backdrop[b-zsxjfq60ml] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-zsxjfq60ml 0.2s ease-in;
    animation-fill-mode: both;
}

.modal-backdrop.show[b-zsxjfq60ml] {
    display: flex;
}

@keyframes fadeIn-b-zsxjfq60ml {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-zsxjfq60ml] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-zsxjfq60ml 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-zsxjfq60ml {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-zsxjfq60ml] {
    padding: 2rem;
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header[b-zsxjfq60ml]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.modal-title[b-zsxjfq60ml] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.modal-close[b-zsxjfq60ml] {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover[b-zsxjfq60ml] {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-error[b-zsxjfq60ml] {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 1rem 1.5rem;
    margin: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-error .error-icon[b-zsxjfq60ml] {
    font-size: 1.5rem;
    color: #ff9800;
}

.modal-error p[b-zsxjfq60ml] {
    margin: 0;
    color: #e65100;
    font-weight: 500;
}

.modal-body[b-zsxjfq60ml] {
    padding: 2rem;
}

.form-group[b-zsxjfq60ml] {
    margin-bottom: 1.5rem;
}

.form-group label[b-zsxjfq60ml] {
    display: block;
    margin-bottom: 0.5rem;
    color: #3e2723;
    font-weight: 600;
    font-size: 1rem;
}

.help-text[b-zsxjfq60ml] {
    font-weight: 400;
    font-size: 0.875rem;
    color: #6d4c41;
    font-style: italic;
}

.form-input[b-zsxjfq60ml] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #d7ccc8;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-zsxjfq60ml] {
    outline: none;
    border-color: #6d4c41;
    box-shadow: 0 0 0 3px rgba(109, 76, 65, 0.1);
}

.form-input:disabled[b-zsxjfq60ml] {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-input[b-zsxjfq60ml]::placeholder {
    color: #a1887f;
}

.validation-message[b-zsxjfq60ml] {
    margin-top: 0.5rem;
    color: #d32f2f;
    font-size: 0.875rem;
    font-weight: 500;
}

.modal-actions[b-zsxjfq60ml] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn-cancel[b-zsxjfq60ml],
.btn-create[b-zsxjfq60ml] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-zsxjfq60ml] {
    background: #efebe9;
    color: #5d4037;
}

.btn-cancel:hover:not(:disabled)[b-zsxjfq60ml] {
    background: #d7ccc8;
    transform: translateY(-2px);
}

.btn-create[b-zsxjfq60ml] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.btn-create:hover:not(:disabled)[b-zsxjfq60ml] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.btn-cancel:disabled[b-zsxjfq60ml],
.btn-create:disabled[b-zsxjfq60ml] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.spinner[b-zsxjfq60ml] {
    animation: spin-b-zsxjfq60ml 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-zsxjfq60ml {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/CreateFranchiseModal.razor.rz.scp.css */
.modal-backdrop[b-msp8wr1m75] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-msp8wr1m75 0.2s ease-in;
    animation-fill-mode: both;
}

.modal-backdrop.show[b-msp8wr1m75] {
    display: flex;
}

@keyframes fadeIn-b-msp8wr1m75 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-msp8wr1m75] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-msp8wr1m75 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-msp8wr1m75 {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-msp8wr1m75] {
    padding: 2rem;
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header[b-msp8wr1m75]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.modal-title[b-msp8wr1m75] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.modal-close[b-msp8wr1m75] {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover[b-msp8wr1m75] {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-error[b-msp8wr1m75] {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 1rem 1.5rem;
    margin: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-error .error-icon[b-msp8wr1m75] {
    font-size: 1.5rem;
    color: #ff9800;
}

.modal-error p[b-msp8wr1m75] {
    margin: 0;
    color: #e65100;
    font-weight: 500;
}

.modal-body[b-msp8wr1m75] {
    padding: 2rem;
}

.form-group[b-msp8wr1m75] {
    margin-bottom: 1.5rem;
}

.form-group label[b-msp8wr1m75] {
    display: block;
    margin-bottom: 0.5rem;
    color: #3e2723;
    font-weight: 600;
    font-size: 1rem;
}

.form-input[b-msp8wr1m75] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #d7ccc8;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-msp8wr1m75] {
    outline: none;
    border-color: #6d4c41;
    box-shadow: 0 0 0 3px rgba(109, 76, 65, 0.1);
}

.form-input:disabled[b-msp8wr1m75] {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-input[b-msp8wr1m75]::placeholder {
    color: #a1887f;
}

.modal-actions[b-msp8wr1m75] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn-cancel[b-msp8wr1m75],
.btn-create[b-msp8wr1m75] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-msp8wr1m75] {
    background: #efebe9;
    color: #5d4037;
}

.btn-cancel:hover:not(:disabled)[b-msp8wr1m75] {
    background: #d7ccc8;
    transform: translateY(-2px);
}

.btn-create[b-msp8wr1m75] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.btn-create:hover:not(:disabled)[b-msp8wr1m75] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.btn-cancel:disabled[b-msp8wr1m75],
.btn-create:disabled[b-msp8wr1m75] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.spinner[b-msp8wr1m75] {
    animation: spin-b-msp8wr1m75 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-msp8wr1m75 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/FranchiseDetails/FranchiseStatsView.razor.rz.scp.css */
.loading-container[b-e50ienf5jp] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-e50ienf5jp] {
    font-size: 4rem;
    animation: spin-b-e50ienf5jp 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-e50ienf5jp {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-e50ienf5jp] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-e50ienf5jp] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.error-icon[b-e50ienf5jp] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-e50ienf5jp] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-e50ienf5jp] {
    color: #6d4c41;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-e50ienf5jp] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-e50ienf5jp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.stats-container[b-e50ienf5jp] {
    padding: 1rem 0;
}

.stats-header[b-e50ienf5jp] {
    text-align: center;
    margin-bottom: 2rem;
}

.stats-header h2[b-e50ienf5jp] {
    color: #3e2723;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.stats-overview[b-e50ienf5jp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card[b-e50ienf5jp] {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-e50ienf5jp] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-e50ienf5jp] {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.stat-content[b-e50ienf5jp] {
    flex: 1;
}

.stat-value[b-e50ienf5jp] {
    font-size: 2rem;
    font-weight: 700;
    color: #3e2723;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-e50ienf5jp] {
    font-size: 0.9rem;
    color: #6d4c41;
    font-weight: 500;
}

.rankings-grid[b-e50ienf5jp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.ranking-section[b-e50ienf5jp] {
    min-width: 0;
}

.hipsters-section[b-e50ienf5jp] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hipsters-section h3[b-e50ienf5jp] {
    color: #3e2723;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hipsters-list[b-e50ienf5jp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hipster-card[b-e50ienf5jp] {
    background: linear-gradient(135deg, #f5f5dc 0%, #fafafa 100%);
    border: 2px solid #d7ccc8;
    border-radius: 15px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.hipster-card:hover[b-e50ienf5jp] {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hipster-card.rank-first[b-e50ienf5jp] {
    background: linear-gradient(135deg, #fff9e6 0%, #fffaed 100%);
    border-color: #ffd700;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.hipster-card.rank-second[b-e50ienf5jp] {
    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
    border-color: #c0c0c0;
    border-width: 3px;
}

.hipster-card.rank-third[b-e50ienf5jp] {
    background: linear-gradient(135deg, #fff5e6 0%, #fff9f0 100%);
    border-color: #cd7f32;
    border-width: 3px;
}

.hipster-rank[b-e50ienf5jp] {
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
}

.rank-medal[b-e50ienf5jp] {
    font-size: 2.5rem;
    display: block;
}

.rank-number[b-e50ienf5jp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6d4c41;
    display: block;
}

.hipster-name[b-e50ienf5jp] {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3e2723;
}

.hipster-stats[b-e50ienf5jp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item[b-e50ienf5jp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-item-value[b-e50ienf5jp] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3e2723;
    line-height: 1;
}

.stat-item-label[b-e50ienf5jp] {
    font-size: 0.75rem;
    color: #6d4c41;
    font-weight: 500;
    text-transform: uppercase;
}

.stat-divider[b-e50ienf5jp] {
    color: #d7ccc8;
    font-size: 1.2rem;
    font-weight: 300;
}

.empty-stats[b-e50ienf5jp] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-e50ienf5jp] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-stats h3[b-e50ienf5jp] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.empty-stats p[b-e50ienf5jp] {
    color: #6d4c41;
    font-size: 1rem;
}

/* Responsive design */
@media (max-width: 1024px) {
    .rankings-grid[b-e50ienf5jp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-overview[b-e50ienf5jp] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hipster-card[b-e50ienf5jp] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hipster-name[b-e50ienf5jp] {
        flex: 1 1 100%;
        order: -1;
    }

    .hipster-stats[b-e50ienf5jp] {
        flex: 1;
        justify-content: space-around;
    }

    .stat-item-value[b-e50ienf5jp] {
        font-size: 1.1rem;
    }

    .stat-item-label[b-e50ienf5jp] {
        font-size: 0.7rem;
    }
}
/* /Components/FranchiseDetails/FranchiseViewSwitcher.razor.rz.scp.css */
.view-switcher[b-fdxy7bci8a] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

.view-tab[b-fdxy7bci8a] {
    background: white;
    color: #6d4c41;
    border: 2px solid #d7ccc8;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.view-tab:hover[b-fdxy7bci8a] {
    background: #f5f5dc;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.view-tab.active[b-fdxy7bci8a] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border-color: #6d4c41;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.tab-icon[b-fdxy7bci8a] {
    font-size: 1.2rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .view-switcher[b-fdxy7bci8a] {
        flex-direction: column;
    }

    .view-tab[b-fdxy7bci8a] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/JoinFranchiseModal.razor.rz.scp.css */
.modal-backdrop[b-a1rxyaz7z8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-a1rxyaz7z8 0.2s ease-in;
    animation-fill-mode: both;
}

.modal-backdrop.show[b-a1rxyaz7z8] {
    display: flex;
}

@keyframes fadeIn-b-a1rxyaz7z8 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-a1rxyaz7z8] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-a1rxyaz7z8 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-a1rxyaz7z8 {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-a1rxyaz7z8] {
    padding: 2rem;
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-header[b-a1rxyaz7z8]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.modal-title[b-a1rxyaz7z8] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.modal-close[b-a1rxyaz7z8] {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover[b-a1rxyaz7z8] {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.modal-error[b-a1rxyaz7z8] {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 1rem 1.5rem;
    margin: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-error .error-icon[b-a1rxyaz7z8] {
    font-size: 1.5rem;
    color: #ff9800;
}

.modal-error p[b-a1rxyaz7z8] {
    margin: 0;
    color: #e65100;
    font-weight: 500;
}

.modal-body[b-a1rxyaz7z8] {
    padding: 2rem;
}

.form-group[b-a1rxyaz7z8] {
    margin-bottom: 1.5rem;
}

.form-group label[b-a1rxyaz7z8] {
    display: block;
    margin-bottom: 0.5rem;
    color: #3e2723;
    font-weight: 600;
    font-size: 1rem;
}

.form-input[b-a1rxyaz7z8] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #d7ccc8;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-a1rxyaz7z8] {
    outline: none;
    border-color: #6d4c41;
    box-shadow: 0 0 0 3px rgba(109, 76, 65, 0.1);
}

.form-input:disabled[b-a1rxyaz7z8] {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-input[b-a1rxyaz7z8]::placeholder {
    color: #a1887f;
}

.modal-actions[b-a1rxyaz7z8] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn-cancel[b-a1rxyaz7z8],
.btn-join[b-a1rxyaz7z8] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-cancel[b-a1rxyaz7z8] {
    background: #efebe9;
    color: #5d4037;
}

.btn-cancel:hover:not(:disabled)[b-a1rxyaz7z8] {
    background: #d7ccc8;
    transform: translateY(-2px);
}

.btn-join[b-a1rxyaz7z8] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.btn-join:hover:not(:disabled)[b-a1rxyaz7z8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.btn-cancel:disabled[b-a1rxyaz7z8],
.btn-join:disabled[b-a1rxyaz7z8] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.spinner[b-a1rxyaz7z8] {
    animation: spin-b-a1rxyaz7z8 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-a1rxyaz7z8 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/UserProfile.razor.rz.scp.css */
.user-profile[b-sl6n4uc3qs] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.user-name[b-sl6n4uc3qs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    color: #3e2723;
    font-weight: 600;
}

.user-name:hover[b-sl6n4uc3qs] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.user-icon[b-sl6n4uc3qs] {
    font-size: 1.2rem;
}

.dropdown-arrow[b-sl6n4uc3qs] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.user-dropdown[b-sl6n4uc3qs] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    overflow: hidden;
    animation: slideDown-b-sl6n4uc3qs 0.2s ease;
}

@keyframes slideDown-b-sl6n4uc3qs {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[b-sl6n4uc3qs] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: white;
    color: #3e2723;
    cursor: pointer;
    transition: background 0.2s ease;
    font-weight: 500;
    text-align: left;
}

.dropdown-item:hover[b-sl6n4uc3qs] {
    background: #f5f5f5;
}

.item-icon[b-sl6n4uc3qs] {
    font-size: 1rem;
}

.delete-account-button[b-sl6n4uc3qs] {
    color: #c62828;
}

.delete-account-button:hover[b-sl6n4uc3qs] {
    background: #ffebee;
    color: #b71c1c;
}

.logout-button[b-sl6n4uc3qs] {
    border-top: 1px solid #efebe9;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-h107qt400k] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-h107qt400k] {
    flex: 1;
}

.content[b-h107qt400k] {
    padding: 0;
    margin: 0;
}
/* /Pages/Authentication.razor.rz.scp.css */
.auth-container[b-vyn10ln5pl] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3e2723 0%, #5d4037 50%, #6d4c41 100%);
    text-align: center;
    color: white;
    padding: 2rem;
}

.coffee-loader[b-vyn10ln5pl] {
    font-size: 5rem;
    animation: spin-b-vyn10ln5pl 2s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-vyn10ln5pl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-container p[b-vyn10ln5pl] {
    font-size: 1.3rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.error-icon[b-vyn10ln5pl] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ffeb3b;
}

.success-icon[b-vyn10ln5pl] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #4caf50;
    background: white;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.auth-container h2[b-vyn10ln5pl] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.retry-link[b-vyn10ln5pl] {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background: white;
    color: #3e2723;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.retry-link:hover[b-vyn10ln5pl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
/* /Pages/BarDetails.razor.rz.scp.css */
.bar-details-container[b-wh1ad4benm] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f5dc 0%, #d7ccc8 100%);
    padding: 2rem;
}

.loading-container[b-wh1ad4benm] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-wh1ad4benm] {
    font-size: 4rem;
    animation: spin-b-wh1ad4benm 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-wh1ad4benm {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-wh1ad4benm] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-wh1ad4benm] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-wh1ad4benm] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-wh1ad4benm] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-wh1ad4benm] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-wh1ad4benm] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-wh1ad4benm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.view-content[b-wh1ad4benm] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

/* Responsive design */
@media (max-width: 768px) {
    .bar-details-container[b-wh1ad4benm] {
        padding: 1rem;
    }

    .view-content[b-wh1ad4benm] {
        padding: 1.5rem;
    }
}
/* /Pages/FranchiseDetails.razor.rz.scp.css */
.franchise-details-container[b-tie6vosq5o] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f5dc 0%, #d7ccc8 100%);
    padding: 2rem;
}

.loading-container[b-tie6vosq5o] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-tie6vosq5o] {
    font-size: 4rem;
    animation: spin-b-tie6vosq5o 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-tie6vosq5o {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-tie6vosq5o] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-tie6vosq5o] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-tie6vosq5o] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-tie6vosq5o] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-tie6vosq5o] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-tie6vosq5o] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-tie6vosq5o] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.franchise-header[b-tie6vosq5o] {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
    position: relative;
}

.back-button[b-tie6vosq5o] {
    position: absolute;
    left: 0;
    top: 2rem;
    background: white;
    color: #6d4c41;
    border: 2px solid #d7ccc8;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-button:hover[b-tie6vosq5o] {
    background: #6d4c41;
    color: white;
    border-color: #6d4c41;
    transform: translateX(-3px);
}

.back-icon[b-tie6vosq5o] {
    font-size: 1.2rem;
    font-weight: bold;
}

.franchise-title[b-tie6vosq5o] {
    color: #3e2723;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.franchise-subtitle[b-tie6vosq5o] {
    color: #6d4c41;
    font-size: 1.2rem;
    font-style: italic;
}

.franchise-content-wrapper[b-tie6vosq5o] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.franchise-main-content[b-tie6vosq5o] {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.franchise-sidebar[b-tie6vosq5o] {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-bar-button[b-tie6vosq5o] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
}

.create-bar-button:hover[b-tie6vosq5o] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.button-icon[b-tie6vosq5o] {
    font-size: 1.2rem;
}

.franchise-code-section[b-tie6vosq5o] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.code-toggle[b-tie6vosq5o] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #8d6e63;
    transition: color 0.3s ease;
    border-radius: 8px;
    width: 100%;
}

.code-toggle:hover[b-tie6vosq5o] {
    color: #6d4c41;
    background: rgba(109, 76, 65, 0.05);
}

.code-toggle .toggle-icon[b-tie6vosq5o] {
    font-size: 0.75rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.code-label[b-tie6vosq5o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-display[b-tie6vosq5o] {
    padding: 0.5rem;
    animation: fadeIn-b-tie6vosq5o 0.3s ease;
}

@keyframes fadeIn-b-tie6vosq5o {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.code-value[b-tie6vosq5o] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6d4c41;
    background: rgba(109, 76, 65, 0.08);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    display: block;
    margin-bottom: 0.5rem;
    user-select: text;
    cursor: text;
    letter-spacing: 0.05em;
    border: 1px solid rgba(109, 76, 65, 0.2);
    text-align: center;
    word-break: break-all;
}

.code-value:hover[b-tie6vosq5o] {
    background: rgba(109, 76, 65, 0.12);
}

.code-description[b-tie6vosq5o] {
    color: #8d6e63;
    font-size: 0.75rem;
    margin: 0;
    font-style: italic;
    text-align: center;
}

.franchise-actions-section[b-tie6vosq5o] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.franchise-action-button[b-tie6vosq5o] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
}

.franchise-action-button .action-icon[b-tie6vosq5o] {
    font-size: 0.9rem;
}

.leave-button[b-tie6vosq5o] {
    color: #8d6e63;
}

.leave-button:hover[b-tie6vosq5o] {
    color: #6d4c41;
    background: rgba(109, 76, 65, 0.05);
}

.delete-button[b-tie6vosq5o] {
    color: #c62828;
}

.delete-button:hover[b-tie6vosq5o] {
    color: #b71c1c;
    background: rgba(198, 40, 40, 0.05);
}

.create-bar-section[b-tie6vosq5o] {
    text-align: center;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 1200px;
}

.bars-view[b-tie6vosq5o] {
    animation: fadeIn-b-tie6vosq5o 0.3s ease;
    width: 100%;
    max-width: 1200px;
}

.view-content[b-tie6vosq5o] {
    width: 100%;
    max-width: 1200px;
}

@keyframes fadeIn-b-tie6vosq5o {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bars-section[b-tie6vosq5o] {
    margin-bottom: 3rem;
}

.section-title[b-tie6vosq5o] {
    color: #3e2723;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bars-grid[b-tie6vosq5o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
}

.bar-card[b-tie6vosq5o] {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.bar-card[b-tie6vosq5o]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
}

.bar-card:hover[b-tie6vosq5o] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.bar-icon[b-tie6vosq5o] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.bar-topic[b-tie6vosq5o] {
    color: #3e2723;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.bar-arrow[b-tie6vosq5o] {
    color: #6d4c41;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bar-card:hover .bar-arrow[b-tie6vosq5o] {
    opacity: 1;
}

/* Open bar styles */
.open-bar[b-tie6vosq5o] {
    border: 3px solid #ff6f00;
    animation: pulse-b-tie6vosq5o 2s infinite;
}

.open-bar[b-tie6vosq5o]::before {
    background: linear-gradient(90deg, #ff6f00 0%, #ff9800 100%);
}

@keyframes pulse-b-tie6vosq5o {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(255, 111, 0, 0.2);
    }
    50% {
        box-shadow: 0 5px 25px rgba(255, 111, 0, 0.5);
    }
}

.open-bar:hover[b-tie6vosq5o] {
    box-shadow: 0 10px 35px rgba(255, 111, 0, 0.4);
}

.bar-status-badge[b-tie6vosq5o] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #ff6f00 0%, #ff9800 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(255, 111, 0, 0.3);
}

.status-icon[b-tie6vosq5o] {
    font-size: 0.9rem;
}

/* In supply bar styles */
.in-supply-bar[b-tie6vosq5o]::before {
    background: linear-gradient(90deg, #6d4c41 0%, #8d6e63 100%);
}

/* Out of supply bar styles */
.out-of-supply-section[b-tie6vosq5o] {
    margin-top: 4rem;
}

.section-toggle[b-tie6vosq5o] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.section-toggle:hover .section-title[b-tie6vosq5o] {
    color: #5d4037;
}

.toggle-icon[b-tie6vosq5o] {
    font-size: 1.2rem;
    display: inline-block;
    transition: transform 0.3s ease;
    margin-right: 0.5rem;
}

.out-of-supply-bar[b-tie6vosq5o] {
    opacity: 0.7;
    filter: grayscale(30%);
}

.out-of-supply-bar[b-tie6vosq5o]::before {
    background: linear-gradient(90deg, #9e9e9e 0%, #757575 100%);
}

.out-of-supply-bar:hover[b-tie6vosq5o] {
    opacity: 0.85;
    filter: grayscale(10%);
}

.out-of-supply-bar .bar-icon[b-tie6vosq5o] {
    filter: grayscale(50%);
}

.empty-state[b-tie6vosq5o] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-tie6vosq5o] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-tie6vosq5o] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.empty-state p[b-tie6vosq5o] {
    color: #6d4c41;
    font-size: 1.1rem;
}

@media (min-width: 769px) {
    .franchise-sidebar[b-tie6vosq5o] {
        position: absolute;
        right: 20px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .franchise-details-container[b-tie6vosq5o] {
        padding: 1rem;
    }

    .franchise-header[b-tie6vosq5o] {
        padding-top: 4rem;
    }

    .back-button[b-tie6vosq5o] {
        position: static;
        margin-bottom: 2rem;
    }

    .franchise-main-content[b-tie6vosq5o] {
        margin: 0 auto;
    }

    .franchise-content-wrapper[b-tie6vosq5o] {
        flex-direction: column;
    }

    .franchise-sidebar[b-tie6vosq5o] {
        width: 100%;
        order: -1; /* Move sidebar above main content on mobile */
    }

    .create-bar-button[b-tie6vosq5o] {
        position: static;
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
    }

    .franchise-title[b-tie6vosq5o] {
        font-size: 2rem;
    }

    .bars-grid[b-tie6vosq5o] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-title[b-tie6vosq5o] {
        font-size: 1.5rem;
    }
}
/* /Pages/Franchises.razor.rz.scp.css */
.franchises-container[b-joxewq1mwk] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f5dc 0%, #d7ccc8 100%);
    padding: 2rem;
}

.franchises-header[b-joxewq1mwk] {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.franchises-title[b-joxewq1mwk] {
    color: #3e2723;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.franchises-subtitle[b-joxewq1mwk] {
    color: #6d4c41;
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.button-group[b-joxewq1mwk] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.create-franchise-button[b-joxewq1mwk],
.join-franchise-button[b-joxewq1mwk] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.join-franchise-button[b-joxewq1mwk] {
    background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
}

.create-franchise-button:hover[b-joxewq1mwk],
.join-franchise-button:hover[b-joxewq1mwk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.create-franchise-button .button-icon[b-joxewq1mwk],
.join-franchise-button .button-icon[b-joxewq1mwk] {
    font-size: 1.2rem;
    font-weight: bold;
}

.loading-container[b-joxewq1mwk] {
    text-align: center;
    padding: 4rem 0;
}

.coffee-loader[b-joxewq1mwk] {
    font-size: 4rem;
    animation: spin-b-joxewq1mwk 2s linear infinite;
    display: inline-block;
}

@keyframes spin-b-joxewq1mwk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-joxewq1mwk] {
    color: #6d4c41;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.error-state[b-joxewq1mwk] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon[b-joxewq1mwk] {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #ff9800;
}

.error-state h2[b-joxewq1mwk] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.error-state p[b-joxewq1mwk] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.retry-button[b-joxewq1mwk] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    font-weight: 600;
}

.retry-button:hover[b-joxewq1mwk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
}

.empty-state[b-joxewq1mwk] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-joxewq1mwk] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-joxewq1mwk] {
    color: #3e2723;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.empty-state p[b-joxewq1mwk] {
    color: #6d4c41;
    font-size: 1.1rem;
}

.franchises-grid[b-joxewq1mwk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.franchise-card[b-joxewq1mwk] {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.franchise-card[b-joxewq1mwk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #6d4c41 0%, #8d6e63 100%);
}

.franchise-card:hover[b-joxewq1mwk] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.franchise-icon[b-joxewq1mwk] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.franchise-name[b-joxewq1mwk] {
    color: #3e2723;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.franchise-arrow[b-joxewq1mwk] {
    color: #6d4c41;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.franchise-card:hover .franchise-arrow[b-joxewq1mwk] {
    opacity: 1;
}
/* /Pages/Home.razor.rz.scp.css */
.login-container[b-rdlezpb6zl] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3e2723 0%, #5d4037 50%, #6d4c41 100%);
    position: relative;
    overflow: hidden;
}

.login-container[b-rdlezpb6zl]::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(101, 67, 33, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
    animation: coffee-steam-b-rdlezpb6zl 20s ease-in-out infinite;
}

@keyframes coffee-steam-b-rdlezpb6zl {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.login-card[b-rdlezpb6zl] {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.coffee-logo[b-rdlezpb6zl] {
    margin-bottom: 1.5rem;
}

.coffee-cup[b-rdlezpb6zl] {
    font-size: 5rem;
    animation: float-b-rdlezpb6zl 3s ease-in-out infinite;
}

@keyframes float-b-rdlezpb6zl {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.login-title[b-rdlezpb6zl] {
    color: #3e2723;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.login-subtitle[b-rdlezpb6zl] {
    color: #6d4c41;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    font-style: italic;
}

.btn-login[b-rdlezpb6zl] {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(109, 76, 65, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.btn-login:hover[b-rdlezpb6zl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(109, 76, 65, 0.6);
    background: linear-gradient(135deg, #5d4037 0%, #4e342e 100%);
}

.btn-login:active[b-rdlezpb6zl] {
    transform: translateY(0);
}

.btn-icon[b-rdlezpb6zl] {
    font-size: 1.5rem;
}

.btn-text[b-rdlezpb6zl] {
    font-size: 1.2rem;
}