/* UI-INTERNAL.DESKOP.CSS*/

/* media (min-width: 1024px)*/
@media (min-width: 1024px) {

  /* =========================================
     DESKTOP-ONLY — ODBLOKOWANIE
  ========================================= */
  body.panel-body .desktop-only {
    display: block;
  }


	form label, .form-add label {
		font-size: 1.2rem;
	}
  body.panel-body .form-info {
    display: block;          /* 👈 KLUCZOWE */
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1.5;
  }

  body.panel-body .form-info h3 {
    color: #ffcc70;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  body.panel-body .form-info ul {
    padding-left: 18px;
    margin: 14px 0;
  }

  body.panel-body .form-info li {
    margin-bottom: 6px;
  }
  
  
  

  body.panel-body .form-intro {
    display: grid;
    grid-template-columns: 1fr 360px; /* POLA | INFO */
    gap: 48px;
    margin-bottom: 40px;
  }

	/* ========================================
	FORMAT PRAWEJ KOLUMNY (INFO)
	========================================= */

  body.panel-body .form-info {
    padding-top: 0;

    color: #9ca3af;        /* odrobinę ciszej */
    font-size: 1rem;
    line-height: 1.5;
	justify-self: center;
	align-self: center; /* oś poprzeczna */
	  display: flex;
  flex-direction: column;
  justify-content: center; /* ⬅️ pion (Y) */
  }

  body.panel-body .form-info h3 {
    color: #ffcc70;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  body.panel-body .form-info ul {
    padding-left: 18px;
    margin: 14px 0;
  }

  body.panel-body .form-info li {
    margin-bottom: 6px;
  }










	
  body.ui-internal main {
    padding-left: 48px;
    padding-right: 48px;	  
	max-width: 1240px;
    padding-top: calc(var(--menu-h) + 32px);
    padding-bottom: calc(var(--footer-h) + 32px);
	margin: 0 auto;
  }

   body.panel-body .edit-box {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    padding-bottom: calc(var(--footer-h, 64px) + 32px);
  } 
 
  body.panel-body .dashboard-wrapper {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;

    padding-left: 48px;
    padding-right: 48px;
    padding-top: calc(var(--menu-h, 64px) + 32px);
    padding-bottom: calc(var(--footer-h, 64px) + 32px);
  }
  
 /* PANEL — ADS (MOBILE FIRST, SEARCH AKTYWNY) */
	body.panel-body .ads-wrapper {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;

    padding-left: 48px;
    padding-right: 48px;
    padding-top: calc(var(--menu-h, 64px) + 32px);
    padding-bottom: calc(var(--footer-h, 64px) + 32px);
}


 
 
 /* =========================================
   ADMIN / ADS — KARTY POZIOME (DESKTOP)
   ========================================= */
body.admin-ads .ads-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}

/* lewa kolumna — zdjęcie */
body.admin-ads .listing-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

/* obraz */
body.admin-ads .listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* prawa kolumna — treść */
body.admin-ads .listing-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* opis + akcje pod treścią */
body.admin-ads .ads-description,
body.admin-ads .ads-card-actions {
  grid-column: 1 / -1;
}



/* =========================================
   ADMIN / ORDERS — KARTY POZIOME (DESKTOP)
   ========================================= */
body.admin-orders .ads-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}

/* lewa kolumna — zdjęcie */
body.admin-orders .listing-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

body.admin-orders .listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* treść */
body.admin-orders .listing-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* opis + akcje pod spodem */
body.admin-orders .ads-description,
body.admin-orders .ads-card-actions {
  grid-column: 1 / -1;
}


 
/* =========================================
   OPIS — SEKACJA Z KONTEKSTEM (DESKTOP)
========================================= */

  body.panel-body .form-desc-info {
    display: block;
  }


  body.panel-body .form-desc-section {
    display: grid;
    grid-template-columns: 320px 1fr; /* INFO | TEXTAREA */
    gap: 48px;
    align-items: center; /* ✅ KLUCZ */
  }

  body.panel-body .form-desc-info {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  body.panel-body .form-desc-info h3 {
	color: #ffcc70;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
    }

  body.panel-body .form-desc-info h4 {
    color: #ffcc70;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  body.panel-body .form-desc-info ul {
    padding-left: 18px;
    margin: 12px 0;
  }

  body.panel-body .form-desc-info li {
    margin-bottom: 6px;
  }  
  
  
  
  
  /* =========================================
   FORM — LOKALIZACJA (SEKCJA)
========================================= */

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

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

/* nagłówek sekcji */
body.panel-body .form-location-header {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffcc70;
  margin-bottom: 18px;
}



/* lekki reset marginesów wewnątrz */
body.panel-body .form-location-section label {
  margin-top: 16px;
}

/* komunikat */
body.panel-body .form-location-section .inline-msg {
  margin-top: 8px;
}

/* mapa */
body.panel-body .form-location-section #map {
  margin-top: 16px;
  border-radius: 12px;
}

