@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* FONTS */
    --font-primary: "Poppins";
    --font-secondary: "Manrope";
    --font-tertiary: "Manrope";

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-light: 300;
    --font-weight-book: "Book";
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-italic: "Italic";
    --font-weight-bold-italic: "Bold Italic";
    --font-weight-semibold-italic: "Semibold Italic";
    --font-weight-medium-italic: "Medium Italic";
    --font-weight-light-italic: "Light Italic";

    --desktop-h1-font-family: var(--font-primary);
    --desktop-h1-weight: var(--font-weight-semibold);
    --desktop-h1-size: 56px;
    --desktop-h1-line-height: 70px;
    --desktop-h2-font-family: var(--font-primary);
    --desktop-h2-weight: var(--font-weight-semibold);
    --desktop-h2-size: 48px;
    --desktop-h2-line-height: 60px;
    --desktop-h3-font-family: var(--font-secondary);
    --desktop-h3-weight: var(--font-weight-regular);
    --desktop-h3-size: 32px;
    --desktop-h3-line-height: 40px;
    --desktop-h4-font-family: var(--font-secondary);
    --desktop-h4-weight: var(--font-weight-semibold);
    --desktop-h4-size: 24px;
    --desktop-h4-line-height: 30px;
    --desktop-h5-font-family: var(--font-tertiary);
    --desktop-h5-weight: var(--font-weight-bold);
    --desktop-h5-size: 18px;
    --desktop-h5-line-height: 24px;
    --desktop-h6-font-family: var(--font-tertiary);
    --desktop-h6-weight: var(--font-weight-semibold);
    --desktop-h6-size: 16px;
    --desktop-h6-line-height: 20px;


    --mobile-h1-font-family: var(--font-primary);
    --mobile-h1-weight: var(--font-weight-semibold);
    --mobile-h1-size: 48px;
    --mobile-h1-line-height: 60px;
    --mobile-h2-font-family: var(--font-primary);
    --mobile-h2-weight: var(--font-weight-semibold);
    --mobile-h2-size: 32px;
    --mobile-h2-line-height: 40px;
    --mobile-h3-font-family: var(--font-secondary);
    --mobile-h3-weight: var(--font-weight-regular);
    --mobile-h3-size: 24px;
    --mobile-h3-line-height: 30px;
    --mobile-h4-font-family: var(--font-secondary);
    --mobile-h4-weight: var(--font-weight-semibold);
    --mobile-h4-size: 20px;
    --mobile-h4-line-height: 25px;
    --mobile-h5-font-family: var(--font-tertiary);
    --mobile-h5-weight: var(--font-weight-bold);
    --mobile-h5-size: 18px;
    --mobile-h5-line-height: 20px;
    --mobile-h6-font-family: var(--font-tertiary);
    --mobile-h6-weight: var(--font-weight-semibold);
    --mobile-h6-size: 16px;
    --mobile-h6-line-height: 20px;


    --paragraph-font-family: var(--font-tertiary);
    --paragraph-weight: var(--font-weight-regular);
    --paragraph-size: 16px;
    --paragraph-line-height: 24px;
    --paragraph-small-font-family: var(--font-tertiary);
    --paragraph-small-weight: var(--font-weight-regular);
    --paragraph-small-size: 14px;
    --paragraph-small-line-height: 21px;


    --button-font-family: var(--font-tertiary);
    --button-weight: var(--font-weight-semibold);
    --button-size: var(--paragraph-size);
    --button-line-height: var(--paragraph-line-height);
    --input-font-family: var(--font-tertiary);
    --input-weight: var(--font-weight-semibold);
    --input-size: var(--paragraph-size);
    --input-line-height: var(--paragraph-line-height);
    --link-font-family: var(--font-tertiary);
    --link-weight: var(--font-weight-regular);
    --link-size: var(--paragraph-size);
    --link-line-height: var(--paragraph-line-height);
    --navbar-nav-link-padding-x: 1.5rem !important;


    /* BRAND COLORS */
    --main-brand: #00197d;
    --accents-1: #eeeaff;
    --accents-2: #4200f6;
    --accents-3: #07073d;
    --neutrals-white: #ffffff;
    --neutrals-light-grey: #f2f2f2;
    --neutrals-medium-grey: #d9d9d9;
    --neutrals-dark-grey: #989898;
    --neutrals-black: #000000;
    --ui-positive: #009681;
    --ui-negative: #d13346;
    --ui-warning: #e7aa35;

    /* FILE DATA */
    --border-radius-interactives: 32px;
    --border-radius-cards: 16px;
    --desktop-side-padding: 120px;
    --mobile-side-padding: 24px;

    /* FORM */
    --cr-accent:       #4200f6;
    --cr-accent-hover: #1d4ed8;
    --cr-radius:       12px;
    --cr-gap:          18px;
    --cr-border:       #d1d5db;
    --cr-border-focus: #4200f6;
    --cr-bg:           #f8fafc;
    --cr-card-bg:      #ffffff;
    --cr-text:         #111827;
    --cr-muted:        #989898;
    --cr-error-bg:     #fef2f2;
    --cr-error-border: #fca5a5;
    --cr-error-text:   #dc2626;
    --cr-success-bg:   #f0fdf4;
    --cr-success-border:#86efac;
    --cr-success-text: #16a34a;
}



