/* ==========================================================================
   Coinsnap Bitcoin Donation - Shoutout Form & List Styles
   Extends the base style.css for shoutout-specific layouts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shoutout Form Container
   -------------------------------------------------------------------------- */
#coinsnap-bitcoin-donation-shoutouts-form {
  border-radius: 12px;
  box-shadow: none;
  border: none;
  max-width: 645px;
}

#coinsnap-bitcoin-donation-shoutouts-form input {
  margin-bottom: 4px;
}

#coinsnap-bitcoin-donation-shoutouts-form button {
  width: 30%;
}

.shoutout-form-wrapper {
  padding: 28px;
  border: 1px solid var(--cbd-color-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.shoutout-form-wrapper.dark-theme {
  padding: 28px;
  border: 1px solid var(--cbd-color-border, #e0e0e0);
}

.shoutout-form-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shoutout-form-left {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.shoutout-form-right {
  display: flex;
  flex-direction: column;
  height: 140px;
}

.shoutout-input-label {
  width: 100%;
}

.shoutout-button-container {
  display: flex;
  justify-content: center;
}

#coinsnap-bitcoin-donation-shoutout-name {
  padding: 10px 12px !important;
}

/* --------------------------------------------------------------------------
   Shoutout Message Textarea
   -------------------------------------------------------------------------- */
.coinsnap-bitcoin-donation-shoutout-message {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--cbd-color-border, #e0e0e0);
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  flex-grow: 1;
  margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  outline: none;
}

.coinsnap-bitcoin-donation-shoutout-message:hover {
  border-color: var(--cbd-color-border-hover, #c0c0c0);
}

.coinsnap-bitcoin-donation-shoutout-message:focus {
  border-color: var(--cbd-color-border-focus, #f7931a);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.25);
}

/* --------------------------------------------------------------------------
   Shoutout Help Text
   -------------------------------------------------------------------------- */
.coinsnap-bitcoin-donation-shoutout-help {
  font-size: 12px;
  color: var(--cbd-color-text-muted, #a7a7a7);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.coinsnap-bitcoin-donation-shoutout-help p {
  margin: 2px;
}

#coinsnap-bitcoin-donation-shoutout-help-premium {
  display: none;
  color: #f7941a;
}

#coinsnap-bitcoin-donation-shoutout-help-minimum {
  display: none;
  color: var(--cbd-color-error, #cc1818);
}

/* --------------------------------------------------------------------------
   Shoutout List
   -------------------------------------------------------------------------- */
.shoutouts-list-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

#coinsnap-bitcoin-donation-shoutouts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 645px;
  width: 100%;
}

/* Individual shoutout card */
.coinsnap-bitcoin-donation-shoutout {
  border-radius: 8px;
  padding: 12px 8px;
  border: 1px solid var(--cbd-color-border, #e0e0e0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 200ms ease;
}

.coinsnap-bitcoin-donation-shoutout:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Shoutout card top row */
.coinsnap-bitcoin-donation-shoutout-top {
  display: flex;
  justify-content: space-between;
  margin: 12px 16px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(168, 168, 168, 0.2);
  font-size: 16px;
  font-weight: 600;
}

.coinsnap-bitcoin-donation-shoutout-top-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.coinsnap-bitcoin-donation-shoutout-top-right-amount {
  background-color: var(--cbd-color-text-muted, #a7a7a7);
  padding: 2px 16px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.coinsnap-bitcoin-donation-shoutout-top-right-days {
  font-size: 13px;
  color: var(--cbd-color-text-secondary, #757575);
}

.coinsnap-bitcoin-donation-dark-theme .coinsnap-bitcoin-donation-shoutout-top-right-days {
  color: #c0c0c0 !important;
}

/* Shoutout card bottom (message) */
.coinsnap-bitcoin-donation-shoutout-bottom {
  margin: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
}

/* Premium / Highlighted shoutouts */
.highlight {
  font-weight: 500;
  background-color: #f7931a;
}

.highlight-shoutout {
  border: 2px solid #f7931a !important;
}