/* =====================================================================
   modern.css - wygląd publicznej części RMA zgodny z nową miuiservice.pl
   Tokeny i komponenty skopiowane z miuiservice.pl/css/modern.css.
   Ładowany po frontend.css przez includes/theme_head.php, tylko na
   stronach z $modernTheme = true (na razie: wycena/).
   Motyw: <html data-theme="light|dark"> ustawia skrypt w theme_head.php.
   ===================================================================== */

:root {
    --m-bg: #f6f8fb;
    --m-surface: #ffffff;
    --m-sunk: #eef2f7;
    --m-ink: #0f172a;
    --m-text: #334155;
    --m-muted: #64748b;
    --m-line: #e2e8f0;
    --m-accent: #ff6b35;
    --m-accent-ink: #e2551f;
    --m-soft: #fff6f1;
    --m-tint: #ffeee4;
    --m-tint-line: #fbcfb8;
    --m-ok: #1f9d62;
    --m-ok-soft: #e6f6ee;
    --m-warn: #b7791f;
    --m-warn-soft: #fdf5e3;
    --m-bad: #dc3545;
    --m-bad-soft: #fdecee;
    --m-info: #2563eb;
    --m-info-soft: #eaf1fe;
    --m-hl: linear-gradient(145deg, #ff6b35 0%, #ff8c42 100%);
    --m-foot: #0f172a;
    --m-r: 18px;
    --m-r-lg: 28px;
    --m-body: #1e293b;  /* kolor tekstu body na miuiservice.pl */
}

html[data-theme="dark"] {
    color-scheme: dark;
    --m-bg: #0f1218;
    --m-surface: #161a22;
    --m-sunk: #12161d;
    --m-ink: #f1f5f9;
    --m-text: #cbd5e1;
    --m-muted: #94a3b8;
    --m-line: #252b36;
    --m-accent: #ff7a45;
    --m-accent-ink: #ff8a5c;
    --m-soft: #2a1a12;
    --m-tint: #1c1511;
    --m-tint-line: #3d2b20;
    --m-ok: #3ccf8a;
    --m-ok-soft: #12291f;
    --m-warn: #f2c14e;
    --m-warn-soft: #2a2312;
    --m-bad: #ff6b7a;
    --m-bad-soft: #2c1418;
    --m-info: #7aa7ff;
    --m-info-soft: #131d33;
    --m-foot: #0b0d12;
    --m-body: #cbd5e1;
    /* zmienne z frontend.css */
    --dark: #f1f5f9;
    --white: #161a22;
    --bg-light: #12161d;
    --border: #252b36;
    --border-color: #252b36;
}

/* ---------------------------------------------------------------------
   Podstawy
   --------------------------------------------------------------------- */
/* Bazowa czcionka jak na miuiservice.pl: 17px, kolor #1e293b (frontend.css RMA daje 15px) */
body { background: var(--m-bg); color: var(--m-body); font-size: 17px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { color: var(--m-ink); }
.text-muted { color: var(--m-muted) !important; }

/* Górny pasek i navbar jak na miuiservice.pl */
.top-bar { font-size: .875rem; border-bottom: 0; }  /* frontend.css dawał jasną linię #e9ecef */
.top-bar-link { color: var(--m-body); text-decoration: none; font-weight: 500; transition: color .2s ease; }
.top-bar-link:hover { color: var(--m-accent); }
.navbar-brand { font-size: 1.5rem; }
/* .row.g-5 ma marginesy -1.5rem, a .container tylko 0.75rem paddingu - na telefonie strona
   wystawala o 12px na boki (przewijanie w poziomie, przypiete menu "uciekalo").
   Ponizej lg poziomy odstep jak w g-4, pionowy zostaje 3rem. */
@media (max-width: 991.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }
/* .text-primary (logo "MIUI", ikonki w gornym pasku i stopce) w wiodacym pomaranczu strony;
   frontend.css daje #ff6b35 na sztywno, tu dochodzi #ff7a45 w trybie ciemnym. 4panel nie laduje modern.css */
.text-primary { color: var(--m-accent) !important; }
.navbar-light .navbar-nav .nav-link { color: var(--m-body); font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--m-accent); background-color: transparent; }
.nav-ext,
.navbar-light .navbar-nav .nav-link i.nav-ext { font-size: .75em; margin-right: 0; }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--m-muted); opacity: .7; cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}
.theme-toggle:hover { opacity: 1; color: var(--m-ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; opacity: 1; }

/* Menu mobilne - większy tekst */
@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav { padding: 8px 0 14px; }
    .navbar-collapse .navbar-nav .nav-link { font-size: 19px; font-weight: 600; padding: 13px 4px; }
    .navbar-collapse .navbar-nav .nav-item + .nav-item .nav-link { border-top: 1px solid var(--m-line); }
}