body {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-line-height);
    color: var(--neutrals-black);
}
p {
    color: var(--neutrals-black);
}

.h2, h2 {
    font-size: var(--desktop-h2-size);
    line-height: var(--desktop-h2-line-height);
    font-family: var(--desktop-h2-font-family);
    font-weight: var(--desktop-h2-weight);
    margin-bottom: 1rem;
    color: var(--accents-3);
}

h3 {
    font-family: var(--desktop-h3-font-family);
    font-size: var(--desktop-h3-size);
    font-weight: var(--desktop-h3-weight);
    line-height: var(--desktop-h3-line-height);
    color: var(--main-brand);
}

h4 {
    font-family: var(--desktop-h4-font-family);
    font-size: var(--desktop-h4-size);
    line-height: var(--desktop-h4-line-height);
    font-weight: var(--desktop-h4-weight);
    color: var(--neutrals-black);
}

h5 {
    color: var(--accents-2);
    font-family: var(--desktop-h5-font-family);
    font-size: var(--desktop-h5-size);
    line-height: var(--desktop-h5-line-height);
    font-weight: var(--desktop-h5-weight);
    text-transform: uppercase;
}

h6 {
    font-family: var(--desktop-h6-font-family);
    font-size: var(--desktop-h6-size);
    line-height: var(--desktop-h6-line-height);
    font-weight: var(--desktop-h6-weight);
    color: var(--neutrals-dark-grey);
}

.bg-accent-1 {
    background-color: var(--accents-1);
}

.row-icons .col {
    flex: 1;
}

.row-icons {
    gap: 64px;
}

form label span {
    font-family: var(--input-font-family);
    font-weight: 600;
    font-size: var(--input-size);
    line-height: var(--input-line-height);
    letter-spacing: 0%;
    color: var(--neutrals-black);
    margin-bottom: 0.5rem;
    display: block;
}

form label span b {
    color: var(--ui-negative);
}

form label {
    width: 100%;
    margin-bottom: 1rem;
}

form label input,
form label select {
    border: 1px solid var(--neutrals-light-grey) !important;
    border-radius: 8px;
    padding: 16px 12px !important;
    font-size: var(--paragraph-size);
    font-weight: var(--paragraph-weight);
    font-family: var(--paragraph-font-family);
    line-height: var(--paragraph-line-height) !important;
    margin-bottom: 0 !important;
}

form label select {
    color: var(--neutrals-dark-grey);
    position: relative;
}

form label select::before {
    background-image: url(../img/arrow-down.svg);
    width: 12px;
    height: 7px;
    content: '';
    position: absolute;
    right: 1rem;
    background-size: cover;
    transform: translateY(-50%);
    top: 50%;
}
form label i, form label p.small-p-password{
    font-style: normal;
    color:  var(--neutrals-dark-grey);
    font-size: var(--paragraph-small-size);
    font-weight: var(--paragraph-small-weight);
    line-height: var(--paragraph-small-line-height);
}
p.small-p-password{
    margin-bottom: 0.5rem;
}


