/* =====================================================================
   FILE: kcbme/invite.css — extras for the invitation pages. Loaded AFTER auth.css.
   CSS grid only, no flexbox. Corners 8px at most.
   ===================================================================== */

/* ---- Three-step strip (spans both columns of the auth grid) ---- */
.inv-steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.inv-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    background: rgba(235,249,255,0.9);
    border: 1px solid #e3e8f2;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(30, 50, 90, 0.10);
    padding: 14px 16px;

}
.inv-step .number-icon { margin: 0; }
.inv-step-text strong { display: block; color: #4b5788; font-size: 1.7rem; font-weight: 500; }
.inv-step-text small { display: block; color: #333; font-size: 1.4rem; }
.inv-step.is-current { opacity: 1; background-color:#fff; border-color: #5f8fdd; box-shadow: 0 0 0 3px rgba(95, 143, 221, 0.25), 0 2px 8px rgba(30, 50, 90, 0.10); }
.inv-step.is-done { opacity: 1; }
.inv-step.is-done .number-icon { background-color: #4f9a74; }

/* ---- Form and calendar containers ---- */
.inv-embed { margin-top: 16px; background: #fff; border: 1px solid #e3e8f2; border-radius: 8px; padding: 14px; min-height: 160px; }
.inv-embed iframe { display: block; width: 100%; border: 0; }
.inv-embed-calendar { padding: 6px; }
.inv-embed-calendar iframe { min-height: 680px; }
.inv-center { text-align: center; padding: 16px 0 0; }
.inv-placeholder { margin-top: 16px; background: #fff8e8; border: 1px solid #e6cf94; border-radius: 8px; padding: 14px 16px; color: #8a6a28; font-size: 1.5rem; }

.probutton {
    display: inline-block; background-color: #4b85dd; border: 2px solid #fff; padding: 6px 32px!important; text-align: center; text-decoration: none; font-size: 1.8rem!important; border-radius: 8px; color: #fff; cursor: pointer; margin: 0 auto; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
}
.probutton:hover { border: 2px solid #fff; padding: 6px 32px!important; text-align: center; text-decoration: none; font-size: 1.9rem!important; border-radius: 8px; }

/* ---- Questions ---- */
.inv-faq { margin-top: 26px; border-top: 1px solid #e3e8f2; padding-top: 6px; }
.auth-card .inv-faq h3 { font-size: 2.2rem; color: #4b5788; margin: 12px 0 4px; }
.inv-faq details { background: #f8faff; border: 1px solid #e3e8f2; border-radius: 8px; padding: 12px 16px; margin-top: 10px; }
.inv-faq summary { cursor: pointer; font-size: 1.7rem; font-weight: 500; color: #4b5788; }
.auth-card .inv-faq details p { font-size: 1.5rem; line-height: 1.5; padding: 8px 0 0; color: #5b6075; }

@media (max-width: 900px) {
    .inv-steps { grid-template-columns: minmax(0, 1fr); }
}