/**
 * UK-Visum.dk — inner / legal pages (WordPress + Stackable layout parity)
 * Load after ukvisum.css on any page using .page-containers or migrated blocks.
 */

/* Apply flow (Bootstrap + shared site chrome) — override main.css body flex so scripts stay out of the flex layout */
body.ukv-apply-page {
  display: block;
  background: #f4f5f7;
  min-height: 100vh;
}

body.ukv-apply-page #page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.ukv-apply-page #page.site main {
  flex: 1 0 auto;
}

/* Subpages that reuse homepage header/footer (ukvisum-home.css) */
.ukv-inner-page #content.site-content {
  background: #f4f5f7;
  padding: 32px 0 48px;
}

.ukv-inner-page .entry-content {
  max-width: 1135px;
  margin: 0 auto;
}

.ukv-inner-page .entry-content .wp-block-heading,
.ukv-inner-page .entry-content h2.page-titles {
  color: #222;
}

.ukv-inner-page .wpf_form .wpf_input_label label {
  font-weight: 600;
  color: #2b325e;
}

.ukv-inner-page .wpf_form_control {
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font: inherit;
}

.ukv-inner-page .wpf_form_group {
  margin-bottom: 1rem;
}

/* WordPress-export forms: spinner only while submitting (centered in button row) */
.ukv-inner-page .wpf_form_submissions {
  position: relative;
  min-height: 48px;
}

.ukv-inner-page .wpf_loading_svg {
  display: none;
}

.ukv-inner-page .wpf_form_submissions.ukv-submit-loading .wpf_loading_svg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
}

.ukv-inner-page .wpf_form_submissions.ukv-submit-loading .wpf_submit_button {
  visibility: hidden;
  pointer-events: none;
}

.ukv-inner-page .wpf_form_notices:not(.ukv-form-notice-visible) {
  display: none;
}

.ukv-inner-page .wpf_form_notices.ukv-form-notice-visible {
  display: block;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 520px;
}

.ukv-inner-page .wpf_form_notices.ukv-form-notice-success {
  background: #e8f5e9;
  border: 1px solid #41c156;
  color: #1b5e20;
}

.ukv-inner-page .wpf_form_notices.ukv-form-notice-error {
  background: #ffebee;
  border: 1px solid #e57373;
  color: #b71c1c;
}

.ukv-inner-page .wpf_form.ukv-form-sent {
  display: none;
}

/* Inner pages: no default blue browser focus ring on form fields */
.ukv-inner-page .wpf_form_control:focus,
.ukv-inner-page .wpf_form_control:focus-visible,
.ukv-inner-page input:not([type='checkbox']):not([type='radio']):focus,
.ukv-inner-page input:not([type='checkbox']):not([type='radio']):focus-visible,
.ukv-inner-page textarea:focus,
.ukv-inner-page textarea:focus-visible,
.ukv-inner-page select:focus,
.ukv-inner-page select:focus-visible {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 599px) {
  .ukv-inner-page #content.site-content {
    padding: 20px 0 40px;
  }
}

/* Information listing (Stackable blog block) */
.ukv-inner-page .ugb-blog-posts__item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(43, 50, 94, 0.12);
}

.ukv-inner-page .ugb-blog-posts__title a {
  color: #2b325e;
  text-decoration: none;
}

.ukv-inner-page .ugb-blog-posts__title a:hover {
  text-decoration: underline;
}

