/**
 * memez_utils.css — минимальная замена Bootstrap CSS.
 * Создан 31.05.2026: Bootstrap 5.x был 232 KB, использовалось <3% классов.
 * PSI показывал 97.8% bootstrap.min.css неиспользуемым.
 *
 * Покрывает 40+ реальных классов: grid, btn, card, flex, spacing utilities.
 * Полный аудит классов сделан через grep всех .php шаблонов 31.05.2026.
 *
 * Если новый класс понадобится — добавь сюда, НЕ возвращай Bootstrap.
 */

/* === Bootstrap Reboot — CSS reset ===
 * КРИТИЧНО: убираем browser default стили которые иначе вылезают
 * (фиолетовые подчёркнутые ссылки, bullets в ul, margin на body, etc).
 * Это адаптация Bootstrap 5 Reboot. */
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:1rem; font-weight:400; line-height:1.5; color:#fff; background-color:transparent; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,h5,h6{ margin-top:0; margin-bottom:0.5rem; font-weight:500; line-height:1.2; }
p{ margin-top:0; margin-bottom:1rem; }
hr{ margin:1rem 0; color:inherit; background-color:currentColor; border:0; opacity:.25; height:1px; }
ul,ol{ padding-left:2rem; margin-top:0; margin-bottom:1rem; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
img,svg{ vertical-align:middle; }
button{ border-radius:0; font-family:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; }
button:focus:not(:focus-visible){ outline:0; }
input,button,select,optgroup,textarea{ margin:0; font-family:inherit; font-size:inherit; line-height:inherit; }
button,[type="button"],[type="reset"],[type="submit"]{ -webkit-appearance:button; cursor:pointer; }
button:not(:disabled){ cursor:pointer; }
table{ caption-side:bottom; border-collapse:collapse; }
label{ display:inline-block; }

/* === Container === */
.container{ width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto; }
@media (min-width:576px){ .container{ max-width:540px; } }
@media (min-width:768px){ .container{ max-width:720px; } }
@media (min-width:992px){ .container{ max-width:960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }

/* === Grid: row + col-* === */
.row{ display:flex; flex-wrap:wrap; margin-right:-15px; margin-left:-15px; }
.row > *{ position:relative; width:100%; padding-right:15px; padding-left:15px; }

/* Базовые col-N (xs breakpoint, всегда) */
.col-12{ flex:0 0 auto; width:100%; }

/* Responsive col-sm-* (≥576px) */
@media (min-width:576px){
    .col-sm-1{ flex:0 0 auto; width:8.33333333%; }
    .col-sm-2{ flex:0 0 auto; width:16.66666667%; }
    .col-sm-3{ flex:0 0 auto; width:25%; }
    .col-sm-4{ flex:0 0 auto; width:33.33333333%; }
    .col-sm-6{ flex:0 0 auto; width:50%; }
    .col-sm-8{ flex:0 0 auto; width:66.66666667%; }
    .col-sm-12{ flex:0 0 auto; width:100%; }
}

/* Responsive col-md-* (≥768px) */
@media (min-width:768px){
    .col-md-3{ flex:0 0 auto; width:25%; }
    .col-md-4{ flex:0 0 auto; width:33.33333333%; }
    .col-md-6{ flex:0 0 auto; width:50%; }
    .col-md-12{ flex:0 0 auto; width:100%; }
}

/* Responsive col-lg-* (≥992px) */
@media (min-width:992px){
    .col-lg-3{ flex:0 0 auto; width:25%; }
    .col-lg-4{ flex:0 0 auto; width:33.33333333%; }
    .col-lg-6{ flex:0 0 auto; width:50%; }
}

/* === Display utilities === */
.d-none{ display:none !important; }
.d-block{ display:block !important; }
.d-inline{ display:inline !important; }
.d-inline-block{ display:inline-block !important; }
.d-flex{ display:flex !important; }
.d-grid{ display:grid !important; }
.d-inline-flex{ display:inline-flex !important; }

@media (min-width:576px){
    .d-sm-none{ display:none !important; }
    .d-sm-block{ display:block !important; }
    .d-sm-flex{ display:flex !important; }
}
@media (min-width:768px){
    .d-md-none{ display:none !important; }
    .d-md-block{ display:block !important; }
    .d-md-flex{ display:flex !important; }
}
@media (min-width:992px){
    .d-lg-none{ display:none !important; }
    .d-lg-block{ display:block !important; }
    .d-lg-flex{ display:flex !important; }
}

/* === Flexbox utilities === */
.flex-wrap{ flex-wrap:wrap !important; }
.flex-nowrap{ flex-wrap:nowrap !important; }
.flex-column{ flex-direction:column !important; }
.flex-row{ flex-direction:row !important; }
.align-items-start{ align-items:flex-start !important; }
.align-items-center{ align-items:center !important; }
.align-items-end{ align-items:flex-end !important; }
.justify-content-start{ justify-content:flex-start !important; }
.justify-content-center{ justify-content:center !important; }
.justify-content-end{ justify-content:flex-end !important; }
.justify-content-between{ justify-content:space-between !important; }
.justify-content-around{ justify-content:space-around !important; }

/* === Gap === */
.gap-1{ gap:0.25rem !important; }
.gap-2{ gap:0.5rem !important; }
.gap-3{ gap:1rem !important; }
.gap-4{ gap:1.5rem !important; }
.gap-5{ gap:3rem !important; }

/* === Spacing: margin === */
.m-0{ margin:0 !important; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:0.25rem !important; }
.mt-2{ margin-top:0.5rem !important; }
.mt-3{ margin-top:1rem !important; }
.mt-4{ margin-top:1.5rem !important; }
.mt-5{ margin-top:3rem !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:0.25rem !important; }
.mb-2{ margin-bottom:0.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.mb-4{ margin-bottom:1.5rem !important; }
.mb-5{ margin-bottom:3rem !important; }
.ms-1{ margin-left:0.25rem !important; }
.ms-2{ margin-left:0.5rem !important; }
.ms-3{ margin-left:1rem !important; }
.me-1{ margin-right:0.25rem !important; }
.me-2{ margin-right:0.5rem !important; }
.me-3{ margin-right:1rem !important; }
.mx-auto{ margin-right:auto !important; margin-left:auto !important; }
.mx-0{ margin-right:0 !important; margin-left:0 !important; }
.my-0{ margin-top:0 !important; margin-bottom:0 !important; }
.ms-0{ margin-left:0 !important; }
.me-0{ margin-right:0 !important; }
/* Bootstrap RTL-aware алиасы ps-* / pe-* — padding-start (left в LTR) / padding-end (right в LTR) */
.ps-0{ padding-left:0 !important; }
.ps-1{ padding-left:0.25rem !important; }
.ps-2{ padding-left:0.5rem !important; }
.ps-3{ padding-left:1rem !important; }
.pe-0{ padding-right:0 !important; }
.pe-1{ padding-right:0.25rem !important; }
.pe-2{ padding-right:0.5rem !important; }
.pe-3{ padding-right:1rem !important; }

@media (min-width:992px){
    .mb-lg-0{ margin-bottom:0 !important; }
}

/* === Spacing: padding === */
.p-0{ padding:0 !important; }
.p-1{ padding:0.25rem !important; }
.p-2{ padding:0.5rem !important; }
.p-3{ padding:1rem !important; }
.p-4{ padding:1.5rem !important; }
.pt-0{ padding-top:0 !important; }
.pt-1{ padding-top:0.25rem !important; }
.pt-2{ padding-top:0.5rem !important; }
.pt-3{ padding-top:1rem !important; }
.pt-4{ padding-top:1.5rem !important; }
.pb-0{ padding-bottom:0 !important; }
.pb-1{ padding-bottom:0.25rem !important; }
.pb-2{ padding-bottom:0.5rem !important; }
.pb-3{ padding-bottom:1rem !important; }
.pb-4{ padding-bottom:1.5rem !important; }
.px-1{ padding-right:0.25rem !important; padding-left:0.25rem !important; }
.px-2{ padding-right:0.5rem !important; padding-left:0.5rem !important; }
.px-3{ padding-right:1rem !important; padding-left:1rem !important; }
.py-1{ padding-top:0.25rem !important; padding-bottom:0.25rem !important; }
.py-2{ padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
.py-3{ padding-top:1rem !important; padding-bottom:1rem !important; }

/* === Width / Height === */
.w-100{ width:100% !important; }
.w-75{ width:75% !important; }
.w-50{ width:50% !important; }
.h-100{ height:100% !important; }

/* === Text alignment === */
.text-start{ text-align:left !important; }
.text-center{ text-align:center !important; }
.text-end{ text-align:right !important; }

/* === Font weight === */
.fw-bold{ font-weight:700 !important; }
.fw-normal{ font-weight:400 !important; }

/* === Buttons ===
 * Минимальный Bootstrap-совместимый стиль .btn.
 * НЕ перекрывает цвет — у нас тёмная тема сайта, .btn-mem/.btn-sec/.btn-secondary
 * получают свои цвета из основных CSS или из своих специфичных правил ниже. */
.btn{
    display:inline-block;
    font-weight:500;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
    cursor:pointer;
    user-select:none;
    background-color:transparent;
    border:1px solid transparent;
    padding:0.5rem 1rem;
    font-size:14px;
    border-radius:10px;
    transition:background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
/* .btn-secondary адаптирован под тёмную тему memez (вместо Bootstrap-серого #6c757d).
   Использует тот же layout что и .btn-mem но мягче, для админ-сайдбара и второстепенных действий. */
.btn-secondary{
    color:#d4d4d4;
    background-color:#1a1819;
    border:1px solid rgba(255,255,255,.08);
}
.btn-secondary:hover{
    color:#fff;
    background-color:#252223;
    border-color:rgba(255,32,78,.25);
}
.btn-secondary.active{
    color:#fff;
    background-color:rgba(255,32,78,.12);
    border-color:rgba(255,32,78,.45);
}
.btn-danger{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}
.btn-danger:hover{
    color:#fff;
    background-color:#bb2d3b;
    border-color:#b02a37;
}
.btn-outline-light{
    color:#f8f9fa;
    border-color:#f8f9fa;
}
.btn-outline-light:hover{
    color:#000;
    background-color:#f8f9fa;
    border-color:#f8f9fa;
}

/* btn-group / btn-group-lg */
.btn-group{
    position:relative;
    display:inline-flex;
    vertical-align:middle;
}
.btn-group > .btn{ position:relative; flex:1 1 auto; }
.btn-group-lg > .btn,
.btn-group .btn-group-lg{
    padding:0.5rem 1rem;
    font-size:1.25rem;
    border-radius:0.5rem;
}

/* === Card === */
.card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    word-wrap:break-word;
    background-color:#fff;
    background-clip:border-box;
    border:1px solid rgba(0,0,0,.125);
    border-radius:0.375rem;
}
.card-body{ flex:1 1 auto; padding:1rem 1rem; }
.card-header{
    padding:0.5rem 1rem;
    margin-bottom:0;
    background-color:rgba(0,0,0,.03);
    border-bottom:1px solid rgba(0,0,0,.125);
}
.card-title{ margin-bottom:0.5rem; }
.card-text{ margin-bottom:1rem; }

/* === Img-fluid / img utilities === */
.img-fluid{ max-width:100%; height:auto; }

/* === Container-fluid === */
.container-fluid{ width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto; }

/* === List utilities === */
.list-unstyled{ padding-left:0 !important; list-style:none !important; margin-left:0 !important; }
.list-inline{ padding-left:0; list-style:none; }
.list-inline-item{ display:inline-block; }
.list-inline-item:not(:last-child){ margin-right:0.5rem; }

/* === Position === */
.position-static{ position:static !important; }
.position-relative{ position:relative !important; }
.position-absolute{ position:absolute !important; }
.position-fixed{ position:fixed !important; }
.position-sticky{ position:sticky !important; }
.top-0{ top:0 !important; }
.top-50{ top:50% !important; }
.top-100{ top:100% !important; }
.bottom-0{ bottom:0 !important; }
.start-0{ left:0 !important; }
.start-50{ left:50% !important; }
.end-0{ right:0 !important; }

/* === Border === */
.border{ border:1px solid rgba(255,255,255,.1) !important; }
.border-0{ border:0 !important; }
.border-top{ border-top:1px solid rgba(255,255,255,.1) !important; }
.border-bottom{ border-bottom:1px solid rgba(255,255,255,.1) !important; }
.border-start{ border-left:1px solid rgba(255,255,255,.1) !important; }
.border-end{ border-right:1px solid rgba(255,255,255,.1) !important; }

/* === Rounded === */
.rounded{ border-radius:0.375rem !important; }
.rounded-0{ border-radius:0 !important; }
.rounded-1{ border-radius:0.25rem !important; }
.rounded-2{ border-radius:0.375rem !important; }
.rounded-3{ border-radius:0.5rem !important; }
.rounded-circle{ border-radius:50% !important; }
.rounded-pill{ border-radius:50rem !important; }

/* === Shadow === */
.shadow{ box-shadow:0 0.5rem 1rem rgba(0,0,0,.15) !important; }
.shadow-sm{ box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.075) !important; }
.shadow-lg{ box-shadow:0 1rem 3rem rgba(0,0,0,.175) !important; }
.shadow-none{ box-shadow:none !important; }

/* === Opacity === */
.opacity-0{ opacity:0 !important; }
.opacity-25{ opacity:0.25 !important; }
.opacity-50{ opacity:0.5 !important; }
.opacity-75{ opacity:0.75 !important; }
.opacity-100{ opacity:1 !important; }

/* === Font size === */
.fs-1{ font-size:2.5rem !important; }
.fs-2{ font-size:2rem !important; }
.fs-3{ font-size:1.75rem !important; }
.fs-4{ font-size:1.5rem !important; }
.fs-5{ font-size:1.25rem !important; }
.fs-6{ font-size:1rem !important; }

/* === Line height === */
.lh-1{ line-height:1 !important; }
.lh-sm{ line-height:1.25 !important; }
.lh-base{ line-height:1.5 !important; }
.lh-lg{ line-height:2 !important; }

/* === Overflow === */
.overflow-auto{ overflow:auto !important; }
.overflow-hidden{ overflow:hidden !important; }
.overflow-visible{ overflow:visible !important; }
.overflow-scroll{ overflow:scroll !important; }

/* === Visibility === */
.visible{ visibility:visible !important; }
.invisible{ visibility:hidden !important; }
.visually-hidden,.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* === Tables === */
.table{ width:100%; margin-bottom:1rem; vertical-align:top; border-color:rgba(255,255,255,.1); }
.table > :not(caption) > * > *{ padding:0.5rem 0.5rem; background-color:transparent; border-bottom-width:1px; }
.table > tbody{ vertical-align:inherit; }
.table > thead{ vertical-align:bottom; }

/* === Form controls (минимум) === */
.form-control{
    display:block; width:100%; padding:0.375rem 0.75rem;
    font-size:1rem; line-height:1.5; color:#212529;
    background-color:#fff; background-clip:padding-box;
    border:1px solid #ced4da; border-radius:0.375rem;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{ outline:0; border-color:#86b7fe; box-shadow:0 0 0 0.25rem rgba(13,110,253,.25); }
.form-label{ display:inline-block; margin-bottom:0.5rem; }
.form-check{ display:block; min-height:1.5rem; padding-left:1.5em; margin-bottom:0.125rem; }
.form-check-input{ width:1em; height:1em; margin-top:0.25em; margin-left:-1.5em; vertical-align:top; background-color:#fff; }

/* === Mt/Mb responsive shortcuts === */
@media (min-width:768px){
    .mt-md-0{ margin-top:0 !important; }
    .mt-md-1{ margin-top:0.25rem !important; }
    .mt-md-2{ margin-top:0.5rem !important; }
    .mt-md-3{ margin-top:1rem !important; }
    .mt-md-4{ margin-top:1.5rem !important; }
    .mb-md-0{ margin-bottom:0 !important; }
    .mb-md-1{ margin-bottom:0.25rem !important; }
    .mb-md-2{ margin-bottom:0.5rem !important; }
    .mb-md-3{ margin-bottom:1rem !important; }
    .mb-md-4{ margin-bottom:1.5rem !important; }
}
@media (min-width:992px){
    .mt-lg-0{ margin-top:0 !important; }
    .mt-lg-1{ margin-top:0.25rem !important; }
    .mt-lg-2{ margin-top:0.5rem !important; }
    .mt-lg-3{ margin-top:1rem !important; }
    .mt-lg-4{ margin-top:1.5rem !important; }
    .mb-lg-1{ margin-bottom:0.25rem !important; }
    .mb-lg-2{ margin-bottom:0.5rem !important; }
    .mb-lg-3{ margin-bottom:1rem !important; }
    .mb-lg-4{ margin-bottom:1.5rem !important; }
}