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

/* --- BASE TYPOGRAPHY & SETTINGS --- */
body {
    background-color: #ffffff;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    letter-spacing: -0.025em; /* Apple tracking */
}

/* --- GLASSMORPHISM SYSTEM --- */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* --- BENTO CARDS & GLOWS --- */
.bento-card {
    background: #fbfbfd;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

/* Hover Glows per Package */
.border-glow-blue:hover { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1); }
.border-glow-orange:hover { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.1); }
.border-glow-purple:hover { border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.1); }
.border-glow-green:hover { border-color: rgba(34, 197, 94, 0.3); box-shadow: 0 10px 30px rgba(34, 197, 94, 0.1); }

/* --- TOGGLES (Home) --- */
.toggle-container {
    background: #f5f5f7;
    border-radius: 999px;
    padding: 4px;
    display: inline-flex;
    position: relative;
    border: 1px solid rgba(0,0,0,0.04);
}

.toggle-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(50% - 4px);
    background: white;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.toggle-btn {
    position: relative;
    z-index: 2;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #86868b;
    cursor: pointer;
    transition: color 0.3s;
    min-width: 140px;
    text-align: center;
}
.toggle-btn.active { color: #1d1d1f; font-weight: 600; }

/* --- MATRIX TABLE --- */
.matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.matrix-row:last-child { border-bottom: none; }
.matrix-row:hover { background: #fafafa; }

/* --- CONFIGURATOR SPECIFIC --- */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%;
    background: #ffffff; border: 1px solid #e5e5e5; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer; margin-top: -12px; transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px; cursor: pointer; background: #e5e5e5; border-radius: 2px;
}

.option-card { transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid #e5e5e5; }
.option-card:hover { border-color: #a1a1aa; transform: translateY(-2px); }
.option-card.selected { border-color: #2563eb; background-color: #eff6ff; box-shadow: 0 0 0 1px #2563eb; }

/* Modal Animation */
.modal-enter { animation: modalFadeIn 0.3s ease-out forwards; }
@keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* --- ANIMATIONS --- */
.fade-up {
    animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.content-enter { animation: contentFade 0.5s ease forwards; }
@keyframes contentFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hidden-content { display: none; }
.visible-content { display: block; }