/* ════════ OFERTY (Wolne terminy) — namespace .of- / .ob- (bez kolizji z .lm-) ════════
   Jasna paleta strony: navy #16233F, marine #1E3A8A, beton #E5E7EB, biel.
   Terminologia Omnibus. Widoczne tylko dla staff (dev gate w szablonie). */

.of-section { padding:var(--space-xl) 5vw; font-family:'Manrope',sans-serif; color:#16233F; }
.of-steps { list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid #E5E7EB; }
.of-steps li { display:flex; gap:.8rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid #E5E7EB; font-size:.85rem; color:#4B5563; line-height:1.4; }
.of-steps li span { flex:0 0 1.1rem; font-family:'Oswald',sans-serif; font-weight:600; color:#1E3A8A; font-size:.82rem; }

/* Maskotka Terminek */
.of-mascot { width:150px; height:176px; margin-top:2rem; }
.of-mascot svg { width:100%; height:100%; overflow:visible; }
.tk-eye { transform-box:fill-box; transform-origin:center; animation:tkBlink 2.25s infinite; }
@keyframes tkBlink { 0%,92%,100% { transform:scaleY(1); } 96% { transform:scaleY(.1); } }
.tk-eyes { transform-box:fill-box; transform-origin:center; animation:tkPop 3s ease-in-out infinite; }
@keyframes tkPop { 0%,68%,100% { transform:scale(1); } 78% { transform:scale(1.16); } 88% { transform:scale(1); } }
.tk-pupil { transform-box:fill-box; transform-origin:center; animation:tkLook 2.5s ease-in-out infinite; }
@keyframes tkLook { 0%,18% { transform:translate(0,0); } 30%,44% { transform:translate(-2px,1px); } 56%,70% { transform:translate(2.5px,0); } 82%,90% { transform:translate(0,-2px); } 100% { transform:translate(0,0); } }
.tk-arm { transform-box:fill-box; transform-origin:14% 84%; animation:tkWave 1.8s ease-in-out infinite; }
@keyframes tkWave { 0% { transform:rotate(6deg); } 8% { transform:rotate(-24deg); } 16% { transform:rotate(-2deg); } 24% { transform:rotate(-22deg); } 32% { transform:rotate(4deg); } 62% { transform:rotate(4deg); } 74% { transform:rotate(-18deg); } 100% { transform:rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .tk-eye,.tk-eyes,.tk-pupil,.tk-arm { animation:none; } }

/* ════════ Karty ofert — układ jak w makiecie oferta-card.html ════════ */
.of-grid { display:grid; gap:1.2rem; grid-template-columns:1fr; align-items:stretch; }
.of-note { font-size:.78rem; color:#9AA3AF; max-width:74ch; line-height:1.6; margin-top:1.75rem; }

.of-card { display:flex; flex-direction:row; background:#FFFFFF; border:1px solid #E5E7EB; min-height:400px; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease; }
.of-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(15,23,42,.14); }

.of-img { width:44%; flex:0 0 44%; align-self:stretch; position:relative; overflow:hidden; }
.of-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(12%); transition:transform 1.2s cubic-bezier(.165,.84,.44,1), filter .6s ease; }
.of-card:hover .of-img img { transform:scale(1.045); filter:grayscale(0%); }
.of-apt { position:absolute; left:0; right:0; bottom:0; padding:2.6rem .95rem .7rem; background:linear-gradient(to top, rgba(16,20,32,.9) 0%, rgba(16,20,32,.3) 55%, rgba(16,20,32,0) 100%); }
.of-apt span { font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#fff; font-size:.8rem; }
.of-guests { position:absolute; right:.75rem; bottom:.7rem; z-index:2; display:inline-flex; align-items:center; gap:.34rem; color:#fff; font-family:'Oswald',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.04em; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.of-guests svg { width:.95rem; height:.95rem; }

.of-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:1.7rem 1.6rem; }
.of-datectl { display:flex; align-items:center; gap:.75rem; }
.of-dateblock { flex:1; min-width:0; text-align:center; }
.of-days { font-size:1.28rem; color:#6B7280; text-transform:lowercase; letter-spacing:.02em; margin-top:.15rem; }
.of-term { font-family:'Oswald',sans-serif; font-weight:600; font-size:1.95rem; color:#16233F; line-height:1.1; letter-spacing:-.01em; }
.of-arrow { font-family:'Manrope',sans-serif; color:#1E3A8A; font-weight:400; margin:0 .12rem; }
.of-step { width:3.5rem; height:3.5rem; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#16233F; border:1px solid #16233F; color:#fff; font-family:'Oswald',sans-serif; font-size:2.25rem; line-height:1; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.of-step:hover:not(:disabled) { background:#1E3A8A; border-color:#1E3A8A; }
.of-step:disabled { background:#F0F2F5; border-color:#E5E7EB; color:#B6BDC7; cursor:default; }
.of-hint { font-size:.72rem; color:#1E3A8A; font-weight:600; }
.of-nudge { font-size:.74rem; color:#16233F; background:rgba(30,58,138,.06); border:1px solid rgba(30,58,138,.28); padding:.45rem .6rem; line-height:1.4; }
.of-nudge button { background:none; border:none; padding:0; margin-left:.15rem; color:#1E3A8A; font-weight:700; text-decoration:underline; cursor:pointer; font-family:inherit; font-size:inherit; }

.of-priceblock { display:flex; flex-direction:column; }
.of-bill { display:flex; flex-direction:column; gap:.28rem; margin-bottom:.55rem; }
.of-bill-row { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color:#6B7280; }
.of-bill-row span:last-child { color:#16233F; }
.of-bill-row.of-bill-save span { color:#1E3A8A; font-weight:600; }
.of-total { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid #E5E7EB; padding-top:.6rem; }
.of-total-label { font-size:.9rem; color:#6B7280; }
.of-price { font-family:'Oswald',sans-serif; font-weight:700; font-size:2.1rem; color:#16233F; line-height:.95; letter-spacing:-.01em; }
.of-btn { width:100%; margin-top:1rem; text-align:center; padding:.72rem 1rem; background:transparent; color:#16233F; border:1px solid #16233F; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.82rem; cursor:pointer; transition:background .25s ease, color .25s ease; }
.of-btn:hover { background:#16233F; color:#fff; }

@media (max-width:560px) {
  .of-card { flex-direction:column; }
  .of-img { width:100%; flex-basis:auto; height:200px; }
}