/* CartLane theme layer: custom CSS only, Tailwind tokens carry component colors. */

.cl-theme-toggle {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--cl-border) / 0.9);
    border-radius: 999px;
    background: rgb(var(--cl-surface) / 0.8);
    color: rgb(var(--cl-muted));
    box-shadow: var(--cl-shadow-card);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cl-theme-toggle:hover,
.cl-theme-toggle:focus-visible {
    border-color: rgb(var(--cl-brand) / 0.42);
    background: rgb(var(--cl-brand) / 0.12);
    color: rgb(var(--cl-text));
    outline: 0;
}

.cl-theme-toggle:active {
    transform: translateY(1px) scale(0.98);
}

.cl-theme-toggle-icon {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: opacity 180ms ease, transform 180ms ease;
}

.cl-theme-toggle-icon--sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.cl-theme-toggle-icon--moon {
    opacity: 0;
    transform: scale(0.72) rotate(-24deg);
}

.cl-theme-light .cl-theme-toggle-icon--sun {
    opacity: 0;
    transform: scale(0.72) rotate(24deg);
}

.cl-theme-light .cl-theme-toggle-icon--moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

body.lk-cartlane,
.lk-landingkit.lk-cartlane {
    background: rgb(var(--cl-bg));
    color: rgb(var(--cl-text));
}

body.cl-theme-light.lk-cartlane,
.cl-theme-light .lk-landingkit.lk-cartlane {
    background:
        radial-gradient(circle at 16% 4%, rgb(var(--cl-brand) / 0.045), transparent 28%),
        rgb(var(--cl-bg));
}

.cl-theme-light nav.fixed.top-0 {
    background: rgb(var(--cl-surface) / 0.9) !important;
    border-color: rgb(var(--cl-border) / 0.85) !important;
    box-shadow: 0 1px 0 rgb(var(--cl-border) / 0.7);
}

.cl-theme-light .brand-logo svg path:last-child {
    fill: rgb(var(--cl-text)) !important;
}

.cl-theme-light :is(#main, #showcase, #analytics, #integrations, #developer-handoff, #pro-growth-suite, #free-vs-pro, #pricing, #roi-calculator, #faq) {
    background:
        linear-gradient(180deg, rgb(var(--cl-bg)), rgb(var(--cl-bg))),
        rgb(var(--cl-bg)) !important;
    border-color: rgb(var(--cl-border) / 0.8) !important;
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light #main {
    background:
        radial-gradient(circle at 22% 4%, rgb(var(--cl-brand) / 0.055), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%) !important;
}

.cl-theme-light #main h1 .animate-text-gradient {
    background-image: linear-gradient(90deg, #7c3aed, #111827, #7c3aed) !important;
}

.cl-theme-light :is(#pricing, #faq, #pro-growth-suite) {
    background:
        radial-gradient(circle at 82% 12%, rgb(var(--cl-brand) / 0.035), transparent 30%),
        linear-gradient(180deg, #f7f7ff 0%, #f3f8fb 100%) !important;
}

.cl-theme-light :is(.cmd-palette, .cl-feature-card, [id^="card-"], .cl-pricing-card, .cl-comparison-table, details, .cl-roadmap-shell, .cl-roadmap-card, #side-cart-drawer, #checkout-preview > div, #recovery-toast, .cl-cta-panel) {
    background:
        linear-gradient(180deg, rgb(var(--cl-surface) / 0.98), rgb(var(--cl-surface) / 0.94)) !important;
    border-color: rgb(var(--cl-border) / 0.9) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: none !important;
}

.cl-theme-light :is(.cl-terminal-bar, .cl-command-footer, .cmd-palette .bg-cl-bg, .cmd-palette .bg-cl-surface) {
    background-color: rgb(var(--cl-surface) / 0.94) !important;
    border-color: rgb(var(--cl-border) / 0.9) !important;
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light .kbd-key {
    background: #eef2f7 !important;
    border-color: rgb(var(--cl-border) / 0.95) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.86), 0 1px 1px rgb(var(--cl-shadow) / 0.06) !important;
}

.cl-theme-light .lk-cartlane .kbd-key.bg-transparent,
.cl-theme-light.lk-cartlane .kbd-key.bg-transparent,
.cl-theme-light .cmd-palette .kbd-key.bg-transparent {
    background: #eef2f7 !important;
    border: 1px solid rgb(var(--cl-border) / 0.95) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.86), 0 1px 1px rgb(var(--cl-shadow) / 0.06) !important;
}

