/* Shared Create Account-style theme */
:root {
  --asn-text: #333;
  --asn-muted: #555;
  --asn-border: #ccc;
  --asn-surface: #fff;
  --asn-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --asn-button-bg: #333;
  --asn-button-hover: #555;
}

nav {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.navbar ul li {
  position: relative;
}

.navbar a {
  color: #fff;
  padding: 0.625rem 0.9375rem;
  text-decoration: none;
  display: block;
  font-size: 1rem;
}

.navbar a:hover {
  background-color: #555;
}

.navbar > a:first-child,
.navbar .brand {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2;
}

.button-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.group-label {
  color: #fff;
  font-weight: bold;
}

body {
  background-color: #fff;
  color: var(--asn-text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: #fff;
  color: var(--asn-text);
  border: 1px solid var(--asn-border);
  border-radius: 0.3125rem;
  padding: 0.625rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.account-btn,
.signout-btn,
.signin-btn,
.group-btn,
.submit-btn,
.post-button,
.contact-btn,
.save-btn,
.deactivate-btn,
.add-entry-btn,
.item-select-btn,
.tab-button,
.primary-btn,
.secondary-btn,
.danger-btn,
.modal-buttons button,
.reply-box button,
.new-comment-box button,
.actions a {
  background-color: var(--asn-button-bg);
  color: #fff;
  border: none;
  border-radius: 0.3125rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.account-btn:hover,
.signout-btn:hover,
.signin-btn:hover,
.group-btn:hover,
.submit-btn:hover,
.post-button:hover,
.contact-btn:hover,
.save-btn:hover,
.deactivate-btn:hover,
.add-entry-btn:hover,
.item-select-btn:hover,
.tab-button:hover,
.tab-button.active,
.primary-btn:hover,
.secondary-btn:hover,
.danger-btn:hover,
.modal-buttons button:hover,
.reply-box button:hover,
.new-comment-box button:hover,
.actions a:hover {
  background-color: var(--asn-button-hover);
}

.tab-button.active {
  border-color: var(--asn-button-hover);
  color: #fff;
}

.modal-buttons button:disabled {
  background-color: #888;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-container,
#contact-form-container,
#edit-post-container,
.account-settings,
.manage-posts-container,
.project-list-container,
.request-details-container,
.collab-details-container,
.comments-section,
.event-details-container,
.giveaway-details-container,
.card {
  background-color: var(--asn-surface);
  border-radius: 0.5rem;
  box-shadow: var(--asn-shadow);
}

.project-item,
.notification-item,
.comment {
  background-color: #fff;
  border-radius: 0.3125rem;
}

.modal-content,
.picker-options {
  background-color: var(--asn-surface);
  border-radius: 0.625rem;
  box-shadow: var(--asn-shadow);
}

.event-details-container h1,
.giveaway-details-container h1,
.request-details-container h1,
.collab-details-container h1,
#contact-form-container h1,
#edit-post-container h1 {
  color: var(--asn-text);
}

.organizer,
.provider,
.project-item p,
#contact-form-container p,
#edit-post-container p,
.detail-group p,
.status,
.note,
.warning,
.card p {
  color: var(--asn-muted);
}

.warning {
  border: 1px solid var(--asn-border);
  background: #fff;
}