/**
 * Mito Sport Health — Storefront Theme Override
 * Alinea el storefront Metronic/Tailwind con los estilos corporativos (staycreative.css)
 * Para revertir: quitar el <link> de este archivo en layouts/storefront.blade.php
 */

/* ========================================
   CSS CUSTOM PROPERTIES (override Metronic)
   ======================================== */
:root {
    /* Mito brand colors */
    --primary: #00E29C;
    --primary-foreground: #fff;
    --primary-hover: #1D1D1B;

    /* Fonts */
    --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
body {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.text-mono {
    font-family: var(--font-heading) !important;
    color: #1D1D1B;
}

/* ========================================
   BUTTONS — rounded pill style como corporate
   ======================================== */
.kt-btn,
.kt-btn-primary,
.kt-btn-outline,
.kt-btn-sm,
button[class*="kt-btn"],
a[class*="kt-btn"] {
    border-radius: 25px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

/* Primary button */
.kt-btn-primary,
.kt-btn.kt-btn-primary {
    background: #00E29C !important;
    border-color: #00E29C !important;
    color: #fff !important;
}
.kt-btn-primary:hover,
.kt-btn.kt-btn-primary:hover {
    background: #1D1D1B !important;
    border-color: #1D1D1B !important;
    color: #fff !important;
}

/* Outline button */
.kt-btn-outline,
.kt-btn.kt-btn-outline {
    background: transparent !important;
    border: 1px solid #1D1D1B !important;
    color: #1D1D1B !important;
}
.kt-btn-outline:hover,
.kt-btn.kt-btn-outline:hover {
    background: #1D1D1B !important;
    color: #fff !important;
}

/* Ghost buttons (quantity +/-) keep subtle */
.kt-btn-ghost {
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
}

/* ========================================
   CARDS — rounded + subtle shadow
   ======================================== */
.kt-card {
    border-radius: 16px !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden;
}
.kt-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ========================================
   BADGES
   ======================================== */
.kt-badge {
    border-radius: 20px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
.kt-badge-primary {
    background: rgba(0, 226, 156, 0.15) !important;
    color: #00B87A !important;
}
.kt-badge-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #D97706 !important;
}
.kt-badge-success {
    background: rgba(0, 226, 156, 0.15) !important;
    color: #00B87A !important;
}
.kt-badge-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #DC2626 !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.kt-input,
.kt-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="tel"],
select,
textarea {
    border-radius: 12px !important;
    border: 1px solid #e5e5e5 !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.2s ease !important;
}
.kt-input:focus,
.kt-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #00E29C !important;
    box-shadow: 0 0 0 3px rgba(0, 226, 156, 0.15) !important;
    outline: none !important;
}

/* ========================================
   LINKS
   ======================================== */
a.link,
.link {
    color: #00E29C !important;
}
a.link:hover,
.link:hover {
    color: #1D1D1B !important;
}

/* text-primary override */
.text-primary {
    color: #00E29C !important;
}
.bg-primary\/10 {
    background: rgba(0, 226, 156, 0.1) !important;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.bg-muted\/30 {
    background: #f8f8f8 !important;
}

/* ========================================
   TABS (product page)
   ======================================== */
.tab-btn.border-primary {
    border-color: #00E29C !important;
    color: #00E29C !important;
}

/* ========================================
   FLASH MESSAGES — rounded
   ======================================== */
#flash-success,
#flash-error {
    border-radius: 12px !important;
}

/* ========================================
   ACCOUNT SIDEBAR / NAVIGATION
   ======================================== */
.hover\:text-primary:hover {
    color: #00E29C !important;
}

/* ========================================
   SCROLLBAR (subtle)
   ======================================== */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* ========================================
   CHECKOUT STEPS & PROCESS
   ======================================== */
.bg-primary {
    background-color: #00E29C !important;
}
.border-primary {
    border-color: #00E29C !important;
}
.ring-primary {
    --tw-ring-color: #00E29C !important;
}

/* Step circles & lines */
[class*="checkout-step"] .bg-primary,
.step-circle.active,
.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600 {
    background-color: #00E29C !important;
}
.border-blue-500, .border-blue-600, .border-indigo-500, .border-indigo-600 {
    border-color: #00E29C !important;
}
.text-blue-500, .text-blue-600, .text-indigo-500, .text-indigo-600,
.text-blue-700, .text-indigo-700 {
    color: #00E29C !important;
}

/* Hover states */
.hover\:bg-primary:hover, .hover\:bg-blue-600:hover, .hover\:bg-indigo-600:hover {
    background-color: #1D1D1B !important;
}
.hover\:text-primary:hover, .hover\:text-blue-600:hover, .hover\:text-indigo-600:hover {
    color: #00E29C !important;
}

/* Focus rings */
.focus\:ring-primary:focus, .focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(0, 226, 156, 0.4) !important;
}
.focus\:border-primary:focus, .focus\:border-blue-500:focus, .focus\:border-indigo-500:focus {
    border-color: #00E29C !important;
}

/* Active/selected states */
.peer-checked\:bg-primary, .peer-checked\:border-primary,
[data-active="true"], .active .bg-blue-500 {
    background-color: #00E29C !important;
    border-color: #00E29C !important;
}

/* Accent color for checkboxes/radios */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #00E29C !important;
    background-color: #00E29C !important;
    border-color: #00E29C !important;
}

/* ========================================
   QUANTITY SELECTOR — rounded
   ======================================== */
.border.border-border.rounded-lg {
    border-radius: 25px !important;
}

/* ========================================
   PRODUCT IMAGE — rounded
   ======================================== */
.rounded-lg {
    border-radius: 12px !important;
}

/* ========================================
   TABLE HEADER
   ======================================== */
.bg-muted\/50 {
    background: #f5f5f5 !important;
    font-family: var(--font-heading) !important;
}

/* ========================================
   CHECKOUT HEADER — match corporate style
   ======================================== */
header.border-b {
    border-color: #1D1D1B !important;
}
header a img {
    filter: none;
}

/* ========================================
   ORDER DETAIL & STATUS BADGES
   ======================================== */
.bg-green-50, .bg-green-100 { background: rgba(0, 226, 156, 0.1) !important; }
.text-green-600, .text-green-700, .text-green-800 { color: #00B87A !important; }
.bg-yellow-50, .bg-yellow-100 { background: rgba(245, 158, 11, 0.1) !important; }
.bg-red-50, .bg-red-100 { background: rgba(239, 68, 68, 0.1) !important; }

/* Inline payment/status badges */
span[class*="bg-"][class*="text-"][class*="rounded"] {
    border-radius: 20px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}

/* ========================================
   GENERAL TAILWIND OVERRIDES
   ======================================== */
/* Selection/active ring color */
.ring-2 { --tw-ring-color: rgba(0, 226, 156, 0.4) !important; }
.ring-offset-2 { --tw-ring-offset-color: #fff; }

/* Divide lines */
.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e5e5;
}