.cl-theme-light :is(.text-cl-text, h1, h2, h3, h4, summary) {
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light :is(.text-cl-muted, .text-cl-gray, p, li) {
    color: rgb(var(--cl-muted)) !important;
}

.cl-theme-light .cl-license-price-panel {
    border-color: rgb(var(--cl-price-accent) / 0.26) !important;
    background:
        linear-gradient(to right, rgb(var(--cl-price-accent) / 0.065) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--cl-price-accent) / 0.045) 1px, transparent 1px),
        radial-gradient(circle at 18% 0%, rgb(var(--cl-price-accent) / 0.14), transparent 36%),
        radial-gradient(circle at 92% 28%, rgb(var(--cl-price-accent) / 0.075), transparent 34%),
        linear-gradient(135deg, rgb(var(--cl-price-accent) / 0.12), rgb(var(--cl-surface) / 0.97)) !important;
    background-size: 18px 18px, 18px 18px, auto, auto, auto !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.82), var(--cl-shadow-card) !important;
}

.cl-theme-light .cl-license-price-panel--free {
    --cl-price-text: 4, 120, 87;
    --cl-price-muted: 22, 101, 52;
}

.cl-theme-light .cl-license-price-panel--pro {
    --cl-price-text: 109, 40, 217;
    --cl-price-muted: 91, 33, 182;
}

.cl-theme-light .cl-license-price-panel--extended {
    --cl-price-text: 180, 83, 9;
    --cl-price-muted: 146, 64, 14;
}

.cl-theme-light .cl-license-price-eyebrow,
.cl-theme-light .cl-license-price-value,
.cl-theme-light .cl-license-price-license {
    color: rgb(var(--cl-price-text)) !important;
    text-shadow: none !important;
}

.cl-theme-light .cl-license-price-eyebrow,
.cl-theme-light .cl-license-price-license {
    opacity: 0.78;
}

.cl-theme-light .cl-license-price-status {
    border-color: rgb(var(--cl-price-muted) / 0.22) !important;
    background: rgb(var(--cl-price-text) / 0.08) !important;
    color: rgb(var(--cl-price-muted)) !important;
}

.cl-theme-light .cl-license-price-status--live {
    border-color: rgb(4 120 87 / 0.22) !important;
    background: rgb(4 120 87 / 0.08) !important;
    color: rgb(4 120 87) !important;
}

.cl-theme-light :is(.cl-integrations-copy, .cl-integrations-row-label, .cl-integrations-secret) {
    color: rgb(var(--cl-muted)) !important;
}

.cl-theme-light .cl-integrations-row-label,
.cl-theme-light .cl-integrations-secret {
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light .cl-terminal-line, .cl-terminal-text {
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light .cl-integrations-meta-label {
    color: rgb(var(--cl-gray)) !important;
}

.cl-theme-light #analytics .cl-analytics-range-tab {
    color: rgb(var(--cl-muted)) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cl-theme-light #analytics .cl-analytics-range-tab:hover,
.cl-theme-light #analytics .cl-analytics-range-tab:focus-visible {
    color: rgb(var(--cl-text)) !important;
    background: rgb(var(--cl-border) / 0.35) !important;
}

.cl-theme-light #analytics .cl-analytics-range-tab[aria-selected="true"] {
    color: #052e16 !important;
    background: rgb(34 197 94) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36) !important;
}

.cl-theme-light #analytics .cl-analytics-chart {
    background:
        linear-gradient(to bottom, rgb(var(--cl-border) / 0.58) 1px, transparent 1px),
        rgb(var(--cl-surface) / 0.96) !important;
    background-size: 100% 25%, auto !important;
}

.cl-theme-light #analytics .cl-analytics-chart::before {
    opacity: 0 !important;
}

.cl-theme-light #analytics .cl-chart-daily-bars {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    height: 100%;
    width: 100%;
    align-items: end;
}

.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar {
    width: 100%;
    min-width: 0;
}

.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar:nth-child(-n+3) {
    background: rgb(var(--cl-border) / 0.82) !important;
}

.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar:nth-child(4),
.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar:nth-child(5) {
    background: rgb(var(--cl-brand) / 0.34) !important;
}

.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar:nth-child(n+6) {
    background: rgb(34 197 94 / 0.42) !important;
}

.cl-theme-light #analytics .cl-chart-daily-bars .cl-analytics-bar:last-child {
    background: rgb(34 197 94) !important;
    box-shadow: 0 12px 28px rgb(34 197 94 / 0.18) !important;
}

.cl-theme-light :is(.btn-install, .btn-install:hover, .btn-install:focus, .btn-install:focus-visible, [data-cartlane-roadmap-trigger], [data-cartlane-roadmap-trigger]:hover, #checkout-button, #checkout-button:hover, #checkout-preview-continue, #checkout-preview-continue:hover, #apply-coupon-btn, #apply-coupon-btn:hover, .cl-coupon-button, .cl-coupon-button:hover) {
    color: #ffffff !important;
}

