/**
 * Žluté Stránky — Ceník inzerce
 *
 * Public pricing page. Uses the site's own tokens (main.css) rather than
 * importing the business dashboard's look — this page is read by people who have
 * never seen the dashboard, and it should feel like the rest of the public site.
 */

/* ==================== HERO ==================== */

.cenik-hero {
    padding-top: calc(var(--header-height, 72px) + 3rem);
    padding-bottom: 3rem;
    background: var(--color-yellow-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.cenik-hero-inner { max-width: 46rem; }

.cenik-hero-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-yellow);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cenik-hero-title {
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.cenik-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-gray-700);
    max-width: 40rem;
}

.cenik-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.cenik-hero-note {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* ==================== BILLING TOGGLE ==================== */

.cenik-plans { padding: 3rem 0; }

.cenik-billing {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 auto 2rem;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
}

.cenik-billing-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-gray-600);
    cursor: pointer;
}

.cenik-billing-btn.is-active {
    background: var(--color-black);
    color: var(--color-white);
}

.cenik-billing-save {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-full);
    background: var(--color-yellow);
    color: var(--color-black);
    font-size: 0.6875rem;
    font-weight: 800;
}

/* The toggle is centred; the wrapper needs to allow that without a flex parent. */
.cenik-plans .container { text-align: center; }
.cenik-plans .cenik-grid,
.cenik-plans .cenik-vat-note { text-align: left; }

/* ==================== PLAN CARDS ==================== */

.cenik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.cenik-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

/* The featured plan lifts rather than shouts — a coloured wash would compete
   with the prices, which are the thing being compared. */
.cenik-card.is-featured {
    border-color: var(--color-black);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.cenik-card-flag {
    position: absolute;
    top: -0.6875rem;
    left: 1.5rem;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-yellow);
    font-size: 0.6875rem;
    font-weight: 800;
}

.cenik-card-head { margin-bottom: 0.25rem; }

.cenik-card-icon { font-size: 1.75rem; display: block; }

.cenik-card-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: 0.375rem;
}

.cenik-card-subname {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.cenik-card-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-gray-600);
}

.cenik-card-price {
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.cenik-price-value {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cenik-price-unit { font-size: 0.875rem; color: var(--color-gray-600); margin-left: 0.25rem; }

.cenik-price-note {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.cenik-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-700);
}

.cenik-card-features li { display: flex; gap: 0.5rem; align-items: flex-start; }
.cenik-card-features span { color: var(--color-success); font-weight: 800; }

/* Pushed to the bottom so buttons line up across cards of different heights. */
.cenik-card-cta { margin-top: auto; justify-content: center; }

.cenik-vat-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* ==================== WHY A HIGHER PLAN ==================== */
/* Ported from the inline <style> in pro/predplatne.php. Values kept as they were
   there — this block is the same argument in the same visual language, so a
   business owner who sees it in the dashboard later recognises it. The literal
   hexes are the originals; they sit outside this site's token palette but
   deliberately, since the section is meant to read as a warm aside rather than
   as another card in the page's own scheme. */

.cenik-why { padding: 0 0 3rem; }

.cenik-why-inner {
    background: linear-gradient(135deg, #FFF9E0 0%, #FFF4CC 100%);
    border: 1px solid #FCE8A6;
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
}

.cenik-why-header { margin-bottom: 0; }

.cenik-why-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #FCE8A6;
    color: #92700E;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.875rem;
}

.cenik-why-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F2937;
    line-height: 1.25;
    margin: 0 0 0.625rem;
}

.cenik-why-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: #4B5563;
    max-width: 780px;
    margin: 0 0 1.5rem;
}

.cenik-why-lead strong { color: #1F2937; }

.cenik-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cenik-why-card {
    background: #fff;
    border: 1px solid #F0E6C0;
    border-radius: 14px;
    padding: 1.125rem;
}

.cenik-why-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }

.cenik-why-card-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #1F2937;
    margin-bottom: 0.375rem;
}

