/* ===== Woodmart-like modal styling ===== */
:root{
  --twp-primary:#ec4a5a;      /* warm coral/pink used for badges */
  --twp-primary-600:#d63f4e;
  --twp-gray-900:#1f2937;
  --twp-gray-700:#374151;
  --twp-gray-600:#4b5563;
  --twp-gray-500:#6b7280;
  --twp-gray-300:#d1d5db;
  --twp-gray-200:#e5e7eb;
  --twp-gray-100:#f3f4f6;
  --twp-radius-xl:22px;
  --twp-shadow-lg:0 20px 60px rgba(0,0,0,.18);
  --twp-shadow-sm:0 6px 18px rgba(0,0,0,.08);
}

.twp-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(17,24,39,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index:9998; display:none;
}
.twp-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  padding:24px; z-index:9999;
}
.twp-card{
  background:#fff; border-radius:var(--twp-radius-xl);
  width:min(560px, 92vw);
  box-shadow:var(--twp-shadow-lg);
  padding:22px 22px 18px;
  animation:twp-pop .18s ease-out both;
}
@keyframes twp-pop{
  from{transform:translateY(8px) scale(.98); opacity:.0}
  to{transform:translateY(0) scale(1); opacity:1}
}

/* Header */
.twp-head h3{
  margin:8px 0 6px; font-size:22px; line-height:1.2;
  color:var(--twp-gray-900); font-weight:800; letter-spacing:.2px;
}
.twp-sub{margin:0; color:var(--twp-gray-500); font-size:14.5px}

/* Badge (matches “Weekly Discounts” chip look) */
.twp-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:#0f5132;
  background:#d1fae5; /* minty */
  border:1px solid #a7f3d0; border-radius:9999px;
  padding:6px 10px;
}

/* Field */
.twp-row{margin-top:14px}
.twp-field{width:100%}
.twp-label{
  display:block; font-size:12px; font-weight:700;
  color:var(--twp-gray-600); margin:10px 0 6px;
}
.twp-row select{
  width:100%;
  height: 60px;
  padding:12px 42px 12px 14px;
  border:1px solid var(--twp-gray-200);
  border-radius:14px; background:#fff;
  color:var(--twp-gray-900); font-size:15px;
  box-shadow:var(--twp-shadow-sm);
  appearance:none; -webkit-appearance:none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat:no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 22px 22px, 0 0;
}
.twp-row select:focus{
  outline:none; border-color:var(--twp-primary);
  box-shadow:0 0 0 4px rgba(236,74,90,.12), var(--twp-shadow-sm);
}

/* Actions */
.twp-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--twp-gray-100);
}
.button{
  border:1px solid var(--twp-gray-200);
  background:#fff; color:var(--twp-gray-700);
  padding:10px 16px; border-radius:9999px;
  font-weight:700; font-size:14px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.button:focus{outline:none; box-shadow:0 0 0 4px rgba(17,24,39,.08)}
.button:hover{transform:translateY(-1px); box-shadow:var(--twp-shadow-sm)}

.button.twp-ghost{
  background:#fafafa;
}
.button.twp-ghost:hover{
  background:#f5f5f5;
}

.button.twp-primary{
  background:var(--twp-primary); color:#fff;
  border-color:var(--twp-primary);
  box-shadow:0 6px 14px rgba(236,74,90,.28);
}
.button.twp-primary:hover{background:var(--twp-primary-600); border-color:var(--twp-primary-600)}
.button.twp-primary:active{transform:translateY(0) scale(.99)}

/* Close (top-right floating chip) */
.twp-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:9999px;
  border:1px solid var(--twp-gray-200);
  background:#fff; color:var(--twp-gray-700);
  font-size:20px; line-height:1; display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--twp-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.twp-close:hover{transform:translateY(-1px)}
.twp-close:focus{outline:none; box-shadow:0 0 0 4px rgba(17,24,39,.08)}

/* Show/Hide */
.twp-modal.active,.twp-modal-backdrop.active{display:flex}