/* ------------------------------------------------------------------
   Dynamics 365 form - Whitecliffe skin

   Dynamics injects ~24KB of its own CSS scoped to `.marketingForm`
   (Segoe UI, #FAF9F8 inputs, 2px radius, #2266E3 button). It sets no
   inline styles, so prefixing with `.wc-dynamics-form` raises
   specificity above theirs and wins without !important.

   Brand tokens taken from whitecliffe.de:
     gold / accent    #D59D10      radius 10px
     gold hover       #B8860B
     ink (labels)     #1A1A1A      font   "Euclid Circular A"
     body copy        #666666

   Labels stay ink rather than gold: gold on white is 2.4:1, and these
   are body-size. Gold is spent on the submit button and focus ring.
   ------------------------------------------------------------------ */

.wc-dynamics-form {
  --wc-accent:   #D59D10;
  --wc-accent-h: #B8860B;
  --wc-ink:      #1A1A1A;
  --wc-body:     #666666;
  --wc-line:     #E0E0E0;
  --wc-focus:    #D59D10;
  --wc-error:    #c0392b;
  --wc-radius:   10px;
}

/* ---- container ---------------------------------------------------- */
.wc-dynamics-form .marketingForm {
  font-family: "Euclid Circular A", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--wc-body);
  width: 100%;
  max-width: 100%;
}

/* Dynamics' column wrappers add margins that fight the card padding */
.wc-dynamics-form .marketingForm .emptyContainer,
.wc-dynamics-form .marketingForm .columnContainer {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* The form designer writes fixed column widths inline. Most sections get
   `width:600px` with no flex declaration, so they default to flex:0 1 auto
   and shrink to fit a narrow card. But the submit section also gets
   `flex: 0 0 600px` - shrink DISABLED - so on pages where the form sits in
   a ~300px column it refuses to shrink and the button overflows the card.
   Inline styles, so !important is required. Capping max-width rather than
   forcing width keeps genuine multi-column layouts intact. */
.wc-dynamics-form .marketingForm .columnContainer,
.wc-dynamics-form .marketingForm .emptyContainer {
  max-width: 100% !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.wc-dynamics-form .marketingForm .wrap-section + .wrap-section { margin-top: 4px; }

/* ---- headings and copy inside the form ---------------------------- */
.wc-dynamics-form .marketingForm h1,
.wc-dynamics-form .marketingForm h2,
.wc-dynamics-form .marketingForm h3 {
  font-family: inherit;
  color: var(--wc-ink);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
.wc-dynamics-form .marketingForm h1 { font-size: 26px; margin-bottom: 6px; }
.wc-dynamics-form .marketingForm h2 { font-size: 21px; margin-bottom: 6px; }
.wc-dynamics-form .marketingForm p  { font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--wc-body); }

/* ---- field blocks -------------------------------------------------- */
.wc-dynamics-form .marketingForm .textFormFieldBlock,
.wc-dynamics-form .marketingForm .phoneFormFieldBlock,
.wc-dynamics-form .marketingForm .lookupFormFieldBlock,
.wc-dynamics-form .marketingForm .optionSetFormFieldBlock,
.wc-dynamics-form .marketingForm .twoOptionFormFieldBlock,
.wc-dynamics-form .marketingForm .dateTimeFormFieldBlock {
  margin: 0 0 16px;
  padding: 0;
  width: 100%;
}

/* ---- labels -------------------------------------------------------- */
.wc-dynamics-form .marketingForm label {
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--wc-ink);
  margin-bottom: 6px;
  padding: 0;
  text-align: left;
  line-height: 1.35;
}

/* ---- inputs -------------------------------------------------------- */
.wc-dynamics-form .marketingForm input[type="text"],
.wc-dynamics-form .marketingForm input[type="email"],
.wc-dynamics-form .marketingForm input[type="tel"],
.wc-dynamics-form .marketingForm input[type="number"],
.wc-dynamics-form .marketingForm input[type="date"],
.wc-dynamics-form .marketingForm input[type="url"],
.wc-dynamics-form .marketingForm textarea,
.wc-dynamics-form .marketingForm select {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 48px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius);
  /* 16px keeps iOS Safari from zooming the viewport on focus */
  font-size: 16px;
  font-family: inherit;
  color: var(--wc-ink);
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.wc-dynamics-form .marketingForm textarea { min-height: 110px; resize: vertical; }

.wc-dynamics-form .marketingForm input::placeholder,
.wc-dynamics-form .marketingForm textarea::placeholder {
  color: #9aa3b0;
  opacity: 1;
}

.wc-dynamics-form .marketingForm input:hover,
.wc-dynamics-form .marketingForm textarea:hover,
.wc-dynamics-form .marketingForm select:hover { border-color: #b9c2d0; }

.wc-dynamics-form .marketingForm input:focus,
.wc-dynamics-form .marketingForm textarea:focus,
.wc-dynamics-form .marketingForm select:focus {
  outline: none;
  border-color: var(--wc-focus);
  box-shadow: 0 0 0 3px rgba(213, 157, 16, .18);
}

/* select needs its own chevron once appearance is stripped */
.wc-dynamics-form .marketingForm select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23232020' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* ---- phone field: Dynamics splits country code out --------------- */
.wc-dynamics-form .marketingForm .phoneCountryCode { display: flex; align-items: center; gap: 8px; }
.wc-dynamics-form .marketingForm .phoneCountryCode input { flex: 1 1 auto; min-width: 0; }
.wc-dynamics-form .marketingForm .phoneCountryCodeLabel { color: var(--wc-body); font-size: 16px; }

/* ---- consent checkbox --------------------------------------------- */
.wc-dynamics-form .marketingForm .consentBlock { margin: 4px 0 18px; }
.wc-dynamics-form .marketingForm .consentBlock > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wc-dynamics-form .marketingForm input[type="checkbox"],
.wc-dynamics-form .marketingForm input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  flex: 0 0 18px;
  accent-color: var(--wc-ink);
  border-radius: 4px;
  cursor: pointer;
}
.wc-dynamics-form .marketingForm .consentBlock label {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wc-body);
  margin: 0;
  cursor: pointer;
}
.wc-dynamics-form .marketingForm .consentBlock a { color: var(--wc-ink); text-decoration: underline; }

