/* blocks.css — styling for content built in the admin block editor,
   plus the few extra front-end pieces the main stylesheet does not cover.

   Everything here uses the variables from style.css, so the block content
   your team writes always matches the site theme. Load this AFTER style.css. */

/* ============================================================
   1. Extra front-end pieces
   ============================================================ */

/* Backdrop behind the off-canvas mobile menu */
.nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 999;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 769px) { .nav-backdrop { display: none; } }

/* Two-step booking progress */
.steps-bar { display: flex; align-items: center; margin-bottom: 32px; }
.step-item { display: flex; align-items: center; gap: 12px; }
.step-dot {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 15px;
    background: var(--gray-light); color: var(--gray-mid);
    border: 2px solid transparent; flex-shrink: 0;
}
.step-text { font-weight: 700; font-size: 14px; color: var(--gray-mid); }
.step-item.active .step-dot { background: var(--yellow); color: var(--black); border-color: var(--black); }
.step-item.active .step-text { color: var(--black); }
.step-item.done .step-dot { background: var(--black); color: var(--yellow); }
.step-item.done .step-text { color: var(--black); }
.step-bar-line { flex: 1; height: 3px; background: var(--gray-light); margin: 0 16px; border-radius: 3px; min-width: 24px; }
.step-bar-line.filled { background: var(--yellow); }
@media (max-width: 480px) { .step-text { display: none; } }

/* Vehicle picker on booking step 2 */
.veh-pick { display: grid; gap: 14px; }
.veh-opt { position: relative; display: block; }
.veh-opt input { position: absolute; opacity: 0; pointer-events: none; }
.veh-box {
    display: flex; align-items: center; gap: 16px;
    padding: 16px; background: var(--white);
    border: 2px solid var(--gray-light); border-radius: var(--radius);
    cursor: pointer; transition: all var(--transition);
}
.veh-box:hover { border-color: var(--yellow-dark); }
.veh-opt input:checked + .veh-box {
    border-color: var(--yellow); background: rgba(197,245,0,0.06);
    box-shadow: 0 0 0 3px rgba(197,245,0,0.2);
}
.veh-opt input:focus-visible + .veh-box { outline: 3px solid var(--black); outline-offset: 2px; }
.veh-ico {
    width: 60px; height: 60px; flex-shrink: 0;
    background: var(--black); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--yellow); overflow: hidden;
}
.veh-ico img { width: 100%; height: 100%; object-fit: contain; }
.veh-meta { flex: 1; min-width: 0; }
.veh-meta h4 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.veh-meta .veh-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.veh-price { text-align: right; flex-shrink: 0; }
.veh-price strong { display: block; font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; }
.veh-price span { font-size: 12px; color: var(--gray-mid); }
@media (max-width: 560px) {
    .veh-box { flex-wrap: wrap; }
    .veh-price { text-align: left; width: 100%; padding-top: 8px; border-top: 1px solid var(--gray-light); }
}

/* Trip summary card */
.summary-card {
    background: var(--white); border: 2px solid var(--gray-light);
    border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 90px;
}
.summary-card h3 {
    font-family: var(--font-head); font-size: 1.1rem; font-weight: 700;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--yellow);
}
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--gray-light); }
.summary-line:last-of-type { border-bottom: none; }
.summary-line span { color: var(--gray-mid); }
.summary-line strong { text-align: right; font-weight: 700; }
.summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 14px; padding: 16px; border-radius: var(--radius); background: var(--black);
}
.summary-total span { color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600; }
.summary-total strong { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--yellow); }
.summary-note { font-size: 12.5px; color: var(--gray-mid); margin-top: 10px; line-height: 1.6; }
@media (max-width: 1024px) { .summary-card { position: static; } }

/* Page layout with sidebar */
.with-aside { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 1024px) { .with-aside { grid-template-columns: 1fr; } }

