/* =========================================================
   BASE.CSS — TOKENIZED DEFAULT STYLESHEET (CLEANED + FIXED)
   - Adds 4-side border logic with separate bottom control:
       --field-border-sides-width (top/right/left)
       --field-border-bottom-width (bottom)
       --field-border-color
       --field-border-style
   - Removes broken/duplicate field logic + invalid var declarations
   - Keeps dropdown option text black (best effort) WITHOUT changing field text color
   - Keeps borders static across focus/active states
   - Keeps content max-width 800px
   ========================================================= */

/* =====================
   DESIGN TOKENS
   ===================== */
:root {
  /* Background */
  --bg: #ffffff;          /* outside / sides (html element) */
  --color-inside: var(--bg); /* center column body — defaults to match --bg */

  /* Core element color (buttons, icons, dividers, checkbox base) */
  --element: #000000;

  /* Text */
  --text: #000000;
  --link: blue;

  /* Button text (independent of body text) */
  --button-text: #ffffff;

  /* Button hover */
  --button-hover-bg: transparent;
  --button-hover-text: var(--element);
  --button-hover-border: var(--element);

  /* Fonts (style + size) */
  --font-primary-style: "Arial", sans-serif;   /* body */
  --font-primary-size: 16px;

  --font-secondary-style: "Arial", sans-serif; /* headings */
  --font-secondary-size: 28px;

  --font-tertiary-style: "Arial", sans-serif;  /* small text */
  --font-tertiary-size: 13px;

  /* =====================
     FORM BORDER LOGIC
     - Sides share one control
     - Bottom is independent (underline effect)
     ===================== */
  --field-border-color: var(--element);
  --field-border-style: solid;

  --field-border-sides-width: 1px;   /* top/right/left */
  --field-border-bottom-width: 1px;  /* bottom */
  --field-border-radius: 0px;        /* rounded corners (0 = square) */

  /* Required field indicator + validation error color */
  --required-field-color: #ff5722;

  /* Button shape */
  --button-border-radius: var(--button-border-radius);

  /* SVG icons (FULL URIs — overridden in override.css) */
  --icon-datepicker: none;
  --icon-select-arrow: none;
  --icon-file-upload: none;
  --icon-file-upload-hover: none;
  --icon-checkbox-check: none;
  --icon-tick-bubble-check: none;
  

  /* Content width */
  --content-max-width: 800px;

  /* Body card shape */
  --body-border-radius: 0px;

  /* Body inner padding (left/right only) */
  --body-padding: 0px;

  /* Continue button alignment (auto = center, 0 = default left) */
  --continue-btn-margin-left:  0;
  --continue-btn-margin-right: 0;



  /* Box padding — controls gutters inside form sections (0 = flush/no gutters) */
  --box-padding: 1rem;

  /* Box background — controls the color behind the padding/gutters (default: transparent) */
  --box-bg: transparent;
}

/* =====================
   DERIVED TOKENS (DO NOT OVERRIDE)
   ===================== */
:root {
  --button-bg: var(--element);
  --button-border: var(--element);

  /* Checkbox MUST match button base */
  --checkbox-outline: var(--button-bg);
  --checkbox-checked-bg: var(--button-bg);

  --divider: var(--element);
}

/* =====================
   GLOBAL
   ===================== */
html {
  background-color: var(--bg);  /* outside/sides only */
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--color-inside); /* center column — no gaps possible */
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);
  color: var(--text);
  min-height: 100vh;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--body-border-radius);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
}


/* =====================
   CENTER COLUMN
   All sections inside body are already constrained + colored.
   Only need to ensure children are transparent.
   ===================== */
.navbar,
#PeopleVineContent,
.container-fluid,
.templatesitefooter {
  background-color: transparent;
  max-width: 100%;
}

/* .ui-update is a child of #PeopleVineContent — transparent so body bg shows */
.ui-update {
  background-color: transparent;
}

/* =====================
   HEADER / FOOTER
   ===================== */
