/* ==========================================================================
   Kokpit.pro — design system
   ========================================================================== */

:root {
    --kokpit-accent: #2451ff;
    --kokpit-accent-dark: #1636b0;
    --kokpit-accent-light: #eef1ff;
    --kokpit-ink: #0f172a;
    --kokpit-body: #334155;
    --kokpit-muted: #64748b;
    --kokpit-border: #e2e8f0;
    --kokpit-bg: #ffffff;
    --kokpit-bg-soft: #f8fafc;
    --kokpit-bg-dark: #0b1220;
    --kokpit-success: #16a34a;
    --kokpit-danger: #dc2626;
    --kokpit-hot: #ef4444;
    --kokpit-error-fare: #7c3aed;

    --kokpit-radius-sm: 8px;
    --kokpit-radius: 14px;
    --kokpit-radius-lg: 22px;

    --kokpit-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --kokpit-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --kokpit-shadow-lg: 0 24px 60px rgba(15, 23, 42, .18);

    --kokpit-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Reset / typography -------------------------------------------------- */

body {
    min-height: 100vh;
    font-family: var(--kokpit-font);
    color: var(--kokpit-body);
    background: var(--kokpit-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kokpit-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { color: var(--kokpit-accent); }
a:hover { color: var(--kokpit-accent-dark); }

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--kokpit-accent);
    margin-bottom: .5rem;
}
.section-title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    margin-bottom: 1rem;
}
.section { padding-block: 3.5rem; }
.section--soft { background: var(--kokpit-bg-soft); }
.section--dark { background: var(--kokpit-bg-dark); color: #cbd5e1; }
.section--dark .section-title { color: #fff; }
.section--closing {
    background: linear-gradient(135deg, var(--kokpit-accent), var(--kokpit-accent-dark));
    color: #fff;
    padding-block: 4rem;
}
.section--closing .section-title { color: #fff; }
.section--closing .lead { color: rgba(255, 255, 255, .85); }

/* --- Buttons --------------------------------------------------------------
   .btn-primary / .btn-outline-primary are Bootstrap's own classes, overridden
   here so every page (including admin) picks up the brand look without
   touching every view. .btn-cta / .btn-outline-cta are aliases used in new
   markup for semantic clarity. */

.btn { border-radius: var(--kokpit-radius-sm); font-weight: 600; }

.btn-primary, .btn-cta {
    background-color: var(--kokpit-accent);
    border-color: var(--kokpit-accent);
    color: #fff;
    padding: .65rem 1.4rem;
}
.btn-primary:hover, .btn-primary:focus, .btn-cta:hover, .btn-cta:focus,
.btn-primary:active, .btn-cta:active {
    background-color: var(--kokpit-accent-dark) !important;
    border-color: var(--kokpit-accent-dark) !important;
    color: #fff;
}

.btn-outline-primary, .btn-outline-cta {
    color: var(--kokpit-accent);
    border-color: var(--kokpit-accent);
}
.btn-outline-primary:hover, .btn-outline-cta:hover,
.btn-outline-primary:active, .btn-outline-cta:active {
    background-color: var(--kokpit-accent) !important;
    border-color: var(--kokpit-accent) !important;
    color: #fff;
}

/* .btn-outline-cta isn't a real Bootstrap variant, so Bootstrap's own
   .btn-check:checked+.btn-outline-primary rule doesn't cover it — without this,
   toggle buttons built with .btn-check + .btn-outline-cta (e.g. calculator
   radio pickers) never show which option is selected. */
.btn-check:checked + .btn-outline-cta {
    background-color: var(--kokpit-accent) !important;
    border-color: var(--kokpit-accent) !important;
    color: #fff;
}

.text-primary { color: var(--kokpit-accent) !important; }
.border-primary { border-color: var(--kokpit-accent) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--kokpit-accent);
    box-shadow: 0 0 0 .2rem rgba(36, 81, 255, .15);
}
.form-check-input:checked {
    background-color: var(--kokpit-accent);
    border-color: var(--kokpit-accent);
}
.form-range::-webkit-slider-thumb { background: var(--kokpit-accent); }
.form-range::-moz-range-thumb { background: var(--kokpit-accent); border: none; }

.card { border-color: var(--kokpit-border); border-radius: var(--kokpit-radius); }

.accordion-button:not(.collapsed) {
    color: var(--kokpit-accent-dark);
    background-color: var(--kokpit-accent-light);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(36, 81, 255, .15); border-color: var(--kokpit-accent); }

/* --- Icons ----------------------------------------------------------------
   Local SVG icon set (see _Icon.cshtml) — size/color controlled here, not by
   an external icon font. */

.icon { display: inline-flex; width: 1em; height: 1em; font-size: 1.1em; vertical-align: -0.15em; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; }
.icon-lg { font-size: 1.8rem; }
.icon-xl { font-size: 2.75rem; }
.text-accent { color: var(--kokpit-accent); }

/* --- Skip link / cookie banner (etap 1) ----------------------------------- */

.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    background: #fff;
    padding: 0.5rem 1rem;
    z-index: 2000;
}
.skip-link:focus { top: 0.5rem; }

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--kokpit-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 1050;
}

