/* =========================================================
   Nova UI — Tokens / Components / Utilities
   - No ID selectors
   - No !important
   - Token-based responsive sizing
   ========================================================= */

/* ===== Tokens ===== */
:root {
  /* Colors */
  --color-text: #3d2f1e;
  --color-text-muted: rgba(61,47,30,.75);
  --color-surface: #ffffff;
  --color-bg-1: #fefdf8;
  --color-bg-2: #f8f6f0;
  --color-bg-3: #f4f1e8;

  /* Brand palette */
  --color-gold: #D4AF37;
  --color-gold-2: #DAA520;
  --color-tan-1: #DEB887;
  --color-tan-2: #D2B48C;
  --color-brown-1: #8D6E63;
  --color-brown-2: #6B5B47;
  --color-emerald-1: #1B5E20;
  --color-emerald-2: #2E7D32;
  --color-emerald-3: #4CAF50;
  --color-emerald-4: #81C784;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-gold) 0%, #B8860B 100%);
  --gradient-accent:  linear-gradient(135deg, #F4E4BC 0%, var(--color-gold-2) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-tan-1) 0%, var(--color-tan-2) 100%);
  --gradient-dark:    linear-gradient(135deg, var(--color-brown-1) 0%, var(--color-brown-2) 100%);
  --gradient-emerald: linear-gradient(135deg, var(--color-emerald-1) 0%, var(--color-emerald-2) 50%, var(--color-emerald-3) 100%);
  --gradient-gold-emerald: linear-gradient(135deg, var(--color-gold) 0%, var(--color-emerald-2) 50%, var(--color-gold-2) 100%);
  --gradient-green-accent: linear-gradient(135deg, var(--color-emerald-3) 0%, var(--color-emerald-4) 100%);

  /* Shadows */
  --shadow-card: 0 10px 30px rgba(139, 110, 99, 0.3);
  --shadow-hover: 0 20px 40px rgba(139, 110, 99, 0.4);
  --shadow-emerald: 0 8px 20px rgba(46, 125, 50, 0.2);

  /* Radii */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 22px;

  /* Spacing scale (px equivalents: 6,10,14,18,24,32) */
  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 0.875rem;
  --space-4: 1.125rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Typography */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.05rem, 2.6vw, 1.2rem);
  --fs-xl: clamp(1.4rem, 4.5vw, 2rem);

  /* Controls sizing */
  --control-h-sm: 36px;
  --control-h-md: 40px;
  --control-h-lg: 44px;
  --control-h-xl: 56px;

  /* Layout */
  --nav-h: 70px;

  /* Modal overlay */
  --modal-backdrop-blur: 20px;
  --modal-backdrop-opacity: 0.8;
}