/* ---- submit -------------------------------------------------------- */
.wc-dynamics-form .marketingForm .submitButtonWrapper { margin: 6px 0 0; text-align: left; }

/* The Dynamics form designer writes an INLINE style on this button -
   `width:95px; display:table-cell; margin:auto` - which no stylesheet rule
   can outrank. Hence !important here specifically: without it the button
   renders 95px wide and the word "Submit" wraps to two lines. */
.wc-dynamics-form .marketingForm .submitButton,
.wc-dynamics-form .marketingForm button[type="submit"],
.wc-dynamics-form .marketingForm input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  vertical-align: middle !important;
  margin: 0 !important;
  white-space: nowrap;
  min-height: 54px;
  padding: 14px 32px;
  background: var(--wc-accent);
  color: var(--wc-ink);
  border: 0;
  border-radius: var(--wc-radius);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}
.wc-dynamics-form .marketingForm .submitButton:hover,
.wc-dynamics-form .marketingForm button[type="submit"]:hover {
  background: var(--wc-accent-h);
  transform: translateY(-1px);
}
.wc-dynamics-form .marketingForm .submitButton:active { transform: translateY(0); }
.wc-dynamics-form .marketingForm .submitButton:focus-visible {
  outline: 3px solid rgba(26, 26, 26, .6);
  outline-offset: 2px;
}
.wc-dynamics-form .marketingForm .submitButton:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- validation + submit feedback ---------------------------------- */
.wc-dynamics-form .marketingForm .lp-form-fieldError,
.wc-dynamics-form .marketingForm [data-validation-message],
.wc-dynamics-form .marketingForm .validationError {
  display: block;
  margin-top: 5px;
  color: var(--wc-error);
  font-size: 13px;
  font-family: inherit;
}
.wc-dynamics-form .marketingForm input[aria-invalid="true"] { border-color: var(--wc-error); }

/* the post-submit panel is a fixed 600px in Dynamics' own CSS, which
   overflows a narrow column on mobile */
.wc-dynamics-form .onFormSubmittedFeedback,
.wc-dynamics-form .onFormSubmittedFeedbackInternalContainer {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  font-family: inherit;
}

/* ---- narrow columns ------------------------------------------------ */
@media (max-width: 575px) {
  .wc-dynamics-form .marketingForm .submitButton { font-size: 17px; min-height: 50px; }
  .wc-dynamics-form .marketingForm input,
  .wc-dynamics-form .marketingForm select,
  .wc-dynamics-form .marketingForm textarea { min-height: 46px; padding: 11px 13px; }
}


/* ==================================================================
   Refinements
   ================================================================== */