/* desktop – jeszcze czytelniej */
  body.panel-body .form-location-section {
    padding: 32px 36px 36px;
  }
  





/* =========================================
   FORM — ZDJĘCIA (SEKCJA)
========================================= */

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

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

/* nagłówek */
body.panel-body .form-images-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffcc70;
  margin-bottom: 8px;
}

/* opis */
body.panel-body .form-images-desc {
  font-size: 0.95rem;
  color: #9ca3af;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* input file */
body.panel-body .form-images-section input[type="file"] {
  margin-top: 8px;
}

/* hint */
body.panel-body .form-images-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* preview grid – delikatne dopieszczenie */
body.panel-body .image-preview-box {
  margin-top: 16px;
  gap: 12px;
}





/* =========================================
   FORM — ZDJĘCIA (DESKTOP ONLY)
========================================= */
  
  
  .image-preview-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    min-height: 110px; /* 🔒 rezerwacja miejsca */
  }

/* kafelek zdjęcia */
.image-preview-box .image-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  border: 1px solid rgba(255,255,255,0.12);
}

/* zdjęcie w kafelku */
.image-preview-box .image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 🔑 KLUCZ */
  display: block;
}

/* lekki hover */
.image-preview-box .image-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}



  .image-preview-box .image-slot {
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 12px;

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

    color: rgba(255,255,255,0.4);
    font-size: 32px;
    user-select: none;
  }

  .form-images-section.drag-over {
    border-color: #ffcc70;
    background: rgba(255, 204, 112, 0.08);
  }

	body.panel-body .image-slot {
	  transition:
		border-color .2s ease,
		color .2s ease,
		background .2s ease,
		transform .15s ease;
	}

	body.panel-body .image-slot:hover {
	  border-color: #ffcc70;
	  color: #ffcc70;
	  background: rgba(255,204,112,0.08);
	  transform: translateY(-2px);
	  cursor: pointer;
	}


.images-counter {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #9ca3af;
}

  .breadcrumb {
    gap: 6px;
    font-size: 14px;
  }

  .breadcrumb-root:hover {
    text-decoration: underline;
  }
  
/* =========================================
   SUCCESS PAGE — DESKTOP (FULL WIDTH)
========================================= */

  .success-info {
    display: block;
  }

  /* main = tło, pełna szerokość */
  body.ui-internal .success-page {
    padding-top: calc(var(--menu-h, 64px) + 32px);
    padding-bottom: calc(var(--footer-h, 64px) + 32px);
  }

  /* grid = obszar roboczy */
  body.ui-internal .success-layout {
    display: grid;
    gap: 64px;
    margin: 0 auto;
  }

  /* karta NIE centruje się sama */
  body.ui-internal .success-box {
    margin: 0;
  }

  body.ui-internal .success-info {
    max-width: 520px;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
  }

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

.layout-doc {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

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



/* długa treść */
body.page-legal .legal-content {

  
}

/* prawa kolumna */
body.page-legal .legal-aside {
  display: block;
  position: sticky;
  top: calc(var(--menu-h) + 24px); /* opcjonalnie */
  max-width: 640px;
  margin: 0px auto;
  padding: 40px 32px;
  background: #f9fafb;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
  text-align: center;
}













/* ========================================
jakiś global
========================================= */


html,
body {
	overflow-x: hidden;
	/* overflow-y: auto; */ /* ← świadomie zostawione */
	}
	
}