.ukv-inner-page .ugb-blog-posts__featured-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.page-containers {
  padding: 40px !important;
  z-index: 2 !important;
  position: relative;
  max-width: 1135px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Inner columns use full width of the shell (fixes “too narrow” text column) */
.page-containers .ugb-container__content-wrapper,
.page-containers .ugb-inner-block,
.page-containers .ugb-block-content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.privacy-policy-page .ugb-container__content-wrapper,
.privacy-policy-page .entry-content {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Space below header on specific Stackable / legal shells */
.wp-block-ugb-container.ugb-container.ugb--background-opacity-0.ugb--has-background.ugb-container--height-normal.ugb-container--align-horizontal-full.ugb--shadow-0.page-containers.privacy-policy-page,
.ugb-container.page-containers.privacy-policy-page {
  margin-top: 25px !important;
}

.page-containers.vilkar-page,
.page-containers.leveringspolitik-page,
.page-containers.ansvarsfraskrivelse-page,
.page-containers.refundering-page,
.page-containers.om-os-page,
.page-containers.personoplysninger-page {
  margin-top: 25px !important;
}

body.ukv-legal-page .page-containers {
  margin-top: 25px !important;
}

@media (max-width: 599px) {
  .page-containers {
    padding: 20px !important;
  }

  .wp-block-ugb-container.ugb-container.ugb--background-opacity-0.ugb--has-background.ugb-container--height-normal.ugb-container--align-horizontal-full.ugb--shadow-0.page-containers.privacy-policy-page,
  .ugb-container.page-containers.privacy-policy-page,
  .page-containers.privacy-policy-page {
    margin-top: 25px !important;
  }

  .page-containers.vilkar-page,
  .page-containers.leveringspolitik-page,
  .page-containers.ansvarsfraskrivelse-page,
  .page-containers.refundering-page,
  .page-containers.om-os-page,
  .page-containers.personoplysninger-page {
    margin-top: 25px !important;
  }

  body.ukv-legal-page .page-containers {
    margin-top: 25px !important;
  }

  body:not(.ukv-home) main.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100%;
  }
}

/* Apply — applicant list: paid (green) vs amount due / incomplete (red) */
body.ukv-apply-page .list-group-item.applicant-row-paid {
  border-left: 4px solid var(--bs-success, #198754);
  background-color: rgba(25, 135, 84, 0.06);
}

body.ukv-apply-page .list-group-item.applicant-row-due {
  border-left: 4px solid var(--bs-danger, #dc3545);
  background-color: rgba(220, 53, 69, 0.05);
}

body.ukv-apply-page #formStep2.ukv-form-readonly {
  opacity: 0.97;
}

/* scrollIntoView: anchor at page H1 so main + step-2 card stay in view below header */
body.ukv-apply-page #ukvStep2ScrollAnchor {
  scroll-margin-top: 6rem;
  /*padding-top: 50px;*/
}

/* Gate / applicant-list cards when returning from step 2 (scroll targets in apply-ukvisum.js) */
body.ukv-apply-page #ukvApplyGateAnchor,
body.ukv-apply-page #ukvApplyListAnchor {
  scroll-margin-top: 6rem;
}

body.ukv-apply-page #view-step2 {
  scroll-margin-top: 5.5rem;
}

/* UK flag (same assets/flags/4x3/*.svg as phone dropdown) — SVG scales; height tracks heading (1em) */
body.ukv-apply-page .ukv-heading-with-flag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  line-height: 1.2;
}

