/* DebtQuity Custom Styles */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0D1B2A; }
::-webkit-scrollbar-thumb { background: #1B3A5C; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2563A8; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Geometric SVG hero pattern */
.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231B3A5C' stroke-width='1'%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)'/%3E%3Ccircle cx='60' cy='20' r='10'/%3E%3Cpath d='M10 60 L30 40 L50 60 Z'/%3E%3Crect x='50' y='50' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Gold gradient text */
.text-gold-gradient {
    background: linear-gradient(135deg, #B8860B, #D4AF37, #B8860B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Process timeline connector */
.timeline-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #2563A8, #1B3A5C);
    transform: translateY(-50%);
}

/* Card hover lift */
.card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(13, 27, 42, 0.4);
}

/* Mandate card badge */
.mandate-badge {
    background: linear-gradient(135deg, #B8860B 0%, #D4AF37 100%);
}

/* Sidebar nav item active */
.sidebar-item-active {
    background: rgba(37, 99, 168, 0.2);
    border-left: 3px solid #2563A8;
    color: #60A5FA;
}

/* Portal content fade-in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.panel-fade { animation: fadeIn 0.25s ease forwards; }

/* Progress bar animation */
@keyframes progressFill {
    from { width: 0%; }
}
.progress-animate { animation: progressFill 1s ease forwards; }

/* Upload dropzone */
.dropzone {
    border: 2px dashed #1B3A5C;
    transition: border-color 0.2s, background 0.2s;
}
.dropzone:hover, .dropzone.drag-over {
    border-color: #2563A8;
    background: rgba(37, 99, 168, 0.05);
}

/* Signature font */
.signature-font {
    font-family: 'Dancing Script', 'Brush Script MT', cursive;
    font-size: 1.5rem;
    color: #0D1B2A;
}

/* Kanban board */
.kanban-col {
    min-height: 300px;
    background: rgba(27, 58, 92, 0.15);
}
.kanban-card {
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}
.kanban-col.drag-target {
    background: rgba(37, 99, 168, 0.1);
    border: 1px dashed #2563A8;
}

/* Chatbot */
.chat-bubble-user {
    background: #2563A8;
    color: white;
    border-radius: 18px 18px 4px 18px;
}
.chat-bubble-bot {
    background: #1B3A5C;
    color: #E2E8F0;
    border-radius: 18px 18px 18px 4px;
}

/* Typing indicator */
@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}
.typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #60A5FA; }
.typing-dot:nth-child(1) { animation: bounce 1.2s 0s infinite; }
.typing-dot:nth-child(2) { animation: bounce 1.2s 0.2s infinite; }
.typing-dot:nth-child(3) { animation: bounce 1.2s 0.4s infinite; }

/* Pie chart — conic-gradient */
.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #2563A8 0% 35%,
        #B8860B 35% 58%,
        #059669 58% 74%,
        #7C3AED 74% 100%
    );
}

/* Mobile-first form steps */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
}

/* WhatsApp float button */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

/* Stats counter animation */
.stat-value {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Compliance strip */
.compliance-strip {
    font-size: 0.65rem;
    line-height: 1.4;
    color: #64748B;
}

/* Form range slider */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #1B3A5C;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563A8;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 168, 0.5);
}

/* Status badges */
.badge-active    { background: rgba(5, 150, 105, 0.15); color: #059669; }
.badge-pending   { background: rgba(217, 119, 6, 0.15); color: #D97706; }
.badge-review    { background: rgba(37, 99, 168, 0.15); color: #2563A8; }
.badge-alert     { background: rgba(220, 38, 38, 0.15); color: #DC2626; }

/* ===== HONEY BADGER BRANDING ===== */

/* Silver palette */
:root {
  --silver: #B8C4CC;
  --silver-dark: #8899A6;
  --silver-light: #D8E0E6;
}
.text-silver { color: var(--silver); }
.bg-silver { background-color: var(--silver); }
.border-silver { border-color: var(--silver); }

/* Honey badger ethos section */
.hb-stripe {
  background: linear-gradient(90deg, transparent, rgba(184,196,204,0.12), transparent);
}

/* Mark pulse on hover */
.hb-mark {
  transition: transform 0.3s ease;
}
.hb-mark:hover {
  transform: scale(1.08);
}

/* Silver gradient text */
.text-silver-gradient {
  background: linear-gradient(135deg, #8899A6, #D8E0E6, #8899A6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ethos trait card */
.ethos-card {
  background: rgba(27, 58, 92, 0.3);
  border: 1px solid rgba(184, 196, 204, 0.15);
  transition: border-color 0.2s, background 0.2s;
}
.ethos-card:hover {
  border-color: rgba(184, 196, 204, 0.4);
  background: rgba(27, 58, 92, 0.5);
}