/* [hub_okazje] — price deal pages. Colours come from the theme (currentColor,
   the plugin's accent variable); the hero is laid out like the ship pages'. */
/* No own width: the page is as wide as the theme's content, like the rest of the site (user, 25.10). */
/* The theme's colours (map note 25.10: the pages came out black and white): the same chain
   as .hub-cs-search in search.css - Blocksy's button tokens, then theme.json's primary.
   A colour picked in Cruise Hub → Wygląd is printed inline after this file and wins. */
.hub-cs-deals {
    --hub-cs-accent: var(--theme-button-background-initial-color, var(--wp--preset--color--primary, #0a6b58));
    --hub-cs-accent-text: var(--theme-button-text-initial-color, #fff);
}
.hub-cs-dl-box strong, .hub-cs-dl-ytab b, .hub-cs-dl-yhead, .hub-cs-dl-plabel, .hub-cs-dl-ship-body b, .hub-cs-dl-months b { color: var(--theme-headings-color, var(--wp--preset--color--contrast, inherit)); }
.hub-cs-deals h2 { margin: 1.75em 0 .3em; }
.hub-cs-dl-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-dl-crumbs a { color: inherit; }
.hub-cs-dl-sub { opacity: .8; margin: 0 0 1em; }
.hub-cs-dl-note { font-size: .9em; margin: .75em 0 0; }
.hub-cs-dl-text { margin: 1.5em 0 0; line-height: 1.65; }

/* Hero: same size as .hub-cs-ship-hero (320px, 220px on phones). */
.hub-cs-dl-hero { position: relative; border-radius: 14px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background: #0b2b50; margin: 0 0 1.25em; color: #fff; }
/* No photo: the theme's accent instead of a fixed navy. */
.hub-cs-dl-hero-plain { background: var(--hub-cs-accent); color: var(--hub-cs-accent-text); }
.hub-cs-dl-hero .hub-cs-dl-hero-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0; object-fit: cover; object-position: 50% 50% !important; }
.hub-cs-dl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 60%); }
.hub-cs-dl-hero-plain { min-height: 0; }
.hub-cs-dl-hero-plain::after { display: none; }
.hub-cs-dl-hero-text { position: relative; z-index: 1; padding: 24px 28px; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.hub-cs-dl-hero .hub-cs-dl-title { color: #fff; margin: 0; }
/* No photo: title and text in the theme's own text-on-accent colour (its buttons' pairing). */
.hub-cs-dl-hero-plain .hub-cs-dl-title { color: inherit; }
.hub-cs-dl-hero .hub-cs-dl-lead { margin: .5em 0 0; max-width: 46em; color: inherit; }
.hub-cs-dl-chips-hero { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .75em; }
.hub-cs-dl-chips-hero span { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .2em .8em; font-size: .85em; }
.hub-cs-dl-from { display: block; background: #fff; color: #1a1a1a; border-radius: 14px; padding: 14px 20px; text-align: center; text-decoration: none; border-bottom: 4px solid var(--hub-cs-accent, currentColor); }
.hub-cs-dl-from small, .hub-cs-dl-from span { display: block; font-size: .8em; opacity: .75; }
.hub-cs-dl-from strong { display: block; font-size: 2em; line-height: 1.2; }

.hub-cs-dl-years { display: flex; flex-wrap: wrap; gap: .6em; margin: 0 0 .5em; }
.hub-cs-dl-ytab { font: inherit; color: inherit; background: transparent; border: 2px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 12px; padding: .5em 1.1em; cursor: pointer; text-align: left; }
.hub-cs-dl-ytab b { display: block; font-size: 1.1em; }
.hub-cs-dl-ytab span { font-size: .85em; opacity: .7; }
.hub-cs-dl-ytab.is-on { border-color: var(--hub-cs-accent, currentColor); }

.hub-cs-dl-yhead { font-weight: 700; margin: 1em 0 .5em; }
.hub-cs-dl-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.hub-cs-dl-box { display: block; padding: 1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-top: 4px solid var(--hub-cs-accent, currentColor); border-radius: 12px; color: inherit; text-decoration: none; }
a.hub-cs-dl-box:hover, a.hub-cs-dl-box:focus-visible { border-color: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-box small { display: block; font-weight: 600; opacity: .8; }
.hub-cs-dl-box strong { display: block; font-size: 1.6em; line-height: 1.25; margin: .2em 0; }
.hub-cs-dl-box span { font-size: .85em; color: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-box-off { border-top-color: color-mix(in srgb, currentColor 15%, transparent); opacity: .55; }
.hub-cs-dl-box-off strong { font-size: 1.2em; }
.hub-cs-dl-box-off span { color: inherit; }

.hub-cs-dl-chart { display: grid; grid-template-columns: 260px 1fr; gap: 1.5em; }
.hub-cs-dl-panel { padding: 1em; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); align-self: start; }
.hub-cs-dl-plabel { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 1em 0 .5em; }
.hub-cs-dl-plabel:first-child { margin-top: 0; }
.hub-cs-dl-plabel b { float: right; text-transform: none; letter-spacing: 0; color: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-range { width: 100%; accent-color: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.hub-cs-dl-chip { font: inherit; font-size: .85em; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; padding: .3em .8em; cursor: pointer; }
/* Not currentColor as the fallback: the chip's own text colour is set here, it would paint over itself. */
.hub-cs-dl-chip.is-on { background: var(--hub-cs-accent, CanvasText); border-color: var(--hub-cs-accent, CanvasText); color: var(--hub-cs-accent-text, Canvas); }
.hub-cs-dl-legend { display: flex; flex-wrap: wrap; gap: 1.2em; font-size: .85em; margin: 0 0 .5em; }
.hub-cs-dl-swatch { display: inline-block; width: 22px; height: 8px; border-radius: 4px; vertical-align: middle; margin-right: .4em; }
.hub-cs-dl-orow { display: grid; grid-template-columns: 200px 1fr; gap: .75em; align-items: center; padding: .35em 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.hub-cs-dl-oname { font-weight: 600; font-size: .95em; }
.hub-cs-dl-bar { display: flex; align-items: center; gap: .5em; min-height: 22px; }
.hub-cs-dl-bar i { display: block; height: 14px; border-radius: 7px; transition: width .35s; }
.hub-cs-dl-bar a { font-size: .875em; font-weight: 600; white-space: nowrap; text-decoration: none; color: inherit; }
.hub-cs-dl-bar a[href]:hover { text-decoration: underline; }
.hub-cs-dl-bar.is-none a { font-weight: 400; opacity: .5; }
.hub-cs-dl-y0, .hub-cs-dl-bar.hub-cs-dl-y0 i { background: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-y1, .hub-cs-dl-bar.hub-cs-dl-y1 i { background: color-mix(in srgb, var(--hub-cs-accent, currentColor) 45%, transparent); }
.hub-cs-dl-y2, .hub-cs-dl-bar.hub-cs-dl-y2 i { background: color-mix(in srgb, currentColor 40%, transparent); }
.hub-cs-dl-bar.hub-cs-dl-y0, .hub-cs-dl-bar.hub-cs-dl-y1, .hub-cs-dl-bar.hub-cs-dl-y2 { background: none; }
.hub-cs-dl-empty { opacity: .7; }

.hub-cs-dl-ships { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.hub-cs-dl-ship { display: block; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
.hub-cs-dl-ship img, .hub-cs-dl-ship-noimg { display: block; width: 100%; height: 140px; object-fit: cover; background: color-mix(in srgb, currentColor 8%, transparent); }
.hub-cs-dl-ship-body { display: block; padding: .7em .9em; }
.hub-cs-dl-ship-body b, .hub-cs-dl-ship-body small, .hub-cs-dl-ship-body span { display: block; }
.hub-cs-dl-ship-body small { opacity: .7; }
.hub-cs-dl-ship-body span { font-weight: 700; color: var(--hub-cs-accent, currentColor); margin-top: .25em; }

.hub-cs-dl-wrow { display: grid; grid-template-columns: 160px 1fr 140px; gap: .9em; align-items: center; padding: .4em 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.hub-cs-dl-wport a, .hub-cs-dl-wport b { display: block; font-weight: 700; color: inherit; }
.hub-cs-dl-wport small { font-size: .8em; opacity: .7; }
.hub-cs-dl-wtrack { position: relative; height: 26px; border-radius: 13px; background: color-mix(in srgb, currentColor 5%, transparent); }
/* Weather colours are fixed, not the theme's (user, 25.10): night dark blue, day sunny yellow. */
.hub-cs-dl-wtrack i { position: absolute; top: 6px; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #1e3a8a, #f5c518); }
.hub-cs-dl-wtrack em { position: absolute; top: 2px; width: 4px; height: 22px; border-radius: 2px; background: currentColor; }
.hub-cs-dl-wn, .hub-cs-dl-wd { position: absolute; top: -1px; font-size: .75em; font-weight: 700; white-space: nowrap; }
.hub-cs-dl-wn { right: 100%; margin-right: .4em; color: #1e3a8a; }
.hub-cs-dl-wd { left: 100%; margin-left: .4em; color: #a87b00; }
.hub-cs-dl-wrain { display: flex; align-items: center; gap: .5em; font-size: .85em; }
.hub-cs-dl-wrain i { display: block; height: 8px; border-radius: 4px; max-width: 70px; background: color-mix(in srgb, currentColor 30%, transparent); }
.hub-cs-dl-swatch-temp { background: linear-gradient(90deg, #1e3a8a, #f5c518); }
.hub-cs-dl-swatch-sea { width: 4px; height: 14px; background: currentColor; }
.hub-cs-dl-swatch-rain { background: color-mix(in srgb, currentColor 30%, transparent); }

.hub-cs-dl-faq { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); padding: .75em 0; }
.hub-cs-dl-faq summary { cursor: pointer; font-weight: 600; }
.hub-cs-dl-faq p { margin: .5em 0 0; }

.hub-cs-dl-logos { display: flex; flex-wrap: wrap; gap: .75em; }
.hub-cs-dl-logo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 140px; height: 80px; padding: 10px 12px; background: #fff; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 12px; color: #1a1a1a; text-decoration: none; text-align: center; font-size: .85em; }
.hub-cs-dl-logo:hover, .hub-cs-dl-logo:focus-visible { border-color: var(--hub-cs-accent, currentColor); }
/* A fixed box like the ship page's logo: with auto sizes a lazy image stays 0×0 and never loads. */
.hub-cs-dl-logo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0; object-fit: contain; }

.hub-cs-dl-months { display: flex; flex-wrap: wrap; gap: .5em; }
.hub-cs-dl-months a { display: flex; flex-direction: column; min-width: 110px; padding: .5em .9em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; color: inherit; text-decoration: none; }
.hub-cs-dl-months a:hover, .hub-cs-dl-months a:focus-visible { border-color: var(--hub-cs-accent, currentColor); }
.hub-cs-dl-months b { text-transform: capitalize; }
.hub-cs-dl-months span { font-size: .85em; color: var(--hub-cs-accent, currentColor); }

/* /okazje/: directions × months calendar (proposal 1, map 26.10). */
.hub-cs-dl-filters { display: flex; flex-wrap: wrap; gap: .5em 2em; margin: 0 0 .75em; }
.hub-cs-dl-filters .hub-cs-dl-chips { align-items: center; }
.hub-cs-dl-flabel { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: .4em; }
.hub-cs-dl-swatch-scale { width: 60px; background: linear-gradient(90deg, color-mix(in srgb, var(--hub-cs-accent) 61%, transparent), color-mix(in srgb, var(--hub-cs-accent) 6%, transparent)); }
.hub-cs-dl-swatch-low { width: 14px; height: 14px; background: var(--hub-cs-accent); }
.hub-cs-dl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hub-cs-dl-calendar { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
/* Themes style every table (Blocksy: cell borders and padding): none of it in the calendar. */
.hub-cs-deals .hub-cs-dl-calendar, .hub-cs-deals .hub-cs-dl-calendar th, .hub-cs-deals .hub-cs-dl-calendar td { border: 0 !important; background: none; margin: 0; }
.hub-cs-deals .hub-cs-dl-calendar td { padding: 0 !important; }
.hub-cs-deals .hub-cs-dl-calendar thead th { font-size: .75em; font-weight: 700; text-transform: uppercase; text-align: center; opacity: .75; padding: 2px 0 !important; }
.hub-cs-dl-calendar thead th small { display: block; font-weight: 400; font-size: .9em; }
.hub-cs-deals .hub-cs-dl-calendar tbody th { text-align: left; min-width: 190px; padding: 4px 10px 4px 0 !important; vertical-align: middle; font-weight: 400; line-height: 1.3; }
.hub-cs-dl-rname { font-weight: 800; text-decoration: none; color: var(--theme-headings-color, inherit); }
.hub-cs-dl-calendar tbody th small { display: block; font-size: .8em; opacity: .7; }
.hub-cs-dl-calendar details { font-size: .8em; margin-top: 2px; }
.hub-cs-dl-calendar summary { cursor: pointer; font-weight: 700; color: var(--hub-cs-accent); }
.hub-cs-dl-subs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.hub-cs-dl-cell { display: block; min-width: 48px; text-align: center; padding: .65em .2em; border-radius: 8px; font-weight: 700; font-size: .85em; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--hub-cs-accent) calc((1 - var(--hub-cs-dl-t)) * 55% + 6%), transparent); }
.hub-cs-dl-cell:hover, .hub-cs-dl-cell:focus-visible { outline: 2px solid var(--hub-cs-accent); }
.hub-cs-dl-cell.is-low { background: var(--hub-cs-accent); color: var(--hub-cs-accent-text); box-shadow: 0 0 0 2px Canvas, 0 0 0 4px var(--hub-cs-accent); }
.hub-cs-dl-cell.is-none { background: none; opacity: .35; font-weight: 400; }

.hub-cs-dl-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25em; }
.hub-cs-dl-region-card { padding: 1em 1.1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-dl-region-card h2 { font-size: 1.15em; margin: 0 0 .3em; }
.hub-cs-dl-region-from { margin: 0 0 .5em; }
.hub-cs-dl-sublinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em .9em; font-size: .9em; }

[data-hub-cs-deals] [hidden] { display: none !important; }

@media (max-width: 900px) {
    .hub-cs-dl-hero { min-height: 220px; }
    .hub-cs-dl-hero-text { grid-template-columns: 1fr; padding: 18px 16px; }
    .hub-cs-dl-boxes, .hub-cs-dl-ships { grid-template-columns: repeat(2, 1fr); }
    .hub-cs-dl-chart { grid-template-columns: 1fr; }
    .hub-cs-dl-orow { grid-template-columns: 110px 1fr; }
    .hub-cs-dl-wrow { grid-template-columns: 100px 1fr 80px; }
}