/**
 * Kuifi Custom CSS Utilities
 * Clases adicionales que complementan Tailwind
 * 
 * NOTA: El CSS principal está en main.css (Tailwind compilado)
 * Este archivo solo agrega utilities específicas del tema
 */

/* Container personalizado */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Links naturales (efecto hover sutil) */
.link-natural {
    @apply text-neutral-700 hover:text-primary transition-colors duration-200 relative;
}

.link-natural::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-200;
}

.link-natural:hover::after {
    @apply w-full;
}

/* Header logos: avoid unexpected scaling from global image rules */
.kuifi-logo {
    height: 4rem !important;
    width: auto !important;
    max-width: none !important;
}

@media (min-width: 768px) {
    .kuifi-logo {
        height: 5rem !important;
    }
}

/* Botones */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary-dark transition-all duration-200 shadow-soft hover:shadow-soft-lg;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-secondary text-accent font-medium rounded-lg hover:bg-secondary-dark transition-all duration-200;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-all duration-200;
}

.btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2 text-neutral-700 hover:text-primary hover:bg-secondary rounded-lg transition-all duration-200;
}

/* Cards naturales */
.card-natural {
    @apply bg-white rounded-2xl shadow-soft hover:shadow-soft-lg transition-all duration-300 overflow-hidden;
}

/* Select personalizado */
.select-natural {
    @apply w-full px-4 py-2 bg-white border border-neutral-300 rounded-lg text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all;
}

/* Input personalizado */
.input-natural {
    @apply w-full px-4 py-2 bg-white border border-neutral-300 rounded-lg text-neutral-700 placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-3 py-1 text-xs font-medium rounded-full;
}

.badge-featured {
    @apply badge bg-primary text-white;
}

.badge-new {
    @apply badge bg-accent text-white;
}

.badge-sale {
    @apply badge bg-red-500 text-white;
}

