/**
 * Grupo One Viagens - Design System
 * Componentes Compartilhados
 * 
 * Classes CSS reutilizáveis em todos os sites do ecossistema.
 * Importar variables.css antes deste arquivo.
 */

/* ========================================
   BOTÕES
   ======================================== */

.one-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: var(--one-font-body);
    font-weight: var(--one-font-bold);
    font-size: var(--one-text-base);
    border-radius: var(--one-radius-lg);
    transition: all var(--one-transition-base) var(--one-ease-in-out);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.one-btn-primary {
    background: var(--one-coral-primary);
    color: var(--one-white);
    box-shadow: var(--one-shadow-coral);
}

.one-btn-primary:hover {
    background: var(--one-coral-light);
    transform: translateY(-2px);
    box-shadow: var(--one-shadow-glow-coral);
}

.one-btn-secondary {
    background: transparent;
    color: var(--one-navy-primary);
    border: 2px solid var(--one-navy-primary);
}

.one-btn-secondary:hover {
    background: var(--one-navy-primary);
    color: var(--one-white);
    transform: translateY(-2px);
}

.one-btn-outline-coral {
    background: transparent;
    color: var(--one-coral-primary);
    border: 2px solid var(--one-coral-primary);
}

.one-btn-outline-coral:hover {
    background: var(--one-coral-primary);
    color: var(--one-white);
}

.one-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--one-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.one-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Tamanhos de Botão */
.one-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--one-text-sm);
}

.one-btn-lg {
    padding: 1rem 2rem;
    font-size: var(--one-text-lg);
}

/* ========================================
   CARDS
   ======================================== */

.one-card {
    background: var(--one-white);
    border-radius: var(--one-radius-xl);
    padding: var(--one-space-8);
    box-shadow: var(--one-shadow-navy);
    transition: all var(--one-transition-base) var(--one-ease-in-out);
}

.one-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--one-shadow-xl);
}

.one-card-flat {
    background: var(--one-white);
    border-radius: var(--one-radius-lg);
    padding: var(--one-space-6);
    border: 1px solid var(--one-slate-200);
}

.one-card-gradient {
    background: linear-gradient(135deg, var(--one-navy-primary) 0%, var(--one-navy-light) 100%);
    color: var(--one-white);
    border-radius: var(--one-radius-2xl);
    padding: var(--one-space-8);
}

/* ========================================
   BADGES
   ======================================== */

.one-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: var(--one-text-xs);
    font-weight: var(--one-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--one-radius-full);
}

.one-badge-navy {
    background: rgba(0, 56, 108, 0.1);
    color: var(--one-navy-primary);
    border: 1px solid rgba(0, 56, 108, 0.2);
}

.one-badge-coral {
    background: rgba(239, 64, 87, 0.1);
    color: var(--one-coral-primary);
    border: 1px solid rgba(239, 64, 87, 0.2);
}

/* ========================================
   INPUTS & FORMS
   ======================================== */

.one-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--one-font-body);
    font-size: var(--one-text-base);
    color: var(--one-navy-primary);
    background: var(--one-white);
    border: 2px solid var(--one-slate-300);
    border-radius: var(--one-radius-lg);
    transition: all var(--one-transition-fast);
}

.one-input:focus {
    outline: none;
    border-color: var(--one-coral-primary);
    box-shadow: 0 0 0 3px rgba(239, 64, 87, 0.1);
}

.one-label {
    display: block;
    margin-bottom: var(--one-space-2);
    font-size: var(--one-text-sm);
    font-weight: var(--one-font-semibold);
    color: var(--one-navy-primary);
}

/* ========================================
   NAVEGAÇÃO
   ======================================== */

.one-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--one-z-sticky);
    transition: all var(--one-transition-base);
}

.one-nav-transparent {
    background: transparent;
    color: var(--one-white);
}

.one-nav-solid {
    background: var(--one-white);
    color: var(--one-navy-primary);
    box-shadow: var(--one-shadow-md);
}

.one-nav-link {
    font-size: var(--one-text-sm);
    font-weight: var(--one-font-medium);
    transition: color var(--one-transition-fast);
    text-decoration: none;
}

.one-nav-link:hover {
    color: var(--one-coral-primary);
}

/* ========================================
   UTILIDADES
   ======================================== */

/* Glassmorphism */
.one-glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.one-glass-dark {
    background: rgba(0, 56, 108, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hover Lift Effect */
.one-hover-lift {
    transition: transform var(--one-transition-base) var(--one-ease-in-out);
}

.one-hover-lift:hover {
    transform: translateY(-5px);
}

/* Text Gradient */
.one-text-gradient {
    background: linear-gradient(135deg, var(--one-navy-primary) 0%, var(--one-navy-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Container */
.one-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--one-space-6);
    padding-right: var(--one-space-6);
}

/* Section Spacing */
.one-section {
    padding-top: var(--one-space-24);
    padding-bottom: var(--one-space-24);
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

@keyframes one-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.one-animate-fade-in {
    animation: one-fade-in var(--one-transition-slow) var(--one-ease-out);
}

@keyframes one-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.one-animate-pulse {
    animation: one-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 767px) {
    .one-section {
        padding-top: var(--one-space-16);
        padding-bottom: var(--one-space-16);
    }

    .one-btn {
        width: 100%;
    }
}