/* =========================================================================
   MovinBosch — "App" interior page styles
   Shared by Find a Lift, Offer a Lift, How It Works & Safety, Pricing &
   FAQ, Join and Support — loaded only on those six templates
   (see inc/enqueue.php → movinbosch_is_app_template()).
   ========================================================================= */

.icon--sm { width: 1rem; height: 1rem; }

/* -- Interior page illustration (Partner With Us) -----------------------------
   One scene at the head of the page, spanning the full page shell so it reads
   as a deliberate banner rather than a small floating rectangle. Cropped to a
   banner height with object-fit rather than shown at its native 4:3, which
   would be far too tall here. See template-parts/global/illustration.php. */
.page-art { margin-bottom: 3rem; }
.page-art__img {
	display: block;
	width: 100%;
	height: clamp(13rem, 24vw, 20rem);
	object-fit: cover;
	object-position: center 62%;
}

/* -- Find a Lift -------------------------------------------------------------- */
.find-lift-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .find-lift-grid { grid-template-columns: 22rem 1fr; gap: 2.5rem; } }

.search-panel { position: sticky; top: 6rem; overflow: hidden; }
.search-panel__header { background: var(--ink); color: var(--cream); padding: 1.5rem; }
.search-panel__header h2 { color: var(--cream); font-size: 1.15rem; }
.search-panel__body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0; }
.search-panel__body .field + .field { margin-top: 1.25rem; }
.search-panel__body button[type="submit"] { margin-top: 1.75rem; }

/* .page-shell pulls the whole page up -2.5rem so an opaque .card can float
   over the dark hero band (search-panel does this on the left). This
   heading has no card/background of its own, so without this padding its
   text renders partly against the hero's own background instead of the
   page background, reading as garbled/low-contrast — restore its natural
   position by padding back exactly what the shell pulled up. */
.lift-results-count { padding-top: 2.5rem; margin-bottom: 1.5rem; }
#lift-results { display: flex; flex-direction: column; gap: 1.5rem; }

.lift-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid var(--ink); }
.lift-card__driver { display: flex; align-items: center; gap: 1rem; }
.lift-card__avatar { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--ink); background: var(--cream); flex-shrink: 0; }
.lift-card__avatar .icon { width: 1.4rem; height: 1.4rem; }
.lift-card__name-row { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; }
.lift-card__meta { font-size: 0.8rem; color: var(--gray-600); margin-top: 0.15rem; }
.lift-card__price { text-align: right; flex-shrink: 0; }
.lift-card__amount { display: block; font-family: var(--font-serif); font-size: 1.4rem; }
.lift-card__price small { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); }
.lift-card__body { display: grid; gap: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .lift-card__body { grid-template-columns: 1.4fr 1fr; } }
.lift-card__time { font-size: 0.8rem; color: var(--gray-600); margin: 0.15rem 0 0.5rem; }
.lift-card .route-line { font-size: 0.9rem; }
.pill--sm { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
.lift-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lift-card__tags .pill { display: inline-flex; align-items: center; gap: 0.3rem; }
.lift-card__request-panel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-300); }
.lift-card__request-panel[hidden] { display: none; }
.lift-card__request-summary { font-size: 0.85rem; color: var(--gray-700); margin-bottom: 1rem; }
.lift-card__request-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.empty-state__icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 auto 1.5rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--cream); }
.empty-state__icon .icon { width: 1.75rem; height: 1.75rem; }

#lift-request-panel { margin-top: 2rem; }
#lift-request-panel[hidden] { display: none; }

.advice-box { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.75rem; margin-top: 2rem; }
.advice-box__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 50%; }
.advice-box h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.advice-box p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.6; }

/* -- Offer a Lift --------------------------------------------------------------- */
.offer-lift-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .offer-lift-grid { grid-template-columns: 1fr 20rem; gap: 2.5rem; } }
.offer-form { padding: 1.75rem; }
@media (min-width: 640px) { .offer-form { padding: 2.5rem; } }
.offer-form__section + .offer-form__section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--gray-300); }
.offer-form__step { display: flex; align-items: center; gap: 0.85rem; font-size: 1.1rem; margin-bottom: 1.5rem; }
.offer-form__num { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; background: var(--ink); color: var(--cream); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.offer-form__submit { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--gray-300); display: flex; justify-content: flex-end; }
.amount-field { position: relative; }
.amount-field__prefix { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--gray-600); }
.amount-field .input { padding-left: 2rem; }

