/*
 * ScanFlick premium visual system
 * One coherent palette for public pages, checkout, authentication and the workspace.
 */
:root {
    --sf-ink: #101936;
    --sf-ink-2: #1f2b53;
    --sf-canvas: #f5f7ff;
    --sf-surface: #ffffff;
    --sf-line: #e2e7f5;
    --sf-muted: #68738f;
    --sf-indigo: #635bff;
    --sf-indigo-deep: #4f46e5;
    --sf-aqua: #32d0bb;
    --sf-navy: #081634;
    --sf-navy-2: #13285c;
    --sf-shadow: 0 18px 46px rgba(20, 33, 75, .09);
    --sf-shadow-strong: 0 22px 54px rgba(52, 48, 177, .20);

    --black: #101936;
    --body-bg: #f5f7ff;
    --body-color: #101936;
    --white: #ffffff;
    --gray-50: #f5f7ff;
    --gray-100: #edf0f9;
    --gray-200: #e2e7f5;
    --gray-300: #d4daed;
    --gray-400: #a4aec9;
    --gray-500: #7c87a4;
    --gray-600: #5f6b88;
    --gray-700: #3f4b69;
    --gray-800: #263251;
    --gray-900: #101936;
    --primary-50: #f1f0ff;
    --primary-100: #e7e5ff;
    --primary-200: #d7d3ff;
    --primary-300: #c0baff;
    --primary-400: #988cff;
    --primary: #635bff;
    --primary-600: #574ff2;
    --primary-700: #4f46e5;
    --primary-800: #4038bf;
    --primary-900: #332d98;
    --border-radius: .8rem;
    --input-border-color: #d9e0f0;
    --input-color: #1f2b53;
    --input-placeholder-color: #8d98b3;
}

html { background: var(--sf-canvas); }