.notification-form {
    background-color: var(--accents-1);
    padding: 10px 16px;
    border-radius: var(--border-radius-interactives);
    display: flex;
    gap: 8px;
}

.notification-form p {
    color: var(--accents-2);
    margin-bottom: 0;
}

.small-p.text-grey,
.small-p.text-grey a {
    color: var(--neutrals-dark-grey);
}

.account_page input[type="submit"] {
    background: linear-gradient(105.36deg, #4200F6 11.46%, #6668FF 93.63%) !important;
    width: auto;
    padding: 12px 28px !important;
    border-radius: 32px !important;
    text-transform: uppercase;
}

.footer-redesign .text-muted {
    color: var(--neutrals-dark-grey) !important;
}



/* =============================================
   Customer Registration Form – form.css
   ============================================= */

.grecaptcha-badge {
    display: none !important;
}

/* Card */
.cr-card {
  width: 100%;
  /*max-width: 520px;*/
  background: var(--cr-card-bg);
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Header */
.cr-header {
  background: var(--cr-accent);
  padding: 40px 40px 32px;
  text-align: center;
}

.cr-logo-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.45);
  margin-bottom: 16px;
  color: #fff;
}
.cr-logo-ring svg { width: 30px; height: 30px; }

.cr-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.cr-subtitle {
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}

/* Alerts */
.cr-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 4px solid transparent;
    margin-top: 16px;
}
.cr-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cr-alert--error   { background: var(--cr-error-bg);   border-color: var(--cr-error-text);   color: var(--cr-error-text); }
.cr-alert--success { background: var(--cr-success-bg); border-color: var(--cr-success-text); color: var(--cr-success-text); }

/* Form body */
.cr-form {
  padding: 32px 40px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--cr-gap);
}

.cr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cr-gap);
}

/* Field */
.cr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cr-field label {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutrals-black);
    margin-bottom: 2px;
}
.cr-optional {
  font-weight: 400;
  color: var(--cr-muted);
}

.cr-field input[type="text"],
.cr-field input[type="email"],
.cr-field input[type="tel"],
.cr-field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 16px;
    color: var(--cr-text);
    background: #fafafa;
    border: 1px solid #F2F2F2;
    border-radius: 8px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
    -webkit-appearance: none;
}

.cr-field input:focus {
  border-color: var(--cr-border-focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Password with toggle */
.cr-password-wrap {
  position: relative;
}
.cr-password-wrap input {
  padding-right: 44px;
}
.cr-toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--cr-muted);
  line-height: 0;
}
.cr-toggle-pw:hover { color: var(--cr-text); }
.cr-toggle-pw svg { width: 18px; height: 18px; }

/* Strength bar */
.cr-strength-bar {
  height: 3px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.cr-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .3s ease, background .3s ease;
}
.cr-strength-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Checkbox */
.cr-field--checkbox { gap: 0; }
.cr-checkbox-label {
    display: flex;
    align-items: flex-start;
    column-gap: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cr-muted);
    line-height: 1.5;
    flex-wrap: wrap;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.cr-checkbox-label input[type="checkbox"] { display: none; }
.cr-checkmark {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--cr-border);
    border-radius: 4px;
    background: #fafafa;
    position: relative;
    transition: border-color .15s, background .15s;
    margin-right: 6px;
}
.cr-checkbox-label input:checked ~ .cr-checkmark {
  background: var(--cr-accent);
  border-color: var(--cr-accent);
}
.cr-checkbox-label input:checked ~ .cr-checkmark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.cr-checkbox-label a {
    color: var(--cr-accent);
    text-decoration: none;
}