/* Booking success */
.success-badge {
    width: 84px; height: 84px; margin: 0 auto 22px;
    background: var(--yellow); border: 3px solid var(--black); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.ref-code {
    display: inline-block; font-family: var(--font-head); font-size: 1.35rem; font-weight: 800;
    background: var(--black); color: var(--yellow); padding: 12px 28px;
    border-radius: var(--radius); letter-spacing: 2px;
}

/* Pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pager-link {
    padding: 9px 16px; border: 2px solid var(--gray-light); border-radius: 10px;
    font-size: 14px; font-weight: 700; color: var(--black); background: var(--white);
    transition: all var(--transition);
}
.pager-link:hover { border-color: var(--yellow); }
.pager-link.is-current { background: var(--yellow); border-color: var(--yellow); }
.pager-gap { padding: 9px 4px; color: var(--gray-mid); }

/* Empty state */
.empty-state { text-align: center; padding: 56px 20px; color: var(--gray-mid); }
.empty-state i { font-size: 44px; color: var(--yellow); margin-bottom: 14px; display: block; }
.empty-state strong { display: block; font-family: var(--font-head); font-size: 1.15rem; color: var(--black); margin-bottom: 6px; }

/* Search bar on listing pages */
.search-bar { display: flex; gap: 10px; max-width: 520px; }
.search-bar .form-control { flex: 1; }

/* City / route link grid */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.link-grid a {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: var(--white);
    border: 2px solid var(--gray-light); border-radius: var(--radius);
    font-size: 14.5px; font-weight: 600; color: var(--black);
    transition: all var(--transition);
}
.link-grid a:hover { border-color: var(--yellow); background: rgba(197,245,0,0.05); }
.link-grid a i { color: var(--yellow-dark); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.field-error { display: block; color: #c62828; font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.form-control.has-error { border-color: #e57373; }


/* ============================================================
   2. Block editor content
   Authors never write CSS. This file decides how their words look.
   ============================================================ */

.owt-content { font-size: 16px; line-height: 1.8; color: var(--gray-dark); }
.owt-content .blk { margin: 0 0 28px; }
.owt-content .blk:last-child { margin-bottom: 0; }

/* Headings */
.owt-content .blk-heading { margin-top: 40px; }
.owt-content .blk-heading:first-child { margin-top: 0; }
.owt-content .blk-eyebrow {
    display: inline-flex; align-items: center;
    background: var(--yellow); color: var(--black);
    padding: 4px 14px; border-radius: 50px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 12px;
}
.owt-content .blk-h { font-family: var(--font-head); font-weight: 800; color: var(--black); line-height: 1.25; margin: 0; }
.owt-content h2.blk-h { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.owt-content h3.blk-h { font-size: 1.25rem; }
.owt-content h4.blk-h { font-size: 1.08rem; }

/* Prose */
.owt-content .blk-prose > :first-child { margin-top: 0; }
.owt-content .blk-prose > :last-child { margin-bottom: 0; }
.owt-content .blk-prose p { margin: 0 0 16px; }
.owt-content .blk-prose strong { color: var(--black); font-weight: 700; }
.owt-content .blk-prose a { color: var(--yellow-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.owt-content .blk-prose a:hover { color: var(--black); }
.owt-content .blk-prose ul, .owt-content .blk-prose ol { margin: 0 0 16px 22px; }
.owt-content .blk-prose ul { list-style: disc; }
.owt-content .blk-prose ol { list-style: decimal; }
.owt-content .blk-prose li { margin-bottom: 7px; }

/* Lists */
.owt-content .blk-list { padding-left: 0; list-style: none; }
.owt-content .blk-list li { position: relative; padding-left: 34px; margin-bottom: 11px; }
.owt-content .blk-list--check li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--yellow); color: var(--black);
    font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.owt-content .blk-list--bullet li::before {
    content: ""; position: absolute; left: 7px; top: 11px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
}
.owt-content ol.blk-list { counter-reset: blkli; }
.owt-content .blk-list--number li { counter-increment: blkli; }
.owt-content .blk-list--number li::before {
    content: counter(blkli);
    position: absolute; left: 0; top: 1px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--black); color: var(--yellow);
    font-family: var(--font-head); font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* Buttons */
.owt-content .blk-btnwrap--center { text-align: center; }
.owt-content .blk-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; border-radius: var(--radius);
    font-weight: 700; font-size: 15px; line-height: 1;
    border: 2px solid transparent; transition: all var(--transition);
}
.owt-content .blk-btn--primary { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.owt-content .blk-btn--primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); transform: translateY(-1px); }
.owt-content .blk-btn--ghost { background: transparent; color: var(--black); border-color: var(--gray-light); }
.owt-content .blk-btn--ghost:hover { border-color: var(--black); }
.owt-content .blk-btn--call { background: var(--black); color: var(--yellow); border-color: var(--black); }
.owt-content .blk-btn--call:hover { background: var(--gray-dark); }

/* Image */
.owt-content .blk-figure { margin-left: 0; margin-right: 0; }
.owt-content .blk-figure img { width: 100%; border-radius: var(--radius-lg); display: block; }
.owt-content .blk-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--gray-mid); text-align: center; }

/* Fare table — reuses the site tariff look */
.owt-content .blk-tablewrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.owt-content .blk-fare { width: 100%; border-collapse: collapse; background: var(--white); }
.owt-content .blk-fare caption { caption-side: top; text-align: left; padding: 0 0 12px; font-size: 13.5px; color: var(--gray-mid); }
.owt-content .blk-fare th {
    background: var(--black); color: var(--yellow);
    padding: 15px 18px; text-align: left; white-space: nowrap;
    font-family: var(--font-head); font-size: 14px; font-weight: 700;
}
.owt-content .blk-fare td { padding: 14px 18px; border-bottom: 1px solid var(--gray-light); font-size: 14.5px; }
.owt-content .blk-fare tbody tr:last-child td { border-bottom: none; }
.owt-content .blk-fare tbody tr:hover { background: rgba(197,245,0,0.06); }
.owt-content .blk-fare td:last-child { font-family: var(--font-head); font-weight: 700; }

@media (max-width: 640px) {
    .owt-content .blk-fare thead { display: none; }
    .owt-content .blk-fare, .owt-content .blk-fare tbody,
    .owt-content .blk-fare tr, .owt-content .blk-fare td { display: block; width: 100%; }
    .owt-content .blk-fare tr { border-bottom: 2px solid var(--gray-light); padding: 8px 0; }
    .owt-content .blk-fare td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 7px 16px; }
    .owt-content .blk-fare td::before {
        content: attr(data-label); font-size: 13px; color: var(--gray-mid); font-weight: 700;
    }
}

