/*
#F9CB43 yellow ish
#FBA518 orange ish
#E52020 red ish
*/
* {
  box-sizing: border-box;
}
body {
    background:#F9CB43; /*yellow ish*/
    margin:0;
    padding:10px;
}

@media (min-width: 768px) {
    body {
        padding-left:100px;
        padding-right:100px;
    }
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width:100%;
    max-width:100%;
}




.jumbotron {
    background-image: url('../img/banner.jpeg');
    color:white;
    text-shadow:3px 3px black;
}
.showcase {
    /*border: 2px double #E52020;*/
    border-left: 10px groove #FBA518;
    padding: 10px ;
    border-radius: 5px;
    font-size:24px;
    /*box-shadow: 3px 3px #FBA518;*/
}
footer {
    position:absolute fixed;
    bottom:0;
}

.btn {
    border: 2px solid black; border-radius:5px; box-shadow:2px 2px grey;
    padding:6px 12px;
    cursor:pointer;
    /*background:white;*/
}


/* Pop-up Styles */


        .popup {
            display: none;
            position: fixed;
            top: 5vh; /*50%;*/
            left: 50%;
            max-height: 90vh;  
            overflow-y: auto;   
            transform: translateX(-50%); /*translate(-50%, -50%);*/
            background: black; /* #004d2b; */
            color: white;
            padding: 10px; /*20px;*/
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            /*max-width: 400px;*/
            max-width:90%;  /* was 70*/
            text-align: center;
            animation: slideIn 0.5s ease-in-out;
            /* for notes */
             white-space: pre-wrap;
        }
 
        
        /* 3/16
        .popup img {
            width:100%;
            height:auto;
            max-width:500px;
        }*/
        
        .popup img {
            width:100%;
            height:auto;
            max-width:900px;
            display:block;
            margin:10px auto;
            cursor:pointer;
        }

        .popup img.zoomed {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.5); /* was 1.8 */
            max-width: none; /*95vw;*/
            max-height: none; /*95vh;*/
            width: auto;
            height: auto;
            z-index: 2000;
            cursor: zoom-out;
            background: black;
            padding: 10px;
            border-radius: 8px;
        }
        
        .popup.zoom-mode {
            overflow: visible;
        }
        
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left:0;
            right: 0;
            bottom: 0;
            background: rgb(0,0,0);
            background: rgba(0, 0, 0, 0.7);

            z-index: 999;

        }
        #pop-close {
            color:lime;
            font-weight:bold;
            /*border: 2px inset lime;
            box-shadow:2px 2px white;*/
            margin:20px 20px;
        }
        #popup-overlay {
            padding:2px;
            border-radius:2px;
            /*color:lime;
                        border: 2px inset lime;*/
            font-weight:bold;
            box-shadow:2px 2px white;
        }

        .close-popup {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 20px;
            background: #ffffff;
            color: #004d2b;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .close-popup:hover {
            background: lime; /* #eaeaea; */
        }
        
        textarea {
            vertical-align:top;
        }
        
        form {
            border: 2px inset lightgrey;
            border-radius: 5px;
            box-shadow: 2px 2px darkgrey;
            padding:5px;
    width:100%;
        }
        
        .note {
            text-align: left;
        }

/* Card-style section */
.meal-section {
    border: 1px solid #e3e3e3;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    background-color: #fafafa;
}

/* Make legend look clean */
.meal-section legend {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 8px;
    width: auto;
}

.fr {
    color:red;
}

/* Two-column grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

/* Optional: better checkbox spacing */
.form-check {
    margin-bottom: 4px;
}