/* ===== FLEX CONTAINERS ===== */
.flex,
.flex-row, .row,
.flex-col, .col, .column,
.flex-row-reverse, .row-r,
.flex-col-reverse, .col-r, .column-r, 
.flex-wrap,
.flex-nowrap,
.inline-flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* ===== FLEX DIRECTION ===== */
.row,
.row-r,
.flex-row {
    flex-direction: row;
}

.col,
.col-r,
.column,
.column-r,
.flex-col,
.flex-column {
    flex-direction: column;
}

.row-r,
.flex-row-r,
.flex-row-reverse {
    flex-direction: row-reverse;
}

.col-r,
.column-r,
.flex-col-r,
.flex-col-reverse,
.flex-column-reverse {
    flex-direction: column-reverse;
}

/* ===== FLEX WRAP ===== */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* align-items */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* align-content */
.content-start    { align-content: flex-start; }
.content-center   { align-content: center; }
.content-end      { align-content: flex-end; }
.content-between  { align-content: space-between; }
.content-around   { align-content: space-around; }
.content-stretch  { align-content: stretch; }

/* align-self */
.self-start    { align-self: flex-start; }
.self-center   { align-self: center; }
.self-end      { align-self: flex-end; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* justify-content */
.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }


/* Center both axes (flex items) */
.center {
    align-items: center;
    justify-content: center;
}

/* Center main axis */
.center-x {
    justify-content: center;
}

/* Center cross axis */
.center-y {
    align-items: center;
}

.flex-grow     { flex-grow: 1; }
.flex-grow-0   { flex-grow: 0; }
.flex-shrink   { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* --------------------------
    PADDING / MARGIN / GAP
--------------------------- */

/* Zero-margin variants */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }

/* Margin Bottom */
.mb-1 { margin-bottom: var(--m1); }
.mb-2 { margin-bottom: var(--m2); }
.mb-3 { margin-bottom: var(--m3); }
.mb-4 { margin-bottom: var(--m4); }
.mb-5 { margin-bottom: var(--m5); }
.mb-6 { margin-bottom: var(--m6); }

/* Margin Top */
.mt-1 { margin-top: var(--m1); }
.mt-2 { margin-top: var(--m2); }
.mt-3 { margin-top: var(--m3); }
.mt-4 { margin-top: var(--m4); }
.mt-5 { margin-top: var(--m5); }
.mt-6 { margin-top: var(--m6); }
.mt-7 { margin-top: 1.75rem; }

/* Margin Left */
.ml-1 { margin-left: var(--m1); }
.ml-2 { margin-left: var(--m2); }
.ml-3 { margin-left: var(--m3); }
.ml-4 { margin-left: var(--m4); }
.ml-5 { margin-left: var(--m5); }
.ml-6 { margin-left: var(--m6); }

/* Margin Right */
.mr-1 { margin-right: var(--m1); }
.mr-2 { margin-right: var(--m2); }
.mr-3 { margin-right: var(--m3); }
.mr-4 { margin-right: var(--m4); }
.mr-5 { margin-right: var(--m5); }
.mr-6 { margin-right: var(--m6); }

/* Margin X (left & right) */
.mx-1 { margin-left: var(--m1); margin-right: var(--m1); }
.mx-2 { margin-left: var(--m2); margin-right: var(--m2); }
.mx-3 { margin-left: var(--m3); margin-right: var(--m3); }
.mx-4 { margin-left: var(--m4); margin-right: var(--m4); }
.mx-5 { margin-left: var(--m5); margin-right: var(--m5); }
.mx-6 { margin-left: var(--m6); margin-right: var(--m6); }

/* Margin Y (top & bottom) */
.my-1 { margin-top: var(--m1); margin-bottom: var(--m1); }
.my-2 { margin-top: var(--m2); margin-bottom: var(--m2); }
.my-3 { margin-top: var(--m3); margin-bottom: var(--m3); }
.my-4 { margin-top: var(--m4); margin-bottom: var(--m4); }
.my-5 { margin-top: var(--m5); margin-bottom: var(--m5); }
.my-6 { margin-top: var(--m6); margin-bottom: var(--m6); }

/* Margin (all sides) */
.m-1 { margin: var(--m1); }
.m-2 { margin: var(--m2); }
.m-3 { margin: var(--m3); }
.m-4 { margin: var(--m4); }
.m-5 { margin: var(--m5); }
.m-6 { margin: var(--m6); }

