
/* ================= BACKDROP ================= */
.modal {
display: none;
position: fixed;
z-index: 9999;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
justify-content: center;
align-items: center;
}

.modal.show {
display: flex;
animation: fadeIn 0.25s ease;
}

/* ================= MODAL BOX (FIXED HEIGHT + SCROLL CONTAINER) ================= */
.modalBox {
background: #fff;
width: 92%;
max-width: 600px;
border-radius: 16px;
box-shadow: 0 20px 45px rgba(0,0,0,0.2);
animation: zoomIn 0.25s ease forwards;

/* IMPORTANT */
height: 700px;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes zoomIn {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

@keyframes slideFade {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}

/* ================= HEADER (FIXED AREA) ================= */
.modalHead {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;

/* sticky effect inside modal */
position: sticky;
top: 0;
background: #fff;
z-index: 10;
padding: 26px 26px 10px 26px;
border-bottom: 1px solid #f3f4f6;
}

.modalHead h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #111827;
}

.modalHead .closeBtn {
font-size: 22px;
cursor: pointer;
color: #9ca3af;
transition: 0.2s;
}

.modalHead .closeBtn:hover {
color: #7c3aed;
transform: rotate(90deg);
}

/* ================= FORM SCROLL AREA ================= */
.modalBox form {
flex: 1;
overflow-y: auto;
padding: 18px 26px 26px 26px;
scroll-behavior: smooth;
}

/* scrollbar styling */
.modalBox form::-webkit-scrollbar {
width: 6px;
}

.modalBox form::-webkit-scrollbar-thumb {
background: #c4b5fd;
border-radius: 10px;
}

.modalBox form::-webkit-scrollbar-track {
background: #f3f4f6;
}

/* ================= FORM GRID (2 COLUMN) ================= */
.formGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}

/* FORM GROUP */
.formGroup {
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;

}

/* FULL WIDTH */
.full {
grid-column: 1 / -1;
}

/* INPUTS */
.formGroup input,
.formGroup textarea,
.formGroup select {
width: 100%;
box-sizing: border-box;
padding: 11px 12px;
border-radius: 12px;
border: 1px solid transparent;
background: #f3f4f6;
font-size: 14px;
transition: 0.25s;
}

input:hover, select:hover, textarea:hover {
background: #eef0f4;
}

input:focus, select:focus, textarea:focus {
background: #fff;
border: 1px solid #7c3aed;
box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
outline: none;
}

textarea {
resize: none;
min-height: 110px;
}

/* LABEL */
.formGroup label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 5px;
}

/* ================= FEE ROW ================= */
.feeRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
}

.feeCol {
display: flex;
flex-direction: column;
min-width: 0;
}

/* ================= POSTER ================= */
.posterPreview {
width: 100%;
max-width:200px;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin-top: 10px;
display: none;
background: #f3f4f6;
border: 1px solid #e5e7eb;
margin-bottom:20px;
}

/* ================= HINT ================= */
.hint {
font-size: 12px;
color: #888;
margin-top: 4px;
}

/* ================= ANIMATION BLOCKS ================= */
#fee_amount_box,
#meeting_box {
animation: slideFade 0.25s ease;
}

/* ================= BUTTON AREA ================= */
.modalBtn {
grid-column: 1 / -1;
display: flex;
gap: 12px;
margin-top: 14px;
}

/* CANCEL */
.cancel {
flex: 1;
padding: 12px;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #fff;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}

.cancel:hover {
background: #f3f4f6;
}

/* CREATE */
.create {
flex: 1;
padding: 12px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg,#7c3aed,#5b2c83);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: 0.25s;
}

.create:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(124,58,237,0.3);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {

.modalBox {
height: 85vh;
max-height: 85vh;
}

.formGrid {
grid-template-columns: 1fr;
}

.feeRow {
grid-template-columns: 1fr;
}
}