/* ======================================================
   UI-INTERNAL-MOBILE.CSS
====================================================== */
:root {
  --menu-h: 64px;
  --footer-h: 64px;
  --search-h: 60px;      /* mobile/tablet search-host (ustalona wysokość) */
  --top-gap: 30px;       /* Twój dodatkowy oddech */
}


body.ui-internal main {
  padding-top: calc(var(--search-h) + var(--top-gap));
  padding-bottom: calc(var(--footer-h) + 16px);
}

/* ======================
   ROOT / BODY
====================== */
body.ui-internal:not(.page-legal)  {
	background: linear-gradient(135deg, #000628, #232631);
	color: #afafaf;
	min-height: 100vh;
}

body.page-legal {
  background-color: #212121;
  color: #afafaf;
  min-height: 100vh;
}


/* ======================
   TYPOGRAFIA BAZOWA
====================== */
body.ui-internal h1,
body.ui-internal h2,
body.ui-internal h3,
body.ui-internal h4 {
  color: #d3d8dd;
}

body.ui-internal h1 {
  font-size: 1.4rem;
  color: #f97316;
}

body.ui-internal ul, ol {
  margin: 16px 0;
  padding-left: 18px;   /* klasyczne wcięcie */
}

body.ui-internal li {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.5;
  color: #334155;
}



body.ui-internal p,
body.ui-internal li {
  color: #8e8e8e;
}

body.ui-internal small {
  color: #8e8e8e;
  font-size: 10px;
}

/* ======================
   LINKI
====================== */
body.ui-internal a {
  color: #ffcc70;
  text-decoration: none;
}

body.ui-internal a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ======================
   BUTTONY (BAZA)
  
  background: #ff9900;
  color: #000000;
  
====================== */
body.ui-internal button,
body.ui-internal .btn {
  background: #ff7917;        /* mniej agresywny amber */
  color: #1f2937;             /* grafit zamiast czerni */
  margin-top: 24px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0;
  font-size: 1rem;
}


/* ======================
   BUTTONY (BAZA)
  
.form-add .btn + .btn {
  margin-top: 0;
}
  
====================== */

body.ui-internal .btn.zapisz {
  background: #1e8e3e;        /* spokojna zieleń */
  color: #f0fdf4;             /* bardzo jasna, nie czysta biel */
}


body.ui-internal .btn.anuluj {
  background: #991b1b;        /* przygaszona czerwień */
  color: #fee2e2;
}



body.ui-internal button:hover,
body.ui-internal .btn:hover {
  filter: brightness(1.05);
}

body.ui-internal button:disabled,
body.ui-internal .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ======================
   INPUT / SELECT / TEXTAREA
====================== */
body.ui-internal input,
body.ui-internal select,
body.ui-internal textarea {
  background-color: #d4d1d1;
  color: #000;
  border: 1px solid #999;
  border-radius: 8px;
}

body.ui-internal input:focus,
body.ui-internal select:focus,
body.ui-internal textarea:focus {
  outline: none;
  border-color: #ff9900;
  box-shadow: 0 0 0 2px rgba(255,153,0,.35);
}



/* =========================================
   SUCCESS PAGE — MOBILE / TABLET (BASE)
========================================= */

/* layout strony */
body.ui-internal .success-page {
  min-height: calc(
    100vh
    - var(--menu-h, 64px)
    - var(--footer-h, 64px)
  );

}

/* jedna kolumna */
body.ui-internal .success-layout {
  width: 100%;
  margin: 0;
  display: block; /* 🔑 brak grida */
}

/* prawa kolumna — NIEWIDOCZNA */
.success-info {
  display: none;
}

/* lewa kolumna wyśrodkowana */
body.ui-internal .success-box {
  margin: 0 20px;
}



/* ======================
   KARTY / PANELE (FLOAT)
====================== */
body.ui-internal .auth-box,

body.ui-internal .panel-header,
body.ui-internal .legal main.legal {
  background: #253265f2;
  color: #afafaf;
  border-radius: 14px;
}













/* ======================
   KONTEINERY LAYOUTU
====================== */
body.ui-internal .container {
  background: transparent;
  color: inherit;
  margin: 0 0 64px 0;
}
body.ui-internal .dashboard-wrapper {
  background: transparent;
  color: inherit;
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px 40px;
}














.form-location-section {
	padding-top: 35px;
}










/* ==============================
   ACCOUNT CONTEXT (REVEAL)
============================== */
.account-context{
	padding: 10px 0 0 10px;
}
.account-row {
  display: flex;
  align-items: baseline; /* ← KLUCZ */
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}



.account-label {
  min-width: 70px;
  flex-shrink: 0;
  color: #9ca3af;
}

.account-value {
  display: inline-flex;
  align-items: flex-start;
  color: #ffffff;
  font-weight: 500;
}

body.ui-internal .account-email-toggle {
  background: transparent;
  color: #9ca3af;
  font-size: 0.95rem;
  font-weight: 500;

  padding: 0;
  margin: 0;

  border: none;
  cursor: pointer;
  line-height: 1.4;

  text-decoration: underline;
}



/*KLASY*/

.ads-wrapper {
  background: transparent;
  color: inherit;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px 40px;
}




/* =========================================
   BREADCRUMB — MOBILE FIRST (BASE)
========================================= */

/* =========================
   BREADCRUMBS
========================= */

.breadcrumbs {
  margin: 12px auto 20px;
  font-size: 0.95rem;
  color: #6b7280;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  color: #9ca3af;
}

/* separator */
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 6px;
  color: #6b7280;
}

