/* -------------------------------------- */
/* 1. Modal Backdrop and Position (Fixed) */
/* -------------------------------------- */
.my-icon-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark semi-transparent overlay */
    z-index: 1050; /* Above most elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------------------------------- */
/* 2. Modal Content Container */
/* -------------------------------------- */
.my-icon-modal-content {
    background: #ffffff;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Lifted appearance */
    max-width: 500px; /* Wider modal */
    width: 70%;
    max-height: 70vh; /* Max height relative to viewport height */
    overflow: hidden; /* Important for internal scrolling */
    display: flex;
    flex-direction: column;
}

/* -------------------------------------- */
/* 3. Header Styling */
/* -------------------------------------- */
.my-icon-modal-header {
    display: flex;
    font-family: "inter display bold", Sans-serif;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eeeeee;
    background-color: #f8f9fa; /* Light background for header */
}

.my-icon-modal-title {
    font-family: "inter display bold", Sans-serif !important;
    margin: 0;
    font-size: 2.5rem;
    color: #333333;
    text-transform:capitalize !important;
}

.my-icon-modal-close {
    padding: 20px;
    margin: 0;
    border: none;
    font-size: 3.5rem;
    font-weight: bold;
    background:#3B9390 !important;
    color:white;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.my-icon-modal-close:hover {
    color: white !important;
}

/* -------------------------------------- */
/* 4. Body (The scrollable part) */
/* -------------------------------------- */
.my-icon-modal-body {
    padding: 20px;
    overflow-y: auto; /* Make content scrollable */
    flex-grow: 1; /* Allow body to take up available space */
}

/* -------------------------------------- */
/* 5. Footer and Button Styling */
/* -------------------------------------- */
.my-icon-modal-footer {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    padding: 15px 20px;
    border-top: 1px solid #eeeeee;
    background-color: #f8f9fa;
}

.my-icon-modal-btn {
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

/* Secondary Button style (like Bootstrap) */
.my-icon-modal-btn-secondary {
    color: #333;
    background-color: #e9ecef;
    border-color: #e9ecef;
}

.my-icon-modal-btn-secondary:hover {
    background-color: #d8d8d8;
    border-color: #d8d8d8;
}

#modal-post-description figure img{
    width:100% !important;
}
.my-icon-modal-close{
    font-size:20px !important;
    color: white !important;
    border:none !important;
}

.my-icon-modal-btn-secondary{
      font-size:16px !important;
      background-color:#3B9390 !important;
    color: white !important;
    border:none !important;
}

@media (max-width: 767px) {
  .my-icon-modal-title {
    font-family: "inter display bold", Sans-serif !important;
    margin: 0;
    font-size: 1.8rem;
    color: #333333;
    text-transform:capitalize !important;
}
.my-icon-modal-content {
    background: #ffffff;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Lifted appearance */
    max-width: 350px !important; /* Wider modal */
    width: 100% !important;
    max-height: 70vh; /* Max height relative to viewport height */
    overflow: hidden; /* Important for internal scrolling */
    display: flex;
    flex-direction: column;
}

}