@import "../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css";

/* ─── Oceaan palette ─────────────────────────────────────── */
:root {
    --brand-primary: #1a56db;
    --brand-primary-rgb: 26, 86, 219;
    --brand-accent: #06b6d4;
    --brand-bg: #f0f5ff;
    --brand-text: #0f172a;
    --brand-muted: #64748b;
    --brand-border: rgba(26, 86, 219, 0.15);
    --brand-highlight: #f59e0b;

    /* Bootstrap overrides */
    --bs-primary: #1a56db;
    --bs-primary-rgb: 26, 86, 219;
    --bs-link-color: #1a56db;
    --bs-link-color-rgb: 26, 86, 219;
    --bs-link-hover-color: #1444b0;
    --bs-link-hover-color-rgb: 20, 68, 176;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-bg: #f0f5ff;
    --bs-body-color: #0f172a;
    --bs-secondary-color: #64748b;
    --bs-card-bg: #ffffff;
    --bs-card-border-color: rgba(26, 86, 219, 0.15);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.625rem;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1a56db;
    --bs-btn-border-color: #1a56db;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1444b0;
    --bs-btn-hover-border-color: #1033a0;
    --bs-btn-focus-shadow-rgb: 26, 86, 219;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1033a0;
    --bs-btn-active-border-color: #0f2e94;
}

.btn-outline-primary {
    --bs-btn-color: #1a56db;
    --bs-btn-border-color: #1a56db;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a56db;
    --bs-btn-hover-border-color: #1a56db;
    --bs-btn-focus-shadow-rgb: 26, 86, 219;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1444b0;
    --bs-btn-active-border-color: #1444b0;
}

/* ─── Cards ───────────────────────────────────────────────── */
.conversion-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.08);
    cursor: pointer;
    border: 1px solid var(--brand-border);
    border-top: 3px solid var(--brand-primary);
}

.conversion-card:hover {
    box-shadow: 0 8px 24px rgba(26, 86, 219, 0.15);
    transform: translateY(-2px);
    border-top-color: #1033a0;
}

.card-icon {
    color: var(--brand-primary);
    margin-bottom: 0.75rem;
    line-height: 1;
}

/* ─── Smart input panel (homepage) ───────────────────────── */
.smart-input-panel {
    background: linear-gradient(135deg, rgba(26, 86, 219, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 1px solid var(--brand-border);
    border-top: 3px solid var(--brand-highlight);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem 1.75rem;
}

@media (max-width: 575.98px) {
    .smart-input-panel .input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .smart-input-panel .input-group > * {
        width: 100%;
        border-radius: var(--bs-border-radius) !important;
    }

    .nl-input-group {
        flex-wrap: wrap;
    }
    /* Submit goes full-width on its own row */
    .nl-input-group > .btn:last-child {
        flex: 0 0 100%;
        border-radius: var(--bs-border-radius-lg) !important;
        margin-top: 0.5rem;
    }
    /* Hide clear button on mobile — tap to clear is sufficient on touch devices */
    .nl-input-group > .btn-outline-secondary {
        display: none !important;
    }
    /* Restore input right border-radius with clear button gone */
    .nl-input-group > .form-control {
        border-top-right-radius: var(--bs-border-radius-lg) !important;
        border-bottom-right-radius: var(--bs-border-radius-lg) !important;
    }
}

/* ─── Number inputs ───────────────────────────────────────── */
.form-control {
    font-variant-numeric: tabular-nums;
}

/* ─── Scale visibility toggle ─────────────────────────────── */
.scale-toggle.form-check-input {
    background-color: #dc3545;
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    cursor: pointer;
}

.scale-toggle.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

/* ─── Chevron animation ───────────────────────────────────── */
@keyframes chevron-dance {
    0%, 30%, 100% { transform: translateY(0); }
    8%            { transform: translateY(6px); }
    16%           { transform: translateY(1px); }
    23%           { transform: translateY(4px); }
    30%           { transform: translateY(0); }
}

.chevron-dance {
    animation: chevron-dance 2.5s ease-in-out infinite;
    stroke: currentColor;
    stroke-width: 1.5px;
    paint-order: stroke fill;
}