/* Responsive token overrides */
@media (max-width: 768px) {
  :root {
    --nav-h: 70px;
    --control-h-sm: 34px;
    --control-h-md: 38px;
    --control-h-lg: 42px;
  }
}
@media (max-width: 480px) {
  :root {
    --control-h-sm: 32px;
    --control-h-md: 36px;
    --control-h-lg: 40px;
  }
  
  body { overflow-x: hidden; }
  main { padding-left: 8px; padding-right: 8px; }
  .container { padding-left: 8px; padding-right: 8px; }
  
  .view-toggle { 
    margin-bottom: var(--space-3);
  }
}
@media (min-width: 992px) { :root { --nav-h: 76px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  color: var(--color-text);
  padding-top: var(--nav-h);
}

main {
  flex: 1;
  position: relative;
  padding-bottom: 5rem;
  border-radius: 0 0 30px 30px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Subtle animated background */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(212,175,55,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(244,228,188,.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(222,184,135,.10) 0%, transparent 50%),
    radial-gradient(circle at 90% 10%, rgba(46,125,50,.04) 0%, transparent 40%);
  z-index: -1;
  animation: backgroundMove 20s ease-in-out infinite;
}
@keyframes backgroundMove {
  0%,100% { transform: translateX(0) translateY(0); }
  33%     { transform: translateX(-16px) translateY(-14px); }
  66%     { transform: translateX(16px)  translateY(-8px); }
}

/* ===== Components ===== */

/* Navbar */
.navbar {
  background: linear-gradient(135deg, rgba(27,94,32,.85) 0%, rgba(46,125,50,.75) 50%, rgba(76,175,80,.65) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(46,125,50,.4);
  box-shadow: 0 8px 32px rgba(46,125,50,.25);
  transition: all .3s ease;
}
.navbar .form-control {
  height: var(--control-h-md);
  min-height: var(--control-h-md);
  padding: 0 16px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .navbar .container-fluid { padding: 6px 10px; }
  .navbar .form-control { height: 44px; min-height: 44px; }
}

/* Footer */
footer {
  background: linear-gradient(135deg, rgba(27,94,32,.85) 0%, rgba(46,125,50,.75) 50%, rgba(76,175,80,.65) 100%);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(46,125,50,.4);
  min-height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 -8px 32px rgba(46,125,50,.25);
}

/* Inputs */
.form-control {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: var(--radius);
  padding: 10px 16px;
  color: var(--color-text);
  transition: all .3s ease;
  backdrop-filter: blur(10px);
}
.form-control::placeholder { color: rgba(61,47,30,.6); }
.form-control:focus {
  background: rgba(255,255,255,.95);
  border-color: rgba(212,175,55,.65);
  box-shadow: 0 0 0 3px rgba(212,175,55,.25);
  outline: none;
}
/* Autofill (keep visual without !important) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #f8f6f0 inset;
  -webkit-text-fill-color: var(--color-text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Form check */
.form-check-input { background-color: rgba(255,255,255,.85); border-color: rgba(212,175,55,.35); }
.form-check-input:checked { background-color: var(--color-emerald-3); border-color: var(--color-emerald-3); }
.form-check-input:focus { border-color: var(--color-emerald-3); outline: 0; box-shadow: 0 0 0 .25rem rgba(76,175,80,0.25); }

/* Cards */
.card {
  background: linear-gradient(135deg, rgba(244,228,188,.45) 0%, rgba(222,184,135,.35) 50%, rgba(212,175,55,.25) 100%);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden; position: relative;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gradient-green-accent);
  transform: scaleX(0);
  transition: transform .25s ease;
}
@media (hover:hover) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover), var(--shadow-emerald); border-color: rgba(212,175,55,.5); }
  .card:hover::before { transform: scaleX(1); }
}

/* List group */
.list-group-item { background-color: rgba(255,255,255,.7); border: 1px solid rgba(212,175,55,.2); color: var(--color-text); }
.list-group-item .text-muted { color: rgba(61,47,30,.65); }

/* Terms Card */
.terms-card {
  border: 2px solid rgba(212,175,55,.3);
  background: linear-gradient(135deg, rgba(212,175,55,.08) 0%, rgba(244,228,188,.05) 100%);
}
.terms-card .form-check-input {
  width: 1.25rem; height: 1.25rem; background-color: rgba(255,255,255,.9);
  border: 2px solid rgba(212,175,55,.5); border-radius: 4px;
}
.terms-card .form-check-input:checked {
  background-color: var(--color-gold-2); border-color: var(--color-gold-2);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.terms-card .form-check-label { color: var(--color-text); font-size: 1rem; line-height: 1.4; }
.terms-card .text-muted { color: rgba(61,47,30,.6); font-size: 0.875rem; }
@media (max-width: 768px) {
  .terms-card { margin-top: 1rem; margin-bottom: 1rem; }
  .terms-card .form-check-input { width: 1.5rem; height: 1.5rem; }
  .terms-card .form-check-label { font-size: 1.1rem; font-weight: 600; }
}

/* Input group wrapper (visual) */
.input-group { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2); }

