/**
 * Czartery — tabele cennika i danych technicznych.
 *
 * Wyniesione ze style.css motywu. Reguly bez zmian.
 * Uzywane przez shortcody [acf_tabela] i wlasne tabele w tresci czarterow.
 */

/*cennik czarterów*/

/* Kontener tabeli */
.table-container {
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-radius: 12px;
  margin: 2rem 0;
}

/* Podstawowy styl tabeli */
.custom-responsive-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  min-width: 600px;
  font-family: 'Segoe UI', system-ui;
}

/* Nagłówek tabeli */
.custom-responsive-table thead {
  background: #2c3e50;
  color: white;
}

.custom-responsive-table th {
  padding: 1.2rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}

/* Komórki tabeli */
.custom-responsive-table td {
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
  color: #34495e;
}

/* Responsywność - wersja mobilna */
@media (max-width: 768px) {
  .custom-responsive-table {
    display: block;
    position: relative;
  }
  
  .custom-responsive-table td:before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #7f8c8d;
    font-size: 0.8em;
    margin-bottom: 0.5em;
  }

  .custom-responsive-table thead {
    display: none;
  }

  .custom-responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ecf0f1;
    border-radius: 8px;
  }

  .custom-responsive-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  .custom-responsive-table td:before {
    position: absolute;
    left: 1rem;
    width: calc(50% - 20px);
    text-align: left;
  }
}

/* Hover effect */
.row-hover tr:hover {
  background: #f8f9fa;
  transition: background 0.3s ease;
}

/* Style linków */
.custom-responsive-table a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.custom-responsive-table a:hover {
  text-decoration: underline;
  color: #2980b9;
}

/* Alternatywne kolory wierszy */
.custom-responsive-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Kaucja i sprzątanie - wyróżnienie */
[data-label="Kaucja"], 
[data-label="Sprzątanie"] {
  font-weight: 600;
  color: #e74c3c;
}

/* 1. Wrapper – dzięki niemu w razie potrzeby mamy poziomy scroll   */
.acf-table-container {
    width: 100%;
    overflow-x: auto;         /* scroll na bardzo wąskich ekranach */
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;    /* odrobina miejsca pod paskiem iOS  */
}

/* 2. Tabela bazowa (desktop)                                      */
.acf-custom-table {
    width: 100%;
    min-width: 460px;         /* ważne – poniżej tej szer. uruchomi się scroll */
    border-collapse: collapse;
    border-spacing: 0;
    font-size: clamp(.85rem, .45vw + .8rem, 1rem);
}
.acf-custom-table th,
.acf-custom-table td {
    padding: .6rem .9rem;
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;      /* okresy i ceny w jednej linii       */
}
.acf-custom-table thead {
    background: #f8f8f8;
}
.acf-custom-table tbody tr:nth-of-type(even) {
    background: #fafafa;      /* delikatne pasy zebry               */
}

/* 3. Wersja „karta” dla ekranów < 768 px                           */
@media (max-width: 767.98px) {

    /* chowamy nagłówek, ale zostawiamy go dostępny czytnikom */
    .acf-custom-table thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    /* tabele zamieniamy w bloki – każdy <tr> staje się kartą */
    .acf-custom-table,
    .acf-custom-table tbody,
    .acf-custom-table tr {
        display: block;
        width: 100%;
    }
    .acf-custom-table tr {
        margin-bottom: 1rem;          /* odstęp między kartami */
        border: 1px solid #ddd;
        border-radius: .35rem;
        overflow: hidden;             /* zaokrąglenia dla zebry */
    }

    /* każda komórka ceny staje się wierszem wewnątrz karty    */
    .acf-custom-table td,
    .acf-custom-table th {            /* <- „Cena” w pierwszej kolumnie */
        display: block;
        width: 100%;
        text-align: right;
        padding-left: 55%;            /* miejsce na etykietę ::before   */
        position: relative;
        white-space: normal;          /* może łamać się w kilku liniach */
    }

    /* etykiety „Okres” dodajemy przez data-label                */
    .acf-custom-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        width: 55%;
        padding: .6rem .9rem;
        font-weight: 600;
        text-align: left;
        background: #f3f3f3;
        border-right: 1px solid #ddd;
    }

    /* w komórce z nagłówkiem „Cena” (th) pokażemy po prostu tekst */
    .acf-custom-table th {
        background: #f3f3f3;
        font-weight: 600;
        text-align: left;
    }
}

  table.cennik-maxus28 {
    border-collapse: collapse;
    font-family: Lato, sans-serif;
    font-size: 13px;
    width: 100%;
  }
  table.cennik-maxus28 th,
  table.cennik-maxus28 td {
    border: 1px solid #aaa;
    padding: 6px 10px;
    text-align: center;
    vertical-align: middle;
  }
  table.cennik-maxus28 thead th {
    background-color: #fff;
    font-weight: bold;
  }
  table.cennik-maxus28 tr.highlight td,
  table.cennik-maxus28 tr.highlight th {
    background-color: #ecf1f8;
	color: var(--px-color-2);
  }
  table.cennik-maxus28 td.season-label {
    font-weight: bold;
    background-color: #ecf1f8;
	color: var(--px-color-2);
  }
  table.cennik-maxus28 td.note {
    font-size: 11px;
    white-space: nowrap;
  }

/* ── Galeria ACF w module Divi ──────────────────────────────────────── */

/* Wyniesione z inline <style> drukowanego w wp_head (my_acf_gallery_css).
   Chowa moduł galerii Divi, gdy pole ACF `galeria_cz` jest puste. */
.et_pb_gallery.acf-empty-gallery {
    display: none !important;
}