/* app/static/css/components/coupon_card.css */
/* Coupon card component for deal/coupon listings */

.coupon-card {
  flex-direction: row;
  align-items: stretch;
  border: 2px dashed var(--color-border);
  border-radius: var(--card-border-radius);
  background-color: var(--card-background);
  min-height: auto;
  overflow: visible;
}

.coupon-card:hover {
  border-color: var(--color-primary);
}

/* --- Logo Section --- */

.coupon-card__logo {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border-right: 1px solid var(--color-border);
}

.coupon-card__logo-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: var(--card-border-radius);
}

/* --- Content Section --- */

.coupon-card__content {
  flex: 1 1 auto;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.coupon-card__store {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2xs, 2px);
}

.coupon-card__offer {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--spacing-2xs, 2px) 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.coupon-card__offer a {
  color: var(--card-title-color);
  text-decoration: none;
}

.coupon-card__offer a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.coupon-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* --- Action Section (Code/CTA) --- */

.coupon-card__action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 1px dashed var(--color-border);
  gap: var(--spacing-xs);
  min-width: 120px;
}

/* Code button — reveals code on click */
.coupon-card__code-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-white, #fff);
  border: none;
  border-radius: var(--button-border-radius, 4px);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center;
  width: 100%;
}

.coupon-card__code-btn:hover {
  background-color: var(--color-link-hover, var(--color-primary));
  filter: brightness(1.1);
}

.coupon-card__code-label {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coupon-card__code-value {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

/* Deal button (no code) */
.coupon-card__deal-btn {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-white, #fff);
  border: none;
  border-radius: var(--button-border-radius, 4px);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
}

.coupon-card__deal-btn:hover {
  filter: brightness(1.1);
}

.coupon-card__expiry {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Copied state (applied via JS) --- */

.coupon-card__code-btn.is-copied {
  background-color: var(--color-success, #22c55e);
}

.coupon-card__code-btn.is-copied .coupon-card__code-label::after {
  content: " ✓";
}

/* ==================================================================
   Coupon Detail Page
   ================================================================== */

.coupon-detail__logo {
  max-width: 120px;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--card-border-radius);
}

.coupon-detail__offer {
  font-size: var(--font-size-lg, 1.125rem);
}

.coupon-detail__code-block {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-surface-2, #f5f5f5);
  border: 2px dashed var(--color-border);
  border-radius: var(--card-border-radius);
}

.coupon-detail__code-label {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.coupon-detail__code {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--card-background);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.coupon-detail__copy-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-primary);
  color: var(--color-white, #fff);
  border: none;
  border-radius: var(--button-border-radius, 4px);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  white-space: nowrap;
}

.coupon-detail__copy-btn:hover {
  filter: brightness(1.1);
}

.coupon-detail__terms {
  color: var(--color-text-muted);
  margin-top: var(--spacing-md);
}

/* --- Mobile: Stack vertically --- */

@media (max-width: 599px) {
  .coupon-card {
    flex-direction: column;
  }

  .coupon-card__logo {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm);
  }

  .coupon-card__action {
    border-left: none;
    border-top: 1px dashed var(--color-border);
    flex-direction: row;
    min-width: auto;
  }

  .coupon-card__code-btn,
  .coupon-card__deal-btn {
    width: auto;
    flex: 1;
  }
}