/* --- PlanGate / offer-locked (etap 1) -------------------------------------- */

.plan-gate {
    position: relative;
    border-radius: var(--kokpit-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--kokpit-accent-light), #dfe9fb);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}
.plan-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.35);
}
.plan-gate__content { position: relative; z-index: 1; max-width: 26rem; }
.plan-gate__price { color: var(--kokpit-accent); }

.offer-locked { position: relative; border-radius: var(--kokpit-radius); display: grid; }
.offer-locked__blur { grid-area: 1 / 1; overflow: hidden; filter: blur(6px); pointer-events: none; user-select: none; }
.offer-locked__overlay {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(10, 37, 64, 0.6);
    color: #fff;
    text-align: center;
    padding: 1.5rem;
}

.badge-hot { background-color: var(--kokpit-hot); }
.badge-error-fare { background-color: var(--kokpit-error-fare); }
.badge-standard { background-color: var(--kokpit-accent); }

/* --- Header ---------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--kokpit-border);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand { font-weight: 700; color: var(--kokpit-ink); font-size: 1.3rem; }
.navbar-brand__accent { color: var(--kokpit-accent); }
.nav-link { color: var(--kokpit-body); font-weight: 500; }
.nav-link:hover { color: var(--kokpit-accent); }

.site-header--overlay {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background: transparent;
    border-bottom-color: transparent;
}
.site-header--overlay .navbar-brand,
.site-header--overlay .nav-link { color: #fff; }
.site-header--overlay .navbar-toggler-icon { filter: invert(1) brightness(2); }

.site-header--overlay.site-header--scrolled {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
    box-shadow: var(--kokpit-shadow-sm);
    border-bottom-color: var(--kokpit-border);
}
.site-header--overlay.site-header--scrolled .navbar-brand,
.site-header--overlay.site-header--scrolled .nav-link { color: var(--kokpit-ink); }
.site-header--overlay.site-header--scrolled .navbar-toggler-icon { filter: none; }

@media (max-width: 767.98px) {
    .navbar-collapse.show, .navbar-collapse.collapsing {
        background: #fff;
        margin-top: .75rem;
        padding: 1rem;
        border-radius: var(--kokpit-radius);
        box-shadow: var(--kokpit-shadow);
    }
    .navbar-collapse.show .nav-link, .navbar-collapse.collapsing .nav-link { color: var(--kokpit-ink) !important; }
}

/* --- Hero -------------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: 7rem 4rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .08), transparent 40%),
        linear-gradient(160deg, #0b1220 0%, #12224b 55%, var(--kokpit-accent-dark) 100%);
    color: #fff;
    overflow: hidden;
}
.hero__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 992px) {
    .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
.hero__title {
    font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1.1rem;
    color: #fff;
}
.hero__lead { font-size: 1.1rem; color: rgba(255, 255, 255, .85); max-width: 34rem; margin-bottom: 1.75rem; }
.hero__cta-note { color: rgba(255, 255, 255, .65); font-size: .85rem; margin-top: .6rem; margin-bottom: 0; }
.hero__stats { list-style: none; display: flex; gap: 2rem; flex-wrap: wrap; margin: 2.25rem 0 0; padding: 0; }
.hero__stats strong { display: block; font-size: 1.5rem; font-weight: 700; color: #fff; }
.hero__stats span { color: rgba(255, 255, 255, .65); font-size: .78rem; }

.hero-mock {
    background: #fff;
    border-radius: var(--kokpit-radius-lg);
    box-shadow: var(--kokpit-shadow-lg);
    padding: 1.25rem;
    color: var(--kokpit-ink);
}
.hero-mock__bar { display: flex; gap: .35rem; margin-bottom: 1rem; }
.hero-mock__bar span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--kokpit-border); }
.hero-mock__airports { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hero-mock__chip {
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--kokpit-bg-soft);
    font-size: .75rem;
    font-weight: 600;
    color: var(--kokpit-muted);
}
.hero-mock__chip--active { background: var(--kokpit-accent-light); color: var(--kokpit-accent-dark); }
.hero-mock__offer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    margin-bottom: .6rem;
}
.hero-mock__offer:last-child { margin-bottom: 0; }
.hero-mock__offer-img { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #c7d2fe, #93c5fd); flex-shrink: 0; }
.hero-mock__offer-body { flex: 1; display: flex; flex-direction: column; font-size: .8rem; }
.hero-mock__offer-body span { color: var(--kokpit-muted); }

/* --- Problem grid -------------------------------------------------------- */