/* Submit */
.cr-submit {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*gap: 8px;*/
    background-color: var(--main-brand);
    border: unset;
    color: var(--accents-1);
    font-weight: var(--button-weight);
    padding: 12px 28px;
    background: linear-gradient(105.36deg, #4200F6 11.46%, #6668FF 93.63%);
    transition: all 0.3s ease-in-out;
    font-size: var(--button-size);
    line-height: var(--button-line-height);
    font-family: var(--button-font-family);
    border-radius: 100px;
    text-transform: uppercase;
}
.cr-submit:hover {
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transform: translateY(-1px);
}
.cr-submit:active { transform: translateY(0); }
.cr-submit-arrow { display: none; width: 18px; height: 18px; transition: transform .2s; }
.cr-submit:hover .cr-submit-arrow { transform: translateX(3px); }

/* Login link */
.cr-login-link {
  margin: 0;
  padding: 20px 40px;
  text-align: center;
  font-size: 14px;
  color: var(--cr-muted);
  border-top: 1px solid #f1f3f5;
}
.cr-login-link a {
  color: var(--cr-accent);
  font-weight: 600;
  text-decoration: none;
}
.cr-login-link a:hover { text-decoration: underline; }

/* Already logged in */
.cr-already-logged-in {
  text-align: center;
  padding: 32px;
  color: var(--cr-muted);
}

/* Responsive */
@media (max-width: 540px) {
  .cr-header    { padding: 32px 24px 24px; }
  .cr-form      { padding: 24px 20px 20px; }
  .cr-login-link{ padding: 16px 20px; }
  .cr-row       { grid-template-columns: 1fr; }
  .cr-alert     { padding: 12px 16px; }
}

/* Password hint */
.cr-hint {
  margin: 0;
  font-size: 14px;
  color: var(--cr-muted);
  line-height: 1.5;
}
.cr-hint strong { color: #374151; }

/* Inline error (JS-injected) */
.cr-inline-error {
  border-radius: 8px;
  margin-bottom: 4px;
}

/* Per-field inline errors */
.cr-field-error {
  display: block;
  min-height: 0;
  font-size: 14px;
  color: var(--cr-error-text);
  line-height: 1.4;
  margin-top: 2px;
}
.cr-field--invalid input,
.cr-field--invalid .cr-password-wrap input {
  border-color: var(--cr-error-text) !important;
}
.cr-field--invalid input:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

/* reCAPTCHA notice */
.cr-recaptcha-notice {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--cr-muted);
  text-align: center;
  line-height: 1.5;
}
.cr-recaptcha-notice a { color: var(--cr-muted); }

/* ── Logged-in state ─────────────────────────────── */
.cr-card--loggedin { max-width: 480px; margin: 0 auto; }

.cr-already-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  font-size: 26px;
  color: #fff;
  margin-bottom: 16px;
}

.cr-loggedin-body {
  padding: 32px 40px 28px;
}

.cr-loggedin-text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  text-align: center;
}

.cr-submit--full {
  display: flex;
  text-decoration: none;
  margin-bottom: 0;
}

.cr-signout-line {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--cr-muted);
}

.cr-signout-link {
  color: var(--cr-accent);
  font-weight: 600;
  text-decoration: none;
}
.cr-signout-link:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .cr-loggedin-body { padding: 24px 20px 20px; }
}

/* Inline label link (e.g. "Forgot password?" next to Password label) */
.cr-label-link {
  float: right;
  font-size: 16px;
  font-weight: 400;
  color: var(--cr-accent);
  text-decoration: none;
}
.cr-label-link:hover { text-decoration: underline; }


@media(max-width:991px) {
    body {
        font-family: var(--font-tertiary);
        font-size: var(--paragraph-size);
        line-height: var(--paragraph-line-height);
        color: var(--neutrals-black);
    }

    h1 {
        font-size: var(--mobile-h1-size);
        line-height: var(--mobile-h1-line-height);
        font-weight: var(--mobile-h1-weight);
        font-family: var(--mobile-h1-font-family);
    }

    .h2, h2 {
        font-size: var(--mobile-h2-size);
        line-height: var(--mobile-h2-line-height);
        font-family: var(--mobile-h2-font-family);
        font-weight: var(--mobile-h2-weight);
    }

    h3 {
        font-family: var(--mobile-h3-font-family);
        font-size: var(--mobile-h3-size);
        font-weight: var(--mobile-h3-weight);
        line-height: var(--mobile-h3-line-height);
    }

    h4 {
        font-family: var(--mobile-h4-font-family);
        font-size: var(--mobile-h4-size);
        line-height: var(--mobile-h4-line-height);
        font-weight: var(--mobile-h4-weight);
    }
}

@media(max-width:991px) {
    .row-icons .col {
        flex: 1 0 45%;
    }
}