
/* =========================================================
   K2 USER EXPERIENCE REBRAND
   Clean white UI for users, premium gold accents, mobile-first
   Visual only: no logic/data changes
   ========================================================= */

:root{
  --ux-bg: #f7f8fa;
  --ux-surface: #ffffff;
  --ux-surface-soft: #fcfcfd;
  --ux-border: #e7e9ee;
  --ux-border-gold: rgba(195,148,21,.26);
  --ux-text: #172033;
  --ux-text-2: #4d596d;
  --ux-text-3: #8a94a6;
  --ux-gold: #c39415;
  --ux-gold-2: #e3b633;
  --ux-gold-soft: #fff8e6;
  --ux-dark: #101317;
  --ux-dark-2: #171b21;
  --ux-success: #18b368;
  --ux-danger: #b94a48;
  --ux-warning: #cc8a00;
  --ux-shadow: 0 10px 28px rgba(16,24,40,.06);
  --ux-shadow-soft: 0 6px 16px rgba(16,24,40,.05);
  --ux-radius: 20px;
  --ux-radius-sm: 14px;
}

html, body{
  background: var(--ux-bg) !important;
  color: var(--ux-text) !important;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* general cleanup */
*{
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
  color: var(--ux-text);
}
p,span,small,label,li{
  color: var(--ux-text-2);
}
.text-muted, .muted, .helper-text{
  color: var(--ux-text-3) !important;
}

/* top mobile app bar */
header,
.topbar,
.app-header,
.mobile-header,
[class*="headerBar"],
[class*="topbar"]{
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23,32,51,.08) !important;
  box-shadow: 0 2px 12px rgba(16,24,40,.04) !important;
}
header *, .topbar *, .app-header *, .mobile-header *{
  color: var(--ux-text) !important;
}
header button, .topbar button{
  border-radius: 12px;
}