.problem-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
.problem-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--kokpit-radius);
    box-shadow: var(--kokpit-shadow-sm);
}
.problem-item .icon { color: var(--kokpit-accent); margin-top: .1rem; }
.problem-item p { margin: 0; }

/* --- Steps ----------------------------------------------------------------- */

.steps-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; text-align: center; margin-top: 2rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.step-item { padding: 1rem; }
.step-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .5rem;
}
.step-item .icon { display: block; color: var(--kokpit-accent); margin: .5rem auto; }
.step-item h3 { font-size: 1.05rem; }

/* --- Offer cards ------------------------------------------------------------ */

.offer-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 576px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }

.offer-card {
    display: block;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--kokpit-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: var(--kokpit-shadow); color: inherit; }
.offer-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--kokpit-bg-soft); }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-card__badge { position: absolute; top: .6rem; left: .6rem; }
.offer-card__discount {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--kokpit-ink);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: 999px;
}
.offer-card__body { padding: 1rem; }
.offer-card__title { font-size: 1rem; margin-bottom: .35rem; }
.offer-card__departure { font-size: .8rem; color: var(--kokpit-muted); display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; }
.offer-card__dates { font-size: .8rem; color: var(--kokpit-muted); display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; }
.offer-card__freshness { font-size: .75rem; color: var(--kokpit-muted); margin-bottom: .6rem; }
.offer-card__price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.offer-card__price-from { font-weight: 700; color: var(--kokpit-ink); }
.offer-card__price-typical { font-size: .8rem; color: var(--kokpit-muted); text-decoration: line-through; }

.offer-details__cover {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 340px;
    object-fit: cover;
    border-radius: var(--kokpit-radius);
    margin-bottom: 1rem;
}

.offer-description {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--kokpit-body);
}
.offer-description > *:last-child { margin-bottom: 0; }
.offer-description p { margin-bottom: 1rem; }
.offer-description strong, .offer-description b { color: var(--kokpit-ink); font-weight: 700; }
.offer-description ul, .offer-description ol {
    margin: 0 0 1.25rem;
    padding-left: 0;
    list-style: none;
}
.offer-description ul li, .offer-description ol li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .55rem;
}
.offer-description ul li::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kokpit-accent);
}
.offer-description ol { counter-reset: offer-desc-counter; }
.offer-description ol li { counter-increment: offer-desc-counter; }
.offer-description ol li::before {
    content: counter(offer-desc-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--kokpit-accent);
}
.offer-description h2, .offer-description h3, .offer-description h4 {
    margin: 1.5rem 0 .6rem;
    font-size: 1.1rem;
}
.offer-description a { text-decoration: underline; }

/* --- Product grid ------------------------------------------------------------ */

.product-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card {
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.5rem;
    box-shadow: var(--kokpit-shadow-sm);
}
.product-card .icon { color: var(--kokpit-accent); }
.product-card h3 { font-size: 1.1rem; margin: .75rem 0 .5rem; }
.product-card__tag {
    font-size: .7rem;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-weight: 600;
    margin-left: .4rem;
    vertical-align: middle;
    white-space: nowrap;
}
.product-card__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; margin-top: .5rem; text-decoration: none; }
.product-card__link:hover { text-decoration: underline; }

/* --- Calculator --------------------------------------------------------------- */

