/* TFAST Hub — Phase A design system
   Tokens + marketing chrome + component baseline
   Loaded after style.css so it wins on public + shared patterns. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Brand */
    --tfast-brand: #5B5BD6;
    --tfast-brand-hover: #4A4AC0;
    --tfast-brand-soft: rgba(91, 91, 214, 0.12);
    --tfast-accent: #C8F06A;
    --tfast-ink: #0B1F2A;
    --tfast-ink-soft: #3D5160;
    --tfast-muted: #5F6F86;
    --tfast-line: #E6EAF0;
    --tfast-canvas: #F6F7F9;
    --tfast-surface: #FFFFFF;
    --tfast-success: #1F9D55;
    --tfast-warning: #D97706;
    --tfast-danger: #DC2626;
    --tfast-navy: #0B1F2A;
    --tfast-nav: #0B1F2A;
    --tfast-radius: 12px;
    --tfast-radius-lg: 16px;
    --tfast-shadow: 0 1px 2px rgba(11, 31, 42, 0.06), 0 8px 24px rgba(11, 31, 42, 0.06);
    --tfast-shadow-lg: 0 18px 40px rgba(11, 31, 42, 0.12);
    --tfast-space-1: 4px;
    --tfast-space-2: 8px;
    --tfast-space-3: 12px;
    --tfast-space-4: 16px;
    --tfast-space-5: 24px;
    --tfast-space-6: 32px;
    --tfast-space-7: 48px;
    --tfast-space-8: 64px;
    --tfast-font-body: "IBM Plex Sans", system-ui, sans-serif;
    --tfast-font-display: "Plus Jakarta Sans", "IBM Plex Sans", system-ui, sans-serif;

    /* Bridge legacy tokens used across the theme */
    --primary-color: var(--tfast-brand);
    --base: var(--tfast-brand);
    --navbar-active: var(--tfast-accent);
    --heading-color: var(--tfast-ink);
    --black: var(--tfast-ink);
    --body-color: var(--tfast-ink-soft);
    --btn-hover-bg: var(--tfast-brand-hover);
    --input-color: #F8FAFC;
    --bg-color1: var(--tfast-canvas);
    --white: var(--tfast-surface);
    --border-color1: var(--tfast-line);
    --primary-color-opacity-low: var(--tfast-brand-soft);
    --gradient-bg: var(--tfast-canvas);
    --gradient-bg2: var(--tfast-surface);
    --soft-green: var(--tfast-accent);
    --vivid-orange: var(--tfast-warning);
    --yellow: var(--tfast-accent);
    --orange: var(--tfast-warning);
    --body-font: var(--tfast-font-body);
    --heading-font: var(--tfast-font-display);
    --transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

html {
    scroll-padding-top: 88px;
}

body {
    background-color: var(--tfast-canvas);
    color: var(--tfast-ink-soft);
    font-family: var(--tfast-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.banner-content h1,
.banner-content h2 {
    color: var(--tfast-ink);
    font-family: var(--tfast-font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

h1, .hero-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

h2, .section-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    max-width: 22ch;
}

p, .cmn-para-text, .hero-description {
    color: var(--tfast-ink-soft);
    line-height: 1.65;
    font-size: 1.05rem;
}

a {
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(91, 91, 214, 0.35);
    outline-offset: 2px;
}

/* ---------- Buttons (one primary language) ---------- */
.cmn-btn,
.btn-primary,
.submit-btn,
.tfast-btn-primary,
button[type="submit"].cmn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--tfast-brand) !important;
    color: #fff !important;
    font-family: var(--tfast-font-display);
    font-weight: 650;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: var(--transition);
}

.cmn-btn:hover,
.btn-primary:hover,
.submit-btn:hover,
.tfast-btn-primary:hover,
button[type="submit"].cmn-btn:hover {
    background: var(--tfast-brand-hover) !important;
    color: #fff !important;
    transform: none;
    box-shadow: none !important;
}

.cmn-btn2,
.tfast-btn-secondary,
a.cmn-btn.tfast-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border: 1.5px solid var(--tfast-brand) !important;
    border-radius: 12px;
    background: transparent !important;
    color: var(--tfast-brand) !important;
    font-family: var(--tfast-font-display);
    font-weight: 650;
    box-shadow: none !important;
}

.cmn-btn2:hover,
.tfast-btn-secondary:hover,
a.cmn-btn.tfast-btn-secondary:hover {
    background: var(--tfast-brand-soft) !important;
    color: var(--tfast-brand-hover) !important;
}

.tfast-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--tfast-ink-soft);
    font-weight: 600;
    text-decoration: none;
}