/* Quantity input alignment (class-based) */
.quantity-input {
  height: var(--control-h-md);
  min-height: var(--control-h-md);
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-radius: 0;
  border-left: 1px solid rgba(212,175,55,.25);
  border-right: 1px solid rgba(212,175,55,.25);
}
@media (max-width: 768px) {
  .quantity-input { height: var(--control-h-md); padding: 0 12px; }
}
@media (max-width: 480px) {
  .quantity-input { height: var(--control-h-sm); padding: 0 10px; }
}

/* Price, text utilities within components */
.price { color: var(--color-gold-2); font-weight: 600; font-size: var(--fs-lg); }
.price.sale { color: var(--color-emerald-3); }

/* Breadcrumb */
.breadcrumb { background: transparent; padding: var(--space-2) 0; margin-bottom: var(--space-5); }
.breadcrumb-item a { color: rgba(212,175,55,.85); text-decoration: none; transition: color .2s ease; }
.breadcrumb-item a:hover { color: var(--color-emerald-3); }
.breadcrumb-item.active { color: rgba(61,47,30,.8); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(61,47,30,.5); }

/* Alerts */
.alert {
  border-radius: var(--radius);
  border: 1px solid rgba(218,165,32,.35);
  background: linear-gradient(135deg, rgba(218,165,32,.15) 0%, rgba(244,228,188,.25) 100%);
  backdrop-filter: blur(18px);
  color: var(--color-brown-2);
}

/* Images */
img { transition: transform .25s ease, filter .25s ease; }
@media (hover:hover) { img:hover { transform: scale(1.03); filter: brightness(1.06); } }

/* Cards & Tiles */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: 100%;
}
@media (max-width: 768px) {
  .tile-grid { 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: var(--space-4); 
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 480px) {
  .tile-grid { 
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    gap: var(--space-3);
  }
}

.tile-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .tile-grid.list-view { gap: var(--space-4); }
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-1) * 0.75);
  margin-bottom: var(--space-4);
  border-radius: calc(var(--radius-lg) - 4px);
  background: rgba(244, 228, 188, .55);
  border: 1px solid rgba(212, 175, 55, .35);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(139,110,99,.18);
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: calc(var(--radius) - 6px);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.view-toggle__btn[aria-pressed="true"],
.view-toggle__btn.active {
  background: var(--gradient-emerald);
  color: #fff;
  box-shadow: 0 12px 24px rgba(46,125,50,.25);
  transform: translateY(-1px);
}
.view-toggle__btn:hover {
  color: var(--color-text);
}
.view-toggle__btn i { font-size: 1.1rem; }
@media (max-width: 576px) {
  .view-toggle { 
    justify-content: center; 
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .view-toggle__btn { 
    flex: 0 0 auto; 
    justify-content: center; 
    padding: 10px;
    min-width: 44px;
  }
  .view-toggle__btn span {
    display: none;
  }
}

.category-card, .product-card {
  background: linear-gradient(135deg, rgba(244,228,188,.50) 0%, rgba(222,184,135,.40) 50%, rgba(212,175,55,.30) 100%);
  border: 1px solid rgba(212,175,55,.40);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: hidden; height: 100%;
}
.category-card::before, .product-card::before {
  content: ''; position: absolute; top:0; left:0; right:0; height: 3px;
  background: var(--gradient-green-accent);
  transform: scaleX(0); transition: transform .25s ease;
}
@media (hover:hover) {
  .category-card:hover, .product-card:hover {
    transform: translateY(-6px); box-shadow: 0 20px 40px rgba(139,110,99,.35), var(--shadow-emerald);
    border-color: rgba(212,175,55,.5);
  }
  .category-card:hover::before, .product-card:hover::before { transform: scaleX(1); }
}

.thumb, .category-image {
  width: 100%; max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain; object-position: center;
  border-radius: calc(var(--radius) - 4px);
  display: block;
}

.category-card .card-body, .product-card .card-body {
  padding: var(--space-4);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  text-align: center;
}

.tile-grid.list-view .category-card,
.tile-grid.list-view .product-card {
  width: 100%;
}
.tile-grid.list-view .category-card-link,
.tile-grid.list-view .product-card-link {
  display: block;
  width: 100%;
}
.tile-grid.list-view .category-card .card-body,
.tile-grid.list-view .product-card .card-body {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.tile-grid.list-view .card-content {
  align-items: flex-start;
  text-align: left;
  gap: var(--space-2);
}
.tile-grid.list-view .category-image,
.tile-grid.list-view .thumb {
  width: 92px;
  max-width: 92px;
  flex: 0 0 92px;
  aspect-ratio: 1 / 1;
}
@media (min-width: 992px) {
  .tile-grid.list-view .category-image,
  .tile-grid.list-view .thumb {
    width: 110px;
    max-width: 110px;
    flex-basis: 110px;
  }
}
.tile-grid.list-view .category-image i { font-size: 1.6rem; }
.tile-grid.list-view .nova-btn {
  align-self: flex-start;
  min-width: 0;
}
.tile-grid.list-view .price {
  margin-bottom: 0;
}


/* Grid utility for components */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 768px) { .grid-2 { gap: var(--space-5); } }

/* Hero */
.hero-section {
  background: linear-gradient(135deg, rgba(244,228,188,.35) 0%, rgba(222,184,135,.25) 50%, rgba(212,175,55,.20) 100%);
  border-radius: 30px;
  border: 1px solid rgba(212,175,55,.3);
  backdrop-filter: blur(20px);
  padding: 60px 30px; margin-bottom: 40px; position: relative; overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle, rgba(212,175,55,.05) 0%, transparent 70%);
  animation: heroRotate 20s linear infinite; z-index: -1;
}
@keyframes heroRotate { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(240,147,251,.45));
}
@media (max-width: 768px) { .hero-section { padding: 40px 22px; } }