.breadcrumbs a {
  color: #f97316;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: #dbdfe8;
  font-weight: 500;
}

.breadcrumbs-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 16px 0;
}

.breadcrumbs {
  font-size: .85rem;
  opacity: .9;
}







.dashboard-header {
  display: flex;
  align-items: center;
}




/*
.dashboard-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.dashboard-logo-img {
  max-height: 64px;
  width: auto;
}

*/

/* ======================
   FORM — MOBILE FIRST (BAZA)
====================== */

.form-add input,
.form-add select,
.form-add textarea {
  font-size: 16px;   /* 🔒 anti-zoom iOS */
  padding: 10px;     /* 🔒 touch-friendly */
}

/* ======================================================
   LISTING SWITCH (MASZYNY / ZLECENIA)
   — element contentu, NIE offsetuje menu
====================================================== */



/* =========================================
   FORM — ZDJĘCIA (MOBILE FIRST — KANON)
========================================= */

.image-preview-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* MOBILE: 3 kolumny */
  gap: 10px;

  margin-top: 16px;

  min-height: 96px; /* 🔒 rezerwacja miejsca */
}


/* kafelek zdjęcia + slot "+" — wspólna baza */
.image-preview-box > * {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

.image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* zgodne z desktop */
  display: block;
}

.image-preview-box .image-slot {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px dashed rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.4);

  font-size: 26px;
  user-select: none;
}







.listing-switch {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: center;
  gap: 12px;

  max-width: 1100px;
  padding: 12px 16px;
  
  margin-bottom:20px;
}

/* ======================================================
   BUTTON
====================================================== */

.listing-switch .mode-btn {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 10px 16px;

  border-radius: 999px;
  border: 1px solid #374151;

  background: #e5e7eb;
  color: #222;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* HOVER */
.listing-switch .mode-btn:hover {
  filter: brightness(1.05);
}

/* ======================================================
   ACTIVE — JEDYNY STAN POMARAŃCZOWY
====================================================== */

.listing-switch .mode-btn.active {
  background: #ff7917;
  color: #111827;
  border-color: #ff7917;
}

/* SVG */
#search-mode-switch .mode-icon svg {
  width: 20px;
  height: 20px;

  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* HARD FIX */
#search-mode-switch svg,
#search-mode-switch svg * {
  fill: none !important;
}

/* ======================
   STATUSY / ALERTY
====================== */
body.ui-internal .admin-alert.ok,
body.ui-internal .auth-msg.success {
  background: #1f3b29;
  color: #baf7c3;
}

body.ui-internal .admin-alert.danger,
body.ui-internal .auth-msg.error {
  background: #402020;
  color: #ffbfbf;
}

