/*
Theme Name:  Desarrollo 5MIND
Theme URI:   https://5mindstore.com
Author:      5MIND Store
Author URI:  https://5mindstore.com
Description: Tema personalizado 5MIND Store. Streetwear premium con integracion WooCommerce REST API.
Version:     2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License:     Proprietary
Text Domain: desarrollo5mind
*/

/* ─────────────────────────────────────────────
   5MIND DESIGN TOKENS — Variables CSS Globales
   Requeridas por todos los componentes del tema
   ───────────────────────────────────────────── */

:root {
  --color-acento:    #F28A1E;
  --color-acento-2:  #E07010;
  --gradient-cta:    linear-gradient(135deg, #F28A1E 0%, #E07010 100%);
  --font-base:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', 'Inter', sans-serif;
  --bg-base:     #0A0A0A;
  --bg-surface:  #111111;
  --bg-elevated: #1A1A1A;
  --bg-subtle:   #222222;
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted:     rgba(255,255,255,0.35);
  --border-base:   rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 0.3s ease;
}

[data-theme="light"] {
  --bg-base:     #FAFAFA;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #F4F4F4;
  --bg-subtle:   #EEEEEE;
  --text-primary:   #0A0A0A;
  --text-secondary: rgba(0,0,0,0.65);
  --text-muted:     rgba(0,0,0,0.35);
  --border-base:   rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.18);
}

/* ── Global Layout Fixes ── */
body { display: block !important; }
.navbar-moderna__logo img { height: 28px !important; width: auto !important; max-height: 28px !important; display: block !important; }
.navbar-moderna { align-items: center !important; }
.footer-moderno { clear: both !important; width: 100% !important; display: block !important; }

/* ── Aggressive Checkout Reset ── */
body.woocommerce-checkout { display: block !important; }
body.woocommerce-checkout .navbar-wrapper,
body.woocommerce-checkout main,
body.woocommerce-checkout footer,
body.woocommerce-checkout .page-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: relative !important;
}
body.woocommerce-checkout main {
    max-width: 1280px !important;
    margin: 0 auto !important;
}

/* ── WooCommerce Custom Styles ── */
/* =============================================
   WOOCOMMERCE.CSS — Custom Styles for Checkout
   ============================================= */

/* Fix: Do not target .woocommerce directly as it applies to the body! */
.page-content .woocommerce {
  max-width: 100%;
  font-family: var(--font-base);
}

/* ─── SHOPIFY-STYLE SPLIT LAYOUT ─── */
form.woocommerce-checkout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 960px) {
  form.woocommerce-checkout {
    flex-direction: row;
    align-items: flex-start;
    gap: 4%;
  }

  /* Left Side: Billing/Shipping */
  #customer_details {
    width: 55%;
    padding-right: 2%;
  }

  /* Right Side: Order Review & Payment */
  .woocommerce-checkout-review-order {
    width: 45%;
    background: var(--bg-subtle);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-base);
    position: sticky;
    top: 80px; /* Sticky scroll */
  }
}

/* Hide the duplicate heading for Order Review if it's outside the box */
h3#order_review_heading {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 0.75rem;
}

@media (min-width: 960px) {
  h3#order_review_heading {
    display: none; /* In Shopify style, it's implied on the right side, or we just keep it inside the right box if we can, but Woo puts it before. We'll just hide it or let it be. Let's keep it visible but style it nicely. */
    display: block;
    width: 45%;
    margin-top: 0;
  }
  /* Actually, Woo puts order_review_heading OUTSIDE order_review. 
     So we can't easily put it inside the sticky box without JS.
     Instead, let's style order_review to include the padding and border.
  */
}

/* Let's refine the right side layout */
@media (min-width: 960px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 55% 42%;
    justify-content: space-between;
  }
  
  #customer_details {
    width: 100%;
    padding-right: 0;
  }

  /* We group the right side elements using grid column */
  h3#order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 -1rem 0;
    padding-top: 1.5rem;
    padding-left: 2rem;
    border-bottom: none;
    z-index: 10;
  }

  #order_review {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: var(--bg-subtle);
    padding: 4.5rem 2.5rem 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-base);
    position: sticky;
    top: 80px;
  }
}

/* Typography and Colors */
.page-content .woocommerce-checkout h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 0.75rem;
}
#order_review_heading {
  border-bottom: none;
}