/* ---- the form's own Text blocks -----------------------------------
   Dynamics centers these while the fields below are left-aligned,
   which reads as two different forms stacked on each other.
   Block 1 = title, block 2 = intro, then privacy copy, then a
   "© 2023" line.                                                     */
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"] {
  text-align: left;
  margin: 0 0 14px;
}
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"] p {
  margin: 0 0 6px;
  text-align: left;
  font-weight: 400;
}
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"]:first-of-type p {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wc-ink);
  margin-bottom: 4px;
}
/* intro line under the title */
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"]:nth-of-type(2) p {
  font-size: 15px;
  color: var(--wc-body);
  line-height: 1.5;
}

/* privacy paragraph sits directly above the consent tick - Dynamics
   renders it bold and centered, which competes with the submit button */
.wc-dynamics-form .marketingForm .consentBlock
  ~ [data-editorblocktype="Text"] p,
.wc-dynamics-form .marketingForm
  [data-editorblocktype="Text"]:has(+ .consentBlock) p {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #7b828d;
}

/* trailing "© 2023. All rights reserved." - stale and redundant
   inside a form that already sits on a branded page */
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"]:last-of-type {
  margin-top: 10px;
}
.wc-dynamics-form .marketingForm [data-editorblocktype="Text"]:last-of-type p {
  font-size: 11px;
  color: #a7aeb9;
  text-align: center;
}

/* ---- required marker ---------------------------------------------- */
.wc-dynamics-form .marketingForm label .lp-ellipsis,
.wc-dynamics-form .marketingForm label span[style*="color"] { color: var(--wc-error) !important; }

/* ---- tighter vertical rhythm --------------------------------------- */
.wc-dynamics-form .marketingForm .textFormFieldBlock,
.wc-dynamics-form .marketingForm .phoneFormFieldBlock { margin-bottom: 14px; }
.wc-dynamics-form .marketingForm .submitButtonWrapper { margin-top: 4px; }

/* ==================================================================
   intl-tel-input, skinned to match
   ================================================================== */
.wc-dynamics-form .iti { display: block; width: 100%; }

/* Dynamics wraps the phone input in .phoneCountryCode and gives THAT
   wrapper its own 1px border + 2px radius. Stacked with the input's own
   border that renders as a visible double outline, and it also made the
   tel input 2px narrower than every other field. Strip the wrapper's
   border and let the input carry the only one. */
.wc-dynamics-form .marketingForm .phoneCountryCode {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  /* Dynamics sets overflow:hidden here, which clipped the country dropdown
     to the height of the input - the list opened but was invisible. */
  overflow: visible !important;
}

/* nothing between the input and the card may clip the dropdown either */
.wc-dynamics-form .marketingForm .phoneFormFieldBlock,
.wc-dynamics-form .marketingForm .phoneFormFieldBlock .columnContainer {
  overflow: visible !important;
}

/* the list must also sit above the fields that follow it */
.wc-dynamics-form .iti__country-list { z-index: 999; }
.wc-dynamics-form .iti.iti--container,
.wc-dynamics-form .marketingForm .phoneFormFieldBlock { position: relative; z-index: 5; }
.wc-dynamics-form .marketingForm .phoneCountryCodeLabel { display: none; }

/* keep the flag button inside the input's rounded corners */
.wc-dynamics-form .iti,
.wc-dynamics-form .iti--allow-dropdown { border: 0; background: transparent; }

.wc-dynamics-form .iti__flag-container { border: 0; }

.wc-dynamics-form .iti--separate-dial-code .iti__selected-flag,
.wc-dynamics-form .iti__selected-flag {
  background: transparent;
  border-radius: var(--wc-radius) 0 0 var(--wc-radius);
  padding: 0 8px 0 12px;
}
.wc-dynamics-form .iti__selected-flag:hover,
.wc-dynamics-form .iti__selected-flag:focus { background: rgba(0, 0, 0, .035); }

.wc-dynamics-form .iti__arrow { border-top-color: var(--wc-ink); opacity: .55; }
.wc-dynamics-form .iti__arrow--up { border-bottom-color: var(--wc-ink); }

/* Room for the flag button. In separateDialCode mode intl-tel-input sets
   padding-left inline (it measures the dial-code text), and inline wins -
   so this only needs to cover the plain dropdown case. */
.wc-dynamics-form .iti--allow-dropdown:not(.iti--separate-dial-code) input[type="tel"] {
  padding-left: 52px;
}