/* FAQ */
.owt-content .blk-faq-item {
    background: var(--white); border: 2px solid var(--gray-light);
    border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
    transition: border-color var(--transition);
}
.owt-content .blk-faq-item[open] { border-color: var(--yellow); }
.owt-content .blk-faq-item summary {
    cursor: pointer; list-style: none; position: relative;
    padding: 16px 52px 16px 20px;
    font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--black);
}
.owt-content .blk-faq-item summary::-webkit-details-marker { display: none; }
.owt-content .blk-faq-item summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--yellow); color: var(--black); font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--transition);
}
.owt-content .blk-faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.owt-content .blk-faq-a { padding: 0 20px 18px; font-size: 15px; color: var(--gray-mid); }

/* Call band */
.owt-content .blk-cta {
    background: var(--black); border-radius: var(--radius-lg);
    padding: 32px; position: relative; overflow: hidden;
}
.owt-content .blk-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(197,245,0,0.12) 0%, transparent 60%);
}
.owt-content .blk-cta > * { position: relative; }
.owt-content .blk-cta-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--white); margin: 0 0 8px; }
.owt-content .blk-cta-text { color: rgba(255,255,255,0.7); margin: 0 0 20px; }
.owt-content .blk-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.owt-content .blk-cta .blk-btn--call {
    background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3);
}
.owt-content .blk-cta .blk-btn--call:hover { border-color: var(--yellow); color: var(--yellow); background: transparent; }

/* Related route links */
.owt-content .blk-routes-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 14px; }
.owt-content .blk-routes-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.owt-content .blk-routes-grid a {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: var(--white);
    border: 2px solid var(--gray-light); border-radius: var(--radius);
    font-size: 14.5px; font-weight: 600; color: var(--black);
    transition: all var(--transition);
}
.owt-content .blk-routes-grid a::before {
    content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 10px; color: var(--yellow-dark);
}
.owt-content .blk-routes-grid a:hover { border-color: var(--yellow); background: rgba(197,245,0,0.05); }

@media (prefers-reduced-motion: reduce) { .owt-content *, .nav-backdrop { transition: none !important; } }