/* --- OKNO MODALNE --- */
.ral-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

/* --- KONTENER OKNA --- */
.ral-modal-content {
  background: #fff;
  width: 95%;
  max-width: 1400px;
  height: 90vh;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  transition: all 0.3s ease; /* Płynna animacja powiększania */
}

/* --- NOWOŚĆ: KLASA PEŁNEGO EKRANU --- */
/* To sprawia, że okno rozciąga się na maxa */
.ral-modal-content.fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
}

/* --- NAGŁÓWEK --- */
.ral-modal-header {
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.ral-modal-title { font-weight: 900; font-size: 1.4rem; color: #333; }

/* KONTENER PRZYCISKÓW (NOWE) */
.ral-header-controls {
  display: flex;
  align-items: center;
  gap: 15px; /* Odstęp między kwadratem a iksem */
}

/* PRZYCISK ZAMKNIĘCIA (X) */
.ral-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 0 5px;
}
.ral-modal-close:hover { color: #000; }

/* PRZYCISK POWIĘKSZANIA (KWADRACIK) - TEGO BRAKOWAŁO */
.ral-modal-maximize {
  background: transparent;
  width: 20px;
  height: 20px;
  border: 2px solid #666; /* Rysujemy kwadrat ramką */
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.ral-modal-maximize:hover {
  border-color: #000;
  background-color: #ddd;
}

/* --- WYSZUKIWARKA --- */
.ral-modal-search { padding: 15px 30px; background: #e0e0e0; border-bottom: 1px solid #ccc; }
.ral-search-input { width: 100%; padding: 12px; border: 2px solid #ccc; border-radius: 8px; font-size: 16px; outline: none; }
.ral-search-input:focus { border-color: #666; }

/* --- BODY (Ciemne tło) --- */
.ral-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  background-color: #555;
}

/* --- SIATKA --- */
.ral-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  padding-bottom: 50px;
}

/* --- KAFELEK --- */
.ral-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--ral-hex);
  border: 4px solid #fff;
  border-radius: 16px;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), z-index 0s;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.ral-tile::before, .ral-tile::after { display: none !important; }

/* HOVER - ZOOM */
.ral-tile:hover {
  transform: scale(1.6);
  z-index: 999;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
  border-color: #fff;
}

/* --- TEKSTY --- */
.ral-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ral-code {
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

.ral-name-html {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.95;
  display: block;
}

/* --- RWD --- */
@media (max-width: 1200px) { .ral-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .ral-grid { grid-template-columns: repeat(3, 1fr); } .ral-modal-content { height: 100%; width: 100%; border-radius: 0; } }
@media (max-width: 500px) { .ral-grid { grid-template-columns: repeat(2, 1fr); } }