/* ============================================================
   EPOXY CALCULATOR SAAS PLATFORM — STYLES
   ============================================================ */
/* ARMORED CSS TO PREVENT WEBFLOW OVERRIDES */
:root {
  --color-primary:   #c82929;
  --color-secondary: #141414;
  --color-bg:        #ffffff;
  --color-surface:   #f9fafb;
  --bg-main:         #d9d9d9;
  --radius-brand:    1rem;
  --font-sans:       "Montserrat", Arial, sans-serif;
  --font-heading:    "The Midnight", "Montserrat", Arial, sans-serif;
  --font-brand-name: var(--font-heading);
  --logo-height:     48px;   /* tenant-configurable logo height: 24–96px */
}

/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */
/* Visually hidden but accessible to screen readers and keyboard nav */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Card labels act as click targets — show pointer cursor */
label.card-option { cursor: pointer; }


body, html {
  background-color: var(--bg-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--color-secondary);
}

/* Master Wrapper to fix white corners */
#bullparkit-master-wrapper, #epoxy-master-wrapper {
  background-color: var(--bg-main) !important;
  width: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 40px !important;
  overflow-x: hidden !important;
  font-family: var(--font-sans) !important;
  color: var(--color-secondary) !important;
}

#bullparkit-master-wrapper *, #epoxy-master-wrapper * { box-sizing: border-box; }

/* Screen Reader Only (For AI Bot Summary) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

#bullparkit-master-wrapper h1, #epoxy-master-wrapper h1,
#bullparkit-master-wrapper h2, #epoxy-master-wrapper h2,
#bullparkit-master-wrapper h3, #epoxy-master-wrapper h3,
#bullparkit-master-wrapper h4, #epoxy-master-wrapper h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; margin: 0; }
#bullparkit-master-wrapper p, #epoxy-master-wrapper p { margin: 0; }
#bullparkit-master-wrapper button, #epoxy-master-wrapper button { cursor: pointer; font-family: inherit; }
#bullparkit-master-wrapper input, #epoxy-master-wrapper input { font-family: inherit; }
#bullparkit-master-wrapper a, #epoxy-master-wrapper a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

/* Layout & Guardrails */
.app-container {
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%;
}

.main-content {
  flex-grow: 1; max-width: 56rem; width: 100%; margin: 0 auto;
  padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem;
}

@media (min-width: 768px) { .main-content { padding-top: 2rem; padding-bottom: 3rem; gap: 2rem; } }

/* ── BRANDED HEADER — now rendered with inline styles in script.js ── */
/* These classes are kept for backward compat with any cached pages */
.calc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.9rem 1.5rem 0.4rem;
  text-align: center;
}
.calc-header-logo {
  max-height: var(--logo-height);
  max-width: 220px;
  width: auto;
  object-fit: contain;
  display: block;
}
.calc-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.4rem 1.1rem;
  border: 1.5px dashed #94a3b8;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.calc-header-name {
  font-family: var(--font-brand-name);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-secondary);
  line-height: 1.1;
}
.calc-header-tagline {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-top: 0.1rem;
}

/* Progress Bar */
.progress-container { width: 100%; margin-bottom: 0.6rem; }
.progress-header { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8a8a8a; margin-bottom: 0.5rem; }
.progress-track { width: 100%; background-color: #f3f4f6; height: 0.375rem; border-radius: 9999px; overflow: hidden; }
.progress-bar-fill { background-color: var(--color-primary); height: 100%; transition: width 0.3s ease-out; }

/* Typography Utilities */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.font-bold { font-weight: 700; } .font-black { font-weight: 900; } .font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; } .tracking-widest { letter-spacing: 0.1em; } .tracking-wider { letter-spacing: 0.05em; }
.italic { font-style: italic; } .whitespace-nowrap { white-space: nowrap; }

.text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; }

