/* ==========================================================================
   START WEBSITE — review badges + the multi-step request modal

   The CTA block's buttons and stat cards reuse the home hero's own classes
   (.tk-hero-actions / .tk-hero-cta / .tk-hero-stats), so they are styled by
   the hero's stylesheet and need nothing here. Only the per-platform review
   card is new, and it is coloured from the site tokens.

   The modal reuses the booking modal's shell and tokens (.tk-bc-*, styled by
   tbtk-book-call.css) so the two read as the same component. Only the step
   bar, the single-select row and the feature grid live here.

   No hardcoded accent anywhere: the brand colour comes from
   --primary-color (#0073FC).
   ========================================================================== */

/* ---- CTA block layout ---------------------------------------------------- */
.tk-cta-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    margin: 26px 0 0;
}

/* ==========================================================================
   The modal
   ========================================================================== */

/* ---- step progress bar --------------------------------------------------- */
.tk-sw-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.tk-sw-steps li {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    transition: background .25s ease;
}

.tk-sw-steps li.is-done,
.tk-sw-steps li.is-active {
    background: var(--primary-color);
}

/* No light-theme overrides for the modal internals on purpose: the booking
   modal this one is built from has none either, so both dialogs stay dark in
   both themes and read as the same component. */

/* ---- single-select row: a round mark instead of the square checkbox ------ */
.tk-bc-option--radio .tk-bc-box {
    border-radius: 50%;
}

/* ---- two-column feature grid --------------------------------------------- */
.tk-sw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 575.98px) {
    .tk-sw-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- back link ----------------------------------------------------------- */
.tk-sw-back {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 6px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.tk-sw-back:hover {
    color: #fff;
}

/* ---- done step ----------------------------------------------------------- */
.tk-sw-phone {
    color: var(--primary-color);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.tk-sw-phone:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* ---- keeping the block intact inside other pages' heroes -----------------
   Two things other hero stylesheets did to this block:
   - collapsed it to width:0 as a flex child
   - stretched a bare <svg> to full container height (a 1656px blue blob over
     the web-design hero). Icons are <i> now, and these rules pin the sizes
     so no page sheet can blow them up again.
   -------------------------------------------------------------------------- */
.tk-cta-block {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}

.tk-cta-block .tk-hero-stat i {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    font-size: 14px;
    line-height: 1;
    color: var(--primary-color);
}

.tk-cta-block .tk-hero-stat svg,
.tk-cta-block .tk-cta-review img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    max-height: 20px;
}

/* ==========================================================================
   CTA block — centred, with the home page's badge surface on both rows

   The review cards and the stat badges now share one surface: the same
   gradient, border, radius and inset highlight the home hero's .tk-hero-stat
   uses, so the two rows read as one set rather than two components.

   Sizes are pinned here because this block sits inside other pages' heroes,
   whose own stylesheets otherwise shrink the badges (they came out cramped
   on the web-design hero) or stretch the icons.
   ========================================================================== */
.tk-cta-block {
    align-items: center;
    gap: 16px;
    text-align: center;
}

.tk-cta-block .tk-hero-actions,
.tk-cta-block .tk-cta-reviews,
.tk-cta-block .tk-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.tk-cta-block .tk-hero-actions {
    gap: 12px;
}

.tk-cta-block .tk-cta-reviews,
.tk-cta-block .tk-hero-stats {
    gap: 10px;
}

/* ---- the shared badge surface -------------------------------------------- */
.tk-cta-block .tk-cta-review,
.tk-cta-block .tk-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: linear-gradient(rgb(26, 30, 34), rgb(19, 22, 26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 3px 7px rgba(0, 0, 0, .4);
    text-decoration: none;
}

.tk-cta-block .tk-cta-review {
    padding: 10px 16px;
    transition: border-color .18s ease, transform .18s ease;
}

.tk-cta-block .tk-cta-review:hover {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    transform: translateY(-2px);
}

.tk-cta-block .tk-hero-stat {
    padding: 10px 16px;
}

/* ---- review card contents ------------------------------------------------ */
.tk-cta-block .tk-cta-review-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    line-height: 1.1;
}

.tk-cta-block .tk-cta-review-top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tk-cta-block .tk-cta-review-score {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.tk-cta-block .tk-cta-review-stars {
    display: inline-flex;
    gap: 1.5px;
    color: #f5a623;
    font-size: 11px;
}

.tk-cta-block .tk-cta-review-count {
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    font-weight: 600;
}

/* ---- stat badge contents: the reference's larger figure ------------------ */
.tk-cta-block .tk-hero-stat-number {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.tk-cta-block .tk-hero-stat-label {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

/* ---- light theme --------------------------------------------------------- */
html[data-tk-theme="light"] .tk-cta-block .tk-cta-review,
html[data-tk-theme="light"] .tk-cta-block .tk-hero-stat {
    border-color: rgba(15, 23, 42, .12);
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

html[data-tk-theme="light"] .tk-cta-block .tk-cta-review-score,
html[data-tk-theme="light"] .tk-cta-block .tk-hero-stat-number {
    color: #0a0d0f;
}

html[data-tk-theme="light"] .tk-cta-block .tk-cta-review-count,
html[data-tk-theme="light"] .tk-cta-block .tk-hero-stat-label {
    color: #5b6472;
}

/* ==========================================================================
   Short booking modal — the booked screen

   Both panels are the site blue, taken from --primary-color, not the accent
   in the reference mock.
   ========================================================================== */
.tk-bq-gift {
    width: 100%;
    margin: 18px 0 12px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    text-align: center;
}

.tk-bq-gift-line {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
}

.tk-bq-gift-line strong {
    font-weight: 800;
}

.tk-bq-gift-sub {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

.tk-bq-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 3px 7px rgba(0, 0, 0, .4);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease;
}

.tk-bq-call:hover,
.tk-bq-call:focus-visible {
    color: #fff;
    transform: translateY(-2px);
}

.tk-bq-call-top {
    font-size: 13px;
    font-weight: 700;
}

.tk-bq-call-number {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.1;
}

.tk-bq-call-sub {
    font-size: 12px;
    opacity: .85;
}