.calculator { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .calculator { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.calculator .section-title, .calculator .section-eyebrow { color: #fff; }
.calculator__label { display: block; margin: 1.25rem 0 .4rem; font-weight: 600; color: #e2e8f0; }
.calculator__result {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--kokpit-radius-lg);
    padding: 2rem;
    text-align: center;
}
.calculator__result-label { color: rgba(255, 255, 255, .7); margin-bottom: .25rem; }
.calculator__result-value { font-size: 2.5rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.calculator__result-note { color: rgba(255, 255, 255, .7); font-size: .85rem; margin-bottom: 1.25rem; }

/* --- Testimonials --------------------------------------------------------------- */

.testimonial-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
@media (min-width: 992px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.5rem;
    box-shadow: var(--kokpit-shadow-sm);
    margin: 0 .25rem;
}
.testimonial-card .icon { color: #f59e0b; margin-bottom: .5rem; }
.testimonial-card p { font-style: italic; margin-bottom: .75rem; }
.testimonial-card footer { font-size: .85rem; color: var(--kokpit-muted); font-weight: 600; }

/* --- Pricing ------------------------------------------------------------------ */

.pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 56rem; margin: 2rem auto 0; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
.pricing-grid--compact { max-width: 44rem; }
.pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-lg);
    padding: 2rem;
    box-shadow: var(--kokpit-shadow-sm);
}
.pricing-card--featured { border-color: var(--kokpit-accent); box-shadow: var(--kokpit-shadow); }
.pricing-card__badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kokpit-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-card h2, .pricing-card h3 { margin-bottom: .5rem; }
.pricing-card__price { font-size: 2.25rem; font-weight: 700; color: var(--kokpit-ink); margin-bottom: .25rem; }
.pricing-card__price span { font-size: 1rem; font-weight: 500; color: var(--kokpit-muted); }
.pricing-card__monthly { font-size: .8rem; color: var(--kokpit-muted); margin-bottom: 1.25rem; }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pricing-card__features li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; font-size: .9rem; }
.pricing-card__features .icon { color: var(--kokpit-success); margin-top: .15rem; }

.guarantee-bar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
    padding: 0;
    margin: 2rem 0 0;
}
.guarantee-bar li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--kokpit-body); }
.guarantee-bar .icon { color: var(--kokpit-accent); }

.comparison-table table { background: #fff; }
.comparison-table th { color: var(--kokpit-ink); }

/* --- FAQ ------------------------------------------------------------------------ */

.faq-accordion .accordion-item { border-color: var(--kokpit-border); border-radius: var(--kokpit-radius); overflow: hidden; margin-bottom: .75rem; }
.faq-accordion .accordion-button { font-weight: 600; }

/* --- Footer ---------------------------------------------------------------------- */

.site-footer { background: var(--kokpit-bg-dark); color: rgba(255, 255, 255, .7); padding-block: 3rem 1.5rem; margin-top: 3rem; }
.site-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr .8fr .8fr; } }
.site-footer__brand { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.site-footer__channels { display: flex; gap: .75rem; margin-top: 1rem; }
.site-footer__channels a { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.site-footer__col { display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; }
.site-footer__heading { color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.site-footer__owner { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .75rem; color: rgba(255, 255, 255, .5); }

/* --- Onboarding ------------------------------------------------------------------- */

.onboarding-progress__label { font-size: .8rem; font-weight: 600; color: var(--kokpit-muted); margin-bottom: .4rem; }
.onboarding-progress__bar { height: .4rem; border-radius: 999px; background: var(--kokpit-border); overflow: hidden; }
.onboarding-progress__bar span { display: block; height: 100%; background: var(--kokpit-accent); border-radius: 999px; transition: width .3s ease; }

.onboarding-hint {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    padding: .75rem 1rem;
    border-radius: var(--kokpit-radius-sm);
    font-size: .85rem;
}
.onboarding-hint .icon { margin-top: .1rem; }

.airport-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .airport-tiles { grid-template-columns: repeat(3, 1fr); } }
.airport-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border: 1.5px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    padding: .75rem .5rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}
.airport-tile:hover { border-color: var(--kokpit-accent); }
.airport-tile.is-selected { border-color: var(--kokpit-accent); background: var(--kokpit-accent-light); }
.airport-tile__code { font-weight: 700; color: var(--kokpit-ink); }
.airport-tile__city { font-size: .75rem; color: var(--kokpit-muted); }
.airport-tile.is-selected .airport-tile__city { color: var(--kokpit-accent-dark); }

.day-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
.day-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    border: 1.5px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    padding: .5rem .9rem;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.day-tile:hover { border-color: var(--kokpit-accent); }
.day-tile.is-selected { border-color: var(--kokpit-accent); background: var(--kokpit-accent-light); color: var(--kokpit-accent-dark); }
.day-tile.is-disabled { cursor: not-allowed; opacity: .5; }

.destination-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; }
.destination-suggestion {
    border: 1px solid var(--kokpit-border);
    background: #fff;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--kokpit-body);
}
.destination-suggestion:hover { border-color: var(--kokpit-accent); color: var(--kokpit-accent); }

/* --- Register: plan switcher + password strength ------------------------------------ */

