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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: none;
}

/* --- ИСПРАВЛЕНИЕ: Явные стили для всех полей ввода --- */
.form-input,
input[type="text"],
input[type="number"],
select,
textarea {
    @apply w-full bg-zinc-800 border border-zinc-700 rounded-lg px-4 py-2 text-white;
    @apply focus:outline-none focus:ring-2 focus:ring-pink-500;
    -webkit-appearance: none; /* Убирает стандартные стили iOS */
    -moz-appearance: none;
    appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}
/* --- --- */

.nav-btn.active {
    @apply text-pink-500;
}

.profile-card.swiping {
    transition: none;
}
.profile-card.swiping.left .swipe-indicator {
    @apply opacity-100 text-red-500 border-red-500 rotate-12;
}
.profile-card.swiping.right .swipe-indicator {
    @apply opacity-100 text-green-500 border-green-500 -rotate-12;
}
.profile-card.swipe-left {
    transform: translateX(-150%) rotate(-30deg) !important;
    opacity: 0;
}
.profile-card.swipe-right {
    transform: translateX(150%) rotate(30deg) !important;
    opacity: 0;
}

.loader {
    border: 4px solid #f3f3f330;
    border-top: 4px solid #ec4899;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
.btn-loader {
    display: inline-block;
    border: 2px solid #ffffff80;
    border-top: 2px solid #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}