/* the "+49" shown beside the flag */
.wc-dynamics-form .iti__selected-dial-code {
  font-family: inherit;
  font-size: 16px;
  color: var(--wc-ink);
  padding-left: 6px;
}
.wc-dynamics-form .iti--separate-dial-code .iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--wc-line);
  margin-right: 2px;
}

/* the country list */
.wc-dynamics-form .iti__country-list {
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
  font-family: inherit;
  font-size: 15px;
  padding: 6px 0;
  max-height: 240px;
  /* the form column is narrow; don't let the list overflow the card */
  width: max-content;
  max-width: min(320px, 92vw);
}
/* intl-tel-input sets white-space:nowrap on rows, and the longest country
   name ("Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)") is ~402px -
   wider than the list, which produced a horizontal scrollbar. Lay each row
   out as flex and let the NAME truncate, keeping flag and dial code fixed. */
.wc-dynamics-form .iti__country-list { overflow-x: hidden; }

.wc-dynamics-form .iti__country {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--wc-ink);
  white-space: normal;
}
.wc-dynamics-form .iti__flag-box { flex: 0 0 auto; }
.wc-dynamics-form .iti__country-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-dynamics-form .iti__country.iti__highlight { background: rgba(213, 157, 16, .12); }
.wc-dynamics-form .iti__dial-code { color: #8a93a0; flex: 0 0 auto; margin-left: auto; padding-left: 8px; }
.wc-dynamics-form .iti__divider { border-bottom-color: var(--wc-line); margin: 6px 0; }

/* iti sets inline width on the wrapper in some layouts */
.wc-dynamics-form .iti--allow-dropdown input[type="tel"] { width: 100% !important; }


/* ---- lookup fields (Country of residence, Programme of interest) ----
   The cached form markup ships these as <input list> + <datalist>, but at
   runtime Dynamics strips the `list` attribute and builds a jQuery-UI menu
   instead: .ui-selectmenu-menu > ul.ui-menu > li.ui-menu-item >
   div.ui-menu-item-wrapper. None of that inherits the input skin above, so
   without these rules the panel renders in jQuery-UI defaults (square
   corners, #c5c5c5 border). Matches .iti__country-list deliberately - both
   are "dropdown hanging off a field in this card".

   NOTE the `[data-cached-form-url]` in each selector - it is load-bearing,
   not decoration. Unlike the `.marketingForm` rules above, Dynamics scopes
   its jQuery-UI CSS as `div[data-cached-form-url] .ui-selectmenu-menu
   .ui-menu`, i.e. (0,3,1) - an exact specificity TIE with a plain
   three-class selector here. Its <style> is injected when the form renders,
   so it lands after this file and wins the tie on source order; that silently
   cost us border, max-height and row padding. Our own host div carries the
   same attribute, so matching on it takes these to (0,4,1) and wins outright
   without !important. Drop it and the tie comes back. */
.wc-dynamics-form[data-cached-form-url] .lookupFormFieldBlock ul.ui-menu {
  border: 1px solid var(--wc-line);
  /* .ui-corner-bottom squares off the top corners - override all four */
  border-radius: var(--wc-radius);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  padding: 6px 0;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Programme names run long ("BA Business Administration | Data Science &
   Business (Bachelor of Arts - 3 years)") and Dynamics pins the panel to the
   input's width, so rows must wrap rather than scroll sideways. */
.wc-dynamics-form[data-cached-form-url] .lookupFormFieldBlock .ui-menu-item-wrapper {
  padding: 8px 12px;
  color: var(--wc-ink);
  white-space: normal;
  line-height: 1.4;
  cursor: pointer;
}

/* jQuery UI's active row carries its own border + a -1px margin to hide it;
   drop both, or the highlighted row shifts by a pixel as you arrow through. */
.wc-dynamics-form[data-cached-form-url] .lookupFormFieldBlock .ui-menu-item-wrapper.ui-state-active,
.wc-dynamics-form[data-cached-form-url] .lookupFormFieldBlock .ui-menu-item-wrapper:hover {
  background: rgba(213, 157, 16, .12);
  border: none;
  margin: 0;
  color: var(--wc-ink);
}


/* the submit wrapper carries inline text-align:center from the designer */
.wc-dynamics-form .marketingForm .submitButtonWrapper { padding: 4px 0 0 !important; }

/* Dynamics emits a bare required-marker asterisk after the consent block */
.wc-dynamics-form .marketingForm .consentBlock + p,
.wc-dynamics-form .marketingForm .consentBlock ~ p:empty { display: none; }