/* =====================================================================
   CIVIC THEME  —  Step 6: modals
   ---------------------------------------------------------------------
   Additive. Loads last, AFTER civic-theme-step5-calendar.css.

   Reskins the four modals (location map, new post, business-card QR,
   event details) onto the redesign surface: neutral scrim, white card
   with a 16px radius and soft shadow, a bordered header row with a
   close ×, and a right-aligned slate/ghost button footer.

   Ships with the `.modal-head` / `.modal-body` / `.modal-foot` /
   `.modal-x` markup in templates/index.html.
   ===================================================================== */

/* ---- Scrim + card ---------------------------------------------------- */
.modal {
    background-color: rgba(27, 31, 38, .55);
    backdrop-filter: blur(2px);
}
.modal-content {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    box-shadow: 0 24px 55px -22px rgba(30, 40, 60, .55);
    padding: 0;
    text-align: left;
    max-width: 480px;
}
#postModal .modal-content {
    max-width: 600px;
}

/* ---- Header ---------------------------------------------------------- */
.modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #eceef2;
}
.modal-head-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    opacity: .7;
}
.modal-title {
    font-family: obida, Georgia, serif;
    font-size: 1.3em;
    line-height: 1.1;
    color: #1b1f26;
    flex: 1;
    min-width: 0;
}
.modal-x {
    font-size: 1.5em;
    line-height: 1;
    color: #9aa0ab;
    padding: 0 2px;
    transition: color .15s ease;
}
.modal-x:hover {
    color: #1b1f26;
}

/* ---- Body + footer --------------------------------------------------- */
.modal-body {
    padding: 16px 20px;
}
.modal-note {
    font-size: .85em;
    line-height: 1.55;
    color: #6b727e;
    margin: 0;
}
.modal-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 20px 18px;
}
.modal-foot .btn,
.action-btns .btn-post {
    font-size: .85em;
    font-weight: 600;
    border-radius: 9px;
    padding: 10px 18px;
    height: auto;
    margin: 0;
    border: 1px solid transparent;
}
.modal-foot .btn-cancel,
.action-btns .btn-cancel {
    color: #5a616e;
    background: #ffffff;
    border-color: #d3d9e6;
}
.modal-foot .btn-submit,
.action-btns .btn-submit {
    color: #ffffff;
    background: #566277;
}
.action-btns {
    gap: 10px;
    margin: 1.4em 0 0;
    padding: 16px 20px 18px;
    border-top: 1px solid #eceef2;
}
.action-btns .btn-post {
    margin-right: 0;   /* the old rule pushed both buttons 3em off the edge */
}

/* ---- Location map ---------------------------------------------------- */
#map {
    width: 100%;
    height: 320px;
    margin: 0;
    border-top: 1px solid #eceef2;
    border-bottom: 1px solid #eceef2;
}
.center-marker {
    width: 52px;
    height: 52px;
}
#mapModal .modal-body {
    padding: 16px 20px 4px;
}

/* MapLibre's own controls, matched to the card. */
#map .maplibregl-ctrl-group {
    border: 1px solid #d3d9e6;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

/* ---- New post form --------------------------------------------------- */
.post-form {
    padding: 0;
}
.post-form form {
    padding: 16px 20px 4px;
}
.post-form .form-group label {
    font-size: .85em;
    font-weight: 600;
    color: #6b727e;
}
.post-form input[type="text"],
.post-form select,
.post-form textarea {
    background: #f5f6f8;
    border: 1px solid #e6e8ec;
    border-radius: 9px;
    color: #1b1f26;
}
/* The paired <input type=file> is hidden, so the label is the button —
   size it like one instead of letting it span the whole row. */
#photo-label {
    background: #566277;
    border-radius: 9px;
    font-size: .85em;
    font-weight: 600;
    padding: 9px 16px;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}
#imgPre {
    border-radius: 10px;
    margin-top: .8em;
}

/* ---- Business card QR ------------------------------------------------ */
#QRModal .modal-body {
    text-align: center;
}
#qrcode {
    margin-bottom: 1em;
}
#qrcode img,
#qrcode canvas {
    margin: 0 auto;
    border-radius: 10px;
}

/* ---- Event details --------------------------------------------------- */
#event-details {
    margin: 0;
}
#event-details h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2;
    color: #1b1f26;
    margin: 0 0 12px;
}
#eventModal .event-row {
    display: flex;
    gap: 10px;
    font-size: .9em;
    line-height: 1.6;
}
#eventModal .event-key {
    color: #8a90a0;
    min-width: 48px;
    flex-shrink: 0;
}
#eventModal .event-val {
    color: #1b1f26;
    font-weight: 600;
    min-width: 0;
}
#eventContent {
    margin: 12px 0 0;
    font-size: .9em;
    line-height: 1.6;
    color: #4a505b;
}
#event-details img {
    border-radius: 10px;
    margin-top: 12px;
}

/* ---- Toasts ---------------------------------------------------------- */
.toast {
    font-size: 1em;
    padding: 14px 20px;
    border-radius: 12px;
    background: #ffffff;
    color: #1b1f26;
    border: 1px solid #e6e8ec;
    box-shadow: 0 18px 40px -22px rgba(30, 40, 60, .5);
}
.toast.success {
    background: #eef2f7;
    border-color: #d3dbe8;
    color: #2c3e5e;
    box-shadow: 0 18px 40px -22px rgba(30, 40, 60, .5);
}
.toast.error {
    background: #fdeeed;
    border: 1px solid #f2c4c0;
    color: #a33328;
    box-shadow: 0 18px 40px -22px rgba(30, 40, 60, .5);
}
.toast.warning {
    background: #fdf6e3;
    border: 1px solid #ecdcae;
    color: #7a5a0b;
    box-shadow: 0 18px 40px -22px rgba(30, 40, 60, .5);
}

@media (max-width: 600px) {
    .modal-content {
        max-width: 100%;
    }
    #map {
        height: 300px;
    }
}