.plan-switcher { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.plan-switcher__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    border: 1.5px solid var(--kokpit-border);
    background: #fff;
    border-radius: var(--kokpit-radius);
    padding: 1rem;
    text-align: left;
    cursor: pointer;
}
.plan-switcher__option.is-active { border-color: var(--kokpit-accent); box-shadow: 0 0 0 3px var(--kokpit-accent-light); }
.plan-switcher__name { font-weight: 700; color: var(--kokpit-ink); }
.plan-switcher__price { font-size: .85rem; color: var(--kokpit-muted); }
.plan-switcher__tag {
    position: absolute;
    top: -.6rem;
    right: .75rem;
    background: var(--kokpit-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
}

.password-strength { display: none; align-items: center; gap: .6rem; }
.password-strength.is-visible { display: flex; }
.password-strength__bar { flex: 1; height: .35rem; border-radius: 999px; background: var(--kokpit-border); overflow: hidden; }
.password-strength__bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background-color .2s ease; }
.password-strength__bar span.is-weak { background-color: var(--kokpit-danger); }
.password-strength__bar span.is-medium { background-color: #f59e0b; }
.password-strength__bar span.is-good { background-color: #3b82f6; }
.password-strength__bar span.is-strong { background-color: var(--kokpit-success); }
.password-strength__label { font-size: .75rem; font-weight: 600; color: var(--kokpit-muted); white-space: nowrap; }

/* --- Access expired -------------------------------------------------------------------- */

.access-expired-stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.access-expired-stats strong { display: block; font-size: 1.75rem; font-weight: 700; color: var(--kokpit-accent); }
.access-expired-stats span { font-size: .8rem; color: var(--kokpit-muted); }

/* --- Legal content ------------------------------------------------------------------------ */

.legal-content h1 { margin-bottom: 1.5rem; }
.legal-content h2 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: .5rem; }
.legal-content p { color: var(--kokpit-body); line-height: 1.7; }

/* --- Sticky mobile CTA ---------------------------------------------------------------------- */

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--kokpit-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .1);
    z-index: 1040;
    transform: translateY(110%);
    transition: transform .25s ease;
}
.sticky-cta--visible { transform: translateY(0); }

/* ==========================================================================
   Baza wiedzy
   ========================================================================== */

.kb-search { position: relative; max-width: 40rem; margin: 0 auto 1rem; }
.kb-search input {
    width: 100%;
    padding: .85rem 1rem .85rem 3rem;
    border-radius: var(--kokpit-radius);
    border: 1.5px solid var(--kokpit-border);
    font-size: 1rem;
}
.kb-search input:focus { outline: none; border-color: var(--kokpit-accent); box-shadow: 0 0 0 .2rem rgba(36, 81, 255, .15); }
.kb-search .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--kokpit-muted); }

.kb-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }

.kb-category-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 576px) { .kb-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kb-category-grid { grid-template-columns: repeat(4, 1fr); } }
.kb-category-card {
    display: block;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--kokpit-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.kb-category-card:hover { transform: translateY(-3px); box-shadow: var(--kokpit-shadow); color: inherit; }
.kb-category-card .icon { color: var(--kokpit-accent); }
.kb-category-card h3 { font-size: 1.05rem; margin: .6rem 0 .3rem; }
.kb-category-card p { font-size: .85rem; color: var(--kokpit-muted); margin-bottom: .5rem; }
.kb-category-card__count { font-size: .75rem; font-weight: 700; color: var(--kokpit-accent); }

.kb-path-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 768px) { .kb-path-grid { grid-template-columns: repeat(2, 1fr); } }
.kb-path-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--kokpit-bg-soft);
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}
.kb-path-card:hover { border-color: var(--kokpit-accent); color: inherit; }
.kb-path-card .icon { color: var(--kokpit-accent); flex-shrink: 0; }
.kb-path-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.kb-path-card p { font-size: .85rem; color: var(--kokpit-muted); margin: 0; }

.kb-recent-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.kb-recent-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    padding: .85rem 1rem;
}
.kb-recent-list a { font-weight: 600; color: var(--kokpit-ink); text-decoration: none; }
.kb-recent-list a:hover { color: var(--kokpit-accent); }
.kb-recent-list time { font-size: .8rem; color: var(--kokpit-muted); white-space: nowrap; }

