/* ==========================================================================
   bwu-layout.css
   Hand-written replacement for bootstrap-grid.css + bootstrap-utilities.css.
   Covers only the layout/utility classes used by main.php (about 3 KB instead of 115 KB).
   Breakpoints: sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px.
   ========================================================================== */

*, ::before, ::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ---------- Container + grid ---------- */
.container {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
.row {
    --bs-gutter-x: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.gx-0 { --bs-gutter-x: 0; }
.gx-3 { --bs-gutter-x: 1rem; }

.col-12, .col-sm-12, .col-md-6, .col-md-12,
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
.col-xl-4, .col-xl-7 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .container { max-width: 540px; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* ---------- Form field ---------- */
.form-control {
    display: block;
    width: 100%;
    padding: .15rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .1rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control::placeholder { color: #6c757d; opacity: 1; }

/* ---------- Display + flex ---------- */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.flex-column    { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start  { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }

/* ---------- Sizing + position ---------- */
.w-50  { width: 50% !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.position-relative { position: relative !important; }
.overflow-hidden   { overflow: hidden !important; }

/* ---------- Spacing (0 / .25 / .5 / 1 / 1.5 / 3 rem) ---------- */
.m-0  { margin: 0 !important; }
.m-2  { margin: .5rem !important; }
.m-3  { margin: 1rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-2 { margin-left: .5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-2 { margin-top: .5rem !important;  margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important;   margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.px-2 { padding-right: .5rem !important;  padding-left: .5rem !important; }
.px-3 { padding-right: 1rem !important;   padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important;  padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important;   padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }

/* ---------- Text ---------- */
.text-center          { text-align: center !important; }
.text-uppercase       { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-bold   { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }
.text-white   { color: #fff !important; }
.text-dark    { color: #212529 !important; }
.text-danger  { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }

/* ---------- Background, border, radius ---------- */
.bg-white     { background-color: #fff !important; }
.border       { border: 1px solid #dee2e6 !important; }
.border-white { border-color: #fff !important; }
.rounded      { border-radius: .375rem !important; }
.rounded-3    { border-radius: .5rem !important; }
.rounded-4    { border-radius: 1rem !important; }
.rounded-pill { border-radius: 50rem !important; }

/* ---------- Responsive variants ---------- */
@media (min-width: 576px) {
    .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; }
}
@media (min-width: 768px) {
    .d-md-none  { display: none !important; }
    .d-md-block { display: block !important; }
    .justify-content-md-start   { justify-content: flex-start !important; }
    .justify-content-md-between { justify-content: space-between !important; }
    .text-md-start { text-align: left !important; }
    .p-md-4  { padding: 1.5rem !important; }
    .pt-md-0 { padding-top: 0 !important; }
    .pt-md-5 { padding-top: 3rem !important; }
    .pb-md-4 { padding-bottom: 1.5rem !important; }
    .pb-md-5 { padding-bottom: 3rem !important; }
    .py-md-0 { padding-top: 0 !important;    padding-bottom: 0 !important; }
    .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-md-5 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
}
@media (min-width: 992px) {
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .justify-content-lg-start   { justify-content: flex-start !important; }
    .justify-content-lg-between { justify-content: space-between !important; }
    .text-lg-start { text-align: left !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
    .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (min-width: 1200px) {
    .justify-content-xl-between { justify-content: space-between !important; }
}