.tfast-btn-ghost:hover {
    color: var(--tfast-brand);
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.select2-container .select2-selection--single {
    min-height: 48px;
    border: 1px solid #CFD8E6;
    border-radius: 12px;
    background-color: #fff;
    color: var(--tfast-ink);
    box-shadow: none;
    font-size: 1rem;
}

textarea.form-control {
    min-height: 120px;
}

.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection {
    border-color: var(--tfast-brand);
    box-shadow: 0 0 0 3px var(--tfast-brand-soft);
}

.form-control::placeholder {
    color: #8B97A8;
    opacity: 1;
}

/* ---------- Surfaces ---------- */
.card,
.cmn-box2,
.cmn-box3,
.cmn-box4,
.accordion-item,
.modal-content,
.service-box,
.feature-box,
.blog-box,
.testimonial-box {
    border: 1px solid var(--tfast-line) !important;
    border-radius: var(--tfast-radius-lg) !important;
    background: var(--tfast-surface) !important;
    box-shadow: none !important;
}

.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand) !important;
    font-family: var(--tfast-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-title {
    margin-bottom: 1rem;
}

/* ---------- Navbar ---------- */
.navbar {
    min-height: 72px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: rgba(11, 31, 42, 0.96) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.navbar.transparent,
.navbar.fixed-top {
    background: rgba(11, 31, 42, 0.96) !important;
}

.navbar .navbar-brand img,
.navbar .logo {
    max-height: 40px;
    width: auto;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-family: var(--tfast-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: 8px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

.navbar .nav-link.active {
    color: var(--tfast-accent) !important;
}

.navbar .login-btn {
    min-height: 42px;
    padding: 0.45rem 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: 650;
}

.navbar .login-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.navbar .tfast-nav-cta {
    min-height: 42px !important;
    padding: 0.45rem 1.1rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--tfast-brand) !important;
    color: #fff !important;
    font-family: var(--tfast-font-display);
    font-weight: 700 !important;
    font-size: 0.9rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.navbar .tfast-nav-cta:hover {
    background: var(--tfast-brand-hover) !important;
    color: #fff !important;
}

.navbar .language-box,
.navbar .custom-nav .form-select {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    min-height: 40px;
    border-radius: 10px;
}

.navbar-toggler {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
}

.offcanvas {
    background: var(--tfast-navy);
    color: #fff;
}

.offcanvas .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dropdown-menu,
.user-dropdown,
.notifications {
    border: 1px solid var(--tfast-line);
    border-radius: 12px;
    box-shadow: var(--tfast-shadow-lg);
}

/* ---------- Hero ---------- */
.hero-section,
.banner-section {
    background: var(--tfast-surface);
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.hero-section .hero-section-inner {
    background: transparent;
    padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.hero-content .hero-description {
    max-width: 38rem;
    margin-bottom: 1.5rem;
}

.hero-section .btn-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.hero-section .btn-area .video-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--tfast-line);
    background: #fff;
    color: var(--tfast-brand);
}

.hero-section .btn-area > p {
    width: 100%;
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--tfast-muted);
}

.hero-section .tfast-hero-apps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.hero-section .tfast-hero-apps img {
    height: 40px;
    width: auto;
}

.hero-section .tfast-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tfast-line);
    color: var(--tfast-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.hero-section .tfast-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- Footer ---------- */
.footer-section {
    background: var(--tfast-navy) !important;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
}

.footer-section .bg-img-overlay {
    opacity: 0.08 !important;
}

.footer-section .widget-title {
    color: #fff !important;
    font-family: var(--tfast-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section li,
.footer-section a {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.92rem;
}

.footer-section a:hover {
    color: var(--tfast-accent) !important;
}

.footer-section .logo {
    max-height: 40px;
}

.footer-section .social-area a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- Misc polish ---------- */
.badge {
    border-radius: 6px;
    font-weight: 650;
}

.table {
    color: var(--tfast-ink-soft);
}

.table thead th {
    color: var(--tfast-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cookies-alert {
    max-width: 400px;
    padding: 1.25rem;
    border: 1px solid var(--tfast-line);
    border-radius: var(--tfast-radius-lg);
    box-shadow: var(--tfast-shadow-lg);
    text-align: left;
}

#site-loader {
    background: var(--tfast-navy) !important;
}

#site-loader .site-loader__spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: var(--tfast-accent);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 991.98px) {
    .navbar .tfast-nav-cta {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.82rem;
    }
}

@media (max-width: 767.98px) {
    h1, .hero-title {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
    }

    .hero-section .btn-area {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-section .btn-area .cmn-btn,
    .hero-section .btn-area .tfast-btn-secondary {
        width: 100%;
    }

    .hero-section .btn-area .video-play-btn {
        display: none;
    }

    .cookies-alert {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* ========== Phase B: homepage + free-growth + order sticky ========== */

/* Homepage sections — calmer rhythm */
.service-section,
.how-it-works-section,
.feature-section,
.why-choose-us-section,
.achivement-section,
.testimonial-section,
.blog-section,
.payment-partner-section,
.about-section,
.faq-section {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.map-section {
    display: none !important; /* reduce noise; contact page covers location */
}

.service-section .cmn-box,
.feature-section .cmn-box,
.how-it-works-section .cmn-box2 {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--tfast-line);
    border-radius: var(--tfast-radius-lg);
    background: var(--tfast-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.service-section .cmn-box:hover,
.feature-section .cmn-box:hover,
.how-it-works-section .cmn-box2:hover {
    border-color: rgba(91, 91, 214, 0.35);
    box-shadow: var(--tfast-shadow);
}

.service-section .icon-area,
.how-it-works-section .icon-box {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand);
    margin-bottom: 1rem;
}

.service-section .title,
.how-it-works-section .content-box h5 {
    font-family: var(--tfast-font-display);
    font-weight: 700;
    color: var(--tfast-ink);
}

.service-section .bg-img-overlay,
.how-it-works-section .rotate-group-images {
    opacity: 0.9;
}

/* Free growth */
.tfast-free-growth {
    background: var(--tfast-canvas);
}

.tfast-fg-card {
    border: 1px solid var(--tfast-line) !important;
    border-radius: var(--tfast-radius-lg) !important;
    box-shadow: none !important;
    background: var(--tfast-surface) !important;
}

.tfast-fg-steps {
    padding-left: 1.15rem;
    margin: 0;
}

.tfast-fg-steps li {
    margin-bottom: 0.75rem;
    color: var(--tfast-ink-soft);
    padding-left: 0.25rem;
}

.tfast-fg-steps li:last-child {
    margin-bottom: 0;
}

.tfast-fg-empty {
    border: 1px dashed var(--tfast-line);
    border-radius: var(--tfast-radius-lg);
    background: var(--tfast-surface);
    padding: 1.5rem;
    color: var(--tfast-ink-soft);
}

/* Order workspace */
.order-workspace {
    padding-bottom: 5.5rem; /* room for mobile sticky bar */
}

@media (min-width: 992px) {
    .order-workspace {
        padding-bottom: 0;
    }

    .order-summary-sticky {
        position: sticky;
        top: 96px;
        z-index: 5;
    }
}

.order-summary-card .card-header h4 {
    margin: 0;
    font-family: var(--tfast-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tfast-ink);
    text-transform: none;
}

.order-summary-card .card-header {
    border-bottom: 1px solid var(--tfast-line);
    background: transparent;
    padding: 1rem 1.25rem;
}

.order-submit-btn {
    width: 100%;
}

/* Mobile sticky checkout */
.order-mobile-checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--tfast-line);
    box-shadow: 0 -8px 24px rgba(11, 31, 42, 0.08);
    backdrop-filter: blur(10px);
}

.order-mobile-checkout__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.order-mobile-checkout__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tfast-muted);
}

.order-mobile-checkout__total {
    font-family: var(--tfast-font-display);
    font-size: 1.05rem;
    color: var(--tfast-ink);
    line-height: 1.2;
}

.order-mobile-checkout__total small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tfast-muted);
    margin-left: 0.2rem;
}

.order-mobile-checkout__service {
    font-size: 0.75rem;
    color: var(--tfast-muted);
    max-width: 100%;
}

.order-mobile-checkout__btn {
    flex: 0 0 auto;
    min-height: 48px !important;
    min-width: 132px;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Keep bottom app nav from covering checkout on small screens */
@media (max-width: 991.98px) {
    .bottom-nav {
        bottom: 72px;
    }
    body {
        padding-bottom: 0;
    }
}

[v-cloak] {
    display: none !important;
}

/* ========== Phase C: dashboard next-actions + empty states ========== */
.tfast-next-actions__title {
    font-family: var(--tfast-font-display);
    font-weight: 700;
    color: var(--tfast-ink);
}

.tfast-action-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    min-height: 88px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tfast-line);
    border-radius: var(--tfast-radius-lg);
    background: var(--tfast-surface);
    color: inherit;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tfast-action-card:hover {
    border-color: rgba(91, 91, 214, 0.4);
    box-shadow: var(--tfast-shadow);
    color: inherit;
    transform: translateY(-1px);
}

.tfast-action-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand);
    font-size: 1.15rem;
}

.tfast-action-card--accent .tfast-action-card__icon {
    background: rgba(200, 240, 106, 0.35);
    color: var(--tfast-ink);
}

.tfast-action-card--muted .tfast-action-card__icon {
    background: #EEF2F6;
    color: var(--tfast-muted);
}

.tfast-action-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tfast-action-card__body strong {
    font-family: var(--tfast-font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--tfast-ink);
}

.tfast-action-card__body span {
    font-size: 0.82rem;
    color: var(--tfast-muted);
    line-height: 1.35;
}

.tfast-action-card__arrow {
    flex: 0 0 auto;
    color: var(--tfast-muted);
    font-size: 0.9rem;
}

.tfast-action-card:hover .tfast-action-card__arrow {
    color: var(--tfast-brand);
}

.tfast-empty-state {
    border: 1px solid var(--tfast-line) !important;
    border-radius: var(--tfast-radius-lg) !important;
}

.tfast-empty-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand);
    font-size: 1.75rem;
}

