/**
 * Bootstrap 3 markup on the Bootstrap 5 public layout: the portal's registration, payment and other public pages
 * (PUBLIC_BS3_COMPAT in cmis/portal/index.php, content wrapped in .bs3-compat) keep their markup, field names and
 * scripts; this sheet gives the Bootstrap 3 classes they use the design system's look (tokens from site.css).
 * Scoped to .bs3-compat so nothing leaks into the header or footer. Also the start of the compatibility sheet the
 * dashboards will need (plan, Phase 2).
 * Company: Wits Technologies Ltd
 * @author Sammy Mwaura Waweru <sammy@witstechnologies.co.ke>
 */

/* Sections and backgrounds of the old theme */
.bs3-compat .section, .bs3-compat .section-portal { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3.25rem); }
.bs3-compat .bg-grey { background: var(--ui-surface-2); }
.bs3-compat .section-portal h1 { font-size: var(--ui-fs-2xl); }

/* Grid: col-xs-* and offsets (Bootstrap 5 has col-sm/md/lg itself) */
.bs3-compat .col-xs-1 { flex: 0 0 auto; width: 8.33333%; }
.bs3-compat .col-xs-2 { flex: 0 0 auto; width: 16.6667%; }
.bs3-compat .col-xs-3 { flex: 0 0 auto; width: 25%; }
.bs3-compat .col-xs-4 { flex: 0 0 auto; width: 33.3333%; }
.bs3-compat .col-xs-5 { flex: 0 0 auto; width: 41.6667%; }
.bs3-compat .col-xs-6 { flex: 0 0 auto; width: 50%; }
.bs3-compat .col-xs-7 { flex: 0 0 auto; width: 58.3333%; }
.bs3-compat .col-xs-8 { flex: 0 0 auto; width: 66.6667%; }
.bs3-compat .col-xs-9 { flex: 0 0 auto; width: 75%; }
.bs3-compat .col-xs-10 { flex: 0 0 auto; width: 83.3333%; }
.bs3-compat .col-xs-11 { flex: 0 0 auto; width: 91.6667%; }
.bs3-compat .col-xs-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
 .bs3-compat .col-sm-offset-1 { margin-left: 8.33333%; }
 .bs3-compat .col-sm-offset-2 { margin-left: 16.6667%; }
 .bs3-compat .col-sm-offset-3 { margin-left: 25%; }
 .bs3-compat .col-sm-offset-4 { margin-left: 33.3333%; }
 .bs3-compat .col-sm-offset-5 { margin-left: 41.6667%; }
 .bs3-compat .col-sm-offset-6 { margin-left: 50%; }
 .bs3-compat .col-sm-offset-7 { margin-left: 58.3333%; }
 .bs3-compat .col-sm-offset-8 { margin-left: 66.6667%; }
 .bs3-compat .col-sm-offset-9 { margin-left: 75%; }
 .bs3-compat .col-sm-offset-10 { margin-left: 83.3333%; }
 .bs3-compat .col-sm-offset-11 { margin-left: 91.6667%; }
}
@media (min-width: 768px) {
 .bs3-compat .col-md-offset-1 { margin-left: 8.33333%; }
 .bs3-compat .col-md-offset-2 { margin-left: 16.6667%; }
 .bs3-compat .col-md-offset-3 { margin-left: 25%; }
 .bs3-compat .col-md-offset-4 { margin-left: 33.3333%; }
 .bs3-compat .col-md-offset-5 { margin-left: 41.6667%; }
 .bs3-compat .col-md-offset-6 { margin-left: 50%; }
 .bs3-compat .col-md-offset-7 { margin-left: 58.3333%; }
 .bs3-compat .col-md-offset-8 { margin-left: 66.6667%; }
 .bs3-compat .col-md-offset-9 { margin-left: 75%; }
 .bs3-compat .col-md-offset-10 { margin-left: 83.3333%; }
 .bs3-compat .col-md-offset-11 { margin-left: 91.6667%; }
}