.site-notice .container { line-height: 1.4; }

/* ---------------------------------------------------------------------
   Nagłówek podstrony
   --------------------------------------------------------------------- */
.m-phead { position: relative; overflow: hidden; background: var(--m-sunk); border-bottom: 1px solid var(--m-line); padding: 56px 0 52px; }
.m-phead::after { content: ""; position: absolute; right: -120px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: var(--m-hl); opacity: .28; pointer-events: none; }
.m-phead .container { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start; }
.m-phead h1 { margin: 0; max-width: 920px; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); text-wrap: balance; }
.m-phead .m-lead { margin: 0; max-width: 660px; font-size: 16.5px; line-height: 1.6; color: var(--m-text); }
.m-phead .breadcrumb { margin: 0; padding: 0; background: none; font-size: 13px; opacity: .85; }
.m-phead .breadcrumb-item, .m-phead .breadcrumb-item.active { color: var(--m-muted); }
.m-phead .breadcrumb-item a { color: var(--m-muted); text-decoration: none; }
.m-phead .breadcrumb-item a:hover { color: var(--m-accent-ink); }
.m-phead .breadcrumb-item + .breadcrumb-item::before { color: var(--m-muted); opacity: .5; content: "/"; }
.m-phead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (max-width: 767.98px) { .m-phead { padding: 40px 0 36px; } .m-phead .m-lead { font-size: 15px; } }

.m-section { padding: 56px 0 88px; }
@media (max-width: 767.98px) { .m-section { padding: 32px 0 56px; } }

/* ---------------------------------------------------------------------
   Typografia sekcji, przyciski, odznaki
   --------------------------------------------------------------------- */
.hp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--m-accent-ink);
}
.hp-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.m-h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); text-wrap: balance; }

.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; font-weight: 700; line-height: 1;
    padding: 16px 22px; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.hp-btn:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.hp-btn-primary { background: var(--m-accent); color: #fff; }
.hp-btn-primary:hover { background: var(--m-accent-ink); color: #fff; }
.hp-btn-primary:disabled:hover { background: var(--m-accent); }
.hp-btn-ghost { border: 1.5px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); }
.hp-btn-ghost:hover { border-color: var(--m-accent); color: var(--m-ink); }
.hp-btn-white { background: #fff; color: #0f172a; }
.hp-btn-white:hover { color: #0f172a; }
.hp-btn-block { width: 100%; }
.hp-arr { display: inline-block; transition: transform .15s ease; }
a:hover .hp-arr, button:hover .hp-arr { transform: translateX(4px); }

/* Odznaka statusu: pigułka z kropką */
.m-status {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--m-ink);
    padding: 8px 14px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-line);
}
.m-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-dot, var(--m-accent)); }
.m-status-ok { --m-dot: var(--m-ok); background: var(--m-ok-soft); border-color: transparent; }
.m-status-warn { --m-dot: var(--m-warn); background: var(--m-warn-soft); border-color: transparent; }
.m-status-bad { --m-dot: var(--m-bad); background: var(--m-bad-soft); border-color: transparent; }
.m-status-info { --m-dot: var(--m-info); background: var(--m-info-soft); border-color: transparent; }
.m-status-accent { --m-dot: var(--m-accent); background: var(--m-soft); border-color: var(--m-tint-line); }
.m-status-muted { --m-dot: var(--m-muted); }