body.ukv-apply-page .ukv-heading-with-flag .ukv-flag-inline {
  height: 1em;
  width: auto;
  max-width: none; /* override .phone-flag-img-sm fixed width in this context */
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

body.ukv-apply-page .ukv-step2-form-title {
  min-width: 0;
}

/* Apply gate: 3 step cards (same icon assets as forsiden benefits) */
body.ukv-apply-page .ukv-apply-step-card {
  background: #fff;
  border: 1px solid rgba(43, 50, 94, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1rem 1.5rem;
}

body.ukv-apply-page .ukv-apply-step-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(43, 50, 94, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

body.ukv-apply-page .ukv-apply-step-icon img {
  max-height: 56px;
  width: auto;
}

body.ukv-apply-page .ukv-apply-step-title {
  color: var(--ukv-navy, #2b325e);
}

/* Apply: ETA info block (full width below list / payment) */
body.ukv-apply-page .ukv-apply-eta-info {
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(43, 50, 94, 0.12);
  max-width: 100%;
}

body.ukv-apply-page .ukv-apply-info-title {
  color: var(--ukv-navy, #2b325e);
}

@media (max-width: 767.98px) {
  body.ukv-apply-page .ukv-apply-step-icon {
    width: 96px;
    height: 96px;
  }

  body.ukv-apply-page .ukv-apply-step-icon img {
    max-height: 48px;
  }
}

/* Apply — GOV.UK-style photo do/don’t panels */
body.ukv-apply-page .ukv-photo-guide .ukv-photo-guide-img {
  max-height: 88px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

body.ukv-apply-page .ukv-mrz-diagram img {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
}

/* Applicant list: keep price+icons column from shrinking on sm+ */
@media (min-width: 576px) {
  body.ukv-apply-page .ukv-applicant-list-item > .ukv-applicant-row-actions {
    flex-shrink: 0;
  }
}

/* Applicant list: on narrow screens, name full width; price left + icons right on next row */
@media (max-width: 575.98px) {
  body.ukv-apply-page .ukv-applicant-list-item > .ukv-applicant-list-item__name {
    flex: 1 1 100%;
    min-width: 0;
  }

  body.ukv-apply-page .ukv-applicant-list-item > .ukv-applicant-row-actions {
    flex: 1 1 100%;
    flex-shrink: 1;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
}

body.ukv-apply-page .ukv-applicant-icon-btns .btn {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.ukv-apply-page .ukv-applicant-icon-btns .btn i {
  font-size: 1rem;
  line-height: 1;
}

/* Edit: green icon, no fill; delete: outline danger — no hover/focus colour shifts */
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-edit {
  background-color: transparent;
  border-color: transparent;
  color: var(--ukv-green, #41c156);
}

body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-edit:hover,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-edit:focus,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-edit:focus-visible,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-edit:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--ukv-green, #41c156);
  box-shadow: none;
}

body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:not(:disabled) {
  color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
  background-color: transparent;
}

body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:not(:disabled):hover,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:not(:disabled):focus,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:not(:disabled):focus-visible,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:not(:disabled):active {
  color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
  background-color: transparent;
  box-shadow: none;
}

body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:disabled {
  color: var(--bs-secondary, #6c757d);
  border-color: transparent;
  background-color: transparent;
  opacity: 0.65;
}

body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:disabled:hover,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:disabled:focus,
body.ukv-apply-page .ukv-applicant-icon-btns .ukv-applicant-delete:disabled:focus-visible {
  color: var(--bs-secondary, #6c757d);
  border-color: transparent;
  background-color: transparent;
  opacity: 0.65;
  box-shadow: none;
}

/* Step 2 form footer: back left, new applicant right — circular 3px border (arrow colour) */
body.ukv-apply-page .ukv-step2-footer-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  background-color: transparent;
}

body.ukv-apply-page .ukv-step2-footer-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

body.ukv-apply-page .ukv-step2-footer-btn-back {
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
}

body.ukv-apply-page .ukv-step2-footer-btn-back:hover,
body.ukv-apply-page .ukv-step2-footer-btn-back:focus,
body.ukv-apply-page .ukv-step2-footer-btn-back:focus-visible,
body.ukv-apply-page .ukv-step2-footer-btn-back:active {
  background-color: rgba(65, 193, 86, 0.1);
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
  box-shadow: none;
}

body.ukv-apply-page .ukv-step2-footer-btn-new {
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
}

/* Optical alignment: user-plus glyph sits slightly right in the circle */
body.ukv-apply-page .ukv-step2-footer-btn-new i {
  padding-left: 5px;
}

body.ukv-apply-page .ukv-step2-footer-btn-new:hover,
body.ukv-apply-page .ukv-step2-footer-btn-new:focus,
body.ukv-apply-page .ukv-step2-footer-btn-new:focus-visible,
body.ukv-apply-page .ukv-step2-footer-btn-new:active {
  background-color: rgba(65, 193, 86, 0.1);
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
  box-shadow: none;
}

/* Ny ansøger — samme .ukv-btn-pay-checkout som Betal nu; ekstra luft om ikon + tekst */
body.ukv-apply-page .ukv-btn-pay-checkout.js-btn-add-applicant {
  gap: 0.5rem !important;
  padding-left: 1.15rem !important;
  padding-right: 1.35rem !important;
}

body.ukv-apply-page .ukv-btn-pay-checkout.js-btn-add-applicant i {
  font-size: 1.05rem;
}

body.ukv-apply-page .ukv-btn-pay-checkout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: unset !important;
  padding: 0.55rem 1.35rem !important;
  border-radius: 999px !important;
  border: 3px solid var(--ukv-green, #41c156) !important;
  background: var(--ukv-green, #41c156) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

body.ukv-apply-page .ukv-btn-pay-checkout:hover:not(:disabled),
body.ukv-apply-page .ukv-btn-pay-checkout:focus:not(:disabled),
body.ukv-apply-page .ukv-btn-pay-checkout:focus-visible:not(:disabled) {
  background-color: #36a84a !important;
  border-color: #36a84a !important;
  color: #fff !important;
  box-shadow: none;
}

body.ukv-apply-page .ukv-btn-pay-checkout:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Betal nu — grå når deaktiveret; grøn kun når aktiv (alle ansøgninger klar + vilkår + beløb) */
body.ukv-apply-page .ukv-btn-pay-checkout.js-btn-checkout:disabled {
  opacity: 1 !important;
  background: #adb5bd !important;
  border-color: #adb5bd !important;
  color: #fff !important;
  cursor: not-allowed;
}

/* Gate form (step 1): green → next — circular 3px border */
body.ukv-apply-page .ukv-gate-footer-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  background-color: transparent;
}

body.ukv-apply-page .ukv-gate-footer-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

body.ukv-apply-page .ukv-gate-footer-btn-next {
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
}

body.ukv-apply-page .ukv-gate-footer-btn-next:hover,
body.ukv-apply-page .ukv-gate-footer-btn-next:focus,
body.ukv-apply-page .ukv-gate-footer-btn-next:focus-visible,
body.ukv-apply-page .ukv-gate-footer-btn-next:active {
  background-color: rgba(65, 193, 86, 0.1);
  border-color: var(--ukv-green, #41c156);
  color: var(--ukv-green, #41c156);
  box-shadow: none;
}

/* Flatpickr (dd/mm/yyyy display; ISO value for API) */
body.ukv-apply-page .flatpickr-calendar {
  z-index: 1100;
}

body.ukv-apply-page .form-control.flatpickr-input[readonly] {
  background-color: #fff;
  cursor: pointer;
}

/* Passport / selfie: visible drop zone + drag-and-drop */
body.ukv-apply-page .ukv-upload-dropzone {
  border: 2px dashed var(--ukv-navy, #2b325e);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(43, 50, 94, 0.04) 0%, rgba(43, 50, 94, 0.02) 100%);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.ukv-apply-page .ukv-upload-dropzone--active {
  border-color: var(--ukv-green, #41c156);
  border-style: solid;
  background: rgba(65, 193, 86, 0.08);
  box-shadow: 0 0 0 3px rgba(65, 193, 86, 0.2);
}

body.ukv-apply-page .ukv-upload-dropzone--disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* One image per slot: grey out dropzone while preview exists */
body.ukv-apply-page .ukv-upload-dropzone--filled {
  opacity: 0.55;
  pointer-events: none;
}

/* Missing required uploads: match form-control invalid border */
body.ukv-apply-page .ukv-upload-dropzone.is-invalid {
  border-color: var(--bs-danger, #dc3545);
  border-style: dashed;
  background: rgba(220, 53, 69, 0.04);
}

/* Upload progress: full width of column, matches dropzone width */
body.ukv-apply-page .ukv-upload-progress {
  width: 100%;
}

body.ukv-apply-page .ukv-upload-progress__track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(43, 50, 94, 0.12);
  overflow: hidden;
}

body.ukv-apply-page .ukv-upload-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ukv-green, #41c156);
  transition: width 0.12s ease-out;
}

/* Preview + circular remove (top-right of image) */
body.ukv-apply-page .ukv-photo-preview-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

body.ukv-apply-page .ukv-photo-preview-img {
  display: block;
  max-height: 120px;
  width: auto;
  max-width: 100%;
}

body.ukv-apply-page .ukv-photo-preview-remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(33, 37, 41, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body.ukv-apply-page .ukv-photo-preview-remove:hover,
body.ukv-apply-page .ukv-photo-preview-remove:focus-visible {
  background: var(--bs-danger, #dc3545);
  color: #fff;
}

body.ukv-apply-page .ukv-photo-preview-remove span {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  padding-bottom:3px;
}

body.ukv-apply-page .ukv-upload-dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  min-height: 140px;
  padding: 1.25rem 1rem;
  cursor: pointer;
  text-align: center;
}

body.ukv-apply-page .ukv-upload-dropzone__icon {
  color: var(--ukv-green, #41c156);
  line-height: 1;
}

body.ukv-apply-page .ukv-upload-dropzone__icon svg {
  display: block;
  margin: 0 auto;
}

body.ukv-apply-page .ukv-upload-dropzone__title {
  font-weight: 600;
  color: var(--ukv-navy, #2b325e);
  font-size: 1rem;
  max-width: 22rem;
}

body.ukv-apply-page .ukv-upload-dropzone__hint {
  font-size: 0.875rem;
  color: var(--bs-secondary, #6c757d);
}

body.ukv-apply-page .ukv-upload-dropzone__label:focus-visible {
  outline: 2px solid var(--ukv-green, #41c156);
  outline-offset: 4px;
  border-radius: 8px;
}