body {
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

/* Common styles for allergy items */
.allergy-item {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

.allergy-item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 1rem;
}

/* Specific styles for form selection screen */
.allergy-checkboxes .form-check {
    margin-bottom: 0.5rem;
    width: 100%;
}

.allergy-checkboxes .form-check-label {
    width: 100%;
    margin: 0;
    padding: 0;
}

.allergy-checkboxes .form-check-label .allergy-item {
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
}

.allergy-checkboxes .form-check-input {
    margin-left: 1rem;
}

/* Specific styles for card display */
.allergy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.allergy-list .allergy-item {
    width: 100%;
}

/* Color coding for allergies */
.allergy-item.peanuts, .peanuts {
    background-color: #ffe0b2;
    color: #794b02;
}
.allergy-item.peanuts::before, .peanuts::before {
    content: "\f7c5"; /* cookie */
}

.allergy-item.tree_nuts, .tree_nuts {
    background-color: #ffe0b2;
    color: #794b02;
}
.allergy-item.tree_nuts::before, .tree_nuts::before {
    content: "\f4d8"; /* seedling */
}

.allergy-item.milk, .milk {
    background-color: #e3f2fd;
    color: #0d47a1;
}
.allergy-item.milk::before, .milk::before {
    content: "\f7c9"; /* glass of milk */
}

.allergy-item.eggs, .eggs {
    background-color: #fff3e0;
    color: #e65100;
}
.allergy-item.eggs::before, .eggs::before {
    content: "\f7fb"; /* egg */
}

.allergy-item.soy, .soy {
    background-color: #f1f8e9;
    color: #33691e;
}
.allergy-item.soy::before, .soy::before {
    content: "\f4d8"; /* seedling */
}

.allergy-item.wheat, .wheat {
    background-color: #fff8e1;
    color: #ff6f00;
}
.allergy-item.wheat::before, .wheat::before {
    content: "\f72d"; /* wheat-alt */
}

.allergy-item.fish, .fish {
    background-color: #e0f7fa;
    color: #006064;
}
.allergy-item.fish::before, .fish::before {
    content: "\f578"; /* fish */
}

.allergy-item.shellfish, .shellfish {
    background-color: #e0f7fa;
    color: #006064;
}
.allergy-item.shellfish::before, .shellfish::before {
    content: "\f6ba"; /* crab */
}

/* Language selector styling */
.language-selector {
    display: flex;
    gap: 0.5rem;
}

/* Contact info styling */
.contact-info {
    font-size: 0.9em;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    margin-top: 2rem;
}

.contact-info h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #495057;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #000;
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: white;
        margin: 0;
        padding: 0;
    }

    .card-body {
        padding: 1rem;
    }

    .contact-info {
        margin-top: 1rem !important;
        page-break-inside: avoid;
    }
    
    .allergy-list {
        page-break-inside: avoid;
    }
}

/* Mobile responsiveness */
/* Custom allergy styling */
.custom-allergy-item {
    background-color: #e9ecef;
    color: #495057;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    width: 100%;
}

.custom-allergy-item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f06a";  /* exclamation-circle */
    margin-right: 1rem;
}

.custom-allergy-input .input-group {
    max-width: 100%;
}

.btn-remove-custom {
    background: none;
    border: none;
    color: #dc3545;
    padding: 0 0.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .language-selector {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 1rem;
    }
    
    .card-header {
        flex-direction: column;
        text-align: center;
    }
}