/* Padding (all sides) */
.p-1 { padding: var(--p1); }
.p-2 { padding: var(--p2); }
.p-3 { padding: var(--p3); }
.p-4 { padding: var(--p4); }
.p-5 { padding: var(--p5); }
.p-6 { padding: var(--p6); }

/* Padding Top */
.pt-1 { padding-top: var(--p1); }
.pt-2 { padding-top: var(--p2); }
.pt-3 { padding-top: var(--p3); }
.pt-4 { padding-top: var(--p4); }
.pt-5 { padding-top: var(--p5); }
.pt-6 { padding-top: var(--p6); }

/* Padding Bottom */
.pb-1 { padding-bottom: var(--p1); }
.pb-2 { padding-bottom: var(--p2); }
.pb-3 { padding-bottom: var(--p3); }
.pb-4 { padding-bottom: var(--p4); }
.pb-5 { padding-bottom: var(--p5); }
.pb-6 { padding-bottom: var(--p6); }

/* Padding Left */
.pl-1 { padding-left: var(--p1); }
.pl-2 { padding-left: var(--p2); }
.pl-3 { padding-left: var(--p3); }
.pl-4 { padding-left: var(--p4); }
.pl-5 { padding-left: var(--p5); }
.pl-6 { padding-left: var(--p6); }

/* Padding Right */
.pr-1 { padding-right: var(--p1); }
.pr-2 { padding-right: var(--p2); }
.pr-3 { padding-right: var(--p3); }
.pr-4 { padding-right: var(--p4); }
.pr-5 { padding-right: var(--p5); }
.pr-6 { padding-right: var(--p6); }

/* Padding X (left & right) */
.px-1 { padding-left: var(--p1); padding-right: var(--p1); }
.px-2 { padding-left: var(--p2); padding-right: var(--p2); }
.px-3 { padding-left: var(--p3); padding-right: var(--p3); }
.px-4 { padding-left: var(--p4); padding-right: var(--p4); }
.px-5 { padding-left: var(--p5); padding-right: var(--p5); }
.px-6 { padding-left: var(--p6); padding-right: var(--p6); }

/* Padding Y (top & bottom) */
.py-1 { padding-top: var(--p1); padding-bottom: var(--p1); }
.py-2 { padding-top: var(--p2); padding-bottom: var(--p2); }
.py-3 { padding-top: var(--p3); padding-bottom: var(--p3); }
.py-4 { padding-top: var(--p4); padding-bottom: var(--p4); }
.py-5 { padding-top: var(--p5); padding-bottom: var(--p5); }
.py-6 { padding-top: var(--p6); padding-bottom: var(--p6); }

/* Gap */
.g-1 { gap: var(--g1); }
.g-2 { gap: var(--g2); }
.g-3 { gap: var(--g3); }
.g-4 { gap: var(--g4); }
.g-5 { gap: var(--g5); }
.g-6 { gap: var(--g6); }

/* Column Gap */
.gx-1 { column-gap: var(--g1); }
.gx-2 { column-gap: var(--g2); }
.gx-3 { column-gap: var(--g3); }
.gx-4 { column-gap: var(--g4); }
.gx-5 { column-gap: var(--g5); }
.gx-6 { column-gap: var(--g6); }

/* Row Gap */
.gy-1 { row-gap: var(--g1); }
.gy-2 { row-gap: var(--g2); }
.gy-3 { row-gap: var(--g3); }
.gy-4 { row-gap: var(--g4); }
.gy-5 { row-gap: var(--g5); }
.gy-6 { row-gap: var(--g6); }

/* ----------------------
        SIZING
----------------------- */

.w-1 { width: 8.33%; }
.w-2 { width: 16.66%; }
.w-3 { width: 25%; }
.w-4 { width: 33.33%; }
.w-5 { width: 41.66%; }
.w-6 { width: 50%; }
.w-7 { width: 58.33%; }
.w-8 { width: 66.66%; }
.w-9 { width: 75%; }
.w-10 { width: 83.33%; }
.w-11 { width: 91.66%; }
.w-12,
.max-width,
.w-full, .w-max {
  width: 100%;
}

.w-screen { width: 100vw; }

.h-1 { height: 8.33%; }
.h-2 { height: 16.66%; }
.h-3 { height: 25%; }
.h-4 { height: 33.33%; }
.h-5 { height: 41.66%; }
.h-6 { height: 50%; }
.h-7 { height: 58.33%; }
.h-8 { height: 66.66%; }
.h-9 { height: 75%; }
.h-10 { height: 83.33%; }
.h-11 { height: 91.66%; }
.h-12,
.max-height,
.h-full, .h-max {
  height: 100%;
}

.h-screen { height: 100vh; }