/* Komunikaty */
.m-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; color: var(--m-ink); background: var(--m-sunk); }
.m-alert > i { margin-top: 3px; flex: none; }
.m-alert-ok { background: var(--m-ok-soft); } .m-alert-ok > i { color: var(--m-ok); }
.m-alert-bad { background: var(--m-bad-soft); } .m-alert-bad > i { color: var(--m-bad); }

/* ---------------------------------------------------------------------
   Kafelki informacyjne (jak kontakt na miuiservice.pl)
   --------------------------------------------------------------------- */
.ct-list { display: grid; gap: 12px; }
.ct-item { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); color: var(--m-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.ct-item:hover { border-color: var(--m-accent); color: var(--m-text); transform: translateY(-2px); }
.ct-ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--m-soft); color: var(--m-accent-ink); display: grid; place-items: center; font-size: 17px; }
.ct-item small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 2px; }
.ct-item b { display: block; font-size: 17px; color: var(--m-ink); word-break: break-word; }
.ct-item-hl { background: var(--m-hl); border-color: transparent; }
.ct-item-hl .ct-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.ct-item-hl small { color: rgba(255, 255, 255, .85); }
.ct-item-hl b { color: #fff; font-size: 22px; }
a.ct-item-hl:hover { border-color: transparent; }
@media (max-width: 575.98px) { .ct-item { padding: 16px; } }

/* ---------------------------------------------------------------------
   Karty i formularze
   --------------------------------------------------------------------- */
.m-card { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: 32px; min-width: 0; color: var(--m-text); }
.m-card-sm { border-radius: var(--m-r); padding: 22px; }
.m-card > h2:not(.m-card-title) { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); }
.m-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--m-ink); }
.m-card-title i { color: var(--m-accent-ink); font-size: 15px; }
.m-card-hl { background: var(--m-hl); border-color: transparent; color: #fff; }
.m-card-hl .m-card-title, .m-card-hl .m-card-title i { color: #fff; }
.m-card-hl p { color: rgba(255, 255, 255, .92); }
.m-note { margin: 6px 0 22px; font-size: 14px; color: var(--m-muted); }
.m-stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (max-width: 575.98px) { .m-card { padding: 22px 18px; border-radius: 22px; } }

/* Pola jak w formularzu kontaktowym miuiservice.pl (kontakt.php, .ct-form):
   Bootstrap .form-floating, radius 12px, ramka --m-line, focus w kolorze akcentu.
   Najpierw cofamy nadpisania z frontend.css (ramka 1.5px, font 15px, line-height). */
.m-form .form-control {
    border: var(--bs-border-width) solid var(--m-line); border-radius: 12px;
    font-size: 1rem; background-color: var(--m-surface); color: var(--m-ink);
}
.m-form .form-floating > .form-control { line-height: 1.5; }
.m-form .form-floating > label { color: var(--m-body); }
.m-form .form-control:focus { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(255, 107, 53, .15); background-color: var(--m-surface); color: var(--m-ink); }
.m-form .form-floating > .form-control::placeholder { color: transparent; }
.m-form .form-text { font-size: 12.5px; color: var(--m-muted); }
.m-form .m-textarea { min-height: 160px; resize: vertical; }
.m-form .form-floating > .m-textarea { height: 160px; }
.m-reply .form-floating > .m-textarea { min-height: 110px; height: 110px; }
.m-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Lista dane: wartość */
.m-dl { display: grid; gap: 12px; margin: 0; }
.m-dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--m-line); font-size: 14.5px; }
.m-dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.m-dl dt { font-weight: 400; color: var(--m-muted); }
.m-dl dd { margin: 0; font-weight: 600; color: var(--m-ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Wątek wiadomości (wycena/?token=...)
   --------------------------------------------------------------------- */
.m-thread { display: grid; gap: 14px; }
.m-msg { max-width: 88%; padding: 14px 18px; border: 1px solid var(--m-line); border-radius: 20px; background: var(--m-surface); font-size: 14.5px; }
.m-msg-who { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; font-size: 13px; }
.m-msg-who b { display: inline-flex; align-items: center; gap: 7px; color: var(--m-ink); }
.m-msg-who span { color: var(--m-muted); }
.m-msg p { margin: 0; color: var(--m-text); overflow-wrap: anywhere; }
.m-msg-me { justify-self: end; border-bottom-right-radius: 6px; }
.m-msg-srv { justify-self: start; background: var(--m-soft); border-color: var(--m-tint-line); border-bottom-left-radius: 6px; }
.m-msg-srv .m-msg-who i { color: var(--m-accent-ink); }
.m-reply { display: grid; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--m-line); }
.m-reply-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
@media (max-width: 575.98px) { .m-msg { max-width: 100%; } }

/* ---------------------------------------------------------------------
   Stopka i pasek szybkiego kontaktu (telefon)
   --------------------------------------------------------------------- */
.footer { background: var(--m-foot); color: #fff; padding: 4rem 0 2rem; }
.footer h5 { color: #fff; font-size: 20px; font-weight: 500; line-height: 1.2; }
.footer a { color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .3s ease; }
.footer a:hover { color: #fff; }

.m-dock { display: none; }
@media (max-width: 767.98px) {
    .m-dock {
        position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
        display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; padding: 6px;
        background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px;
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .35);
        transform: translateY(140%); opacity: 0; pointer-events: none;
        transition: transform .3s ease, opacity .3s ease;
    }
    .m-dock.show { transform: none; opacity: 1; pointer-events: auto; }
    .m-dock a {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 13px 10px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1;
        text-decoration: none; white-space: nowrap;
    }
    .m-dock-call { color: var(--m-ink); }
    .m-dock-call i { color: var(--m-accent); }
    .m-dock-call:hover { color: var(--m-ink); }
    .m-dock-go, .m-dock-go:hover { background: var(--m-hl); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn, .hp-arr, .ct-item, .m-dock { transition: none; }
    .hp-btn:hover, a.ct-item:hover { transform: none; }
}

/* =====================================================================
   MOTYW CIEMNY - nadpisania Bootstrapa i frontend.css
   ===================================================================== */
html[data-theme="dark"] .footer h1, html[data-theme="dark"] .footer h2, html[data-theme="dark"] .footer h3,
html[data-theme="dark"] .footer h4, html[data-theme="dark"] .footer h5, html[data-theme="dark"] .footer h6 { color: #fff; }
html[data-theme="dark"] .bg-white { background-color: var(--m-surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--m-sunk) !important; }
html[data-theme="dark"] .text-dark { color: var(--m-ink) !important; }
html[data-theme="dark"] .top-bar { background-color: var(--m-sunk) !important; }
html[data-theme="dark"] .top-bar-link,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--m-text); }
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--m-accent); }
html[data-theme="dark"] .navbar { border-bottom: 1px solid var(--m-line); }
html[data-theme="dark"] .navbar-light .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
html[data-theme="dark"] .btn-close { filter: invert(1); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content { background: var(--m-surface); border-color: var(--m-line); color: var(--m-text); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background-color: var(--m-sunk); border-color: var(--m-line); color: var(--m-ink); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: var(--m-surface); color: var(--m-ink); border-color: var(--m-accent); }
html[data-theme="dark"] .form-control::placeholder { color: var(--m-muted); }
html[data-theme="dark"] .form-floating > .form-control::placeholder { color: transparent; }
html[data-theme="dark"] .form-floating > label { color: var(--m-muted); }
html[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; }

/* =====================================================================
   ŚLEDZENIE NAPRAWY (track/)
   ===================================================================== */
.hp-btn-ok { background: var(--m-ok); color: #fff; }
.hp-btn-ok:hover { color: #fff; filter: brightness(.95); }
.hp-btn-bad { border: 1.5px solid var(--m-line); background: var(--m-surface); color: var(--m-bad); }
.hp-btn-bad:hover { border-color: var(--m-bad); color: var(--m-bad); }

.m-alert-warn { background: var(--m-warn-soft); } .m-alert-warn > i { color: var(--m-warn); }
.m-alert-info { background: var(--m-info-soft); } .m-alert-info > i { color: var(--m-info); }

/* Pasek postępu: 5 etapów */
.m-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.m-steps li { display: grid; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--m-muted); min-width: 0; }
.m-steps-bar { height: 6px; border-radius: 999px; background: var(--m-line); }
.m-steps li.done { color: var(--m-ink); }
.m-steps li.done .m-steps-bar { background: var(--m-accent); }
.m-steps li.now { color: var(--m-accent-ink); }
.m-steps li.now .m-steps-bar { background: var(--m-hl); box-shadow: 0 0 0 3px var(--m-tint); }
.m-steps-note { margin: 16px 0 0; font-size: 14.5px; color: var(--m-ink); }
.m-steps-note i { color: var(--m-accent); margin-right: 6px; }
@media (max-width: 575.98px) {
    .m-steps { gap: 4px; }
    .m-steps-label { font-size: 11.5px; overflow-wrap: anywhere; }
    .m-steps li:not(.now) .m-steps-label { visibility: hidden; }
    .m-steps li.now { overflow: visible; white-space: nowrap; }
}

/* Wycena z przyciskami akceptacji */
.m-quote { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; background: var(--m-soft); border: 1px solid var(--m-tint-line); border-radius: var(--m-r); }
.m-quote-amount { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.m-quote-sub { margin-top: 6px; font-size: 14px; color: var(--m-muted); }
.m-quote-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) { .m-quote-btns, .m-quote-btns .hp-btn { width: 100%; } }

/* Oś czasu historii */
.m-tl { margin: 0; padding: 0; list-style: none; }
.m-tl li { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding-bottom: 18px; }
.m-tl li::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--m-line); }
.m-tl li:last-child { padding-bottom: 0; }
.m-tl li:last-child::before { display: none; }
.m-tl-dot { width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--m-line); border: 3px solid var(--m-surface); box-shadow: 0 0 0 1px var(--m-line); }
.m-tl li:first-child .m-tl-dot { background: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent); }
.m-tl b { display: block; color: var(--m-ink); font-size: 15.5px; }
.m-tl-date { font-size: 13px; color: var(--m-muted); font-variant-numeric: tabular-nums; }
.m-tl p { margin: 6px 0 0; font-size: 14.5px; color: var(--m-text); }

