/* ============================================================
   cartstyles.css — carts5 theme helpers (Tailwind + custom skin)
   Purpose: Provide the “brand” and UI treatments that are NOT
   available in Tailwind CDN (bg-brand, btn-premium, glass-panel,
   card-shadow, etc.).
   ============================================================ */

:root{
  /* Brand teal/blue pulled from your button screenshot */
  --brand: #2E7089;        /* rgb(46,112,137) */
  --brand-600: #255D73;
  --brand-700: #1E4E60;

  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --panel: rgba(255,255,255,.90);
  --panel-2: rgba(248,250,252,.90);
}

/* Base page treatment */
html, body{
  height:100%;
}
body{
  background:#f8fafc;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------
   BRAND UTILITY CLASSES (because Tailwind CDN doesn't know them)
   ------------------------------------------------------------ */
.bg-brand{ background: var(--brand) !important; }
.text-brand{ color: var(--brand) !important; }
.border-brand{ border-color: rgba(46,112,137,.25) !important; }

/* Some markup uses bg-brand/10 and text-brand/40 conventions.
   Tailwind CDN won't generate these for custom colors, so we add
   approximations. */
.bg-brand\/10{ background: rgba(46,112,137,.10) !important; }
.bg-brand\/5{ background: rgba(46,112,137,.05) !important; }
.text-brand\/40{ color: rgba(46,112,137,.40) !important; }
.border-brand\/20{ border-color: rgba(46,112,137,.20) !important; }

/* ------------------------------------------------------------
   GLASS NAV / PANEL TREATMENTS
   ------------------------------------------------------------ */
.glass-panel{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226,232,240,.8);
}

/* Card shadow used on right sidebar panels */
.card-shadow{
  box-shadow:
    0 18px 45px rgba(2, 6, 23, .08),
    0  2px 10px rgba(2, 6, 23, .04);
}

/* ------------------------------------------------------------
   PREMIUM BUTTON (your missing blue button)
   Used by class: btn-premium
   ------------------------------------------------------------ */
.btn-premium{
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
  border: 1px solid rgba(46,112,137,.18);
  box-shadow:
    0 16px 34px rgba(46,112,137,.24),
    0  2px  8px rgba(2, 6, 23, .08);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-premium:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 20px 44px rgba(46,112,137,.28),
    0  2px 10px rgba(2, 6, 23, .10);
}
.btn-premium:active{
  transform: translateY(0);
}

/* Make sure anchors styled as buttons look correct */
a.btn-premium{
  text-decoration:none;
}

/* ------------------------------------------------------------
   FLASH ANIMATION HELPERS (for the notice bar)
   ------------------------------------------------------------ */
.animate-in{
  animation: cartFadeSlide .50s ease both;
}
.fade-in{ }
.slide-in-from-top-4{ }
.duration-500{ }

@keyframes cartFadeSlide{
  from{ opacity:0; transform: translateY(-10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   SMALL QUALITY FIXES (optional but makes it closer to screenshot)
   ------------------------------------------------------------ */

/* Make the left “item cards” feel a bit more premium */
.cart-item{
  box-shadow: 0 14px 30px rgba(2, 6, 23, .06);
}

/* Remove default button outline ugliness on click */
button:focus{ outline:none; }
button:focus-visible{
  outline: 3px solid rgba(46,112,137,.25);
  outline-offset: 2px;
}

/* Inputs: slightly nicer baseline (Tailwind does most, this helps) */
input, select{
  accent-color: var(--brand);
}