.level-badge { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.level-badge--start { background: #dcfce7; color: #15803d; }
.level-badge--sredni { background: #fef3c7; color: #92400e; }
.level-badge--zaawansowany { background: #fee2e2; color: #b91c1c; }

.category-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    text-decoration: none;
}
.category-badge:hover { color: var(--kokpit-accent-dark); text-decoration: underline; }

.kb-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0; }
.kb-filter-bar a {
    display: inline-block;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--kokpit-border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--kokpit-body);
    text-decoration: none;
}
.kb-filter-bar a.is-active { background: var(--kokpit-accent); border-color: var(--kokpit-accent); color: #fff; }
.kb-filter-bar a:hover:not(.is-active) { border-color: var(--kokpit-accent); color: var(--kokpit-accent); }

.kb-article-list { display: grid; gap: 1rem; margin-top: 1rem; }
.kb-article-row {
    display: block;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}
.kb-article-row:hover { border-color: var(--kokpit-accent); color: inherit; }
.kb-article-row__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.kb-article-row h3 { font-size: 1.05rem; margin: 0; }
.kb-article-row p { font-size: .9rem; color: var(--kokpit-muted); margin: .4rem 0; }
.kb-article-row__meta { font-size: .78rem; color: var(--kokpit-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.kb-article-row__read { color: var(--kokpit-success); font-weight: 600; }

/* --- Widok artykułu ------------------------------------------------------- */

.kb-article-head { max-width: 46rem; margin: 0 auto 2rem; }
.kb-article-head__badges { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; flex-wrap: wrap; }
.kb-article-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-bottom: .75rem; }
.kb-article-head__meta { color: var(--kokpit-muted); font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.kb-summary-box {
    max-width: 46rem;
    margin: 0 auto 2rem;
    background: var(--kokpit-accent-light);
    border-radius: var(--kokpit-radius);
    padding: 1.5rem;
}
.kb-summary-box__title { font-weight: 700; color: var(--kokpit-accent-dark); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.kb-summary-box ul { margin: 0; padding-left: 1.25rem; }
.kb-summary-box li { margin-bottom: .4rem; color: var(--kokpit-ink); }
.kb-summary-box li:last-child { margin-bottom: 0; }

.kb-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .kb-layout { grid-template-columns: 1fr 240px; align-items: start; } }

.kb-toc { position: sticky; top: 5.5rem; background: var(--kokpit-bg-soft); border-radius: var(--kokpit-radius); padding: 1.25rem; }
.kb-toc__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kokpit-muted); margin-bottom: .75rem; }
.kb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kb-toc a { font-size: .88rem; color: var(--kokpit-body); text-decoration: none; display: block; }
.kb-toc a:hover { color: var(--kokpit-accent); }

.kb-content { max-width: 46rem; font-size: 1.05rem; line-height: 1.8; color: var(--kokpit-body); }
.kb-content h2 { font-size: 1.3rem; margin: 2rem 0 .85rem; scroll-margin-top: 5.5rem; }
.kb-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }
.kb-content p { margin-bottom: 1.1rem; }
.kb-content ul, .kb-content ol { margin-bottom: 1.1rem; padding-left: 1.5rem; }
.kb-content li { margin-bottom: .4rem; }
.kb-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .92rem; }
.kb-content th, .kb-content td { border: 1px solid var(--kokpit-border); padding: .6rem .75rem; text-align: left; }
.kb-content th { background: var(--kokpit-bg-soft); font-weight: 700; }
.kb-content strong { color: var(--kokpit-ink); }
.kb-content a { text-decoration: underline; }
.kb-content blockquote { border-left: 3px solid var(--kokpit-accent); padding-left: 1rem; color: var(--kokpit-muted); font-style: italic; margin: 1.5rem 0; }

.kb-related { max-width: 46rem; margin: 2.5rem auto 0; }
.kb-related-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .kb-related-grid { grid-template-columns: repeat(2, 1fr); } }

.kb-tool-card {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--kokpit-accent-light);
    border-radius: var(--kokpit-radius);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
}
.kb-tool-card:hover { color: inherit; }
.kb-tool-card .icon { color: var(--kokpit-accent-dark); flex-shrink: 0; }
.kb-tool-card strong { display: block; color: var(--kokpit-ink); margin-bottom: .2rem; }
.kb-tool-card span { font-size: .85rem; color: var(--kokpit-body); }