.text-gray-400 { color: #9ca3af; } .text-gray-500 { color: #6b7280; } .text-gray-600 { color: #4b5563; }
.text-primary { color: var(--color-primary); } .text-white { color: #ffffff; }
.text-amber-800 { color: #92400e; } .text-green-600 { color: #16a34a; }
.text-red-700 { color: #b91c1c; }

.bg-white { background-color: #ffffff; } .bg-gray-50 { background-color: #f9fafb; } .bg-gray-100 { background-color: #f3f4f6; }
.bg-amber-50 { background-color: #fffbeb; } .bg-green-100 { background-color: #dcfce7; } .bg-slate-50 { background-color: #f8fafc; }
.bg-red-50 { background-color: #fef2f2; }

.border { border-width: 1px; border-style: solid; } .border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; } .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-gray-100 { border-color: #f3f4f6; } .border-gray-200 { border-color: #e5e7eb; } .border-amber-200 { border-color: #fde68a; }
.border-primary { border-color: var(--color-primary); } .border-gray-300 { border-color: #d1d5db; } .border-red-500 { border-color: #ef4444; }

.rounded { border-radius: 0.25rem; } .rounded-brand { border-radius: var(--radius-brand); } .rounded-full { border-radius: 9999px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

/* Spacing */
.mx-auto { margin-left: auto; margin-right: auto; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.pb-2 { padding-bottom: 0.5rem; } .pb-12 { padding-bottom: 3rem; } .pt-4 { padding-top: 1rem; } .pt-8 { padding-top: 2rem; }
.pl-4 { padding-left: 1rem; }

/* Flexbox & Grid */
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .shrink-0 { flex-shrink: 0; }

.grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* FORCED BUTTON STYLES */
#bullparkit-master-wrapper .brand-button, #epoxy-master-wrapper .brand-button {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 0.85rem 1rem !important;
  border-radius: var(--radius-brand) !important;
  border: 2px solid transparent !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}
@media (min-width: 768px) { #bullparkit-master-wrapper .brand-button, #epoxy-master-wrapper .brand-button { padding: 1rem 2.5rem !important; font-size: 0.875rem !important; } }
#bullparkit-master-wrapper .brand-button:hover:not(:disabled), #epoxy-master-wrapper .brand-button:hover:not(:disabled) {
  background-color: #b00000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(200, 41, 41, 0.4) !important;
}
#bullparkit-master-wrapper .brand-button:active:not(:disabled), #epoxy-master-wrapper .brand-button:active:not(:disabled) {
  background-color: #8c0000 !important;
  transform: translateY(0) !important;
}
#bullparkit-master-wrapper .brand-button:disabled, #epoxy-master-wrapper .brand-button:disabled {
  background-color: #e5a3a3 !important;
  cursor: not-allowed !important;
}

#bullparkit-master-wrapper .outline-button, #epoxy-master-wrapper .outline-button {
  background-color: #ffffff !important;
  border: 2px solid #9ca3af !important;
  color: var(--color-secondary) !important;
  font-weight: 800 !important;
  padding: 0.85rem 1rem !important;
  border-radius: var(--radius-brand) !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
@media (min-width: 768px) { #bullparkit-master-wrapper .outline-button, #epoxy-master-wrapper .outline-button { padding: 1rem 2.5rem !important; font-size: 0.875rem !important; } }
#bullparkit-master-wrapper .outline-button:hover, #epoxy-master-wrapper .outline-button:hover {
  background-color: var(--color-secondary) !important;
  color: #ffffff !important;
  border-color: var(--color-secondary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
#bullparkit-master-wrapper .outline-button:active, #epoxy-master-wrapper .outline-button:active {
  background-color: #000000 !important;
  transform: translateY(0) !important;
}

/* FIELDSET RESET — strips browser-default groove border from all fieldsets */
#bullparkit-master-wrapper fieldset, #epoxy-master-wrapper fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* CARDS & INPUTS */
.card-option {
  background-color: var(--color-bg); border: 2px solid transparent; padding: 1rem; border-radius: var(--radius-brand);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}
@media (min-width: 768px) { .card-option { padding: 1.5rem; } }
.card-option:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); border-color: var(--color-primary); }
.card-option.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

.input-field { width: 100%; background-color: var(--color-bg); border: 2px solid #e5e7eb; padding: 0.75rem; border-radius: var(--radius-brand); font-size: 1rem; }
.input-field:focus { border-color: var(--color-primary); outline: none; }

.icon-circle { width: 3rem; height: 3rem; background-color: rgba(200, 41, 41, 0.1); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
@media (min-width: 768px) { .icon-circle { width: 4rem; height: 4rem; } }
.badge { position: absolute; top: -0.5rem; right: 1rem; background-color: var(--color-primary); color: #ffffff; font-size: 0.4375rem; font-weight: 900; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 9999px; }
@media (min-width: 768px) { .badge { font-size: 0.5rem; } }

/* HIGH-VISIBILITY TOGGLE SWITCHES */
#bullparkit-master-wrapper .toggle-switch, #epoxy-master-wrapper .toggle-switch {
  width: 3.5rem !important; height: 2rem !important; flex-shrink: 0 !important; border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; cursor: pointer !important;
  background-color: #9ca3af !important;
  border: none !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
  outline: none !important;
  user-select: none !important;
}
#bullparkit-master-wrapper .toggle-switch:focus-visible, #epoxy-master-wrapper .toggle-switch:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}
#bullparkit-master-wrapper .toggle-switch.active, #epoxy-master-wrapper .toggle-switch.active { background-color: var(--color-primary) !important; }
#bullparkit-master-wrapper .toggle-switch.disabled, #epoxy-master-wrapper .toggle-switch.disabled,
#bullparkit-master-wrapper .toggle-switch[disabled], #epoxy-master-wrapper .toggle-switch[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background-color: #cbd5e1 !important;
  box-shadow: none !important;
}
#bullparkit-master-wrapper .toggle-thumb, #epoxy-master-wrapper .toggle-thumb {
  position: absolute !important; top: 0.2rem !important; left: 0.25rem !important;
  width: 1.6rem !important; height: 1.6rem !important; background-color: #ffffff !important;
  border-radius: 9999px !important; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  pointer-events: none !important;
}
#bullparkit-master-wrapper .toggle-switch.active .toggle-thumb, #epoxy-master-wrapper .toggle-switch.active .toggle-thumb { transform: translateX(1.4rem) !important; }

.checkbox-box { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; border: 2px solid #9ca3af; display: flex; align-items: center; justify-content: center; }
.checkbox-box.active { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
.checkbox-box svg { display: none; } .checkbox-box.active svg { display: block; }

.educational-link { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background-color: #f9fafb; border-radius: var(--radius-brand); border: 1px solid #e5e7eb; transition: all 0.2s; }
.educational-link:hover { border-color: var(--color-primary); background-color: #ffffff; }
.educational-link:hover .link-icon { color: var(--color-primary); }
.link-icon { color: #9ca3af; transition: color 0.2s; }
.flex-1 { flex: 1 1 0%; min-width: 0; }

/* SVG Icons */
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* MINIMIZED SEO BLOCK */
.seo-faq-section { max-width: 800px; margin: 0 auto; padding: 10px; background-color: transparent; }
.tiny-seo-block { font-size: 7px; color: #a3a3a3; margin-bottom: 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.tiny-seo-block summary { cursor: pointer; font-weight: 700; padding: 4px 0; text-transform: uppercase; outline: none; list-style: none; }
.tiny-seo-block summary::-webkit-details-marker { display: none; }
.tiny-seo-block p { font-size: 6px; color: #a3a3a3; margin: 2px 0 4px 0; line-height: 1.2; }
.faq-inner { padding-left: 8px; }

/* Position & Layout Helpers */
.relative { position: relative; } .absolute { position: absolute; } .overflow-hidden { overflow: hidden; }
.z-10 { z-index: 10; } .top-0 { top: 0; } .right-0 { right: 0; } .top-1\/2 { top: 50%; } .-translate-y-1\/2 { transform: translateY(-50%); }
.right-4 { right: 1rem; } .pr-12 { padding-right: 3rem; } .max-w-xs { max-width: 20rem; } .max-w-xl { max-width: 36rem; }
.w-full { width: 100%; } .w-24 { width: 6rem; } .h-24 { height: 6rem; }
.bg-primary\/5 { background-color: rgba(200, 41, 41, 0.05); } .border-primary\/20 { border-color: rgba(200, 41, 41, 0.2); }
.leading-relaxed { line-height: 1.625; } .text-\[10px\] { font-size: 0.625rem; }

/* Misc spacing helpers used in rendering */
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.m-0 { margin: 0; }
.min-w-\[120px\] { min-width: 120px; }
.w-full { width: 100%; }
.mt-auto { margin-top: auto; }

/* ── PHONE CTA BAR (Step 6 bottom nav) ──────────────────── */
.phone-cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-brand);
  color: #166534;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}
.phone-cta-bar:hover { background-color: #dcfce7; border-color: #4ade80; }
.phone-cta-bar strong { color: #15803d; }
.phone-cta-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ── STEP 6 CTA STACK (Phone CTA + OR + Request a Call) ─── */
.step6-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.cta-or-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.cta-or-divider::before,
.cta-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ── SYSTEM CARD LEARN MORE LINK ──────────────────────────── */
.card-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.5rem;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 9999px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.15s ease;
}
.card-learn-more:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* ── UNIT TOGGLE PILLS (SQ FT / SQ M) ─────────────────────── */
/* Small pill-shaped buttons shown above the dimensions input.
   Lets users toggle between square feet and square metres.   */
.unit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 2px solid #e5e7eb;
  background-color: #ffffff;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.unit-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.unit-pill.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(200, 41, 41, 0.35);
}

/* ── PHOTO UPLOAD ZONE (Step 7 contact form) ───────────────── */
.photo-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.5rem 1rem;
  background-color: #fafafa;
  border: 2px dashed #d1d5db;
  border-radius: var(--radius-brand);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  text-align: center;
}
.photo-upload-zone:hover {
  border-color: var(--color-primary);
  background-color: rgba(200, 41, 41, 0.03);
}
.photo-upload-icon { color: var(--color-primary); margin-bottom: 0.25rem; }
.photo-upload-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.photo-upload-hint {
  font-size: 0.65rem;
  color: #9ca3af;
  margin: 0;
}

/* Photo preview grid */
.photo-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.photo-preview-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.photo-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 0.5rem;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}
.photo-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.photo-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-size {
  font-size: 0.625rem;
  color: #9ca3af;
}
.photo-remove-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
  transition: color 0.15s, background-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-remove-btn:hover {
  color: var(--color-primary);
  background-color: rgba(200, 41, 41, 0.08);
}