.templatesitefooter {
  height: 30px;
  padding-top: 5px;
  text-align: center;
}

.navbar {
  position: relative;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  line-height: 0;        /* collapses whitespace-only navbars to 0 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar-brand {
  display: inline-block;
  padding-top: 3rem;
  padding-bottom: 0;     /* remove bottom padding */
  margin-right: 0;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

/* Kill Bootstrap mt-5/mb-5 margins that expose body bg as gaps */
.container-fluid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
}


footer { width: 100%; bottom: 0; }

.privacy-row { text-align: center; }
.privacy-row a { color: var(--text) !important; }

/* =====================
   LAYOUT / BOX CLEANUP
   ===================== */
@media (max-width:600px){
  .ui-update .split_alignBtm{
    -ms-flex-align:end;
    -webkit-align-items:flex-end;
    align-items:flex-end;
    text-align:center !important;
  }
}

.ui-update .mix-box_outlined { box-shadow: none; border: 0; }

/* Structural wrappers — transparent so bg colors show through */
.ui-update .box-bd,
.ui-update .component,
.ui-update .component-content,
.ui-update section {
  background-color: transparent !important;
}

/* --box-bg: outer padding/gutter area */
.ui-update .box-bd_inflated {
  background-color: var(--box-bg) !important;
  padding-left: var(--box-padding) !important;
  padding-right: var(--box-padding) !important;
}

/* --box-content-bg: inner form card */
.ui-update .box {
  background-color: var(--color-inside) !important;
}



@media only screen and (min-width: 768px), only print {
  #takeApplication .split_alignBtm{
    -ms-flex-align:end;
    -webkit-align-items:flex-end;
    align-items:center;
    display:flex;
    flex-direction:column;
    margin-bottom:4rem;
  }

  .ui-update .split_collapseOnMobile>*+* { padding: 0; }
}

@media (max-width:1024px){
  .ui-update .hdg { font-size: 26px !important; }
}

/* =====================
   TYPOGRAPHY
   ===================== */
/* Headings */
.ui-update .hdg{
  font-family: var(--font-secondary-style);
  font-size: var(--font-secondary-size) !important;
  color: var(--text) !important;
}

.ui-update h1,h2,h3,h4,h5,h6{
  font-family: var(--font-secondary-style);
  color: var(--text);
}

/* Body text */
.ui-update p,
.ui-update span,
.ui-update li,
.ui-update a{
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);
  color: var(--text) !important;
}

.ui-update a { color: var(--link); }

/* Small text */
.ui-update .fieldset-detail{
  font-family: var(--font-tertiary-style);
  font-size: var(--font-tertiary-size);
  color: var(--text);
  margin-top: 5px;
  text-transform: none;
}

#takeApplication .txt,
#usePayment .txt{
  font-family: var(--font-tertiary-style);
  font-size: var(--font-tertiary-size);
  color: var(--text);
}

/* =====================
   DIVIDERS
   ===================== */
.ui-update .rule { background-color: var(--divider); }

/* =====================
   FORM INPUTS (LABELS)
   ===================== */
.ui-update .fieldset-label{
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);
  color: var(--text);
}
/* =====================
   FORM FIELDS — 4-SIDE BORDER LOGIC + STATIC STATES + FIELD BG
   (top/right/left share one var; bottom is separate)
   Adds:
   - --field-bg (default fill for fields)
   - --field-bg-focus (optional focus fill)
   ===================== */
.ui-update .fieldset-input > input,
.ui-update .fieldset-input > textarea,
.ui-update .fieldset-input > select,
.ui-update .fieldset-input > .sq-input{
  background-color: var(--field-bg);
  color: var(--text);
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);

  border-style: var(--field-border-style);
  border-color: var(--field-border-color) !important;

  border-top-width: var(--field-border-sides-width);
  border-right-width: var(--field-border-sides-width);
  border-left-width: var(--field-border-sides-width);
  border-bottom-width: var(--field-border-bottom-width);

  border-radius: var(--field-border-radius) !important;

  outline: none;
  box-shadow: none;

  transition: background-color .2s ease;
}

