/* =========================================================
MODALS — Trundlebum.com
Purpose: Definition / info popups (responsive, vanilla JS)
========================================================= */



/* Overlay background */
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(212, 182, 150, 0.65);
}

/* Wrapper - positions modal within #content_wrap */
.modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
}

/* Modal image wrapper - centers and scales images */
.modal-image-wrapper {
text-align: center;
margin: 1em 0 0 0;
padding: 1em 0.75em;
}

.modal-image-wrapper img {
display: block;
max-width: 100%;
height: auto;
box-shadow: 0.4em 0.3em 1em rgba(0, 0, 0, 0.45);
border-radius:0.5em;
margin: 0 auto;
padding: 0;
}


/* Modal box */
.modal-container {
position: relative;
display: flex;
flex-direction: column;
font-size: 0.95;
line-height: 1.15;
width: 90%;
max-width: 55em;
background: #fff;
border: solid #dcdce7 0.125em;
border-radius: 0.95em 0.95em 0.75em 0.75em;
box-shadow: 0 0.75em 2.5em rgba(0, 0, 0, 0.45);
padding: 0;
}

/* Content area */
.modal-content {
padding: 0.8em;
}

/* Title within content */
.modal_title {
font-size: 1.45em;
font-weight: bold;
margin: 0 0 0.25em 0;
}

/* Close button */
.modal-close-btn {
position: absolute;
top: 0.45em;
right: 0.45em;
font-size: 1.5em;
line-height: 1;
width: 1.5em;
height: 1.5em;
text-align: center;
background: #aaa798;
color: #fff;
border: none;
border-radius: 0.5em;
cursor: pointer;
z-index: 1;
}

.modal-close-btn:hover {
background: #e0d9b3;
}

/* Hidden state */
.modal-hidden {
display: none;
}