/* ======================
   DASHBOARD – KARTY
====================== */
body.ui-internal .dashboard-card {
  background: #253265f2
}

.dashboard-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.05rem;
  font-weight: 500;        /* ← KLUCZ */
  color: #d6d9f0;          /* miękki, chłodny */
  letter-spacing: 0.2px;
}

.dashboard-title {
	color: #ffcc70;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.dashboard-title h1 {
	color: #ffcc70;
    font-size: 1.8rem;
    margin: 10px 0;
	text-align:center;
}

.dashboard-sub {
    color: #777;
    margin-bottom: 25px;
}

.dashboard-userbox {
    background: #f5f7fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    display: grid;
    gap: 10px;
}

.dashboard-userbox b {
    color: #111;
}

/* ==============================
   PANEL — EDIT BOX (MOBILE FIRST)
   SEARCH AKTYWNY
============================== */

body.panel-body main {
    padding-top: calc(var(--search-h) + var(--top-gap));
}

body.panel-body .edit-box {
  width: 100%;
  box-sizing: border-box;

  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;

}


/* ==============================
   PANEL — DASHBOARD (MOBILE FIRST)
   SEARCH ACTIVE
============================== */

body.panel-body .dashboard-wrapper {
  width: 100%;
  box-sizing: border-box;

  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;

  padding-top: calc(var(--search-h, 56px) + 16px);
}


/* PANEL — ADS (MOBILE FIRST, SEARCH AKTYWNY) */
body.panel-body .ads-wrapper {
  width: 100%;
  box-sizing: border-box;

  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;

  padding-top: calc(var(--search-h, 56px) + 16px);
  padding-bottom: calc(var(--footer-h, 64px) + 32px);
}




body.ui-internal .panel-section-title{

	color: #afafaf;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
	padding: 50px 0;
	 
}

body.ui-internal .listing-body h3,
body.ui-internal .listing-body p:not(.detail-type):not(.detail-fulfillment) {
  color: #0f172a;
}

body.ui-internal .listing-body a {
  color: #dc2626;
}

/* ==============================
   AUTH — LOGO / ESCAPE H2
============================== */

.logo-link {
  display: block;          /* 🔑 zajmuje całą szerokość */
  text-align: center;      /* 🔑 centruje zawartość */
  margin-bottom: 12px;     /* odstęp od reszty */
}

.logo-link h2 {
  margin: 0;               /* reset marginesów h2 */
  cursor: pointer;
}
.logo-link:hover h2 {
  text-decoration: underline;
}

.remove-mark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

/* rysujemy X CSS-em (ZERO FONTÓW) */
.remove-mark::before,
.remove-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 12px;
  height: 2px;

  background: #ffffff;
  border-radius: 1px;
}

.remove-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.remove-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.remove-mark:hover {
  background: #b91c1c;
}

/* ===== klasy opisowe pól OPCJONALNIE ===== */