/* Forms */
.bs3-compat .form-group { margin-bottom: 1rem; }
.bs3-compat .form-group > label, .bs3-compat .control-label { display: inline-block; margin-bottom: .35rem; color: var(--ui-ink); font-weight: 600; }
.bs3-compat .form-control, .bs3-compat .form-select { min-height: 44px; }
.bs3-compat textarea.form-control { min-height: 6rem; }
/* File inputs: the Choose File button fills the 44px field (min-height above) instead of sitting short inside its padding */
.bs3-compat input[type=file].form-control { padding-top: 0; padding-bottom: 0; line-height: 42px; }
.bs3-compat input[type=file].form-control::file-selector-button { height: 42px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.bs3-compat select.form-control { padding-right: 2.25rem; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2352616c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px; appearance: none; }
.bs3-compat .help-block { display: block; margin-top: .35rem; color: var(--ui-muted); font-size: var(--ui-fs-xs); }
.bs3-compat .checkbox, .bs3-compat .radio { display: block; margin: .35rem 0; }
/* Labels hold text and links (e.g. the declaration), so they stay inline content with the box at the start */
.bs3-compat .checkbox label, .bs3-compat .radio label { position: relative; display: block; margin-bottom: .25rem; padding-left: 1.65rem; font-weight: 400; cursor: pointer; }
.bs3-compat .checkbox label > input, .bs3-compat .radio label > input { position: absolute; top: .1rem; left: 0; margin: 0; }
.bs3-compat .radio-inline, .bs3-compat .checkbox-inline { display: inline-block; margin-bottom: .25rem; font-weight: 400; cursor: pointer; }
.bs3-compat .radio-inline > input, .bs3-compat .checkbox-inline > input { margin: 0 .4rem 0 0; vertical-align: -.15rem; }
.bs3-compat .radio-inline, .bs3-compat .checkbox-inline { margin-right: 1.25rem; }
.bs3-compat input[type="checkbox"], .bs3-compat input[type="radio"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--ui-primary); }
.bs3-compat .form-inline .form-group { display: inline-block; margin: 0 .5rem .5rem 0; vertical-align: middle; }
.bs3-compat .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.bs3-compat .input-group-addon { display: flex; align-items: center; padding: .375rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--ui-surface-2); color: var(--ui-ink-soft); white-space: nowrap; }
/* Validation: jQuery Validate's own classes (.error) and the pages' .has-error / .has-success */
.bs3-compat .has-error .form-control, .bs3-compat .form-control.error, .bs3-compat .form-control.invalid { border-color: var(--bs-form-invalid-border-color); }
.bs3-compat .has-error .form-control:focus, .bs3-compat .form-control.error:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .2); }
.bs3-compat .has-success .form-control { border-color: var(--bs-form-valid-border-color); }
.bs3-compat em.error, .bs3-compat label.error, .bs3-compat span.error, .bs3-compat .has-error .help-block { display: block; margin-top: .35rem; color: #b02a37; font-size: var(--ui-fs-xs); font-style: normal; font-weight: 600; }
/* intl-tel-input fills the column like the other fields */
.bs3-compat .iti { display: block; width: 100%; }
/* intl-tel-input's own CSS fixes the flag box at 34px (the Bootstrap 3 input height): stretch it to the input so the flag is centred */
.bs3-compat .iti__flag-container { height: auto; }

/* Buttons */
.bs3-compat .btn-default { --bs-btn-color: var(--ui-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--ui-border); --bs-btn-hover-color: var(--ui-ink); --bs-btn-hover-bg: var(--ui-surface-2); --bs-btn-hover-border-color: var(--ui-border); --bs-btn-active-bg: var(--ui-surface-2); }
.bs3-compat .btn-block { display: flex; width: 100%; }
.bs3-compat .btn-xs { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; }
.bs3-compat .btn-info { --bs-btn-color: #fff; --bs-btn-bg: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ui-primary-700); --bs-btn-hover-border-color: var(--ui-primary-700); }
.bs3-compat .btn.disabled, .bs3-compat .btn[disabled] { pointer-events: none; opacity: .7; }

/* Panels and wells */
.bs3-compat .panel { margin-bottom: 1.25rem; border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius); background: #fff; box-shadow: var(--ui-shadow-sm); }
.bs3-compat .panel-heading { padding: .85rem 1.25rem; border-bottom: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius) var(--ui-radius) 0 0; background: var(--ui-surface-2); }
.bs3-compat .panel-title { margin: 0; font-size: var(--ui-fs-lg); }
.bs3-compat .panel-title a { color: inherit; text-decoration: none; }
.bs3-compat .panel-body { padding: clamp(1.1rem, .75rem + 1.5vw, 2rem); }
.bs3-compat .panel-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--ui-border-soft); background: var(--ui-surface-2); }
.bs3-compat .panel-success { border-color: rgba(var(--bs-success-rgb), .35); }
.bs3-compat .panel-info { border-color: rgba(var(--ui-primary-rgb), .35); }
.bs3-compat .panel-group .panel + .panel { margin-top: .5rem; }
/* A row of buttons (e.g. Back to Login + Submit and Pay) keeps a gap when it wraps on phones */
.bs3-compat .form-group:has(> .btn + .btn) { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
/* Payment method cards (renderXxxInstructions() in portal.functions.php): logo and button stacked, buttons aligned across a row */
.bs3-compat .payment-option { border-color: var(--ui-border-soft); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
.bs3-compat .payment-option > .card-header { padding: .85rem 1.25rem; background: var(--ui-surface-2); font-size: var(--ui-fs-sm); line-height: 1.5; }
.bs3-compat .payment-option > .card-body { display: flex; flex-direction: column; padding: 1.25rem; }
.bs3-compat .payment-option > .card-body.text-center > a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; }
.bs3-compat .payment-option > .card-body.text-center > a > br { display: none; }
.bs3-compat .payment-option > .card-body.text-center > a > img { width: auto; max-width: 100%; max-height: 110px !important; object-fit: contain; }
.bs3-compat .payment-option > .card-body > p:last-child { margin-bottom: 0; }
/* Numbered steps in the payment instructions (BS3 "badge alert-success": BS5 badges have white text and no background) */
.bs3-compat .badge.alert-success { margin-right: .35rem; padding: .35em .6em; border-radius: 50rem; background: var(--bs-success); color: #fff; }
.bs3-compat .payment-option--success { border-top: 3px solid var(--bs-success); }
.bs3-compat .payment-option--primary, .bs3-compat .payment-option--info { border-top: 3px solid var(--ui-primary); }
.bs3-compat .payment-option--warning { border-top: 3px solid var(--ui-accent); }
.bs3-compat .well { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius-sm); background: var(--ui-surface-2); }
.bs3-compat .well-sm { padding: .65rem .9rem; }

/* Labels and other utilities */
.bs3-compat .label { display: inline-block; padding: .25em .6em; border-radius: 999px; background: var(--ui-muted); color: #fff; font-size: 75%; font-weight: 700; line-height: 1.1; }
.bs3-compat .label-primary { background: var(--ui-primary); }
.bs3-compat .label-success { background: var(--bs-success); }
.bs3-compat .label-warning { background: var(--ui-accent); color: var(--ui-ink); }
.bs3-compat .label-danger { background: var(--bs-danger); }
.bs3-compat .label-info { background: var(--ui-primary-700); }
.bs3-compat .pull-right { float: right !important; }
.bs3-compat .pull-left { float: left !important; }
.bs3-compat .text-right { text-align: right !important; }
.bs3-compat .text-left { text-align: left !important; }
.bs3-compat .hide, .bs3-compat .hidden { display: none !important; }
.bs3-compat .img-responsive { display: block; max-width: 100%; height: auto; }
.bs3-compat .no-margin { margin: 0 !important; }
.bs3-compat .text-primary { color: var(--ui-primary-700) !important; }
.bs3-compat .table-responsive { margin-bottom: 1rem; }

/* Font Awesome 4 icons these pages use, drawn from Bootstrap Icons (Font Awesome is not loaded on this layout) */
.bs3-compat .fa { display: inline-block; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: 400 !important; line-height: 1; vertical-align: -.125em; }
.bs3-compat .fa-fw { width: 1.25em; text-align: center; }
.bs3-compat .fa-spinner::before { content: "\f130"; }
.bs3-compat .fa-download::before { content: "\f30a"; }
.bs3-compat .fa-spin { animation: bs3-compat-spin 1s linear infinite; }
@keyframes bs3-compat-spin { to { transform: rotate(360deg); } }

/* Testimonials on the registration pages (Bootstrap 5 carousel) */
.bs3-compat .section-testimonials .lead { margin-bottom: 1rem; color: var(--ui-ink); font-size: var(--ui-fs-xl); font-weight: 700; }
.bs3-compat .testimonials.carousel { padding-bottom: 2.5rem; }
.bs3-compat .testimonials .carousel-inner { border-radius: var(--ui-radius); background: #fff; box-shadow: var(--ui-shadow-sm); }
.bs3-compat .testimonials img { max-width: 120px; margin: 1.5rem auto !important; border-radius: 50%; }
.bs3-compat .testimonials blockquote { margin: 0; color: var(--ui-ink); font-size: var(--ui-fs-lg); }
.bs3-compat .testimonials .carousel-indicators { margin-bottom: 0; padding: 0; list-style: none; }
.bs3-compat .testimonials .carousel-indicators li { text-indent: -999px; overflow: hidden; }
.bs3-compat .testimonials .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border: 0; border-radius: 50%; background-color: var(--ui-primary); }