/* Drobne */
.m-linkbtn { padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--m-accent-ink); cursor: pointer; }
.m-linkbtn:hover { color: var(--m-accent); }
.m-linkbtn i { font-size: 12px; margin-right: 4px; }
.m-subnote { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--m-line); }
.m-subnote small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); }
.m-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; }
.m-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--m-muted); }
.m-fine i { margin-right: 4px; }

/* =====================================================================
   START, LOGOWANIE, REJESTRACJA, HASŁO, STRONY CMS
   ===================================================================== */
/* Komunikaty Bootstrapa (showFlashMessage itp.) w kolorach motywu */
.alert { border: 0; border-radius: 14px; font-size: 15px; color: var(--m-ink); }
.alert-success { background: var(--m-ok-soft); }
.alert-danger { background: var(--m-bad-soft); }
.alert-warning { background: var(--m-warn-soft); }
.alert-info { background: var(--m-info-soft); }
.alert a { color: var(--m-accent-ink); }

/* Hero strony startowej (rozszerzenie .m-phead) */
.m-phead-hero { padding: 64px 0 72px; }
.m-phead-hero .container { justify-items: stretch; }
.m-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.m-hero-grid > div { min-width: 0; display: grid; gap: 14px; justify-items: start; }
.m-phead-hero h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.02; }
.m-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
@media (max-width: 991.98px) { .m-hero-grid { grid-template-columns: 1fr; gap: 32px; } .m-phead-hero { padding: 44px 0 48px; } }