.opc {
  display: inline-block;

  color: #666;
  font-size: 14px;
  font-weight: normal;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 8px;
  
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label-row {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.label-row .opc {
  margin-left: auto;

  color: #666;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 6px;
}

.center {
  text-align: center;
}

.container {
   margin: 0px 0px;
   padding: 50px 18px 70px;
}





/* INPUT / SELECT / TEXTAREA */
.form-add input,
.form-add select,
.form-add textarea {
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #999;
  background: #eaeaea;
  color: #000;
  font-size: 20px;
  box-sizing: border-box;
}


/* =========================================
   LABEL
========================================= */
form label,
.form-add label {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 17px;
  font-weight: 550;
}


  
.location-consent {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  margin: 0;
  row-gap: 20px;
}

/* lewa kolumna */
.location-text {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

/* toggle – prawa góra */
.location-consent .toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;

    width: 56px;
    height: 32px;

    transform: none;
}

.location-consent .toggle .slider {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.location-consent .toggle .slider::before {
    width: 26px;
    height: 26px;
    top: 3px;
    left: 3px;
}


/* badge – prawa dół */
.location-consent .badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;

  margin-left: 0; /* nadpisuje Twoje 8px w tym kontekście */
}








.toggle {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle input {
  display: none;
}

.toggle .slider {
  position: absolute;
  inset: 0;
  background: #9ca3af;
  border-radius: 999px;
  cursor: pointer;
  transition: .25s;
}

.toggle .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .25s;
}

.toggle input:checked + .slider {
  background: #16a34a;
}

.toggle input:checked + .slider::before {
  transform: translateX(20px);
}

.toggle-text {
  line-height: 1.1;
}


/* =========================================
   szara mapa
========================================= */
  .disabled { pointer-events: none; opacity: .4; }
  
  
  
/* =========================================
   sygnalizator mapy aktywna ukryta zgoda brak
========================================= */
  .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
  }
  
  
  .badge.ok  { background: #16a34a; color: #fff; }
  .badge.off { background: #dc2626; color: #fff; }
  .inline-msg {
    font-size: 12px;
    color: #dc2626;
    margin: 5px 0;
    display: none;
  }



/* =========================================
   wrapper pojemnik na buttony zapisz / anuluj
========================================= */
.form-actions {
  display: flex;
  gap: 10px;
  margin: 20px 0 30px;
}

.form-actions .btn {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  width: 100%;
  margin: 0;
  
  font-size: 15px;
  font-weight: 600;
}

.form-actions .zapisz {
  flex: 2;
}

.form-actions .anuluj {
  flex: 1;
}

input-type-file{
	margin-top:50px;
}



/* =========================================
   PAGINACJA — MOBILE FIRST (ADMIN / PANEL)
========================================= */
.pagination {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  }

.pagination .page-btn {
  width: 48px;
  height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  text-decoration: none;

  background: #2563eb;
  color: #ffffff;

  font-size: 28px;
  font-weight: 600;
  line-height: 1;

  /* 🔧 KLUCZOWE */
  padding-bottom: 8px;   /* korekta optyczna pionu */
  padding-left: 1px;
   
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: background .15s ease, transform .1s ease;
}



.pagination .page-btn:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

.pagination span {
  font-size: 20px;
  font-weight: 600;
  color: #afafaf;
  white-space: nowrap;

  /* 🔧 korekty optyczne */
  margin: 0 10px;
  display: inline-block;          /* 🔥 kluczowe */
  transform: translateY(-1px);    /* ↑ o 1px */
}










/* ======================================================
   LINKI — BRAK PODKREŚLENIA (WSZYSTKIE STANY)
====================================================== */

body.ui-internal a,
body.ui-internal a:link,
body.ui-internal a:visited,
body.ui-internal a:hover,
body.ui-internal a:active,
body.ui-internal a:focus {
  text-decoration: none !important;
  outline: none;
}

/* ======================================================
   UI-INTERNAL — INLINE META (TYPE / FULFILLMENT)
====================================================== */

body.ui-internal .listing-body {
  row-gap: 6px;
}

body.ui-internal .listing-body > .detail-type,
body.ui-internal .listing-body > .detail-fulfillment {
  display: inline-flex;
  margin-right: 6px;
}

/* =====================================================
   UI-INTERNAL — META BADGES (TYPE / FULFILLMENT)
===================================================== */

body.ui-internal .detail-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;
  margin-bottom: 6px;

  background: #2563eb;
  color: #ffffff;

  border-radius: 6px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}

body.ui-internal .detail-fulfillment {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 8px;
  margin-bottom: 12px;

  background: #eff6ff;
  color: #2563eb;

  border-radius: 6px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
}

/* ======================================================
   DESCRIPTION TOGGLE — SUBTLE ACTION
====================================================== */

body.ui-internal .desc-toggle {
  all: unset;                 /* 🔥 KLUCZ — resetuje button */
  display: inline-block;

  margin-top: 6px;

  font-size: 15px;
  font-weight: 600;

  color: #2563eb;
  cursor: pointer;

  text-decoration: underline;
  text-underline-offset: 2px;
}

body.ui-internal .desc-toggle:hover {
  color: #1e40af;
}

body.ui-internal .desc-toggle:active {
  opacity: .7;
}

/* =====================================================
   FIX: KRÓTKI LISTING → BRAK SCROLLA → BRAK STOPKI
===================================================== */

.listing-min-height {
  min-height: calc(100vh - 72px);
}


/* =====================================================
   EMPTY STATE — SUCCESS-LIKE (LISTING)
===================================================== */

.empty-success {
  max-width: 640px;
  margin: 20px auto 40px;
  padding: 36px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  text-align: center;
}

.empty-success-icon {
  font-size: 46px;
  margin-bottom: 10px;
}

.empty-success-title {
  font-size: 24px;
  margin-bottom: 8px;
  color: #0f172a;
}

.empty-success-desc {
  font-size: 15px;
  color: #475569;
  margin-bottom: 26px;
  line-height: 1.5;
}

.empty-success-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}

/* 🟧 GŁÓWNE CTA */
.btn-orange {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  background: #f97316; /* pomarańcz */
  color: #fff;
  text-align: center;
  border: none;
}

.btn-orange:hover {
  background: #ea580c;
}

/* =====================================================
   EMPTY STATE — FINAL FIX (UI-INTERNAL SAFE)
===================================================== */

body.ui-internal .empty-success h1,
body.ui-internal .empty-success h2,
body.ui-internal .empty-success h3 {
  color: #0f172a; /* ciemny tekst na białym tle */
}

body.ui-internal .empty-success p {
  color: #475569;
}

/* =====================================================
   BUTTON — JEDEN WARIANT (POMARAŃCZOWY)
===================================================== */

.listing-grid .empty-success {
  grid-column: 1 / -1; /* zajmuje wszystkie kolumny grida */
}

body.ui-internal .empty-success a.btn-orange {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;

  background: #f97316;
  color: #222;

  text-align: center;
  border: none;
}

body.ui-internal .empty-success a.btn-orange:hover {
  background: #ea580c;
}




body.panel-body .form-info {
  display: none;
}



/* mobile / tablet — normalna kolumna */
body.panel-body .form-desc-section {
  width: 100%;
  margin-top: 40px;
}

/* =========================================
   FORM DESC INFO — MOBILE / TABLET
   UKRYTA
========================================= */
body.panel-body .form-desc-info {
  display: none;
}

.desktop-only { display: none; }







body.panel-body .form-images-section {
  margin: 50px 0;
  padding: 24px 20px 28px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.form-images-header {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 🔑 centrowanie w poziomie */
  gap: 6px;
  text-align: center;
}

.form-images-header .opc {
  margin: 0;
  order: 2;              /* opcjonalnie POD h2 */
}

.form-images-header h2 {
  order: 1;
  margin: 0;
}



/* ==================================================
   PANEL TITLE — LINK JAK PRZYCISK (CENTER, BEZ FLEXA)
   ================================================== */

.panel-title-link {
  display: block;              /* 👈 KLUCZ */
  width: fit-content;          /* dopasowanie do treści */

  margin: 16px auto 20px;      /* auto = środek */
  padding: 6px 14px;

  text-decoration: none;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  transition:
    background-color .15s ease,
    border-color .15s ease;
}

.panel-title-link h1 {
  margin: 0;

  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;

  color: #111827;
  text-align: center;          /* na wszelki wypadek */
}

/* hover */
.panel-title-link:hover {
  background: #f97316;
  border-color: #d1d5db;
}

.panel-title-link:hover h1,
.panel-title-link:active h1 {
  color: #111827;
  text-decoration: underline;
}

/* strzałka */
.panel-title-link h1::before {
  content: "←";
  margin-right: 6px;

  font-size: 1.2em;
  opacity: 0.65;

  transition: transform .15s ease, opacity .15s ease;
}

.panel-title-link:hover h1::before {
  transform: translateX(-4px);
  opacity: 1;
}



/* =========================
   LEGAL — LAYOUT
========================= */

body.page-legal .success-layout {
  display: grid;
  gap: 48px;
  align-items: start; /* 👈 KLUCZ */

}

/* długa treść */
body.page-legal .legal-content {
	padding: 0 20px;

}

.legal-aside{
	display: none;
}

.layout-2col {
  grid-template-columns: 1fr;
  align-items: center;
}

.layout-doc {
  grid-template-columns: 1fr;
  align-items: start;
}