body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Light gray background */
}

.navbar {
    background-color: #198754 !important; /* Bootstrap success green */
}

.card-header {
    background-color: #e9ecef; /* Lighter gray for card headers */
    font-weight: bold;
}

.btn-primary {
    background-color: #0d6efd; /* Bootstrap primary blue */
    border-color: #0d6efd;
}
.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-danger {
    background-color: #dc3545; /* Bootstrap danger red */
    border-color: #dc3545;
}
.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.table-success {
    --bs-table-bg: #d1e7dd; /* Lighter green for table head */
    --bs-table-striped-bg: #e9f5ee; 
}

#current-recipe-name {
    color: #198754; /* Success green for recipe name */
    font-weight: bold;
}

#cost-summary strong {
    color: #2c662d; /* Darker green for emphasis */
}

#cost-summary span {
    font-weight: bold;
}

/* Add some subtle animations */
.card {
    transition: transform 0.2s ease-in-out;
}
.card:hover {
    transform: translateY(-3px);
}

/* Ensure footer is at the bottom */
html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 100px; /* Height of the footer */
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px; /* Set the fixed height of the footer here */
    line-height: 40px; /* Vertically center the text there */
}

@media print {
    body * {
        visibility: hidden;
    }

    .navbar, 
    .col-lg-5, /* Hides ingredient form and example recipes */
    #ingredient-form, 
    #example-recipes,
    #servings, 
    label[for="servings"], 
    #margin, 
    label[for="margin"],
    .card-header h5, /* Hides "Paso X" titles if not wanted */
    hr,
    #clear-recipe-btn, 
    #print-recipe-btn, 
    #share-whatsapp-btn, 
    footer,
    .btn, /* Hides all buttons by default in print */
    .form-label, /* Hides all form labels */
    .form-control, /* Hides all form controls */
    .form-select {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 1rem !important;
        transform: none !important;
    }
    .card-body {
        padding: 0.5rem !important;
    }

    #current-recipe-name,
    #current-recipe-name *,
    .table-responsive,
    .table-responsive *,
    #ingredients-list,
    #ingredients-list *,
    #cost-summary,
    #cost-summary * {
        visibility: visible !important;
        color: black !important; /* Ensure text is black for printing */
        background-color: white !important; /* Ensure background is white */
    }
    
    .col-lg-7, .container, .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .table thead th {
        background-color: #eee !important; /* Lighter header for print */
        color: black !important;
        border: 1px solid #ccc !important;
    }

    .table td, .table th {
        border: 1px solid #ccc !important;
        padding: 0.25rem !important;
        font-size: 10pt !important;
    }
    
    #cost-summary p, #cost-summary h6 {
        margin-bottom: 0.3rem !important;
        font-size: 10pt !important;
    }
    
    #current-recipe-name {
        font-size: 14pt !important;
        margin-bottom: 0.5rem !important;
        text-align: center;
    }

    /* Explicitly show what we want */
    .card-body > #current-recipe-name,
    .card-body > .table-responsive,
    .card-body > #cost-summary {
        display: block !important; /* Ensure these are displayed */
    }

    /* Position elements for printing */
    .container > .row > .col-lg-7 > .card:nth-child(1) { /* Recipe ingredients card */
        visibility: visible !important;
        display: block !important;
        page-break-after: auto;
    }
    .container > .row > .col-lg-7 > .card:nth-child(1) .card-body,
    .container > .row > .col-lg-7 > .card:nth-child(1) .card-body * {
        visibility: visible !important;
    }
     .container > .row > .col-lg-7 > .card:nth-child(1) .card-header {
        display: none !important; /* Hide "Paso 2" header */
    }


    .container > .row > .col-lg-7 > .card:nth-child(2) { /* Cost summary card */
        visibility: visible !important;
        display: block !important;
        page-break-before: auto;
    }
     .container > .row > .col-lg-7 > .card:nth-child(2) .card-body,
     .container > .row > .col-lg-7 > .card:nth-child(2) .card-body * {
        visibility: visible !important;
    }
    .container > .row > .col-lg-7 > .card:nth-child(2) .card-header {
        display: none !important; /* Hide "Paso 3" header */
    }

    /* Ensure the parent containers of visible elements are also visible and take up space */
    .container, .row, .col-lg-7 {
        visibility: visible !important;
        display: block !important;
    }
}