/* Kroki "Jak to działa" */
.m-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.m-step { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: 24px; display: grid; gap: 8px; align-content: start; }
.m-step-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--m-soft); color: var(--m-accent-ink); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.m-step h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--m-ink); }
.m-step p { margin: 0; font-size: 15px; color: var(--m-text); }
@media (max-width: 991.98px) { .m-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .m-steps-grid { grid-template-columns: 1fr; } }

/* Formularze kont */
.m-form-sec { margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--m-line); font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--m-ink); }
.m-form-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.m-form-sec span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--m-muted); }
.m-form .form-check-input { width: 1.15em; height: 1.15em; border-color: var(--m-line); background-color: var(--m-surface); }
.m-form .form-check-input:checked { background-color: var(--m-accent); border-color: var(--m-accent); }
.m-form .form-check-input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(255, 107, 53, .15); }
.m-form .form-check-label { font-size: 15px; color: var(--m-text); }
.m-form .form-check-label a, .m-links a, .m-form-row-link a { color: var(--m-accent-ink); font-weight: 600; text-decoration: none; }
.m-form .form-check-label a:hover, .m-links a:hover, .m-form-row-link a:hover { color: var(--m-accent); }
.m-form-row-link { display: flex; justify-content: flex-end; margin-top: 8px; font-size: 14px; }
.m-links { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--m-line); text-align: center; font-size: 14.5px; color: var(--m-muted); }
.m-links .m-muted-link { color: var(--m-muted); font-weight: 500; }
.m-req { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--m-muted); }