.cl-theme-light nav .btn-install.bg-white {
    background: #ffffff !important;
    border: 1px solid rgb(var(--cl-border) / 0.9) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: var(--cl-shadow-card) !important;
}

.cl-theme-light nav .btn-install.bg-white :is(i, svg, span) {
    color: rgb(var(--cl-text)) !important;
    stroke: currentColor !important;
}

.cl-theme-light :is(input, .cl-coupon-shell, .cl-coupon-input) {
    background-color: rgb(var(--cl-surface) / 0.92) !important;
    border-color: rgb(var(--cl-border) / 0.95) !important;
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light input::placeholder {
    color: rgb(var(--cl-muted) / 0.72) !important;
}

.cl-theme-light.lk-cartlane #checkout-preview input[type="email"],
.cl-theme-light.lk-cartlane #checkout-preview input[type="text"],
.cl-theme-light .lk-cartlane #checkout-preview input[type="email"],
.cl-theme-light .lk-cartlane #checkout-preview input[type="text"] {
    background: #ffffff !important;
    border-color: rgb(var(--cl-border) / 0.95) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.92) !important;
}

.cl-theme-light.lk-cartlane #checkout-preview input[type="email"]::placeholder,
.cl-theme-light.lk-cartlane #checkout-preview input[type="text"]::placeholder,
.cl-theme-light .lk-cartlane #checkout-preview input[type="email"]::placeholder,
.cl-theme-light .lk-cartlane #checkout-preview input[type="text"]::placeholder {
    color: rgb(var(--cl-muted) / 0.72) !important;
    opacity: 1 !important;
}

.cl-theme-light.lk-cartlane #checkout-preview input[type="email"]:focus,
.cl-theme-light.lk-cartlane #checkout-preview input[type="email"]:focus-visible,
.cl-theme-light.lk-cartlane #checkout-preview input[type="text"]:focus,
.cl-theme-light.lk-cartlane #checkout-preview input[type="text"]:focus-visible,
.cl-theme-light .lk-cartlane #checkout-preview input[type="email"]:focus,
.cl-theme-light .lk-cartlane #checkout-preview input[type="email"]:focus-visible,
.cl-theme-light .lk-cartlane #checkout-preview input[type="text"]:focus,
.cl-theme-light .lk-cartlane #checkout-preview input[type="text"]:focus-visible {
    background: #ffffff !important;
    border-color: rgb(var(--cl-brand) / 0.56) !important;
    color: rgb(var(--cl-text)) !important;
    box-shadow: 0 0 0 3px rgb(var(--cl-brand) / 0.16) !important;
}

.cl-theme-light #drawer-overlay {
    background: rgb(15 23 42 / 0.32) !important;
}

.cl-theme-light .mesh-bg {
    background-image:
        linear-gradient(to right, rgb(15 23 42 / 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(15 23 42 / 0.055) 1px, transparent 1px) !important;
}

.cl-theme-light .chart-grid-line {
    stroke: rgb(15 23 42 / 0.12) !important;
}

.cl-theme-light .custom-scroll::-webkit-scrollbar-thumb {
    background: rgb(100 116 139 / 0.45) !important;
}

.cl-theme-light .cl-mobile-menu-overlay {
    background:
        linear-gradient(180deg, rgb(var(--cl-bg) / 0.78), rgb(226 232 240 / 0.90)),
        repeating-linear-gradient(90deg, rgb(15 23 42 / 0.035) 0 1px, transparent 1px 42px) !important;
}

.cl-theme-light .cl-mobile-menu-panel {
    color: rgb(var(--cl-text)) !important;
    background:
        radial-gradient(circle at 82% 14%, rgb(var(--cl-brand) / 0.045), transparent 34%),
        rgb(var(--cl-surface) / 0.96) !important;
    border-color: rgb(var(--cl-border) / 0.9) !important;
    box-shadow: var(--cl-shadow-palette), inset 0 1px 0 rgb(255 255 255 / 0.72) !important;
}

.cl-theme-light .cl-mobile-menu-link {
    background: rgb(var(--cl-surface) / 0.82) !important;
    border-color: rgb(var(--cl-border) / 0.9) !important;
    color: rgb(var(--cl-text)) !important;
}

.cl-theme-light .cl-mobile-menu-link:hover,
.cl-theme-light .cl-mobile-menu-link:focus-visible {
    background: rgb(var(--cl-brand) / 0.09) !important;
    border-color: rgb(var(--cl-brand) / 0.28) !important;
}

.cl-theme-light :is(.cl-mobile-menu-link-meta, .cl-mobile-menu-index, .cl-command-footer-label) {
    color: rgb(var(--cl-muted)) !important;
}