.tfast-inline-banner {
    padding: 1rem 1.15rem;
    border: 1px solid var(--tfast-line);
    border-radius: var(--tfast-radius-lg);
    background: var(--tfast-surface);
    color: var(--tfast-ink-soft);
}

.breadcrumb-area .title {
    font-family: var(--tfast-font-display);
    font-weight: 700;
    text-transform: none;
    color: var(--tfast-ink);
}

/* ========== Service searchable picker ========== */
.service-picker__wrap {
    position: relative;
}
.service-picker__wrap.is-disabled {
    opacity: 0.65;
    pointer-events: none;
}
.service-picker__control {
    position: relative;
    display: flex;
    align-items: center;
}
.service-picker__search-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    color: var(--tfast-muted);
    pointer-events: none;
}
.service-picker__input {
    padding-left: 2.35rem !important;
    padding-right: 4rem !important;
}
.service-picker__chevron {
    position: absolute;
    right: 14px;
    color: var(--tfast-muted);
    pointer-events: none;
    transition: transform .15s ease;
}
.service-picker__wrap.is-open .service-picker__chevron {
    transform: rotate(180deg);
}
.service-picker__clear {
    position: absolute;
    right: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--tfast-muted);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.service-picker__clear:hover { color: var(--tfast-ink); background: #EEF2F6; }
.service-picker__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: 280px;
    overflow: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--tfast-line);
    border-radius: 12px;
    background: var(--tfast-surface);
    box-shadow: var(--tfast-shadow-lg);
}
.service-picker__option {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    cursor: pointer;
}
.service-picker__option:hover,
.service-picker__option.is-highlight {
    background: #F3F5FA;
}
.service-picker__option.is-active {
    background: var(--tfast-brand-soft);
}
.service-picker__option-title {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--tfast-ink);
    line-height: 1.3;
}
.service-picker__option-meta {
    font-size: 0.78rem;
    color: var(--tfast-muted);
}
.service-picker__empty {
    padding: 1rem;
    text-align: center;
    color: var(--tfast-muted);
    font-size: 0.9rem;
}
.service-picker__hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--tfast-muted);
}
/* Inline pay / balance strip */
.order-balance-strip { padding: .85rem 1rem; border: 1px solid var(--tfast-line); border-radius: 12px; background: #F8FAFC; }
.order-balance-strip__row { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; color: var(--tfast-ink-soft); padding: .2rem 0; }
.order-balance-strip__row strong { color: var(--tfast-ink); font-family: var(--tfast-font-display); }
.order-balance-strip__row.is-short strong { color: var(--tfast-danger); }
.order-pay-panel { margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(220,38,38,.25); border-radius: 14px; background: #FEF2F2; }
.order-pay-panel__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; color: #991B1B; }
.order-pay-panel__close { border: 0; background: transparent; color: #991B1B; width: 32px; height: 32px; }
.order-pay-panel__msg { margin: 0 0 .75rem; font-size: .9rem; color: #7F1D1D; }
.order-pay-panel__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .85rem; font-size: .85rem; color: #7F1D1D; }
.order-pay-panel__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.order-pay-panel__actions .cmn-btn { min-height: 44px !important; }
.qty-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}.qty-presets__btn{min-height:36px;padding:.35rem .75rem;border:1px solid var(--tfast-line);border-radius:999px;background:#fff;color:var(--tfast-ink-soft);font-size:.82rem;font-weight:650}.qty-presets__btn:hover,.qty-presets__btn.is-active{border-color:var(--tfast-brand);background:var(--tfast-brand-soft);color:var(--tfast-brand)}.qty-presets__hint{margin:.4rem 0 0;font-size:.8rem;color:var(--tfast-muted)}.order-advanced-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:.65rem .9rem;border:1px dashed var(--tfast-line);border-radius:12px;background:#F8FAFC;color:var(--tfast-ink-soft);font-weight:650;font-size:.9rem}.order-advanced-toggle:hover{border-color:rgba(91,91,214,.35);color:var(--tfast-brand)}.order-advanced-block{width:100%}

.order-catalogue-skeleton{padding:.5rem 0}.order-catalogue-skeleton__bar,.order-catalogue-skeleton__line{border-radius:10px;background:linear-gradient(90deg,#eef2f7 25%,#f7f9fc 37%,#eef2f7 63%);background-size:400% 100%;animation:tfast-shimmer 1.2s ease infinite}.order-catalogue-skeleton__bar{height:48px;margin-bottom:.85rem}.order-catalogue-skeleton__line{height:44px;margin-bottom:.65rem}.order-catalogue-skeleton__line--short{width:62%}.order-catalogue-skeleton__text{margin:.75rem 0 0;font-size:.85rem;color:var(--tfast-muted)}@keyframes tfast-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}.order-success-header{background:var(--tfast-navy)!important}.order-success-accent{color:var(--tfast-brand)!important;font-size:1.1rem}#orderSuccessModal .modal-content{border:1px solid var(--tfast-line)!important;border-radius:16px!important;box-shadow:var(--tfast-shadow-lg)!important}

/* Phase H: final CTA + auth */
.tfast-final-cta{padding:clamp(3rem,6vw,4.5rem) 0;background:var(--tfast-navy);color:#fff}
.tfast-final-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.04)}
.tfast-final-cta__title{margin:0 0 .4rem;color:#fff!important;font-family:var(--tfast-font-display);font-size:clamp(1.5rem,3vw,2rem)}
.tfast-final-cta__text{margin:0;color:rgba(255,255,255,.75)!important;max-width:36rem}
.tfast-final-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.tfast-final-cta .tfast-btn-secondary{border-color:rgba(255,255,255,.35)!important;color:#fff!important}
.tfast-final-cta .tfast-btn-secondary:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
.payment-partner-section{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.login-signup-page{min-height:calc(100vh - 80px);display:flex;align-items:center;padding:3rem 0;background-color:var(--tfast-canvas)!important;background-size:cover;background-position:center}
.login-signup-page .login-signup-form{border:1px solid var(--tfast-line);border-radius:20px;background:var(--tfast-surface);box-shadow:var(--tfast-shadow-lg);padding:2rem 1.75rem}
.login-signup-page .section-header h3{font-family:var(--tfast-font-display);font-weight:750;color:var(--tfast-ink);margin-bottom:.5rem}
.login-signup-page .section-header .description{color:var(--tfast-muted);margin-bottom:1.25rem}
.login-signup-page .cmn-btn3,.login-signup-page .social-btn{border:1px solid var(--tfast-line)!important;border-radius:12px!important;background:#fff!important;color:var(--tfast-ink)!important;box-shadow:none!important;min-height:44px}
.login-signup-page .cmn-btn3:hover,.login-signup-page .social-btn:hover{border-color:rgba(91,91,214,.35)!important;background:var(--tfast-brand-soft)!important}
.login-signup-page .form-control{min-height:48px;border-radius:12px}
.login-signup-page .cmn-btn{width:100%;min-height:48px!important}
.login-signup-page a{color:var(--tfast-brand);font-weight:600}
@media (max-width:767.98px){.tfast-final-cta__inner{padding:1.5rem}.tfast-final-cta__actions{width:100%}.tfast-final-cta__actions .cmn-btn{width:100%}.login-signup-page{padding:1.5rem 0 2.5rem;align-items:flex-start}}
/* Service sort chips */
.service-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.55rem;
}
.service-sort__btn {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--tfast-line);
    border-radius: 999px;
    background: #fff;
    color: var(--tfast-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.service-sort__btn:hover,
.service-sort__btn.is-active {
    border-color: var(--tfast-brand);
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand);
}
/* Service badges + register spacing */
.service-picker__option-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.service-picker__badge {
    flex: 0 0 auto;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--tfast-brand-soft);
    color: var(--tfast-brand);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.service-picker__badge--fast {
    background: rgba(31, 157, 85, 0.14);
    color: var(--tfast-success);
}
.login-signup-page .login-signup-form .form-label {
    font-weight: 650;
    color: var(--tfast-ink-soft);
    font-size: 0.9rem;
}
.login-signup-page .divider {
    margin: 1.25rem 0;
    opacity: 0.5;
}
.login-signup-page .section-header h3 {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
}