/* Hasło: przycisk pokaż/ukryj w polu i pasek siły */
.m-pw { position: relative; }
.m-pw > .form-control { padding-right: 52px; }
.m-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--m-muted); cursor: pointer; }
.m-pw-toggle:hover { color: var(--m-ink); background: var(--m-sunk); }
.m-pw-strength { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--m-line); overflow: hidden; }
.m-pw-strength-bar { height: 100%; width: 0; transition: width .3s ease, background-color .3s ease; }
.m-pw-strength-bar.weak { background: var(--m-bad); }
.m-pw-strength-bar.medium { background: var(--m-warn); }
.m-pw-strength-bar.strong { background: var(--m-ok); }
.m-ok-text { color: var(--m-ok); } .m-bad-text { color: var(--m-bad); }

/* Treść stron CMS (regulamin, polityka) */
.m-prose { max-width: 820px; font-size: 17px; line-height: 1.75; color: var(--m-body); }
.m-prose h2 { margin: 2.2rem 0 .8rem; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); }
.m-prose h3 { margin: 1.8rem 0 .6rem; font-size: 20px; font-weight: 800; color: var(--m-ink); }
.m-prose p, .m-prose ul, .m-prose ol { margin-bottom: 1rem; }
.m-prose ul, .m-prose ol { padding-left: 1.4rem; }
.m-prose li { margin-bottom: .4rem; }
.m-prose strong { color: var(--m-ink); font-weight: 700; }
.m-prose a { color: var(--m-accent-ink); }
.m-prose > h1:first-child { display: none; } /* tytuł jest już w nagłówku podstrony */
.m-inline-link { color: var(--m-accent-ink); font-weight: 600; text-decoration: none; }
.m-inline-link:hover { color: var(--m-accent); }

/* =====================================================================
   PANEL KLIENTA (customer/dashboard.php i inne po zalogowaniu)
   ===================================================================== */