/* Keep borders fully static across interaction (prevents UA focus border shifts)
   + allow optional focus background */
.ui-update .fieldset-input > input:hover,
.ui-update .fieldset-input > input:focus,
.ui-update .fieldset-input > input:active,
.ui-update .fieldset-input > textarea:hover,
.ui-update .fieldset-input > textarea:focus,
.ui-update .fieldset-input > textarea:active,
.ui-update .fieldset-input > select:hover,
.ui-update .fieldset-input > select:focus,
.ui-update .fieldset-input > select:active,
.ui-update .fieldset-input > .sq-input:hover,
.ui-update .fieldset-input > .sq-input:focus,
.ui-update .fieldset-input > .sq-input:active{
  border-color: var(--field-border-color) !important;
  outline: none;
  box-shadow: none;
}

/* Focus background (optional) */
.ui-update .fieldset-input > input:focus,
.ui-update .fieldset-input > textarea:focus,
.ui-update .fieldset-input > select:focus,
.ui-update .fieldset-input > .sq-input:focus{
  background-color: var(--field-bg-focus);
}

/* =====================
   DROPDOWNS (SELECT ONLY)
   - Field text stays themed
   - Arrow icon via var
   ===================== */
.ui-update .fieldset-input > select{
  appearance: none;
  background-image: var(--icon-select-arrow) !important;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2rem;

  color: var(--text) !important;
}

/* Dropdown menu items (best effort; OS-controlled on some platforms) */
.ui-update .fieldset-input > select option{
  color: #000;
  background-color: #fff;
}



/* =====================
   CHECKBOXES / RADIOS / LINKS
   - Tick labels use TERTIARY typography (per your request)
   - Bubble checked state uses button tokens
   ===================== */

/* Base tick label typography (covers both checkbox + radio labels) */
.ui-update .tick input[type="radio"] + label,
.ui-update .tick input[type="checkbox"] + label{
  color: var(--text) !important;
  font-family: var(--font-tertiary-style);
  font-size: var(--font-tertiary-size);
  line-height: 1.4;
}

/* Keep links inside these labels from shrinking */
.ui-update .tick input[type="radio"] + label a,
.ui-update .tick input[type="checkbox"] + label a{
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}


/* Color for links on pages without .ui-update wrapper (e.g. terms, privacy) */
#PeopleVineContent a {
  color: var(--link);
}


/* =====================
   TICK BUBBLE (CHECKBOX / RADIO)
   Match standard checkbox + button tokens
   ===================== */
.ui-update .tick_bubble input[type="checkbox"]:checked + label,
.ui-update .tick_bubble input[type="radio"]:checked + label{
  background-color: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--button-text) !important;
  padding-left: 40px;
}

/* If bubble labels contain links, keep them readable on the filled state */
.ui-update .tick_bubble input[type="checkbox"]:checked + label a,
.ui-update .tick_bubble input[type="radio"]:checked + label a{
  color: inherit !important;
  font: inherit;
}

/* Radio outline */
.ui-update .tick_radio input[type="radio"] + label:before{
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--checkbox-outline);
  z-index: 1;
}

/* Radio checked dot */
.ui-update .tick_radio input[type="radio"]:checked + label:after{
  background-color: var(--checkbox-checked-bg);
}

/* Checkbox outline */
.ui-update .tick_checkbox input[type="checkbox"] + label:before{
  content: "";
  width: 24px;
  height: 24px;
  border: 1px solid var(--checkbox-outline);
  transition: border-color .35s, background-color .35s;
  z-index: 1;
}

/* Checkbox checked fill */
.ui-update .tick_checkbox input[type="checkbox"]:checked + label:before{
  background-color: var(--checkbox-checked-bg);
  border-color: var(--checkbox-outline);
}