/* Product page controls: class-based (replaces ID selectors) */
.size-select {
  background: var(--gradient-accent);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  color: #6B5B47;
  font-weight: 600;
  padding: 10px 16px;
  transition: all 0.15s ease;
  backdrop-filter: blur(10px);
}
.size-select:focus {
  outline: none; border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  background: linear-gradient(135deg, #F4E4BC 0%, var(--color-gold) 100%);
}
.size-select:hover { border-color: var(--color-gold); background: linear-gradient(135deg, #F4E4BC 0%, var(--color-gold) 100%); transform: translateY(-1px); }
.size-select option { background: #F4E4BC; color: #6B5B47; font-weight: 600; padding: 8px 12px; }
.size-select option:hover, .size-select option:checked { background: var(--color-gold-2); color: #fff; }
label[for="size-select"], .label-size-select { color: var(--color-gold-2); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 576px) {
  .size-select {
    padding: 12px 16px; font-size: 16px; border-radius: 12px; width: 100%; min-height: 48px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px;
  }
  .size-select:focus { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25); transform: none; }
  .size-select:hover { transform: none; }
  label[for="size-select"], .label-size-select { font-size: 14px; margin-bottom: 6px; }
}
@media (min-width: 577px) and (max-width: 768px) {
  .size-select { padding: 11px 16px; font-size: 15px; min-height: 44px; }
}

.quantity-display {
  background: var(--gradient-accent);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 0;
  color: #6B5B47;
  font-weight: 600;
  font-size: 0.9rem;
  height: var(--control-h-md);
  padding: 0 12px;
  transition: all 0.15s ease; backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.quantity-display:focus {
  outline: none; border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #F4E4BC 0%, var(--color-gold) 100%);
}
label[for="quantity-display"], .label-quantity-display { color: var(--color-gold-2); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 576px) {
  .quantity-display { font-size: 16px; height: var(--control-h-lg); padding: 0 16px; }
  label[for="quantity-display"], .label-quantity-display { font-size: 14px; margin-bottom: 6px; }
}
@media (min-width: 577px) and (max-width: 768px) {
  .quantity-display { height: var(--control-h-md); font-size: 0.85rem; padding: 0 12px; }
}

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 22, 17, var(--modal-backdrop-opacity));
  backdrop-filter: blur(var(--modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
}
.modal-container {
  position: relative; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; z-index: 10000;
}
.modal-content-custom {
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.08) 100%);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(139,110,99,.4);
  overflow: hidden;
}
.modal-header-custom {
  border-bottom: 1px solid rgba(212,175,55,.2);
  background: linear-gradient(135deg, rgba(212,175,55,.15) 0%, rgba(244,228,188,.08) 100%);
  padding: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.modal-title-custom {
  color: #F4E4BC; font-weight: 600; font-size: 1.25rem;
  background: linear-gradient(135deg, var(--color-gold-2) 0%, #F4E4BC 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0;
}
.btn-close-custom {
  color: #F4E4BC; font-size: 1.5rem; font-weight: bold; text-decoration: none;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .2s ease;
}
.btn-close-custom:hover { background: rgba(212,175,55,.2); color: var(--color-gold-2); text-decoration: none; }
.modal-body-custom { background: linear-gradient(135deg, rgba(26,22,17,.85) 0%, rgba(45,36,25,.85) 100%); padding: 2rem; }
.modal-footer-custom { border-top: 1px solid rgba(212,175,55,.2); padding-top: 1.5rem; display: flex; justify-content: flex-end; gap: .5rem; }

.form-label-custom { color: #F4E4BC; font-weight: 500; margin-bottom: .5rem; display: block; }
.form-control-custom { background: rgba(255,255,255,.12); border: 1px solid rgba(212,175,55,.3); color: #fff; border-radius: var(--radius); padding: .5rem .75rem; width: 100%; transition: all .2s ease; }
.form-control-custom:focus { outline: none; border-color: rgba(212,175,55,.6); box-shadow: 0 0 0 3px rgba(212,175,55,.25); }
.form-control-custom::placeholder { color: rgba(255,255,255,.5); }
.form-control-custom option { background: #2d2419; color: #fff; }
.form-text-custom { color: rgba(255,255,255,.7); font-size: .875rem; margin-top: .25rem; }
.btn-secondary-custom { background: rgba(212,175,55,.2); border: 1px solid rgba(212,175,55,.3); color: #F4E4BC; padding: .375rem .75rem; border-radius: var(--radius); font-size: .875rem; text-decoration: none; display: inline-block; transition: all .2s ease; }
.btn-secondary-custom:hover { background: rgba(212,175,55,.3); border-color: rgba(212,175,55,.5); color: var(--color-gold-2); }
.btn-remove-custom { background: rgba(220,53,69,.2); border: 1px solid rgba(220,53,69,.3); color: #ff6b7a; padding: .25rem .5rem; border-radius: var(--radius); font-size: 1rem; line-height: 1; transition: all .2s ease; }
.btn-remove-custom:hover { background: rgba(220,53,69,.3); border-color: rgba(220,53,69,.5); color: #dc3545; }
@media (max-width: 768px) {
  .modal-overlay { padding: 10px; }
  .modal-container { max-height: 95vh; }
  .modal-header-custom, .modal-body-custom { padding: 1rem; }
  .modal-title-custom { font-size: 1.1rem; }
}

/* ===== Utilities ===== */
.muted { color: var(--color-text-muted); }
.text-balance { text-wrap: balance; }
.text-green-accent { color: var(--color-emerald-3); }
.bg-green-accent { background: var(--gradient-green-accent); }
.border-green-accent { border-color: var(--color-emerald-3); }
.focus-ring { outline: 2px solid rgba(212,175,55,.5); outline-offset: 2px; }