/* * Sticky footer: activate a flex column on only when the registration * page main element is present. This avoids touching shared layout CSS while * still making the content area grow to fill the viewport on large screens. * flex: 1 on .reg-page-main absorbs remaining space; footer stays at bottom. */ body:has(.reg-page-main) { display: flex; flex-direction: column; min-height: 100vh; } .reg-page-main { flex: 1; } /* * TomSelect generates its own DOM (.ts-wrapper, .ts-control) that cannot be * targeted with HTML utility classes. These rules mirror Bootstrap's * .form-control-sm sizing so the city field matches all other inputs. */ .ts-wrapper { width: 100%; } .ts-control { min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2)) !important; padding: .25rem .5rem !important; /* same as .form-control-sm */ } .ts-wrapper.is-invalid .ts-control { border-color: var(--bs-form-invalid-border-color); } .modal-header { padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: auto; } .modal-header-color { background: #00406e; color: #fff; } .btn-close-custom { position: relative; width: 2.2rem; height: 2.2rem; background-color: transparent; border: 1px solid #fff; border-radius: .375rem; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; } .btn-close-custom::before, .btn-close-custom::after { content: ''; position: absolute; width: 70%; height: 2px; background-color: #fff; top: 50%; left: 50%; transform-origin: center; } .btn-close-custom::before { transform: translate(-50%, -50%) rotate(45deg); } .btn-close-custom::after { transform: translate(-50%, -50%) rotate(-45deg); } .btn-close-custom:hover { background-color: rgba(255, 255, 255, 0.1); } /* ── Modal loading state ─────────────────────────────────────────────────── */ .modal.is-loading .modal-body { opacity: .4; pointer-events: none; } .modal.is-loading .modal-spinner { display: flex; } .modal-footer:empty { display: none; }