/* Checkbox check icon (via var) */
.ui-update .tick_checkbox input[type="checkbox"] + label:after{
  background-image: var(--icon-checkbox-check) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;

  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  top: 6px;
  left: 5px;

  opacity: 0;
  transition: opacity 350ms ease-in-out;
  z-index: 1;
}

/* Ensure the checkmark actually appears when checked */
.ui-update .tick_checkbox input[type="checkbox"]:checked + label:after{
  opacity: 1;
}

.ui-update .tick_bubble input[type="checkbox"] + label:before,
.ui-update .tick_bubble input[type="radio"] + label:before{
  content: "";
  background-image: var(--icon-tick-bubble-check) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-color: transparent;

  width: 0;
  height: 18px;
  position: absolute;
  left: 14px;
  top: 8px;

  opacity: 0;
  transition-property: opacity, width;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
}


/* =====================
   BUTTONS
   ===================== */
.ui-update .btn{
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
  padding: 15px 40px;
  margin: 5px;
  border-radius: var(--button-border-radius);
}

.ui-update .btn:hover{
  background-color: var(--button-hover-bg);
  color: var(--button-hover-text);
  border-color: var(--button-hover-border);
  transform: translateY(-1px);
  box-shadow: 0 10px 10px rgba(0,0,0,.15);
}

.ui-update .btnFancy{
  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
  padding: 15px 40px;
  margin: 5px;
  border-radius: var(--button-border-radius);
}

.ui-update .btnFancy:hover {
  background-color: var(--button-hover-bg) !important;
  border-color: var(--button-hover-border) !important;
  color: var(--button-hover-text) !important;
}

/* File upload label styled as a button */
.ui-update .js-customFileInput{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  background-color: var(--button-bg);
  border: 1px solid var(--button-border);

  color: var(--button-text) !important;

  font-family: var(--font-primary-style);
  font-size: var(--font-primary-size);

  padding: 15px 20px 20px 60px;
  border-radius: var(--button-border-radius);
  cursor: pointer;
}

/* Hide the real file input but keep it clickable */
.ui-update .js-customFileInput > input[type="file"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Text inside must inherit from button */
.ui-update .js-customFileInput-text{
  color: inherit !important;
  font: inherit;
  line-height: 1;
}

.ui-update .js-customFileInput:hover{
  background-color: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  color: var(--button-hover-text) !important;

  transform: translateY(-1px);
  box-shadow: 0 10px 10px rgba(0,0,0,.15);
}

.ui-update .js-customFileInput.active {
  background-color: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--button-text) !important;

  padding-left: 48px; /* preserve original behavior */
}

.ui-update .js-customFileInput span a {
  color: inherit !important;
  font: inherit;
  text-decoration: underline; /* optional — keep if you want visible link */
}

/* =====================
   DATEPICKER ICON
   ===================== */
.ui-update .fieldset-input[data-fieldset-icon="datepicker"]::before{
  background-image: var(--icon-datepicker) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-color: transparent !important;

  width: 24px;
  height: 24px;

  position: absolute;
  left: 14px;
  top: 10px;

  pointer-events: none;
  transition-property: none;
}


/* =========================================================
   DATEPICKER POPUP — FULL SCOPED SYSTEM
   - Background: white
   - Default numbers: black
   - Hover + Selected: element bg + button text
   - Today: subtle highlight (no green)
   ========================================================= */

/* =====================
   CONTAINER
   ===================== */
.ui-datepicker,
.ui-widget.ui-widget-content {
  background: #ffffff;
  border: none;
  box-shadow: 0 0 15px 1px rgba(0,0,0,.2);
  color: #000000;
}

/* Header */
.ui-datepicker .ui-datepicker-header {
  background: #ffffff;
  border: none;
  color: #000000;
}

/* Month/Year dropdowns */
.ui-datepicker .ui-datepicker-title select {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid rgba(0,0,0,.2);
}

/* =====================
   DEFAULT DAY CELLS
   ===================== */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: transparent;
  border: none;
  color: #000000;
  font-weight: normal;
}

/* =====================
   HOVER STATE
   ===================== */
