/* ==========================================================================
   PureBDInfo public theme — modern minimalist layer on Bootstrap 5.3.
   No build step: design tokens + component-variable overrides only.
   The "SHARED THEME" block is duplicated in admin.css — keep them in sync.
   ========================================================================== */

/* ─── SHARED THEME: tokens ─────────────────────────────────────────────── */

:root {
    --pbi-primary: #4f46e5;
    --pbi-primary-hover: #4338ca;
    --pbi-primary-active: #3730a3;
    --pbi-primary-soft: #eef2ff;
    --pbi-ink: #1d2130;
    --pbi-muted: #676d8a;
    --pbi-bg: #f6f7fb;
    --pbi-border: #e7e9f2;
    --pbi-radius: .75rem;
    --pbi-radius-sm: .5rem;
    --pbi-shadow-sm: 0 1px 2px rgba(23, 25, 60, .05), 0 2px 6px rgba(23, 25, 60, .04);
    --pbi-shadow-lg: 0 12px 32px -10px rgba(79, 70, 229, .22);

    --bs-primary: var(--pbi-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-body-bg: var(--pbi-bg);
    --bs-body-bg-rgb: 246, 247, 251;
    --bs-body-color: var(--pbi-ink);
    --bs-body-color-rgb: 29, 33, 48;
    --bs-secondary-color: var(--pbi-muted);
    --bs-tertiary-bg: #f1f3f9;
    --bs-tertiary-bg-rgb: 241, 243, 249;
    --bs-border-color: var(--pbi-border);
    --bs-border-radius: var(--pbi-radius-sm);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color-rgb: 67, 56, 202;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pbi-ink);
}

::selection {
    background: var(--pbi-primary-soft);
    color: var(--pbi-primary-active);
}

/* ─── SHARED THEME: buttons ────────────────────────────────────────────── */

.btn {
    --bs-btn-border-radius: var(--pbi-radius-sm);
    font-weight: 500;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease,
                border-color .12s ease, color .12s ease;
}

.btn-primary {
    --bs-btn-bg: var(--pbi-primary);
    --bs-btn-border-color: var(--pbi-primary);
    --bs-btn-hover-bg: var(--pbi-primary-hover);
    --bs-btn-hover-border-color: var(--pbi-primary-hover);
    --bs-btn-active-bg: var(--pbi-primary-active);
    --bs-btn-active-border-color: var(--pbi-primary-active);
    --bs-btn-disabled-bg: #a5b4fc;
    --bs-btn-disabled-border-color: #a5b4fc;
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px rgba(79, 70, 229, .55);
}

.btn-outline-secondary {
    --bs-btn-color: #4a5069;
    --bs-btn-border-color: #d9dcea;
    --bs-btn-hover-color: var(--pbi-ink);
    --bs-btn-hover-bg: #f1f2f8;
    --bs-btn-hover-border-color: #c9cde2;
    --bs-btn-active-color: var(--pbi-ink);
    --bs-btn-active-bg: #e9ebf5;
    --bs-btn-active-border-color: #c9cde2;
    background-color: #fff;
}

.btn-outline-danger {
    --bs-btn-color: #c02929;
    --bs-btn-border-color: #f0c9c9;
    --bs-btn-hover-bg: #fdf0f0;
    --bs-btn-hover-color: #a61f1f;
    --bs-btn-hover-border-color: #e5b3b3;
    --bs-btn-active-bg: #fbe4e4;
    --bs-btn-active-color: #a61f1f;
    --bs-btn-active-border-color: #e5b3b3;
    background-color: #fff;
}

.btn-outline-success {
    --bs-btn-color: #157347;
    --bs-btn-border-color: #bfe5d2;
    --bs-btn-hover-bg: #ecf9f2;
    --bs-btn-hover-color: #106239;
    --bs-btn-hover-border-color: #a3d9bd;
    --bs-btn-active-bg: #ddf2e7;
    --bs-btn-active-color: #106239;
    --bs-btn-active-border-color: #a3d9bd;
    background-color: #fff;
}

/* ─── SHARED THEME: forms ──────────────────────────────────────────────── */

.form-control, .form-select {
    border-color: var(--pbi-border);
    color: var(--pbi-ink);
}

.form-control:focus, .form-select:focus {
    border-color: #b7bcf7;
    box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .12);
}

.form-check-input:checked {
    background-color: var(--pbi-primary);
    border-color: var(--pbi-primary);
}

.form-check-input:focus {
    border-color: #b7bcf7;
    box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .12);
}

.form-label {
    font-weight: 500;
    font-size: .875rem;
}

/* ─── SHARED THEME: cards, badges, alerts, dropdowns, pagination ───────── */

.card {
    --bs-card-border-color: var(--pbi-border);
    --bs-card-border-radius: var(--pbi-radius);
    --bs-card-bg: #fff;
}

.shadow-sm {
    box-shadow: var(--pbi-shadow-sm) !important;
}

.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .35em .7em;
}