.kb-path-banner {
    max-width: 46rem;
    margin: 0 auto 1.5rem;
    background: var(--kokpit-bg-soft);
    border-radius: var(--kokpit-radius-sm);
    padding: .85rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

.kb-next-step {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    text-align: center;
    background: linear-gradient(135deg, var(--kokpit-accent), var(--kokpit-accent-dark));
    border-radius: var(--kokpit-radius-lg);
    padding: 2rem;
    color: #fff;
}
.kb-next-step p { color: rgba(255, 255, 255, .8); margin-bottom: 1rem; }

/* --- Ścieżka --------------------------------------------------------------- */

.kb-path-header { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.kb-path-progress-bar { height: .5rem; border-radius: 999px; background: var(--kokpit-border); overflow: hidden; max-width: 30rem; margin: 1rem auto 0; }
.kb-path-progress-bar span { display: block; height: 100%; background: var(--kokpit-success); border-radius: 999px; }

.kb-steps { max-width: 40rem; margin: 0 auto; list-style: none; padding: 0; display: grid; gap: .85rem; }
.kb-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
}
.kb-step:hover { border-color: var(--kokpit-accent); color: inherit; }
.kb-step__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.kb-step.is-read .kb-step__num { background: var(--kokpit-success); color: #fff; }
.kb-step h3 { font-size: .95rem; margin: 0; }
.kb-step p { font-size: .8rem; color: var(--kokpit-muted); margin: .15rem 0 0; }

/* --- Wyszukiwanie ------------------------------------------------------------ */

.search-result-list { display: grid; gap: 1rem; max-width: 46rem; margin: 1.5rem auto 0; }
.search-result-item {
    display: block;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}
.search-result-item:hover { border-color: var(--kokpit-accent); color: inherit; }
.search-result-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.search-result-item p { font-size: .9rem; color: var(--kokpit-muted); margin: 0; }

/* ==========================================================================
   Panel zalogowanego użytkownika (etap 4) — layout, pasek lotnisk, lista okazji
   ========================================================================== */

/* --- Nagłówek i dolna nawigacja mobile ------------------------------------ */

.app-header {
    background: #fff;
    border-bottom: 1px solid var(--kokpit-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.app-header__nav { gap: 1.5rem; }
.app-header__link { color: var(--kokpit-body); text-decoration: none; font-weight: 600; font-size: .92rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.app-header__link:hover { color: var(--kokpit-accent); }
.app-header__link.is-active { color: var(--kokpit-accent-dark); border-bottom-color: var(--kokpit-accent); }

.app-header__nav-mobile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-bottom: .75rem;
}
.app-header__nav-mobile .app-header__link {
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--kokpit-border);
}
.app-header__nav-mobile .app-header__link.is-active { border-bottom-color: var(--kokpit-border); }

.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--kokpit-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem 0 .4rem;
    min-height: 56px;
    color: var(--kokpit-muted);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 600;
}
.app-bottom-nav__item .icon { font-size: 1.25rem; line-height: 1; }
.app-bottom-nav__item.is-active { color: var(--kokpit-accent-dark); }
@media (max-width: 767.98px) {
    .app-main { padding-bottom: 4.5rem !important; }
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
}
.plan-badge--travel { background: #fef3c7; color: #92400e; }

.trial-bar {
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    font-size: .9rem;
}

/* --- Pasek wyboru lotnisk -------------------------------------------------- */

.airport-bar__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.airport-bar__tile {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1.5px solid var(--kokpit-accent);
    background: var(--kokpit-accent-light);
    color: var(--kokpit-accent-dark);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .85rem;
    white-space: nowrap;
    min-height: 44px;
}
.airport-bar__tile:hover { background: var(--kokpit-accent); color: #fff; }
.airport-bar__code { font-weight: 700; }
.airport-bar__city { color: inherit; opacity: .85; }
.airport-bar__add {
    display: flex;
    align-items: center;
    gap: .35rem;
    border: 1.5px dashed var(--kokpit-border);
    background: transparent;
    color: var(--kokpit-body);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .85rem;
    white-space: nowrap;
    min-height: 44px;
}
.airport-bar__add:hover { border-color: var(--kokpit-accent); color: var(--kokpit-accent); }
.airport-bar__counter { margin-top: .5rem; }
.airport-bar[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* --- Karty / stany puste ---------------------------------------------------- */

.panel-card {
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    box-shadow: var(--kokpit-shadow-sm);
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.panel-signal-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--kokpit-accent-light);
    border: 1px solid var(--kokpit-accent);
    border-radius: var(--kokpit-radius);
    padding: 1.1rem 1.25rem;
    flex-wrap: wrap;
}
.panel-signal-card .icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--kokpit-accent);
}
.panel-signal-card__body { flex: 1 1 260px; }
.panel-signal-card__body h2 { font-size: 1rem; margin-bottom: .15rem; }
.panel-signal-card__body p { margin: 0; color: var(--kokpit-body); font-size: .9rem; }
.panel-signal-card--done { background: #fff; border-style: dashed; }

.panel-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1.5px dashed var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    color: var(--kokpit-body);
}
.panel-empty-state .icon { font-size: 1.75rem; color: var(--kokpit-muted); display: block; margin-bottom: .5rem; }

/* --- Pozycja listy okazji (pulpit / archiwum) -------------------------------- */

.panel-offer-list { display: grid; gap: .75rem; }
.panel-offer {
    position: relative;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    overflow: hidden;
}
.panel-offer.is-unread { border-color: var(--kokpit-accent); box-shadow: 0 0 0 1px var(--kokpit-accent) inset; }
.panel-offer__link {
    display: flex;
    gap: 1rem;
    padding: .75rem;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
}
@media (max-width: 575.98px) {
    .panel-offer__link { flex-direction: column; }
}
.panel-offer__unread-dot {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--kokpit-accent);
}
.panel-offer__media {
    position: relative;
    flex: 0 0 160px;
    aspect-ratio: 16 / 11;
    border-radius: var(--kokpit-radius-sm);
    overflow: hidden;
    background: var(--kokpit-bg-soft);
}
.panel-offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-offer__media .offer-card__badge { position: absolute; top: .4rem; left: .4rem; }
.panel-offer__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.panel-offer__route { font-weight: 700; color: var(--kokpit-ink); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.panel-offer__dates, .panel-offer__carrier { font-size: .82rem; color: var(--kokpit-muted); }
.panel-offer__price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.panel-offer__also { margin-top: .15rem; }

.watched-badge {
    background: var(--kokpit-success);
    color: #fff;
    font-size: .65rem;
    text-transform: none;
    padding: .2rem .5rem;
}

/* --- Sekcja hotelowa pod okazją ---------------------------------------------- */

.hotel-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--kokpit-border);
    background: var(--kokpit-bg-soft);
    font-size: .85rem;
}
.hotel-strip__icon { color: var(--kokpit-accent); }
.hotel-strip__name { font-weight: 700; }
.hotel-strip__class { color: var(--kokpit-muted); }
.hotel-strip__rating { display: inline-flex; align-items: center; gap: .2rem; color: #b45309; }
.hotel-strip__total { margin-left: auto; color: var(--kokpit-ink); }

/* --- Wykres historii ceny trasy ----------------------------------------------- */

.price-history-chart {
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background: var(--kokpit-bg-soft);
}
.price-history-chart__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}
.price-history-chart__title { font-weight: 700; font-size: .9rem; }
.price-history-chart__badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}
.price-history-chart__badge--typical { background: #e2e8f0; color: var(--kokpit-muted); }
.price-history-chart__badge--high { background: #fee2e2; color: #991b1b; }
.price-history-chart__svg { width: 100%; height: 90px; display: block; }
.price-history-chart__line { stroke: var(--kokpit-accent); }
.price-history-chart__dot { fill: #16a34a; }
.price-history-chart__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    color: var(--kokpit-muted);
    margin-top: .3rem;
}
.price-history-chart__current { color: var(--kokpit-ink); }
.price-history-chart__current strong { color: #16a34a; }
.price-history-chart__no-chart { font-size: .82rem; color: var(--kokpit-muted); margin: 0; }
.price-history-chart__no-chart strong { color: var(--kokpit-ink); }

/* --- Skróty do narzędzi ------------------------------------------------------ */

.tools-shortcuts__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.tools-shortcuts__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--kokpit-border);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .82rem;
    text-decoration: none;
    color: var(--kokpit-body);
}
.tools-shortcuts__item:hover { border-color: var(--kokpit-accent); color: var(--kokpit-accent); }

/* --- Filtry archiwum okazji (/okazje) ---------------------------------------- */

.offer-filters__airports { display: flex; flex-wrap: wrap; gap: .4rem; }
.offer-filters__airport {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    padding: .3rem .5rem;
    font-size: .8rem;
}

/* --- Tabela wylotów na /okazja/{slug} ----------------------------------------- */

.table-offer-row--other { opacity: .55; }
.table-offer-row--mine { background: var(--kokpit-accent-light); }

/* --- Podpowiedzi kierunków --------------------------------------------------- */

.destination-autocomplete {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--kokpit-border);
    border-radius: var(--kokpit-radius-sm);
    box-shadow: var(--kokpit-shadow);
    margin-top: .25rem;
    overflow: hidden;
}
.destination-autocomplete__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .75rem;
    border: none;
    background: none;
    font-size: .88rem;
}
.destination-autocomplete__item:hover { background: var(--kokpit-bg-soft); }
.search-result-item mark { background: #fef08a; padding: 0 .1rem; border-radius: 2px; }