/* user side menu */
aside,
.sidebar,
.drawer,
.menu-panel,
[class*="sidebar"],
[class*="drawer"]{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%) !important;
  border-right: 1px solid rgba(23,32,51,.06) !important;
}
aside .logo, .sidebar .logo{
  filter: drop-shadow(0 8px 18px rgba(195,148,21,.14));
}
aside a, aside button,
.sidebar a, .sidebar button,
.drawer a, .drawer button{
  color: var(--ux-text) !important;
}
aside .active,
.sidebar .active,
.drawer .active,
aside [aria-current="page"],
.sidebar [aria-current="page"]{
  background: linear-gradient(90deg, rgba(195,148,21,.16), rgba(195,148,21,.05)) !important;
  border: 1px solid rgba(195,148,21,.22) !important;
  color: var(--ux-gold) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
aside .active *, .sidebar .active *, .drawer .active *{
  color: var(--ux-gold) !important;
}

/* main wrappers */
main,
.main-content,
.dashboard-content,
.content,
.page-content,
[class*="content-wrapper"]{
  background: transparent !important;
}

/* cards and panels: white first */
.card,
.panel,
.box,
.widget,
.metric-card,
.stats-card,
.summary-card,
.bonus-card,
.checkout-card,
.order-card,
[class*="card"],
[class*="panel"]{
  background: var(--ux-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-radius) !important;
  box-shadow: var(--ux-shadow) !important;
}
.card h1,.card h2,.card h3,.card h4,
.panel h1,.panel h2,.panel h3,.panel h4,
[class*="card"] h1,[class*="card"] h2,[class*="card"] h3,[class*="card"] h4{
  color: var(--ux-text) !important;
}
.card p,.card span,.panel p,.panel span,
[class*="card"] p,[class*="card"] span{
  color: var(--ux-text-2) !important;
}

/* status / alert blocks */
.alert, .notice, .banner, [class*="alert"], [class*="notice"], [class*="banner"]{
  border-radius: 18px !important;
  box-shadow: var(--ux-shadow-soft) !important;
}
.alert-info, [class*="info"]{
  background: #f8fbff !important;
  border: 1px solid #d9e9ff !important;
}
.alert-success, [class*="success"]{
  background: #f2fff7 !important;
  border: 1px solid #cdeedb !important;
}
.alert-warning, [class*="warning"]{
  background: #fff9ef !important;
  border: 1px solid #f3dfb2 !important;
}
.alert-danger, [class*="danger"], [class*="error"]{
  background: #fff4f3 !important;
  border: 1px solid #f3cdca !important;
}

/* inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  background: #ffffff !important;
  color: var(--ux-text) !important;
  border: 1.5px solid #d9dde6 !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder{
  color: #9aa3b2 !important;
  opacity: 1 !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(195,148,21,.60) !important;
  box-shadow: 0 0 0 4px rgba(195,148,21,.10) !important;
}
label, .label{
  color: var(--ux-text-2) !important;
  font-weight: 600 !important;
}

/* buttons */
button, .btn{
  border-radius: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
button:hover, .btn:hover{
  transform: translateY(-1px);
}
.btn-primary, button.primary, [class*="primary-button"]{
  background: linear-gradient(180deg, #ff9f2d 0%, #ff8a00 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(255,138,0,.24) !important;
}
.btn-secondary{
  background: #eff2f7 !important;
  color: var(--ux-text) !important;
}

/* login redesign */
.login-page,
.auth-page,
[class*="login-page"],
[class*="auth-page"]{
  background:
    radial-gradient(circle at top center, rgba(195,148,21,.12), transparent 26%),
    linear-gradient(180deg, #121417 0%, #0c0d10 100%) !important;
}
.login-card,
.auth-card,
[class*="login"] [class*="card"],
[class*="auth"] [class*="card"]{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(195,148,21,.24) !important;
  border-radius: 26px !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.24), 0 8px 24px rgba(195,148,21,.08) !important;
}
.login-card .brand,
.auth-card .brand,
[class*="login"] .brand,
[class*="auth"] .brand,
.login-card h1,.auth-card h1,
[class*="login"] h1,[class*="auth"] h1{
  color: var(--ux-gold) !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-shadow: 0 2px 10px rgba(195,148,21,.08);
}
.login-card .subtitle,
.auth-card .subtitle,
[class*="login"] .subtitle,
[class*="auth"] .subtitle{
  color: var(--ux-text-3) !important;
}
.login-card [role="tab"], .auth-card [role="tab"]{
  color: #8e97a6 !important;
}
.login-card [aria-selected="true"], .auth-card [aria-selected="true"]{
  color: var(--ux-gold) !important;
  background: linear-gradient(180deg, rgba(195,148,21,.08), rgba(195,148,21,.02)) !important;
  border-bottom: 2px solid var(--ux-gold) !important;
}

/* store layout */
[class*="tienda"],
[class*="shop"],
[class*="store"]{
  background: transparent !important;
}

/* product cards: dark luxury cards but cleaner */
.product-card,
[class*="product-card"],
[class*="product-item"],
[class*="catalog"] [class*="card"]{
  background: linear-gradient(180deg, #14171c 0%, #0c0f13 100%) !important;
  border: 1px solid rgba(195,148,21,.14) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px rgba(10,15,20,.18) !important;
}
.product-card *{
  text-shadow: none !important;
}
.product-card .image-wrap,
[class*="product-card"] .image-wrap{
  background: #f9fafb !important;
  border-radius: 18px !important;
  margin: 16px !important;
  padding: 14px !important;
}
.product-card img,
[class*="product-card"] img{
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
.product-card h3, .product-card h4,
[class*="product-card"] h3,[class*="product-card"] h4{
  color: #ffffff !important;
  font-size: 1.02rem !important;
  line-height: 1.12 !important;
  margin-bottom: 8px !important;
}
.product-card p,
[class*="product-card"] p{
  color: rgba(255,255,255,.78) !important;
  font-size: .90rem !important;
  line-height: 1.32 !important;
}
.product-card .badge,
[class*="product-card"] .badge{
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
}
.product-card [class*="price"],
[class*="product-card"] [class*="price"]{
  background: linear-gradient(180deg, #fff9ec 0%, #fff4d8 100%) !important;
  border: 1px solid rgba(195,148,21,.22) !important;
  border-radius: 16px !important;
}
.product-card [class*="price"] *,
[class*="product-card"] [class*="price"] *{
  color: #986d00 !important;
  opacity: 1 !important;
}
.product-card button,
[class*="product-card"] button{
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* shop search and quick summary */
[class*="tienda"] input,
[class*="shop"] input,
[class*="store"] input{
  background: #ffffff !important;
}
[class*="tienda"] .quick-stats > *,
[class*="shop"] .quick-stats > *,
[class*="store"] .quick-stats > *{
  background: #ffffff !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 16px !important;
}

/* cart + checkout */
[class*="cart"],
[class*="checkout"],
[class*="payment"]{
  background: #0d1014 !important;
  color: #ffffff !important;
}
[class*="cart"] h1,[class*="cart"] h2,[class*="checkout"] h1,[class*="payment"] h1{
  color: #ffffff !important;
}
[class*="cart"] .cart-item,
[class*="checkout"] .cart-item,
[class*="payment"] .cart-item{
  background: #11151a !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
}
[class*="cart"] .cart-item *,
[class*="checkout"] .cart-item *,
[class*="payment"] .cart-item *{
  color: #ffffff !important;
}
[class*="cart"] .summary-grid > *,
[class*="checkout"] .summary-grid > *,
[class*="payment"] .summary-grid > *,
[class*="cart"] [class*="totals"] > *,
[class*="checkout"] [class*="totals"] > *,
[class*="payment"] [class*="totals"] > *{
  background: #11151a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
}
[class*="cart"] .shipping-options > *,
[class*="checkout"] .shipping-options > *,
[class*="payment"] .shipping-options > *,
[class*="cart"] [class*="delivery"] > *,
[class*="checkout"] [class*="delivery"] > *,
[class*="payment"] [class*="delivery"] > *{
  background: #11151a !important;
  border: 1px solid rgba(195,148,21,.18) !important;
  border-radius: 16px !important;
}
[class*="cart"] .shipping-options .active,
[class*="checkout"] .shipping-options .active,
[class*="payment"] .shipping-options .active,
[class*="cart"] [class*="delivery"] .active,
[class*="checkout"] [class*="delivery"] .active,
[class*="payment"] [class*="delivery"] .active{
  background: linear-gradient(180deg, rgba(195,148,21,.22), rgba(195,148,21,.12)) !important;
  border-color: rgba(227,182,51,.8) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
[class*="cart"] input,
[class*="checkout"] input,
[class*="payment"] input{
  background: #1b2027 !important;
  border: 1px solid rgba(195,148,21,.20) !important;
  color: #ffffff !important;
}
[class*="cart"] input::placeholder,
[class*="checkout"] input::placeholder,
[class*="payment"] input::placeholder{
  color: rgba(255,255,255,.48) !important;
}
[class*="cart"] .btn-secondary,
[class*="checkout"] .btn-secondary,
[class*="payment"] .btn-secondary{
  background: #3a3d43 !important;
  color: #ffffff !important;
}

/* white dashboard cards for user pages */
[class*="dashboard"] .card:not(.product-card),
[class*="bono"] .card:not(.product-card),
[class*="regalia"] .card:not(.product-card),
[class*="wallet"] .card:not(.product-card),
[class*="franqu"] .card:not(.product-card),
[class*="comision"] .card:not(.product-card){
  background: #ffffff !important;
  border: 1px solid rgba(195,148,21,.18) !important;
}

/* 3x2 area: make nodes readable */
[class*="3x2"],
[class*="turbo"][class*="ticket"],
[class*="ticket"][class*="turbo"]{
  background: #ffffff !important;
}
[class*="3x2"] .node,
[class*="turbo"][class*="ticket"] .node,
[class*="ticket"][class*="turbo"] .node{
  position: relative !important;
  overflow: visible !important;
}
[class*="3x2"] .node-label,
[class*="turbo"][class*="ticket"] .node-label,
[class*="ticket"][class*="turbo"] .node-label,
[class*="3x2"] .label,
[class*="turbo"][class*="ticket"] .label,
[class*="ticket"][class*="turbo"] .label{
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 64px !important;
  max-width: 64px !important;
  text-align: center !important;
  line-height: 1.02 !important;
  font-size: 11px !important;
  color: #243142 !important;
  z-index: 3 !important;
  word-break: break-word !important;
}
[class*="3x2"] .node-price,
[class*="turbo"][class*="ticket"] .node-price,
[class*="ticket"][class*="turbo"] .node-price,
[class*="3x2"] .price,
[class*="turbo"][class*="ticket"] .price,
[class*="ticket"][class*="turbo"] .price{
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  transform: translateX(-50%) !important;
  background: #fff6df !important;
  color: #9c7200 !important;
  border: 1px solid rgba(195,148,21,.18) !important;
  border-radius: 8px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  z-index: 4 !important;
}

/* responsive user experience */
@media (max-width: 900px){
  aside, .sidebar, .drawer{
    width: min(86vw, 340px) !important;
  }
}

@media (max-width: 768px){
  body{
    background: #f5f6f8 !important;
  }

  header, .topbar, .app-header, .mobile-header{
    min-height: 70px !important;
    padding: 10px 16px !important;
  }

  .card, .panel, [class*="card"], [class*="panel"]{
    border-radius: 18px !important;
  }

  /* product cards full width and centered */
  .product-card,
  [class*="product-card"],
  [class*="product-item"]{
    width: calc(100% - 2px) !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
  }

  .product-card .image-wrap,
  [class*="product-card"] .image-wrap{
    margin: 12px !important;
    padding: 12px !important;
  }

  .product-card img,
  [class*="product-card"] img{
    max-height: 160px !important;
  }

  .product-card h3,.product-card h4,
  [class*="product-card"] h3,[class*="product-card"] h4{
    font-size: .97rem !important;
  }

  .product-card p,
  [class*="product-card"] p{
    font-size: .82rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .product-card button,
  [class*="product-card"] button{
    min-width: 128px !important;
  }

  /* cart and checkout compact */
  [class*="cart"], [class*="checkout"], [class*="payment"]{
    overflow-x: hidden !important;
  }

  [class*="cart"] .summary-grid,
  [class*="checkout"] .summary-grid,
  [class*="payment"] .summary-grid,
  [class*="cart"] [class*="totals"],
  [class*="checkout"] [class*="totals"],
  [class*="payment"] [class*="totals"]{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  [class*="cart"] .shipping-options,
  [class*="checkout"] .shipping-options,
  [class*="payment"] .shipping-options,
  [class*="cart"] [class*="delivery"],
  [class*="checkout"] [class*="delivery"],
  [class*="payment"] [class*="delivery"]{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  [class*="cart"] .actions,
  [class*="checkout"] .actions,
  [class*="payment"] .actions,
  [class*="cart"] [class*="footer"],
  [class*="checkout"] [class*="footer"],
  [class*="payment"] [class*="footer"]{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  [class*="cart"] input,
  [class*="checkout"] input,
  [class*="payment"] input{
    width: 100% !important;
    font-size: 16px !important;
  }

  /* 3x2 smaller nodes */
  [class*="3x2"] .node-label,
  [class*="turbo"][class*="ticket"] .node-label,
  [class*="ticket"][class*="turbo"] .node-label,
  [class*="3x2"] .label,
  [class*="turbo"][class*="ticket"] .label,
  [class*="ticket"][class*="turbo"] .label{
    width: 56px !important;
    max-width: 56px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px){
  [class*="cart"] .summary-grid,
  [class*="checkout"] .summary-grid,
  [class*="payment"] .summary-grid,
  [class*="cart"] [class*="totals"],
  [class*="checkout"] [class*="totals"],
  [class*="payment"] [class*="totals"]{
    gap: 8px !important;
  }
  .product-card img,
  [class*="product-card"] img{
    max-height: 148px !important;
  }
}




/* ================= FINAL USER UI TUNING ================= */

/* LOGIN FULL SCREEN + STRONGER BRAND */
html body .login-page,
html body .auth-page,
html body [class*="login-page"],
html body [class*="auth-page"],
html body [class*="login-screen"],
html body [class*="auth-screen"]{
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

html body .login-card,
html body .auth-card,
html body [class*="login"] [class*="card"],
html body [class*="auth"] [class*="card"]{
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}

html body .login-card .brand,
html body .auth-card .brand,
html body [class*="login"] .brand,
html body [class*="auth"] .brand,
html body .login-card h1,
html body .auth-card h1,
html body [class*="login"] h1,
html body [class*="auth"] h1{
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.02 !important;
  letter-spacing: .06em !important;
  color: #c89718 !important;
  opacity: 1 !important;
  text-shadow: 0 3px 14px rgba(200,151,24,.10) !important;
}

/* neutralize browser-like top yellow area inside app if app has own top strip */
html body .app-shell,
html body .main-shell,
html body .page-shell{
  background: #f7f8fa !important;
}

/* STORE MAIN FIXES */
@media (max-width: 768px){

  /* compact store wrappers */
  html body [class*="tienda"],
  html body [class*="shop"],
  html body [class*="store"]{
    padding-inline: 10px !important;
  }

  /* blue/light notice block contrast */
  html body .alert-info,
  html body .notice-info,
  html body [class*="pendiente"],
  html body [class*="recovery"],
  html body [class*="resume"]{
    background: #eef5ff !important;
    border: 1px solid #cfe0fb !important;
    box-shadow: none !important;
  }

  html body .alert-info *,
  html body .notice-info *,
  html body [class*="pendiente"] *,
  html body [class*="recovery"] *,
  html body [class*="resume"] *{
    color: #354255 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  html body .alert-info .btn,
  html body .notice-info .btn,
  html body [class*="pendiente"] .btn,
  html body [class*="recovery"] .btn,
  html body [class*="resume"] .btn{
    background: #ffffff !important;
    color: #30415a !important;
    border: 1px solid #d7e3f8 !important;
  }

  /* products more compact */
  html body .product-card,
  html body [class*="product-card"],
  html body [class*="product-item"]{
    min-height: auto !important;
    border-radius: 18px !important;
  }

  html body .product-card .image-wrap,
  html body [class*="product-card"] .image-wrap{
    margin: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  html body .product-card img,
  html body [class*="product-card"] img{
    max-height: 132px !important;
  }

  html body .product-card h3,
  html body .product-card h4,
  html body [class*="product-card"] h3,
  html body [class*="product-card"] h4{
    font-size: .92rem !important;
    margin-bottom: 4px !important;
  }

  html body .product-card p,
  html body [class*="product-card"] p{
    font-size: .78rem !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
    -webkit-line-clamp: 2;
  }

  /* exact price visibility fix */
  html body .product-card [class*="price"],
  html body [class*="product-card"] [class*="price"],
  html body .product-card .price-box,
  html body [class*="product-card"] .price-box{
    background: #fff6de !important;
    border: 1px solid rgba(200,151,24,.24) !important;
    min-height: 74px !important;
  }

  html body .product-card [class*="price"] *,
  html body [class*="product-card"] [class*="price"] *,
  html body .product-card .price-box *,
  html body [class*="product-card"] .price-box *{
    color: #9a6f00 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    visibility: visible !important;
  }

  html body .product-card [class*="price"] strong,
  html body [class*="product-card"] [class*="price"] strong,
  html body .product-card .price-box strong,
  html body [class*="product-card"] .price-box strong{
    color: #8b6100 !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
  }

  /* spacing around activation price / add button row */
  html body .product-card .actions,
  html body [class*="product-card"] .actions,
  html body .product-card [class*="footer"],
  html body [class*="product-card"] [class*="footer"]{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: end !important;
  }

  html body .product-card button,
  html body [class*="product-card"] button{
    min-width: 122px !important;
    min-height: 42px !important;
    padding-inline: 18px !important;
  }

  /* tabs and quick metrics */
  html body [role="tab"],
  html body .tab,
  html body [class*="tab"]{
    min-height: 42px !important;
  }

  html body .quick-stats,
  html body [class*="quick"],
  html body [class*="stats"]{
    gap: 10px !important;
  }

  /* black panel in cart/checkout with text hierarchy */
  html body [class*="cart"],
  html body [class*="checkout"],
  html body [class*="payment"]{
    color: #ffffff !important;
  }

  html body [class*="cart"] .cart-item *,
  html body [class*="checkout"] .cart-item *,
  html body [class*="payment"] .cart-item *{
    color: #ffffff !important;
  }

  html body [class*="cart"] .cart-item p,
  html body [class*="checkout"] .cart-item p,
  html body [class*="payment"] .cart-item p,
  html body [class*="cart"] .cart-item span,
  html body [class*="checkout"] .cart-item span,
  html body [class*="payment"] .cart-item span{
    color: rgba(255,255,255,.78) !important;
  }

  html body [class*="cart"] .summary-grid > *,
  html body [class*="checkout"] .summary-grid > *,
  html body [class*="payment"] .summary-grid > *{
    min-height: 72px !important;
  }

  html body [class*="cart"] .shipping-options > *,
  html body [class*="checkout"] .shipping-options > *,
  html body [class*="payment"] .shipping-options > *,
  html body [class*="cart"] [class*="delivery"] > *,
  html body [class*="checkout"] [class*="delivery"] > *,
  html body [class*="payment"] [class*="delivery"] > *{
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px !important;
  }

  html body [class*="cart"] select,
  html body [class*="checkout"] select,
  html body [class*="payment"] select{
    background: #ffffff !important;
    color: #1f2430 !important;
    border: 1px solid #d8dde8 !important;
  }
}

/* 3X2 more aggressive fix */
html body [class*="3x2"] .node-label,
html body [class*="turbo"][class*="ticket"] .node-label,
html body [class*="ticket"][class*="turbo"] .node-label,
html body [class*="3x2"] .label,
html body [class*="turbo"][class*="ticket"] .label,
html body [class*="ticket"][class*="turbo"] .label{
  width: 56px !important;
  max-width: 56px !important;
  font-size: 10px !important;
  line-height: 1.0 !important;
  top: 46% !important;
}

html body [class*="3x2"] .node-price,
html body [class*="turbo"][class*="ticket"] .node-price,
html body [class*="ticket"][class*="turbo"] .node-price,
html body [class*="3x2"] .price,
html body [class*="turbo"][class*="ticket"] .price,
html body [class*="ticket"][class*="turbo"] .price{
  bottom: -12px !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
}

html body [class*="3x2"] svg text,
html body [class*="turbo"][class*="ticket"] svg text,
html body [class*="ticket"][class*="turbo"] svg text{
  font-size: 10px !important;
}

@media (max-width: 768px){
  html body [class*="3x2"] .node,
  html body [class*="turbo"][class*="ticket"] .node,
  html body [class*="ticket"][class*="turbo"] .node{
    min-width: 70px !important;
    min-height: 70px !important;
  }
}

/* ensure mobile viewport content aligns nicely */
@media (max-width: 768px){
  html body main,
  html body .main-content,
  html body .dashboard-content,
  html body .content,
  html body .page-content{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}




/* ============ FINAL V2 USER PATCH ============ */

/* Make app top bar white inside app webview */
html body header,
html body .topbar,
html body .app-header,
html body .mobile-header,
html body [class*="header"],
html body [class*="topbar"]{
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(23,32,51,.07) !important;
}
html body header *,
html body .topbar *,
html body .app-header *,
html body .mobile-header *{
  color: #172033 !important;
}

/* Login should use more of phone height */
@media (max-width: 768px){
  html body .login-page,
  html body .auth-page,
  html body [class*="login-page"],
  html body [class*="auth-page"],
  html body [class*="login-screen"],
  html body [class*="auth-screen"]{
    min-height: 100svh !important;
    padding: 8px 12px !important;
    align-items: stretch !important;
  }
  html body .login-card,
  html body .auth-card,
  html body [class*="login"] [class*="card"],
  html body [class*="auth"] [class*="card"]{
    min-height: calc(100svh - 16px) !important;
    border-radius: 26px !important;
    padding: 20px 18px !important;
    justify-content: flex-start !important;
  }
  html body .login-card .brand,
  html body .auth-card .brand,
  html body [class*="login"] .brand,
  html body [class*="auth"] .brand,
  html body .login-card h1,
  html body .auth-card h1,
  html body [class*="login"] h1,
  html body [class*="auth"] h1{
    font-size: 2.2rem !important;
    line-height: 1.02 !important;
    letter-spacing: .05em !important;
    color: #c89617 !important;
  }
}

/* Store: pending purchase light blue box */
html body .alert-info,
html body .notice-info,
html body [class*="pendiente"],
html body [class*="recovery"],
html body [class*="resume"]{
  background: #eaf3ff !important;
  border: 1px solid #c8daf7 !important;
}
html body .alert-info *,
html body .notice-info *,
html body [class*="pendiente"] *,
html body [class*="recovery"] *,
html body [class*="resume"] *{
  color: #33445b !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html body .alert-info .btn,
html body .notice-info .btn,
html body [class*="pendiente"] .btn,
html body [class*="recovery"] .btn,
html body [class*="resume"] .btn{
  background: #ffffff !important;
  border: 1px solid #d4e1f4 !important;
  color: #34475f !important;
}

/* Product cards even smaller on phone */
@media (max-width: 768px){
  html body .product-card,
  html body [class*="product-card"],
  html body [class*="product-item"]{
    transform: scale(.96);
    transform-origin: top center;
    margin-bottom: -4px !important;
  }

  html body .product-card .image-wrap,
  html body [class*="product-card"] .image-wrap{
    margin: 8px !important;
    padding: 8px !important;
  }

  html body .product-card img,
  html body [class*="product-card"] img{
    max-height: 118px !important;
  }

  html body .product-card h3,
  html body .product-card h4,
  html body [class*="product-card"] h3,
  html body [class*="product-card"] h4{
    font-size: .88rem !important;
  }

  html body .product-card p,
  html body [class*="product-card"] p{
    font-size: .74rem !important;
    line-height: 1.18 !important;
  }

  html body .product-card [class*="price"],
  html body [class*="product-card"] [class*="price"],
  html body .product-card .price-box,
  html body [class*="product-card"] .price-box{
    background: #f6a623 !important;
    border: 1px solid #df9118 !important;
    min-height: 62px !important;
  }

  html body .product-card [class*="price"] *,
  html body [class*="product-card"] [class*="price"] *,
  html body .product-card .price-box *,
  html body [class*="product-card"] .price-box *{
    color: #ffffff !important;
  }

  html body .product-card [class*="price"] strong,
  html body [class*="product-card"] [class*="price"] strong,
  html body .product-card .price-box strong,
  html body [class*="product-card"] .price-box strong{
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
  }

  html body .product-card button,
  html body [class*="product-card"] button{
    min-width: 116px !important;
    min-height: 40px !important;
  }
}

/* Cart/checkout black panel: remove weak gray text */
html body [class*="cart"] p,
html body [class*="checkout"] p,
html body [class*="payment"] p,
html body [class*="cart"] span,
html body [class*="checkout"] span,
html body [class*="payment"] span,
html body [class*="cart"] small,
html body [class*="checkout"] small,
html body [class*="payment"] small,
html body [class*="cart"] label,
html body [class*="checkout"] label,
html body [class*="payment"] label{
  color: rgba(255,255,255,.88) !important;
}
html body [class*="cart"] .text-muted,
html body [class*="checkout"] .text-muted,
html body [class*="payment"] .text-muted,
html body [class*="cart"] .muted,
html body [class*="checkout"] .muted,
html body [class*="payment"] .muted{
  color: rgba(255,255,255,.76) !important;
}

/* Cart should show purchased items sooner */
@media (max-width: 768px){
  html body [class*="cart"] .summary-grid,
  html body [class*="checkout"] .summary-grid,
  html body [class*="payment"] .summary-grid,
  html body [class*="cart"] [class*="totals"],
  html body [class*="checkout"] [class*="totals"],
  html body [class*="payment"] [class*="totals"]{
    grid-template-columns: repeat(3, minmax(70px,1fr)) !important;
    gap: 8px !important;
  }
  html body [class*="cart"] .shipping-options,
  html body [class*="checkout"] .shipping-options,
  html body [class*="payment"] .shipping-options,
  html body [class*="cart"] [class*="delivery"],
  html body [class*="checkout"] [class*="delivery"],
  html body [class*="payment"] [class*="delivery"]{
    grid-template-columns: repeat(3, minmax(70px,1fr)) !important;
    gap: 8px !important;
  }
  html body [class*="cart"] .shipping-options > *,
  html body [class*="checkout"] .shipping-options > *,
  html body [class*="payment"] .shipping-options > *,
  html body [class*="cart"] [class*="delivery"] > *,
  html body [class*="checkout"] [class*="delivery"] > *,
  html body [class*="payment"] [class*="delivery"] > *{
    min-height: 62px !important;
    font-size: .82rem !important;
  }
  html body [class*="cart"] .actions,
  html body [class*="checkout"] .actions,
  html body [class*="payment"] .actions,
  html body [class*="cart"] [class*="footer"],
  html body [class*="checkout"] [class*="footer"],
  html body [class*="payment"] [class*="footer"]{
    gap: 10px !important;
  }
}

/* K2 360 / franquicias / dark gradient areas: boost readability */
html body [class*="360"] .card *,
html body [class*="franqu"] .card *,
html body [class*="360"] [class*="panel"] *,
html body [class*="franqu"] [class*="panel"] *{
  text-shadow: none !important;
}
html body [class*="360"] .card p,
html body [class*="franqu"] .card p,
html body [class*="360"] [class*="panel"] p,
html body [class*="franqu"] [class*="panel"] p,
html body [class*="360"] .card span,
html body [class*="franqu"] .card span{
  color: #556070 !important;
}
html body [class*="360"] .card h1,
html body [class*="360"] .card h2,
html body [class*="360"] .card h3,
html body [class*="franqu"] .card h1,
html body [class*="franqu"] .card h2,
html body [class*="franqu"] .card h3{
  color: #1e2430 !important;
}

/* 3x2 stronger visual cover over circle */
html body [class*="3x2"] .node-price,
html body [class*="turbo"][class*="ticket"] .node-price,
html body [class*="ticket"][class*="turbo"] .node-price,
html body [class*="3x2"] .price,
html body [class*="turbo"][class*="ticket"] .price,
html body [class*="ticket"][class*="turbo"] .price{
  background: #f0c85a !important;
  color: #2b2200 !important;
  border: 1px solid #d8ad36 !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.7) !important;
  z-index: 8 !important;
}
html body [class*="3x2"] .node-label,
html body [class*="turbo"][class*="ticket"] .node-label,
html body [class*="ticket"][class*="turbo"] .node-label,
html body [class*="3x2"] .label,
html body [class*="turbo"][class*="ticket"] .label,
html body [class*="ticket"][class*="turbo"] .label{
  z-index: 7 !important;
  font-weight: 700 !important;
  color: #374255 !important;
}