.cenik-why-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B7280;
    margin: 0;
}

.cenik-why-note {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #7A5C0A;
    background: rgba(255, 255, 255, 0.55);
    border-left: 4px solid #F5C518;
    border-radius: 0 10px 10px 0;
    padding: 0.875rem 1.125rem;
}

@media (max-width: 640px) {
    .cenik-why-title { font-size: 1.25rem; }
    .cenik-why-inner { padding: 1.5rem 1.25rem; }
}

/* ==================== COMPARISON TABLE ==================== */

.cenik-compare { padding: 3rem 0; background: var(--color-gray-50); }

.cenik-section-title {
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.cenik-section-lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    max-width: 46rem;
    margin-bottom: 1.75rem;
}

.cenik-table-wrap {
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.cenik-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.cenik-table th,
.cenik-table td { padding: 0.75rem 0.875rem; text-align: left; }

.cenik-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-white);
    border-bottom: 2px solid var(--color-gray-200);
    font-weight: 800;
    white-space: nowrap;
}

.cenik-table thead th:not(:first-child),
.cenik-table td { text-align: center; }

.cenik-table tbody th {
    font-weight: 600;
    color: var(--color-gray-800);
    border-bottom: 1px solid var(--color-gray-100);
}

.cenik-table td { border-bottom: 1px solid var(--color-gray-100); }

.cenik-table-group th {
    background: var(--color-gray-50);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
    text-align: left;
}

.cenik-table-hint {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-gray-500);
    margin-top: 0.125rem;
}

/* Granted vs not. Grey rather than red for "not included": a plan lacking a
   feature is not an error, and a table of red crosses reads as a warning. */
.cenik-table .is-on  { color: var(--color-gray-900); font-weight: 700; }
.cenik-table .is-off { color: var(--color-gray-300); }

/* ==================== ALTERNATIVE PAYMENT ==================== */

.cenik-alt { padding: 3rem 0; }

.cenik-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.cenik-alt-card {
    padding: 1.75rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

.cenik-alt-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }

.cenik-alt-card h3 { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.5rem; }

.cenik-alt-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-gray-700);
}

.cenik-alt-rate {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    background: var(--color-yellow-light);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
}

.cenik-alt-example {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.cenik-alt-cta { margin-top: 1rem; }

.cenik-alt-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    max-width: 46rem;
}

/* ==================== CLOSING ==================== */

/* Yellow on black, inverted.
   The closing band was --color-black on a page that ends in a black footer, so
   the two merged into one dark slab and the final call to action stopped reading
   as a separate thing. Yellow is also simply the right colour for the last word
   on Žluté stránky. */
.cenik-close {
    padding: 3.5rem 0;
    background: var(--color-yellow);
    color: var(--color-black);
    text-align: center;
}

.cenik-close h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    color: var(--color-black);
}

/* Solid dark grey rather than a translucent black: at 72% opacity over yellow
   the text turned olive instead of reading as muted. */
.cenik-close p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-gray-800, #262626);
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

/* The button inverts with the band.
   .btn-primary is yellow-on-black site-wide, which would vanish here — a yellow
   button on a yellow field. Black-on-yellow keeps the same contrast pairing with
   the roles swapped, so it still reads as the primary action. */
.cenik-close .btn-primary {
    background: var(--color-black);
    color: var(--color-yellow);
    border-color: var(--color-black);
}

.cenik-close .btn-primary:hover {
    background: var(--color-gray-900, #171717);
    color: var(--color-yellow);
}

.cenik-close .btn-primary:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 3px;
}

/* ==================== UNAVAILABLE ==================== */

.cenik-unavailable {
    padding: 4rem 1.5rem;
    text-align: center;
}

.cenik-unavailable-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.cenik-unavailable h2 { font-size: 1.375rem; font-weight: 800; margin-bottom: 0.5rem; }
.cenik-unavailable p { color: var(--color-gray-600); }
.cenik-unavailable a { font-weight: 700; text-decoration: underline; }