/* Max-width content constraints (pixel-anchored, off the spacing scale) */
.maxw-sm { max-width: 480px; }
.maxw-md { max-width: 640px; }
.maxw-lg { max-width: 880px; }
.maxw-xl { max-width: 1120px; }

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.overlay-icons img {
    height: 128px;
    width: 128px;
}

.overlay-icons img:not(:first-of-type) {
    position: absolute;
}

.rotate-right {
  animation: rotate360 60s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.rotate-left {
  animation: rotate360 60s linear infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

/* ===== TEXT ALIGNMENT ===== */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* ===== FONT SIZE ===== */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 13px; }
.text-base { font-size: 16px; }

/* ===== FONT WEIGHT ===== */
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ===== TEXT OVERFLOW ===== */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== WHITESPACE ===== */
.nowrap    { white-space: nowrap; }
.pre-wrap  { white-space: pre-wrap; }

/* ===== DISPLAY ===== */
.hidden       { display: none !important; }
.d-none       { display: none !important; }
.d-block      { display: block; }
.d-inline     { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex       { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-table-cell { display: table-cell; }
.w-fc         { width: fit-content; }
.maxw-fc      { max-width: fit-content; }
.container-fluid { width: 100%; box-sizing: border-box; }

/* ===== BOOTSTRAP 5 ALIASES — align/justify ===== */
.align-items-start    { align-items: flex-start; }
.align-items-center   { align-items: center; }
.align-items-end      { align-items: flex-end; }
.align-items-stretch  { align-items: stretch; }
.justify-content-start   { justify-content: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }

/* ===== BOOTSTRAP 5 ALIASES — text ===== */
.text-start  { text-align: left !important; }
.text-end    { text-align: right !important; }
.text-nowrap { white-space: nowrap; }
.text-wrap   { white-space: normal; }
.fw-normal   { font-weight: 400; }
.fw-semibold { font-weight: 600; }
.fw-bold     { font-weight: 700; }

/* ===== BOOTSTRAP 5 ALIASES — spacing (logical properties → LTR) ===== */
.p-0  { padding: 0 !important; }
.ms-1 { margin-left: var(--m1); } .ms-2 { margin-left: var(--m2); }
.ms-3 { margin-left: var(--m3); } .ms-4 { margin-left: var(--m4); }
.ms-5 { margin-left: var(--m5); } .ms-auto { margin-left: auto; }
.me-1 { margin-right: var(--m1); } .me-2 { margin-right: var(--m2); }
.me-3 { margin-right: var(--m3); } .me-4 { margin-right: var(--m4); }
.me-5 { margin-right: var(--m5); } .me-auto { margin-right: auto; }
.ps-1 { padding-left: var(--p1); } .ps-2 { padding-left: var(--p2); }
.ps-3 { padding-left: var(--p3); } .ps-4 { padding-left: var(--p4); }
.ps-5 { padding-left: var(--p5); }
.pe-1 { padding-right: var(--p1); } .pe-2 { padding-right: var(--p2); }
.pe-3 { padding-right: var(--p3); } .pe-4 { padding-right: var(--p4); }
.pe-5 { padding-right: var(--p5); }

/* ===== BOOTSTRAP 5 ALIASES — borders / radius ===== */
.border      { border: 1px solid var(--border); }
.border-0    { border: none !important; }
.border-top  { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.rounded     { border-radius: var(--radius, 6px); }
.rounded-0   { border-radius: 0; }

/* ===== BOOTSTRAP 5 ALIASES — grid (basic 12-col fractions) ===== */
.col-auto    { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3, .col-sm-3, .col-md-3 { flex: 0 0 25%;    max-width: 25%; }
.col-4, .col-sm-4, .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-6, .col-sm-6, .col-md-6 { flex: 0 0 50%;    max-width: 50%; }
.col-8, .col-sm-8, .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9, .col-sm-9, .col-md-9 { flex: 0 0 75%;    max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* fill-remaining column (Bootstrap's plain .col) */
.col-fill { flex: 1 1 0; min-width: 0; }
/* float */
.float-end   { float: right; }
.float-start { float: left; }

/* ===== COLOR ===== */
.text-muted   { color: var(--text-3) !important; }
.text-danger  { color: var(--error, #c0392b); }

/* ===== BORDERS (component) ===== */
.border-top-solid { border-top: solid; }
.border-danger    { border-left: 3px solid var(--error, #c0392b); }

/* ===== FLEX SHORTHANDS ===== */
.shrink-0   { flex-shrink: 0; }
.col-shrink { width: 1%; }