.text-bg-primary   { background-color: var(--pbi-primary-soft) !important; color: var(--pbi-primary-active) !important; }
.text-bg-success   { background-color: #e7f6ee !important; color: #14764a !important; }
.text-bg-secondary { background-color: #eef0f6 !important; color: #5a6076 !important; }
.text-bg-warning   { background-color: #fff3dd !important; color: #9a5b00 !important; }
.text-bg-danger    { background-color: #fdecec !important; color: #b32424 !important; }
.text-bg-light     { background-color: #f3f4fa !important; color: #5a6076 !important; }

.alert {
    border-radius: var(--pbi-radius-sm);
}

.alert-success { background: #e7f6ee; color: #14764a; border-color: #c8ebd8; }
.alert-danger  { background: #fdecec; color: #b32424; border-color: #f4cccc; }
.alert-warning { background: #fff3dd; color: #9a5b00; border-color: #f7e1b5; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--pbi-border);
    --bs-dropdown-border-radius: var(--pbi-radius-sm);
    --bs-dropdown-link-active-bg: var(--pbi-primary-soft);
    --bs-dropdown-link-active-color: var(--pbi-primary-active);
    box-shadow: 0 10px 30px -10px rgba(23, 25, 60, .18);
}

.pagination {
    --bs-pagination-color: var(--pbi-ink);
    --bs-pagination-border-color: var(--pbi-border);
    --bs-pagination-hover-color: var(--pbi-primary-hover);
    --bs-pagination-hover-bg: var(--pbi-primary-soft);
    --bs-pagination-active-bg: var(--pbi-primary);
    --bs-pagination-active-border-color: var(--pbi-primary);
    --bs-pagination-focus-color: var(--pbi-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .12);
}

/* ─── PUBLIC: header ───────────────────────────────────────────────────── */

.site-header {
    z-index: 1030;
}

.site-header .navbar {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pbi-border);
}

.site-header .navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
}

.brand-mark {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
    margin-right: .55rem;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}

.site-header .nav-link {
    font-weight: 500;
    color: #4a5069;
    border-radius: 999px;
    padding-inline: .85rem;
}

.site-header .nav-link:hover {
    color: var(--pbi-primary-hover);
    background: var(--pbi-primary-soft);
}

/* ─── PUBLIC: hero ─────────────────────────────────────────────────────── */

.hero-section {
    background:
        radial-gradient(56rem 22rem at 88% -25%, rgba(99, 102, 241, .16), transparent 60%),
        radial-gradient(48rem 20rem at 8% -30%, rgba(34, 211, 238, .13), transparent 60%),
        #fcfcff;
    border-bottom: 1px solid var(--pbi-border);
}

.hero-title {
    letter-spacing: -.03em;
}

.text-gradient {
    background: linear-gradient(92deg, #4f46e5 10%, #0ea5e9 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-search .form-control {
    border-radius: 999px 0 0 999px;
    padding-left: 1.4rem;
    border-color: #dfe2ef;
    box-shadow: var(--pbi-shadow-sm);
}

.hero-search .btn {
    border-radius: 0 999px 999px 0;
    padding-inline: 1.6rem;
}

/* ─── PUBLIC: tool & category cards ────────────────────────────────────── */

.tool-card {
    border: 1px solid var(--pbi-border);
    box-shadow: var(--pbi-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tool-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pbi-shadow-lg);
    border-color: rgba(79, 70, 229, .35);
}

.tool-card:hover h3 {
    color: var(--pbi-primary-hover);
}

.tool-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.tool-avatar-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tool-avatar-1 { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.tool-avatar-2 { background: linear-gradient(135deg, #10b981, #34d399); }
.tool-avatar-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.tool-avatar-4 { background: linear-gradient(135deg, #ec4899, #f472b6); }

section > h2.h4 {
    margin-bottom: 1rem;
}

/* ─── PUBLIC: tool page & content ──────────────────────────────────────── */

.breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-divider-color: #a3a9c4;
}

.accordion {
    --bs-accordion-border-color: var(--pbi-border);
    --bs-accordion-border-radius: var(--pbi-radius);
    --bs-accordion-inner-border-radius: calc(var(--pbi-radius) - 1px);
    --bs-accordion-active-bg: var(--pbi-primary-soft);
    --bs-accordion-active-color: var(--pbi-primary-active);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .12);
    box-shadow: var(--pbi-shadow-sm);
    border-radius: var(--pbi-radius);
}

.accordion-button {
    font-weight: 500;
}

.page-content h2 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
}

.category-seo-content {
    max-width: 65rem;
}

#tool-root .card {
    box-shadow: var(--pbi-shadow-sm);
}

#tool-root .border.rounded {
    background: #fff;
}

/* ─── PUBLIC: footer ───────────────────────────────────────────────────── */

.site-footer {
    background: #fff;
    border-top: 1px solid var(--pbi-border);
}

.site-footer a {
    color: var(--pbi-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--pbi-primary-hover);
}

/* ─── AUTH pages (login/register share app.css) ────────────────────────── */

.auth-page {
    background:
        radial-gradient(48rem 22rem at 80% -20%, rgba(99, 102, 241, .14), transparent 60%),
        radial-gradient(40rem 18rem at 10% -25%, rgba(34, 211, 238, .12), transparent 60%),
        var(--pbi-bg);
}

.auth-card {
    max-width: 420px;
}