/* =========================================================
   GWR B2C NEWSLETTER FORM GLOBAL STYLESHEET

   Purpose:
   - Shared base styling for newsletter / campaign sign-up forms
   - Campaign-specific colours are controlled by CSS variables
     added inside each individual CloudPage/form
   - Do not add campaign theme blocks into this global file

   Main wrapper class:
   - .newsletter-form

   Reusable layout classes:
   - .newsletter-form-left
   - .newsletter-form-right
   - .newsletter-form-card
   - .sc-button
   - #thank-you-wrapper
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

/* =========================================================
   1. DEFAULT VARIABLES
   Fallback theme: Client Events
========================================================= */

:root {
  --navy: #0d2956;
  --gold: #c58300;
  --teal: #008397;
  --gwr-font: "Golos Text", sans-serif;

  --theme-accent: #57e1ff;
  --theme-accent-2: #57e1ff;
  --theme-accent-rgb: 3 231 255;
  --theme-left-bg-start: #0D2956;
  --theme-left-bg-end: #132257;
  --theme-button-bg: #57e1ff;
  --theme-button-text: #09050f;
  --theme-label-margin-bottom: 15px;
  --theme-body-font-size: 16px;
}

/* =========================================================
   2. CAMPAIGN THEME VARIABLES
   Add campaign colours inside each CloudPage.

   Example:

 <!--  <style>
   .newsletter-form {
     --theme-accent: #a5e531;
     --theme-accent-2: #d7ff38;
     --theme-accent-rgb: 165 229 49;
     --theme-left-bg-start: #171020;
     --theme-left-bg-end: #09050f;
     --theme-button-bg: linear-gradient(90deg, #a5e531, #d7ff38);
     --theme-button-text: #09050f;
     --theme-label-margin-bottom: 8px;
     --theme-body-font-size: inherit;
   }
   </style> -->
========================================================= */

/* =========================================================
   3. BASE / FONT
========================================================= */

body,
.newsletter-form,
.newsletter-form .sc-formfield-label label,
.newsletter-form .sc-formfield-input label {
  font-family: var(--gwr-font) !important;
  font-size: var(--theme-body-font-size);
}

.newsletter-form .sc-formfield-label {
  margin-bottom: 10px;
}

/* =========================================================
   4. LEFT CONTENT PANEL
========================================================= */

.newsletter-form-left {
  padding: 40px 50px;
  background: linear-gradient(160deg, var(--theme-left-bg-start), var(--theme-left-bg-end));
  color: white;
}

.newsletter-form-badge {
  display: inline-block;
  background: var(--theme-accent);
  color: #09050f;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 25px;
}

.newsletter-form-left h1 {
  margin: 0 0 20px;
  font-size: 46px;
  line-height: 1.35;
}

.newsletter-form-left h1 span,
.newsletter-form-left h2 {
  color: var(--theme-accent);
}

.newsletter-form-left h2 {
  font-size: 22px;
}

.newsletter-form-left p {
  font-size: 18px;
  line-height: 1.6;
  color: #e5e7eb;
}

.newsletter-form-left ul {
  list-style: none;
  padding: 0;
  margin-top: 35px;
}

.newsletter-form-left li {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
}

.highlight-box {
  margin-top: 30px;
  padding: 18px;
  border-radius: 16px;
  background: rgb(var(--theme-accent-rgb) / 12%);
  border: 1px solid rgb(var(--theme-accent-rgb) / 50%);
  color: var(--theme-accent);
  font-weight: bold;
}

/* =========================================================
   5. RIGHT FORM PANEL
========================================================= */

.newsletter-form-right {
  background: white;
  padding: 60px 60px 0;
  border-top: 8px solid var(--theme-accent);
}

.newsletter-form-right h2 {
  margin: 0;
  color: #111018;
  font-size: 32px;
}

.form-intro {
  color: #555;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* =========================================================
   6. THANK-YOU STATE
========================================================= */

#thank-you-wrapper {
  background: white;
  padding: 50px;
  border-top: 8px solid var(--theme-accent);
}

.thank-you-message {
  font-size: 18px;
  color: #000000;
  margin-top: 15px;
  line-height: 1.6;
}

.thank-you-message .processing-text {
  font-style: italic;
  line-height: 1.6 !important;
}

/* =========================================================
   7. SMART CAPTURE DEFAULT TEXT
========================================================= */

form.smartcapture-content-wrapper span,
form.smartcapture-content-wrapper div,
form.smartcapture-content-wrapper p {
  font-size: 18px;
  color: #000000;
}

form.smartcapture-content-wrapper address {
  line-height: 1.6 !important;
}

/* Hide FuelUX validation popover if it causes flashing/position issues. */
.fuelux .popover {
  display: none !important;
}

.popover-content {
  margin: 0 0 10px;
  font-size: 14px !important;
  color: #f87070 !important;
}

.popover.fade.left.in {
  top: auto !important;
  left: auto !important;
  margin-top: 10px;
  padding-left: 10px;
}

/* =========================================================
   8. FORM FIELDS
========================================================= */

.smartcapture-controls {
  margin-bottom: 35px;
  padding: 0 !important;
}

.sc-formfield-label label {
  margin-bottom: var(--theme-label-margin-bottom);
  font-weight: bold;
  color: #111018;
}

.sc-formfield-input input,
.sc-formfield-input select {
  width: 100% !important;
  padding: 15px 0;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 15px;
  text-indent: 12px;
  color: #757575;
}

.sc-formfield-input input:focus,
.sc-formfield-input select:focus {
  outline: none;
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 4px rgb(var(--theme-accent-rgb) / 25%);
}

input#Terms_and_Conditions {
  width: auto !important;
}

.sc-formfield-input.tc_block label {
  font-size: 12px !important;
  color: #626262 !important;
  line-height: 1;
}

/* =========================================================
   9. BUTTON
========================================================= */

.sc-button {
  width: 100%;
  padding: 17px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--theme-button-bg) !important;
  color: var(--theme-button-text) !important;
  font-size: 20px !important;
  font-weight: 800;
  cursor: pointer;
  transition: .25s;
}

.sc-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgb(var(--theme-accent-rgb) / 30%);
}

.privacy {
  margin-top: 18px;
  color: #777;
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   10. CONSENT FOOTER TEXT
========================================================= */

.consent-footer {
  padding: 18px 20px;
  background: #f7f7f7;
  border-left: 5px solid var(--theme-accent);
  border-radius: 14px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.6;
}

.consent-footer strong {
  color: #111018;
}

.consent-footer a {
  color: #111018;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--theme-accent);
}

/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 800px) {
  .newsletter-form-card {
    grid-template-columns: 1fr;
  }

  .newsletter-form-left{
    padding: 35px;
  }

  #thank-you-wrapper,
  .newsletter-form-right {
    padding: 35px 35px 0;
  }


  .newsletter-form-left h1 {
    font-size: 34px;
  }
}