.verification-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray-300); }
.verification-block__title { font-size: 1rem; margin-bottom: 1rem; }
.verification-block__privacy { margin-bottom: 1.25rem; }
.verification-block .field + .field,
.verification-block .grid-2 + .grid-2 { margin-top: 1.25rem; }

.doc-on-file-notice { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; margin-bottom: 1.5rem; background: var(--cream); border: 1px solid var(--ink); }
.doc-on-file-notice__icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--cream); }
.doc-on-file-notice__icon .icon { width: 1rem; height: 1rem; }
.doc-on-file-notice p { font-size: 0.85rem; line-height: 1.5; }
.doc-on-file-notice p:first-child { margin-bottom: 0.15rem; }
.doc-on-file-notice .btn-link { flex-shrink: 0; margin-left: auto; align-self: center; }
.doc-on-file-notice--compact { padding: 0.85rem 1rem; margin-bottom: 0; gap: 0.75rem; }
.doc-on-file-notice--compact .doc-on-file-notice__icon { width: 1.4rem; height: 1.4rem; }
.doc-on-file-notice--compact p { font-size: 0.8rem; }
.doc-upload-fields[hidden] { display: none; }

.offer-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 6rem; }
.offer-sidebar__list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; font-size: 0.85rem; }
.offer-sidebar__list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.offer-sidebar__list .icon { flex-shrink: 0; margin-top: 0.15rem; }

/* -- How It Works & Safety -------------------------------------------------------- */
.step-timeline-grid { display: grid; gap: 3.5rem; }
@media (min-width: 900px) { .step-timeline-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.step-timeline { display: flex; flex-direction: column; gap: 2rem; position: relative; }
.step-timeline__item { display: flex; gap: 1.25rem; }
.step-timeline__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--font-serif); font-weight: 700; }

.verify-banner { text-align: center; max-width: 44rem; margin-inline: auto; margin-bottom: 3.5rem; }
.verify-banner__icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--cream); margin: 0 auto 1.5rem; }
.verify-banner__icon .icon { width: 1.75rem; height: 1.75rem; color: var(--cream); }
.verify-checks { display: grid; gap: 1.25rem; max-width: 40rem; margin: 0 auto 3.5rem; }
@media (min-width: 640px) { .verify-checks { grid-template-columns: 1fr 1fr; } }
.verify-checks__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.verify-checks__item .icon { color: var(--cream); flex-shrink: 0; margin-top: 0.2rem; }
.verify-checks__item p { color: var(--gray-400); font-size: 0.9rem; }
.safety-tips { display: grid; gap: 2rem; padding-top: 3rem; border-top: 1px solid rgba(242,241,238,0.15); }
@media (min-width: 768px) { .safety-tips { grid-template-columns: repeat(4, 1fr); } }

/* -- Pricing & FAQ ------------------------------------------------------------------ */
.price-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-card { position: relative; background: var(--white); border: 1px solid var(--ink); padding: 2rem; display: flex; flex-direction: column; }
.price-card--featured { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-lg); }
.price-card--featured .price-card__tagline { color: var(--gray-400); }
.price-card__flag { position: absolute; top: -0.9rem; right: 1.5rem; background: var(--mint); color: var(--ink); }
.price-card__amount-row { margin: 1rem 0; display: flex; align-items: baseline; gap: 0.35rem; }
.price-card__amount { font-family: var(--font-serif); font-size: 2.25rem; }
.price-card__period { font-size: 0.8rem; color: var(--gray-500); font-weight: 700; }
.price-card__tagline { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 1.75rem; flex: 1; }

/* -- Service page hero visual (Moves/Send/Airport/Storage) -------------------- */
.service-hero-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3.5rem 1.5rem; margin-bottom: 3rem; background: var(--ink); border: 1px solid var(--ink); background-image: repeating-linear-gradient(135deg, rgba(24,255,134,0.08) 0 2px, transparent 2px 18px); }
.service-hero-visual__icon { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--mint); }
.service-hero-visual__icon .icon { width: 2.5rem; height: 2.5rem; color: var(--ink); }
.service-hero-visual__label { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); }

