/* Contact page styles – minimal, consistent with your base theme */

.contact-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #3E342C; /* Espresso */
  background: rgba(156, 139, 122, 0.15); /* Mushroom tint */
}

.dark .contact-badge {
  color: #F7F3EF; /* Ivory */
  background: rgba(156, 139, 122, 0.2); /* Mushroom tint */
}

.contact-badge--closed {
  color: rgba(185, 28, 28, 0.85);
  background: rgba(254, 202, 202, 0.5);
}

.dark .contact-badge--closed {
  color: rgba(252, 165, 165, 0.85);
  background: rgba(185, 28, 28, 0.2);
}

.contact-panel {
  border: 1px solid rgba(156, 139, 122, 0.25); /* Mushroom/25 */
  background: rgba(255, 255, 255, 0.45);
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.dark .contact-panel {
  border-color: rgba(156, 139, 122, 0.25); /* Mushroom/25 */
  background: rgba(62, 52, 44, 0.3); /* Espresso, elevated surface */
}

.contact-label {
  display: block;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #6B6159; /* muted-light */
}

.dark .contact-label {
  color: #9C8B7A; /* Mushroom */
}

/* Boxed/rounded input style, matching checkout.html and account/login.html
   (site-wide unification, Abbas 2026-07-25) -- was underline-only before.
   border-radius matches .contact-panel's 1.25rem (Abbas, 2026-08-10 -- was
   0.125rem, nearly square, inconsistent with the rounded card around it).
   .contact-select dropped: the Subject field is a custom dropdown now (not
   a native <select>), styled via .contact-input on its trigger button. */
.contact-input,
.contact-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(156, 139, 122, 0.25);
  border-radius: 1.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
  color: #3E342C; /* Espresso */
}

.dark .contact-input,
.dark .contact-textarea {
  border-color: rgba(156, 139, 122, 0.25);
  color: #F7F3EF; /* Ivory */
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: #A68A72; /* Taupe */
}

.dark .contact-input:focus,
.dark .contact-textarea:focus {
  border-color: #A68A72; /* Taupe */
}

.contact-textarea {
  resize: none;
  min-height: 110px;
}

.contact-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
}

.contact-submit {
  width: 100%;
  height: 3rem;
  border-radius: 9999px;
  background: #A68A72; /* Taupe */
  color: #1F1F1F; /* Charcoal */
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.contact-submit:hover {
  opacity: 0.92;
}

.contact-submit:active {
  transform: scale(0.985);
}

/* Flash messages */
.contact-flash {
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(156, 139, 122, 0.25); /* Mushroom/25 */
  background: rgba(255, 255, 255, 0.55);
  color: #3E342C; /* Espresso */
  font-weight: 600;
}

.dark .contact-flash {
  border-color: rgba(156, 139, 122, 0.25); /* Mushroom/25 */
  background: rgba(62, 52, 44, 0.4); /* Espresso, elevated surface */
  color: #F7F3EF; /* Ivory */
}

/* 2026-08-13 (Abbas): both states previously used plain green/red borders,
   outside the brand's 5-color system (brand-facing surfaces stick to it
   strictly, unlike the admin portal's own utility-color exception). Success
   uses Taupe (the accent color); error uses a stronger Espresso weight --
   darker/more present, not a new hue -- so the two are still easy to tell
   apart at a glance. */
.contact-flash--success {
  border-color: rgba(166, 138, 114, 0.5); /* Taupe */
}

.contact-flash--error {
  border-color: rgba(62, 52, 44, 0.5); /* Espresso */
}