.ui-datepicker td .ui-state-hover,
.ui-datepicker td .ui-state-default:hover {
  background: var(--element);
  color: var(--button-text);
}

/* =====================
   SELECTED DAY
   ===================== */
.ui-datepicker-current-day .ui-state-active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--element);
  color: var(--button-text);
  border: none;
}

/* =====================
   TODAY (NEUTRAL HIGHLIGHT)
   Neutralizes all jQuery UI defaults
   ===================== */

/* Remove green cell background */
.ui-datepicker td.ui-datepicker-today {
  background: rgba(0,0,0,0.08) !important;
}

/* Override ui-state-highlight (the green text rule) */
.ui-datepicker td.ui-datepicker-today .ui-state-highlight,
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight {
  color: #000000 !important;
  background: transparent !important;
  font-weight: normal !important;
  border: none !important;
}

/* If today is also selected, selected styling wins */
.ui-datepicker td.ui-datepicker-today .ui-state-active,
.ui-datepicker td.ui-datepicker-today a.ui-state-active {
  background: var(--element) !important;
  color: var(--button-text) !important;
}

/* =====================
   REMOVE ANY REMAINING DEFAULT HIGHLIGHTING
   ===================== */
.ui-state-highlight {
  background: transparent !important;
  border: none !important;
}
/* =====================
   FILE UPLOAD ICON (BASE)
   ===================== */
.ui-update .js-customFileInput::before{
  content: '';
  background-image: var(--icon-file-upload) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-color: transparent;

  width: 24px;
  height: 24px;

  position: absolute;
  left: 14px;
  top: 10px;

  pointer-events: none;
  transition-property: none;
}
/* =====================
   FILE UPLOAD ICON (HOVER)
   ===================== */
.ui-update .js-customFileInput:hover::before {
  background-image: var(--icon-file-upload-hover) !important;
}


/* =====================
   REQUIRED FIELDS + VALIDATION ERRORS
   ===================== */

/* Asterisk on required field labels */
.ui-update .fieldset-label_required::before {
  color: var(--required-field-color) !important;
}

/* Legacy/fallback selectors */
.ui-update .fieldset-label .req,
.ui-update .fieldset-label abbr[title="required"] {
  color: var(--required-field-color) !important;
}

/* Validation error border on fields */
.ui-update .fieldset-input.mix-fieldset_error > input,
.ui-update .fieldset-input.mix-fieldset_error > textarea,
.ui-update .fieldset-input.mix-fieldset_error > select,
.ui-update .fieldset-input.is-error > input,
.ui-update .fieldset-input.is-error > textarea,
.ui-update .fieldset-input.is-error > select,
.ui-update .has-error .fieldset-input > input,
.ui-update .has-error .fieldset-input > textarea,
.ui-update .has-error .fieldset-input > select {
  border-color: var(--required-field-color) !important;
}

/* Validation error text */
.ui-update .fieldset-error,
.ui-update .mix-fieldset_error .fieldset-detail,
.ui-update .has-error .fieldset-detail,
.ui-update .field-error-message,
.ui-update .fieldset_error .fieldset-label {
  color: var(--required-field-color) !important;
}

/* #content_lblmessage — top-level form error message */
#content_lblmessage {
  display: flex;
  justify-content: center;
  color: var(--required-field-color) !important;
  border-color: var(--required-field-color) !important;
}
#continueApplication { margin-bottom: 20px; padding-bottom: 50px; }
.ui-update .txt.mix-txt_light { display: none; }

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active{
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}


  /* Continue button alignment — applies the --continue-btn-margin tokens */
  #continueApplication .split > div {
  margin-left: var(--continue-btn-margin-left);
  margin-right: var(--continue-btn-margin-right);
}




/* =========================================================
   JUMBOTRON — IMMUTABLE
   Always transparent, never themed
   ========================================================= */
.jumbotron{
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: transparent !important;
  border-radius: .3rem;
  text-align: center;
}

.ui-update label a {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}