.payment-process-note { display: flex; gap: 1.25rem; align-items: flex-start; max-width: 44rem; margin: 3rem auto 0; padding: 1.75rem; }
.payment-process-note__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 50%; }
.payment-process-note p { font-size: 0.9rem; color: var(--gray-700); line-height: 1.65; }

.corridor-block__intro { max-width: 40rem; margin-bottom: 2.5rem; }
/* Same fix as .lift-results-count above: only the Pricing & FAQ page's
   *first* use of this block sits directly under the dark .page-header,
   inside a .page-shell pulled up -2.5rem with no opaque .card to cover the
   gap — without this it renders partly against the hero's dark background
   (garbled/low-contrast heading). template-parts/pricing/corridor-table.php's
   later, mid-page use of the same block must NOT get this extra padding.

   The first 2.5rem only cancels the shell's negative pull, which left the
   heading sitting flush against the dark band; the rest is the actual
   breathing room between the band and "All Five Services at a Glance". */
.corridor-block__intro--top { padding-top: 5.5rem; }
.corridor-table-wrap { overflow-x: auto; }
.corridor-table th, .corridor-table td { text-align: left; padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-300); font-size: 0.9rem; }
.corridor-table thead th { background: var(--ink); color: var(--cream); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: none; }
.corridor-table tbody tr:last-child td { border-bottom: none; }

/* -- Join ---------------------------------------------------------------------------- */
.join-card { padding: 2.5rem 2rem; }
@media (min-width: 640px) { .join-card { padding: 3.5rem; } }
.join-card__progress { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.join-card__progress-step { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gray-300); color: var(--gray-400); font-weight: 700; font-size: 0.85rem; }
.join-card__progress-step.is-active, .join-card__progress-step.is-complete { border-color: var(--ink); color: var(--ink); background: var(--cream); }
.join-card__progress-line { width: 2.5rem; height: 1px; background: var(--gray-300); }

.join-step { display: none; }
.join-step.is-active { display: block; }
.join-step__nav { margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between; }

.role-cards { display: grid; gap: 1rem; }
@media (min-width: 480px) { .role-cards { grid-template-columns: repeat(3, 1fr); } }
.role-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.75rem 1rem; border: 1px solid var(--ink); background: var(--white); }
.role-card:hover, .role-card.is-selected { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.role-card__icon { width: 2rem; height: 2rem; }
.role-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; }
.role-card__desc { font-size: 0.75rem; color: var(--gray-500); }
.role-card.is-selected .role-card__desc, .role-card:hover .role-card__desc { color: var(--ink-soft); }

.join-verify-copy[hidden] { display: none; }

/* -- Auth (Login / Forgot / Reset Password) -------------------------------------------- */
.auth-card { padding: 2.5rem 2rem; max-width: 26rem; margin-inline: auto; }
@media (min-width: 640px) { .auth-card { padding: 3rem; } }
.auth-form__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.auth-card__footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-300); font-size: 0.85rem; color: var(--gray-600); }
.auth-card__footer .btn-link { display: inline-flex; margin-left: 0.35rem; }

/* -- Support ---------------------------------------------------------------------------- */
.whatsapp-quick-contact { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.whatsapp-quick-contact__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 50%; }
.whatsapp-quick-contact h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.whatsapp-quick-contact p { font-size: 0.8rem; color: var(--gray-600); }
.whatsapp-quick-contact .btn { margin-left: auto; }
.support-tabs__nav { display: inline-flex; border: 1px solid var(--ink); margin-bottom: 2.5rem; }
.support-tabs__btn { padding: 0.85rem 1.75rem; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--white); border: none; border-right: 1px solid var(--ink); }
.support-tabs__btn:last-child { border-right: none; }
.support-tabs__btn.is-active { background: var(--ink); color: var(--cream); }

/* Progressive enhancement: both panels render by default (no-JS fallback);
   once JS adds .js-tabs-enhanced, only the active panel shows. */
.support-panel { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--gray-300); }
.support-panel:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.js-tabs-enhanced .support-panel { display: none; margin: 0; padding: 0; border: none; }
.js-tabs-enhanced .support-panel.is-active { display: block; }