/* Form Inputs */
.woocommerce form .form-row {
  margin-bottom: 1.25rem;
  padding: 0;
}
.woocommerce form .form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.woocommerce form .form-row .required {
  color: var(--color-acento);
  text-decoration: none;
  font-weight: bold;
}
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: 6px;
  font-family: var(--font-base);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--text-primary);
  background-color: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--text-primary);
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 0.6rem 0.5rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}
.select2-dropdown {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bg-subtle) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--text-primary) !important;
  color: var(--bg-base) !important;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-base);
  color: var(--text-primary);
  text-align: left;
}
.woocommerce-checkout-review-order-table th {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.woocommerce-checkout-review-order-table .product-name {
  font-weight: 500;
}
.woocommerce-checkout-review-order-table .product-total {
  text-align: right;
  font-weight: 600;
}
.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
}
.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-weight: 700;
  font-size: 1.1rem;
}
/* Subtotal / Total specific sizing */
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  border-top: 2px solid var(--border-strong);
  border-bottom: none;
  font-size: 1.25rem;
  padding-top: 1.5rem;
}

/* Payment Box */
#payment {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
}
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
  border-bottom: 1px solid var(--border-base);
}
#payment ul.payment_methods li {
  margin-bottom: 1.5rem;
}
#payment ul.payment_methods li input[type="radio"] {
  margin-right: 0.75rem;
  accent-color: var(--text-primary);
  transform: scale(1.2);
}
#payment ul.payment_methods li label {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
}
#payment div.payment_box {
  background-color: var(--bg-subtle);
  padding: 1.25rem;
  margin: 1rem 0 0 0;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  position: relative;
  line-height: 1.6;
}

/* Terms and Conditions */
.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1.5rem;
}
.woocommerce-terms-and-conditions-wrapper label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  margin-right: 0.75rem;
  accent-color: var(--text-primary);
  transform: scale(1.2);
}

/* Place Order Button */
#payment .place-order {
  margin: 0;
  padding: 0;
}
.woocommerce button.button.alt#place_order {
  display: block;
  width: 100%;
  background: var(--gradient-cta) !important;
  color: var(--bg-base) !important;
  border: none !important;
  padding: 1.25rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: transform 0.3s var(--ease-spring), opacity 0.3s ease !important;
}
.woocommerce button.button.alt#place_order:hover {
  transform: translateY(-2px) !important;
  opacity: 0.9 !important;
}

/* Notices (Errors, Info) */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  background-color: var(--bg-elevated);
  border-left: 4px solid var(--text-primary);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  list-style: none;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}
.woocommerce-error {
  border-left-color: var(--color-acento);
}
.woocommerce-info::before, .woocommerce-message::before {
  display: none;
}
.woocommerce-error li { margin-bottom: 0.5rem; }
.woocommerce-error li:last-child { margin-bottom: 0; }

/* Coupon form */
.woocommerce-form-coupon-toggle .woocommerce-info {
  border-left-color: var(--text-muted);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  box-shadow: none;
}
.woocommerce-form-coupon {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-base);
  border-radius: 8px;
}
.woocommerce-form-coupon .form-row { margin: 0 !important; }
.woocommerce-form-coupon .form-row-first { flex: 1; }
.woocommerce-form-coupon .form-row-last { flex-shrink: 0; }
.woocommerce-form-coupon button.button {
  background: var(--text-primary) !important;
  color: var(--bg-base) !important;
  border: none !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
@media (max-width: 768px) {
  .woocommerce-form-coupon { flex-direction: column; }
  .woocommerce-form-coupon button.button { width: 100%; }
}

/* RESET FORZADO PARA FOOTER */
.footer-moderno {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
body.woocommerce-checkout .footer-moderno {
    margin-top: 50px !important;
}

/* ── Logo: mostrar sólo el correcto según el modo ── */
/* Por defecto (dark mode) */
.navbar-moderna__logo .logo-light,
.mobile-nav-drawer__logo .logo-light {
  display: none !important;
}
.navbar-moderna__logo .logo-dark,
.mobile-nav-drawer__logo .logo-dark {
  display: block !important;
}

/* Light mode */
[data-theme="light"] .navbar-moderna__logo .logo-light,
[data-theme="light"] .mobile-nav-drawer__logo .logo-light {
  display: block !important;
}
[data-theme="light"] .navbar-moderna__logo .logo-dark,
[data-theme="light"] .mobile-nav-drawer__logo .logo-dark {
  display: none !important;
}

/* ── Promo bar: alinear icono SVG con texto ── */
#promo-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}