body,
body.bg-white,
body.bg-gray-50,
.app,
.app-container,
.app-content {
    background: var(--sf-canvas) !important;
    color: var(--sf-ink);
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection { background: #d9d5ff; color: var(--sf-ink); }

a { color: var(--sf-indigo-deep); }
a:hover { color: #3930c7; }
.text-muted { color: var(--sf-muted) !important; }
.text-dark { color: var(--sf-ink) !important; }
.text-primary { color: var(--sf-indigo) !important; }

/* Public navigation: compact, legible, and deliberately premium. */
.navbar-main {
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(226, 231, 245, .92);
    border-radius: 1.15rem;
    box-shadow: 0 10px 30px rgba(20, 33, 75, .05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.navbar-main .nav-link,
.navbar-main .btn-link { color: #485473; }
.navbar-main .nav-link:hover,
.navbar-main .btn-link:hover { color: var(--sf-indigo-deep); }

/* Shared surfaces, controls and conversion actions. */
.card,
.modal-content,
.dropdown-menu,
.table-custom-container,
.app-footer {
    border: 1px solid var(--sf-line);
    box-shadow: 0 10px 32px rgba(20, 33, 75, .055);
}

.card,
.modal-content,
.dropdown-menu,
.table-custom-container {
    background: var(--sf-surface);
    border-radius: 1rem;
}

.card { transition: transform .18s cubic-bezier(.23, 1, .32, 1), box-shadow .18s cubic-bezier(.23, 1, .32, 1), border-color .18s cubic-bezier(.23, 1, .32, 1); }
body:not(.app) a.card:hover,
body:not(.app) .card.zoom-animation-subtle:hover {
    transform: translateY(-4px);
    border-color: #c9c3ff;
    box-shadow: var(--sf-shadow);
}

.btn {
    border-radius: .78rem;
    font-weight: 750;
    letter-spacing: -.01em;
    transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .16s cubic-bezier(.23, 1, .32, 1), background .16s cubic-bezier(.23, 1, .32, 1), border-color .16s cubic-bezier(.23, 1, .32, 1);
}

.btn:active { transform: scale(.97); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #6259ff 0%, #7868ff 100%) !important;
    box-shadow: 0 10px 22px rgba(87, 79, 242, .24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #5149ee 0%, #6757f7 100%) !important;
    box-shadow: 0 14px 28px rgba(87, 79, 242, .32);
}

.btn-dark,
.btn-dark:not(:disabled):not(.disabled) {
    color: #f8fbff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #101b3c 0%, #20396f 100%) !important;
    box-shadow: 0 10px 22px rgba(8, 22, 52, .18);
}

.btn-outline-primary {
    color: var(--sf-indigo-deep) !important;
    border-color: #beb8ff !important;
    background: #fbfaff !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    border-color: var(--sf-indigo-deep) !important;
    background: var(--sf-indigo-deep) !important;
}

.btn-light,
.btn-gray-200,
.btn-custom {
    color: #35415f !important;
    border-color: #dce2f1 !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(20, 33, 75, .04);
}
.btn-light:hover,
.btn-gray-200:hover,
.btn-custom:hover { color: var(--sf-indigo-deep) !important; border-color: #beb8ff !important; background: #faf9ff !important; }

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.input-group-text {
    border-color: #d9e0f0 !important;
    color: #243052 !important;
    background: #fff !important;
    border-radius: .7rem;
}
.form-control:focus,
.custom-select:focus {
    border-color: #9188ff !important;
    box-shadow: 0 0 0 .2rem rgba(99, 91, 255, .13) !important;
}

/* Pricing is an intentional decision point, not a collection of flat cards. */
.pricing-plan {
    overflow: visible;
    border: 1px solid #dce2f1;
    border-radius: 1.1rem;
    box-shadow: 0 12px 30px rgba(20, 33, 75, .06);
}
.pricing-header,
.pricing-body { background: #fff; }
.pricing-header { border-radius: 1.1rem 1.1rem 0 0; }
.pricing-body { border-radius: 0 0 1.1rem 1.1rem; }
.pricing-plan:has(.pricing-tag) {
    border-color: #756bff;
    box-shadow: 0 20px 45px rgba(99, 91, 255, .16);
}
.pricing-tag {
    color: #fff;
    background: linear-gradient(135deg, #635bff, #8b7cff);
    box-shadow: 0 8px 17px rgba(99, 91, 255, .24);
}
.pricing-name { color: var(--sf-ink); }
.pricing-price-amount,
.pricing-price-currency-symbol { color: var(--sf-ink); }

/* Workspace: a calm content canvas framed by a high-confidence dark rail. */
.app-sidebar {
    background: linear-gradient(180deg, #091632 0%, #112657 62%, #0c1b3c 100%);
    border-right: 1px solid rgba(158, 180, 232, .16);
    box-shadow: 16px 0 38px rgba(8, 22, 52, .11);
}
.app-sidebar-title a,
.app-sidebar-title .text-dark { color: #fff !important; }
.app-sidebar-links > .divider-wrapper > .divider,
.app-sidebar-footer > a { border-color: rgba(166, 185, 227, .15); }
.app-sidebar-links > li > a { color: #bfcae5; }
.app-sidebar-links > li > a svg,
.app-sidebar-links > li > a i { color: #91a4ce; }
.app-sidebar-links > li > a:hover {
    color: #fff;
    background: rgba(133, 124, 255, .17);
}
.app-sidebar-links > li.active > a:not(.default) {
    color: #fff;
    background: linear-gradient(135deg, #645bff 0%, #7b6dff 100%);
    box-shadow: 0 10px 22px rgba(4, 10, 30, .28);
}
.app-sidebar-links > li.active > a:not(.default) svg,
.app-sidebar-links > li.active > a:not(.default) i { color: #fff; }
.app-sidebar-footer > a,
.app-sidebar-footer-text { color: #b9c6e0; }
.app-sidebar-footer > a:hover { color: #fff; background: rgba(134, 125, 255, .14); }
.app-content .navbar,
.app-content .app-menu { border-radius: 1rem; }

/* Tables, information blocks, menus, and footer receive the same surface grammar. */
.table-custom,
.table-custom thead th { background: #fff; }
.table-custom tbody tr td { border-color: #edf0f7; }
.table-custom tbody tr:hover { background: #fafbff; }
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active { color: var(--sf-indigo-deep); background: #f1f0ff; }
.dropdown-item.active { color: #fff; background: var(--sf-indigo-deep); }

.app-footer {
    color: #cfdaef;
    border-color: rgba(143, 166, 213, .20);
    background: linear-gradient(135deg, #0c1a39 0%, #122b62 100%);
    box-shadow: 0 18px 46px rgba(8, 22, 52, .13);
}
.app-footer .footer-heading,
.app-footer .footer-heading:hover,
.app-footer .footer-heading span,
.app-footer .font-weight-600,
.app-footer a:not(.dropdown-item),
.app-footer a:hover:not(.dropdown-item) { color: #fff !important; }
.app-footer .text-muted,
.app-footer .app-footer-text { color: #b6c4df !important; }
.app-footer button,
.app-footer button:hover { color: #cdd7ed !important; }

/* Public landing pages gain a dark, product-first hero while keeping the tools themselves bright. */
.index-background {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 15%, rgba(90, 212, 198, .28), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(112, 94, 255, .42), transparent 32%),
        linear-gradient(135deg, #071330 0%, #102658 55%, #172c67 100%) !important;
    border-radius: 0 0 2.2rem 2.2rem;
    box-shadow: inset 0 -1px rgba(255, 255, 255, .13);
}
.index-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .26;
    background-image: linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.index-header {
    color: var(--sf-ink) !important;
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.index-subheader { color: var(--sf-muted) !important; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.index-background .index-header { color: #fff !important; }
.index-background .index-subheader { color: #dbe4ff !important; }
.index-background .text-muted { color: #aebddd !important; }
.index-background .index-button { min-width: 13rem; }
.index-background .index-button-secondary {
    color: #dbe6ff !important;
    border-color: rgba(192, 208, 246, .28) !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: none;
    backdrop-filter: blur(8px);
}
.index-background .index-button-secondary:hover { color: #fff !important; border-color: rgba(205, 220, 255, .6) !important; background: rgba(255, 255, 255, .17) !important; }
.index-background a.small { color: #aeece0; }
.index-background a.small:hover { color: #fff; }

.index-cta {
    background: radial-gradient(circle at 82% 15%, rgba(83, 219, 196, .42), transparent 28%), linear-gradient(135deg, #5149ed, #242058 76%) !important;
    border-radius: 1.3rem;
    box-shadow: var(--sf-shadow-strong);
}
.index-cta a.btn { background: #fff !important; color: #3930bf !important; border-color: #fff !important; box-shadow: 0 10px 24px rgba(8, 16, 50, .2); }
.index-cta a.btn:hover { background: #f0efff !important; color: #3028aa !important; }

/* Auth screens retain the same product identity without adding form friction. */
body.bg-gray-50 .card { border-color: #dfe4f3; box-shadow: 0 24px 58px rgba(20, 33, 75, .11); }

/* Respect the optional dark setting with a true low-glare workspace. */
[data-theme-style="dark"] body,
[data-theme-style="dark"] .app,
[data-theme-style="dark"] .app-container,
[data-theme-style="dark"] .app-content { background: #091426 !important; color: #e8eefb; }
[data-theme-style="dark"] .card,
[data-theme-style="dark"] .modal-content,
[data-theme-style="dark"] .dropdown-menu,
[data-theme-style="dark"] .table-custom,
[data-theme-style="dark"] .pricing-header,
[data-theme-style="dark"] .pricing-body { color: #e8eefb; background: #101e39; border-color: #263a60; }
[data-theme-style="dark"] .text-dark,
[data-theme-style="dark"] .pricing-name,
[data-theme-style="dark"] .pricing-price-amount,
[data-theme-style="dark"] .pricing-price-currency-symbol { color: #f4f7ff !important; }
[data-theme-style="dark"] .text-muted { color: #acbad5 !important; }
[data-theme-style="dark"] .index-header { color: #f4f7ff !important; }
[data-theme-style="dark"] .index-subheader { color: #b8c6e1 !important; }
[data-theme-style="dark"] .form-control,
[data-theme-style="dark"] .custom-select,
[data-theme-style="dark"] .input-group-text { color: #e8eefb !important; border-color: #30466f !important; background: #0c1931 !important; }
[data-theme-style="dark"] .navbar-main { background: rgba(13, 28, 57, .89) !important; border-color: rgba(91, 114, 160, .30); }
[data-theme-style="dark"] .navbar-main .nav-link,
[data-theme-style="dark"] .navbar-main .btn-link { color: #d1dcf3; }
[data-theme-style="dark"] .btn-light,
[data-theme-style="dark"] .btn-gray-200,
[data-theme-style="dark"] .btn-custom { color: #dbe4f8 !important; border-color: #31476f !important; background: #142645 !important; }

@media (max-width: 991.98px) {
    .navbar-main { border-radius: 0; border-right: 0; border-left: 0; }
    .index-background { border-radius: 0 0 1.5rem 1.5rem; }
    .index-background .index-button { width: 100%; }
    .app-sidebar { border-radius: 0 1.8rem 1.8rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn { transition: none; }
}

.app-sidebar-title .navbar-logo { filter: brightness(0) invert(1); }

/* Checkout: retain the choices and legal confirmation, remove visual noise. */
.sf-checkout .custom-breadcrumbs { display: none; }
.sf-checkout-intro { border-left: 3px solid var(--sf-indigo); padding-left: .85rem; }
.sf-checkout .custom-radio-box { margin-bottom: 0 !important; }
.sf-checkout .custom-radio-box .card { box-shadow: none; }
.sf-checkout .custom-radio-box .card-body { padding: .9rem 1rem; }
.sf-checkout .sticky > .card { box-shadow: var(--sf-shadow); }
.sf-checkout .sticky .card-body { padding: 1rem; }
.sf-checkout .sticky .d-flex.justify-content-between.mb-3 { margin-bottom: .7rem !important; }
.sf-checkout .sticky small.text-right.text-muted { display: none; }
.sf-checkout [name="payment_type"] + .card .card-body { padding: .72rem 1rem; }
.sf-checkout .mt-5 { margin-top: 1.5rem !important; }