/* Odklop legacy snapshot → responsive override layer
   Goal: keep desktop look, make it usable on mobile without rewriting backend/templates.
*/

:root { --gap: 12px; }

*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

body.odklop-legacy {
  min-width: 0 !important; /* overrides lastminute2.css min-width */
  margin: 0;
}

/* Media elements */
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Make long breadcrumbs/nav wrap instead of forcing horizontal scroll */
#navigation, #linkset { display: block; }
#linkset { white-space: normal; line-height: 1.4; }

/* Reduce tiny tap targets in legacy nav (keeps styling from base CSS) */
a { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* --- Responsive layout fixes --- */
@media (max-width: 980px) {
  /* Most legacy tables are hard-coded widths; allow them to shrink */
  table[width],
  td[width],
  th[width] { width: auto !important; }

  /* Common Chrome-saved legacy layout uses lots of spacer gifs; keep them from breaking flow */
  img[width="1"], img[height="1"] { display:none !important; }

  /* Prevent columns from exploding due to long words/prices */
  td, th { word-break: break-word; }
}

@media (max-width: 760px) {
  /* Turn main page tables into a vertical flow */
  body.odklop-legacy table { width: 100% !important; }

  /* Many legacy pages are a 2-col table: sidebar (~180px) + content.
     On mobile we stack them.
     Heuristic: any TD with width <= 220 behaves like sidebar.
  */
  body.odklop-legacy td[width="180"],
  body.odklop-legacy td[width="190"],
  body.odklop-legacy td[width="200"],
  body.odklop-legacy td[width="210"],
  body.odklop-legacy td[width="220"] {
    display: block !important;
    width: 100% !important;
  }

  /* Stack other cells too (safe default for table layouts) */
  body.odklop-legacy tr,
  body.odklop-legacy td,
  body.odklop-legacy th { display: block; }

  /* Keep header tables readable */
  body.odklop-legacy table[height="23"] td,
  body.odklop-legacy table[height="22"] td {
    display: block;
    width: 100% !important;
  }

  /* Add breathing room */
  body.odklop-legacy td { padding-left: 8px; padding-right: 8px; }

  /* Make form controls usable on touch devices */
  input, select, button, textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  /* Hotel list: approximate “card” feel without changing markup.
     We target repeated result blocks that often include .content wrapper.
  */
  .content {
    padding: var(--gap) !important;
  }

  /* Price buttons / “Preveri” */
  input[type="submit"], input[type="button"], button {
    width: 100%;
    padding: 10px 12px;
  }
}