/* DeepCap Promo Code — checkout-personal page only */

.dc-promo-code {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.dc-promo-code label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dc-promo-code__optional {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.875em;
  margin-left: 0.25rem;
}

.dc-promo-code input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dc-promo-code input[type="text"]:focus {
  outline: 2px solid #BF9B30;
  outline-offset: -1px;
  border-color: #BF9B30;
}

/* Apply Code button — extends .dc-ev-verify-btn (gold/full-width).
   We rely on .dc-ev-verify-btn already in style.css; .dc-promo-code-apply-btn
   adds nothing visual, just a hook in case future divergence is needed. */
.dc-promo-code-apply-btn {
  /* All visual rules inherited via the shared class on the element */
}

.dc-promo-code__message {
  margin-top: 0.5rem;
  margin-bottom: 0;
  min-height: 1.25em;          /* reserve space — no layout shift when message appears */
  font-size: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dc-promo-code__message--applying {
  color: #6b7280;
  font-style: italic;
}

/* The dark-theme body sets `color: #E5E7EB !important` globally, so the
   message colors need !important to win on this page. */
.dc-promo-code__message--applied {
  color: #BF9B30 !important;   /* brand gold — yellow text */
  font-weight: 600;
}

.dc-promo-code__message--error {
  color: #dc2626 !important;   /* red */
  font-weight: 600;
}

/* Hide PMPro's native discount code toggle and field (we render our own) */
#other_discount_code_p,
#other_discount_code_fields {
  display: none !important;
}

@media (max-width: 640px) {
  .dc-promo-code input[type="text"] {
    font-size: 16px;             /* prevent iOS zoom-on-focus */
  }
}