/* Zakładki panelu (includes/customer_tabs.php) */
.m-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin-top: 14px; padding: 6px; max-width: 100%; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px; scrollbar-width: none; }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--m-text); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.m-tab i { font-size: 13px; color: var(--m-accent); }
.m-tab:hover { background: var(--m-soft); color: var(--m-ink); }
.m-tab.active { background: var(--m-ink); color: var(--m-bg); }
.m-tab-out { margin-left: auto; color: var(--m-muted); }
.m-tab-out i { color: var(--m-muted); }

.m-h3 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); }
.m-h3 span { color: var(--m-muted); font-weight: 600; }
.m-alert-action { margin-left: auto; align-self: center; }
.m-alert .hp-btn { padding: 11px 16px; font-size: 14px; }
@media (max-width: 575.98px) { .m-alert-action { margin-left: 0; } .m-alert { flex-wrap: wrap; } }

/* Lista napraw */
.m-repairs { display: grid; gap: 12px; }
.m-repair { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); color: var(--m-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.m-repair:hover { border-color: var(--m-accent); color: var(--m-text); transform: translateY(-2px); }
.m-repair-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.m-repair-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.m-repair-top b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--m-ink); }
.m-repair-top .m-status { padding: 5px 11px; font-size: 12.5px; }
.m-repair-dev { font-size: 15px; color: var(--m-text); overflow-wrap: anywhere; }
.m-repair-meta { font-size: 13px; color: var(--m-muted); }
.m-repair-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-price-chip { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--m-hl); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.m-repair-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--m-accent-ink); white-space: nowrap; }
a.m-repair:hover .hp-arr { transform: translateX(4px); }
.m-repair-done { padding: 14px 20px; border-radius: var(--m-r); background: var(--m-sunk); }
.m-repair-done .m-repair-top b { font-size: 16px; }
@media (max-width: 575.98px) { .m-repair { padding: 18px; } .m-repair-side { width: 100%; justify-content: space-between; } }

/* Zwijana lista ukończonych */
.m-fold summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.m-fold summary::-webkit-details-marker { display: none; }
.m-fold summary .m-h3 { margin: 0; }
.m-fold summary .m-fold-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--m-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--m-ink); }
.m-fold summary:hover .m-fold-btn { border-color: var(--m-accent); }
.m-fold summary .m-fold-btn i { transition: transform .2s ease; }
.m-fold[open] summary .m-fold-btn i { transform: rotate(180deg); }
.m-fold[open] .m-fold-show, .m-fold:not([open]) .m-fold-hide { display: none; }
.m-fold .m-repairs { margin-top: 14px; }

/* Pierwsze kroki: 5 etapów */
.m-steps-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .m-steps-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .m-steps-grid-5 { grid-template-columns: 1fr; } }
.m-cta-box { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; padding: 32px; border-radius: var(--m-r-lg); background: var(--m-hl); color: #fff; }
.m-cta-box h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.m-cta-box p { margin: 6px 0 0; color: rgba(255, 255, 255, .92); }

/* Wybór opcji (radio jako karta) - nowa naprawa */
.m-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.m-choice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--m-surface); border: 1.5px solid var(--m-line); border-radius: var(--m-r); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.m-choice:hover { border-color: var(--m-tint-line); }
.m-choice:has(input:checked) { border-color: var(--m-accent); background: var(--m-soft); }
.m-choice input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--m-accent); }
.m-choice b { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--m-ink); }
.m-choice b i { color: var(--m-accent-ink); font-size: 14px; }
.m-choice small { display: block; margin-top: 3px; font-size: 14px; color: var(--m-muted); }
@media (max-width: 575.98px) { .m-choices { grid-template-columns: 1fr; } }
.m-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--m-line); }
@media (max-width: 575.98px) { .m-actions .hp-btn { width: 100%; } }
.m-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.m-form .form-floating > .m-textarea-sm { height: 110px; min-height: 110px; }