/* ===== Claim Your Certificate Page ===== */
/* Static source: claim-your-certificate.css. Template: page-templates/claim-certificate.php */

/* Base typography (scoped to this page's sections) */
.ce-cyc-reminder-banner,
.ce-cyc-claim-sec {
  color: var(--text-color);
}

.ce-cyc-reminder-banner :is(h1, h2, h3, h4, h5, h6),
.ce-cyc-claim-sec :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--primary-font);
  color: var(--heading-color);
  font-weight: 700;
}

.ce-cyc-claim-sec h1 { font-size: var(--h1-font-size); }
.ce-cyc-reminder-banner h5 { font-size: var(--h5-font-size); }

/* Button sizes */
.ce-cyc-btn-lg {
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
}

.ce-cyc-btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.ce-cyc-btn-outline {
  border: 2px solid var(--theme-color-2) !important;
}

/* ===== Reminder Banner ===== */
.ce-cyc-reminder-banner {
  padding: 2.5rem 0;
}

.ce-cyc-reminder-card {
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  box-shadow: 0 10px 25px rgba(0, 10, 26, 0.06);
}

.ce-cyc-reminder-card img {
  width: 80px;
  height: auto;
  border-radius: 8px;
}

.ce-cyc-reminder-card p.small {
  color: var(--theme-color-2);
}

/* ===== Claim Section ===== */
.ce-cyc-claim-sec {
  padding: 5rem 0;
}

.ce-cyc-claim-visual {
  background: var(--primary-color);
  padding: 0.75rem;
  border-radius: 14px;
  box-shadow: 0 25px 50px rgba(0, 10, 26, 0.15);
}

.ce-cyc-claim-visual img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

.ce-cyc-claim-card {
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 0 20px 45px rgba(0, 10, 26, 0.1);
}

/* Form fields (used alongside Bootstrap's form-label / form-control) */
.ce-cyc-form-label {
  font-weight: 600;
  color: var(--theme-color-2);
}

.ce-cyc-form-control {
  border-radius: 10px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-color);
  font-family: var(--primary-font);
}

.ce-cyc-form-control:focus {
  border-color: var(--theme-color-4);
  box-shadow: 0 0 0 0.2rem rgba(246, 193, 52, 0.35);
}

.ce-cyc-processing-note {
  background: var(--theme-color-9);
  border: 1px solid var(--theme-color-10);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--theme-color-2);
}

/* Shown to administrators until a form shortcode is set. */
.ce-cyc-form-notice {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--theme-color-3);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--theme-color-2);
}

/*
 * Form plugin markup (Contact Form 7, WPForms, Gravity Forms, …) inside the
 * card. Plugins can't take the theme's classes, so match .ce-cyc-form-label,
 * .ce-cyc-form-control and .ce-btn here. header.css resets all margins, so
 * the field spacing is restored too.
 */
.ce-cyc-form-plugin p,
.ce-cyc-form-plugin .wpforms-field,
.ce-cyc-form-plugin .gfield {
  margin-bottom: 1rem;
}

.ce-cyc-form-plugin label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--theme-color-2);
}

.ce-cyc-form-plugin input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ce-cyc-form-plugin select,
.ce-cyc-form-plugin textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--primary-color);
  color: var(--text-color);
  font-family: var(--primary-font);
  font-size: 1rem;
  line-height: 1.5;
}

.ce-cyc-form-plugin input:not([type="submit"]):not([type="button"]):focus,
.ce-cyc-form-plugin select:focus,
.ce-cyc-form-plugin textarea:focus {
  outline: 0;
  border-color: var(--theme-color-4);
  box-shadow: 0 0 0 0.2rem rgba(246, 193, 52, 0.35);
}

.ce-cyc-form-plugin input[type="submit"],
.ce-cyc-form-plugin button[type="submit"] {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: 200px;
  background: var(--theme-color-3);
  color: var(--primary-color);
  font-family: var(--primary-font);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ce-cyc-form-plugin input[type="submit"]:hover,
.ce-cyc-form-plugin input[type="submit"]:focus,
.ce-cyc-form-plugin button[type="submit"]:hover,
.ce-cyc-form-plugin button[type="submit"]:focus {
  background: var(--theme-color-2);
  color: var(--primary-color);
}

@media (max-width: 575.98px) {
  .ce-cyc-claim-card {
    padding: 1.5rem;
  }

  .ce-cyc-form-plugin input[type="submit"],
  .ce-cyc-form-plugin button[type="submit"] {
    width: 100%;
  }
}