/* Gradientes naturales */
.bg-gradient-natural {
    background: linear-gradient(135deg, #F5F1E8 0%, #EBE5D5 50%, #F5F1E8 100%);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #7DB662 0%, #5A8F47 100%);
}

.bg-gradient-soft {
    background: linear-gradient(180deg, #F5F1E8 0%, #FFFFFF 100%);
}

/* Sombras naturales */
.shadow-soft {
    box-shadow: 0 2px 15px rgba(125, 182, 98, 0.1);
}

.shadow-soft-lg {
    box-shadow: 0 4px 25px rgba(125, 182, 98, 0.15);
}

.shadow-natural {
    box-shadow: 0 10px 30px rgba(90, 143, 71, 0.12);
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-bounce-soft {
    animation: bounceSoft 2s infinite;
}

/* Prose (para contenido de WordPress) */
.prose {
    @apply text-neutral-700 leading-relaxed;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    @apply font-primary text-accent mb-4;
}

.prose h1 { @apply text-4xl; }
.prose h2 { @apply text-3xl; }
.prose h3 { @apply text-2xl; }
.prose h4 { @apply text-xl; }

.prose p {
    @apply mb-4;
}

.prose a {
    @apply text-primary hover:text-primary-dark underline;
}

.prose ul,
.prose ol {
    @apply mb-4 ml-6;
}

.prose li {
    @apply mb-2;
}

/* WooCommerce overrides */
.woocommerce-product-gallery {
    @apply mb-8;
}

.woocommerce-Price-amount {
    @apply text-accent font-bold;
}

.woocommerce-message,
.woocommerce-info {
    @apply bg-secondary border-l-4 border-primary p-4 rounded-lg mb-4;
}

.woocommerce-error {
    @apply bg-red-50 border-l-4 border-red-500 p-4 rounded-lg mb-4;
}

/* Checkout layout fixes */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    accent-color: #7DB662;
}

.woocommerce-checkout input[type="checkbox"] {
    border-radius: 0.25rem;
}

.woocommerce-checkout .woocommerce-shipping-methods,
.woocommerce-checkout .wc_payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-checkout .woocommerce-shipping-methods li,
.woocommerce-checkout .wc_payment_methods li.wc_payment_method {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #FAF8F4;
}

.woocommerce-checkout .woocommerce-shipping-methods li + li,
.woocommerce-checkout .wc_payment_methods li.wc_payment_method + li.wc_payment_method {
    margin-top: 0.6rem;
}

.woocommerce-checkout .woocommerce-shipping-methods label,
.woocommerce-checkout .wc_payment_methods label {
    font-weight: 600;
    color: #2F4D2B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.woocommerce-checkout .wc_payment_methods .payment_box {
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    background: #F5F1E8;
    border: 1px solid #E8F5E0;
    max-width: 100%;
    overflow: hidden;
}

/* Fix MercadoPago iframe overflow on mobile */
.woocommerce-checkout .wc_payment_methods .payment_box iframe,
.woocommerce-checkout .wc_payment_methods .payment_box > div,
.woocommerce-checkout .payment_box .mp-checkout-container,
.woocommerce-checkout .payment_box [class*="mp-"],
.woocommerce-checkout .payment_box [class*="mercadopago"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Payment method list item: stack on mobile when content overflows */
@media (max-width: 640px) {
    .woocommerce-checkout .wc_payment_methods li.wc_payment_method {
        flex-wrap: wrap;
    }
    .woocommerce-checkout .wc_payment_methods label img {
        max-height: 1.5rem;
        width: auto;
    }
    .woocommerce-checkout .wc_payment_methods .payment_box {
        width: 100%;
        flex-basis: 100%;
    }
}

/* MercadoPago: fix CVV/security-code help icon overlapping input on mobile */
@media (max-width: 768px) {
    /* Hide the floating "?" tooltip trigger – not useful on touch devices */
    .payment_box [class*="security-code-icon"],
    .payment_box [class*="securityCode"][class*="icon"],
    .payment_box [class*="hint"],
    .payment_box [class*="helper"],
    .payment_box [class*="tooltip"],
    .payment_box [id*="hint"],
    .payment_box [id*="Hint"],
    .payment_box button[class*="icon"],
    .payment_box svg + button,
    .payment_box [data-testid*="icon"],
    .payment_box [data-testid*="hint"] {
        display: none !important;
    }
    /* Ensure each field iframe takes full width without the icon stealing space */
    .payment_box iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

.woocommerce-checkout .wc_payment_methods .payment_box fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

/* MercadoPago: estabilizar campo de código de seguridad en desktop y mobile */
.woocommerce-checkout .payment_box input[type="number"] {
    -moz-appearance: textfield;
}

.woocommerce-checkout .payment_box input[type="number"]::-webkit-outer-spin-button,
.woocommerce-checkout .payment_box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce-checkout .payment_box [name*="security"],
.woocommerce-checkout .payment_box [id*="security"],
.woocommerce-checkout .payment_box [name*="cvv"],
.woocommerce-checkout .payment_box [id*="cvv"],
.woocommerce-checkout .payment_box [data-testid*="security"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .payment_box [name*="security"] + button,
.woocommerce-checkout .payment_box [id*="security"] + button,
.woocommerce-checkout .payment_box [name*="cvv"] + button,
.woocommerce-checkout .payment_box [id*="cvv"] + button,
.woocommerce-checkout .payment_box button[aria-label*="security"],
.woocommerce-checkout .payment_box button[aria-label*="seguridad"],
.woocommerce-checkout .payment_box [data-testid*="security"] + button,
.woocommerce-checkout .payment_box [class*="security"] button,
.woocommerce-checkout .payment_box [class*="cvv"] button {
    display: none !important;
}

.woocommerce-checkout .kuifi-checkout-product {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.woocommerce-checkout .kuifi-checkout-product__thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid #E5E7EB;
    background: #fff;
}

.woocommerce-checkout .kuifi-checkout-product__name {
    display: inline-block;
    color: #2F4D2B;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.6rem 0;
}

.woocommerce-checkout-review-order-table .shipping td {
    padding-top: 0.75rem;
}

.woocommerce-checkout-review-order-table .shipping th {
    padding-top: 0.75rem;
    color: #5A8F47;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .container-custom {
        @apply px-4;
    }
}

/* Contact Page Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(30px) rotate(-10deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes scale-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in-up {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.animate-float-slow {
    animation: float-slow 7s ease-in-out infinite;
}

.animate-scale-in {
    animation: scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.animation-delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}

.animation-delay-400 {
    animation-delay: 0.4s;
    opacity: 0;
}