/**
 * Menu de Grupos Step Styles - Minimal Design
 */

/* Selection buttons container */
#menu-grupo-selection-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

/* Minimal style buttons - Default: Gray, Selected: Green */
/* Using higher specificity to override .formReservas button styles */
.formReservas .menu-grupo-btn,
.menu-grupo-btn {
    padding: 12px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    background-color: #f3f4f6;
    background-image: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 90px;
}

.formReservas .menu-grupo-btn:hover:not(.selected),
.menu-grupo-btn:hover:not(.selected) {
    background-color: #e5e7eb;
    background-image: none;
    border-color: #9ca3af;
    color: #4b5563;
}

.formReservas .menu-grupo-btn:active:not(.selected),
.menu-grupo-btn:active:not(.selected) {
    transform: scale(0.97);
}

.formReservas .menu-grupo-btn.selected,
.menu-grupo-btn.selected {
    background-color: #059669;
    background-image: none;
    border-color: #047857;
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
    transform: scale(1.02);
}

.formReservas .menu-grupo-btn.selected:hover,
.menu-grupo-btn.selected:hover {
    background-color: #047857;
    background-image: none;
    border-color: #065f46;
}

/* Menu selector section */
#menu-selector-section {
    width: 100%;
    max-width: 400px;
    margin: 12px auto;
}

#menu-selector-section label {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 8px;
}

#menu_de_grupo_selector {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
    font-size: 14px;
    color: #374151;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" 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 10px center;
    background-size: 16px;
    cursor: pointer;
}

#menu_de_grupo_selector:focus {
    outline: none;
    border-color: #9ca3af;
}

/* Menu details section */
#menu-details-section {
    width: 100%;
    max-width: 450px;
    margin: 12px auto;
}

.entrantes-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.entrantes-card h3 {
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
}

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

.entrantes-list li {
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 0.85rem;
    position: relative;
    padding-left: 16px;
}

.entrantes-list li::before {
    content: "•";
    color: #9ca3af;
    position: absolute;
    left: 0;
}

.entrantes-list li:last-child {
    border-bottom: none;
}

/* Principales section */
#principales-section {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Principales choice container - Hidden (direct selection now) */
.principales-choice-container {
    display: none;
}

/* Principales rows container */
#principales-rows-container {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Progress indicator */
.principales-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid #e5e7eb;
}

.principales-progress-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}

.principales-progress-text::before {
    display: none;
}

.principales-progress-bar {
    flex: 1;
    max-width: 100px;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-left: 14px;
}

.principales-progress-fill {
    height: 100%;
    background: #10b981;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Principal row card */
.principal-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 14px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    animation: slideInRow 0.25s ease-out;
}

@keyframes slideInRow {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.principal-row:hover {
    border-color: #d1d5db;
}

.principal-row.selected {
    border-color: #10b981;
    background: #f9fafb;
}

/* Row selectors wrapper - dish + portions side by side */
.principal-row-selectors {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Field wrapper with label */
.principal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.principal-field--dish {
    width: 100%;
}

.principal-field--portions {
    width: auto;
    min-width: 90px;
}

.principal-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Main dish select */
.principal-select {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fafafa;
    font-size: 14px;
    color: #1f2937;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23059669" 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 10px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.principal-select:focus {
    outline: none;
    border-color: #10b981;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.principal-select:hover {
    border-color: #10b981;
    background-color: white;
}

.principal-select.has-value {
    border-color: #10b981;
    background-color: white;
    font-weight: 500;
    color: #065f46;
}

/* Portions select */
.principal-portions-select {
    width: 100%;
    padding: 12px 30px 12px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fafafa;
    font-size: 14px;
    color: #1f2937;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23059669" 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 8px center;
    background-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.principal-portions-select:focus {
    outline: none;
    border-color: #10b981;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.principal-portions-select:hover {
    border-color: #10b981;
    background-color: white;
}

/* Remove button - centered trash icon with fit-content */
.remove-principal-btn {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background-color: #fee2e2;
    color: #dc2626;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.remove-principal-btn:hover {
    background-color: #ef4444;
    color: white;
    transform: scale(1.05);
}

.remove-principal-btn:active {
    transform: scale(0.95);
}

/* Add principal button */
#add-principal-btn {
    width: fit-content;
    padding: 10px 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#add-principal-btn::before {
    content: "+";
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

#add-principal-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

#add-principal-btn:active {
    background: #f3f4f6;
}

/* Limit reached state */
.principales-limit-reached {
    text-align: center;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    color: #059669;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 6px;
    border: 1px solid #e5e7eb;
}

.principales-limit-reached::before {
    display: none;
}

/* Navigation button specific to menu step */
#menu-step-next {
    display: none;
    margin-top: 20px;
}

/* Info card style */
.menu-grupo-info-card {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 16px;
    text-align: center;
}

.menu-grupo-info-card p {
    color: #374151;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}

.menu-grupo-info-card p.subtitle {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    #menu-grupo-selection-buttons {
        gap: 10px;
    }

    .menu-grupo-btn {
        padding: 10px 24px;
        min-width: 80px;
        font-size: 0.9rem;
    }
}