@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --canvas: #F8FAFC;
    --card: #FFFFFF;
    --pri: #0F172A;
    --sec: #475569;
    --text-pri: #0F172A;
    --text-sec: #64748B;
    --border-c: #E2E8F0;
}

.dark {
    --canvas: #020617;
    --card: #0F172A;
    --pri: #F8FAFC;
    --sec: #94A3B8;
    --text-pri: #F8FAFC;
    --text-sec: #94A3B8;
    --border-c: #1E293B;
}

.background-carousel {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #000;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeCarousel 30s infinite ease-in-out;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }
.slide:nth-child(5) { animation-delay: 20s; }
.slide:nth-child(6) { animation-delay: 25s; }

@keyframes fadeCarousel {
    0% { opacity: 1; transform: scale(1); }
    16.66% { opacity: 1; transform: scale(1.02); }
    25% { opacity: 0; transform: scale(1.03); }
    91% { opacity: 0; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    transition: background-color 0.3s ease;
}
.dark .overlay {
    background: rgba(2, 6, 23, 0.50);
}

.form-input {
    width: 100%;
    background-color: var(--canvas);
    border: 1px solid var(--border-c);
    color: var(--text-pri);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s;
}
.form-input:focus {
    border-color: var(--sec);
    box-shadow: 0 0 0 1px var(--sec);
}

.btn-next, .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-next { background-color: var(--pri); color: var(--canvas); }
.btn-next:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-back { background-color: transparent; color: var(--text-sec); border: 1px solid var(--border-c); }
.btn-back:hover { background-color: var(--canvas); color: var(--text-pri); }

.field-block { margin-bottom: 2rem; }
.field-header { display: flex; align-items: center; gap: 0.5rem; color: var(--text-pri); margin-bottom: 0.75rem; font-weight: 600; font-size: 0.9rem; }
.field-header i { color: var(--text-sec); width: 1.15rem; height: 1.15rem; }

.option-btn {
    width: 100%; text-align: left; padding: 1rem; border-radius: 0.75rem;
    border: 1px solid var(--border-c); background-color: var(--card);
    color: var(--text-sec); font-size: 0.85rem; transition: all 0.2s;
}
.option-btn:hover { border-color: var(--sec); }
.option-btn.active { border-color: var(--pri); color: var(--pri); font-weight: 500; }
:root .option-btn.active { background-color: rgba(15, 23, 42, 0.03); }
.dark .option-btn.active { background-color: rgba(248, 250, 252, 0.05); }

.bg-bright-box { background-color: rgba(15, 23, 42, 0.02); }
.dark .bg-bright-box { background-color: rgba(248, 250, 252, 0.03); }
.mult-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: var(--card); border: 1px solid var(--border-c); border-radius: 0.5rem; font-size: 0.8rem; color: var(--text-sec); }
.mult-val { font-family: 'IBM Plex Mono', monospace; color: var(--text-pri); font-weight: 600; }
.tooltip-group:hover .tooltip-text { opacity: 1; visibility: visible; }
.tooltip-text { transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; }

/* Custom scrollbar for the restored stepper on mobile */
.custom-scrollbar::-webkit-scrollbar {
    height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border-c);
    border-radius: 4px;
}

@media print {
    .no-print { display: none !important; }
    body { background-color: #ffffff !important; color: #000000 !important; }
    #pdf-content-area { box-shadow: none !important; border: none !important; padding: 0 !important; background: transparent !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .break-inside-avoid { break-inside: avoid; page-break-inside: avoid; }
}