@charset "utf-8";

.fa-icon,
blockquote:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/**********
 Variables
 **********/
body {
  /* Text */
  --text-font-family: 'Open Sans', sans-serif;
  --heading-font-family: 'Open Sans', sans-serif;
  --text-font-size: 16px;
  --text-font-size-large: calc(16px + 2px);
  --heading-1-font-size: 50px;
  --heading-2-font-size: 34px;
  --heading-3-font-size: 24px;
  --heading-4-font-size: 20px;
  --heading-5-font-size: 16px;
  --heading-6-font-size: calc(16px - 2px);
  /* Other */
  --border-radius-base: 16px;
  --border-radius-small: calc(16px / 2);
  --border-radius-button: 50px;
  --logo-height: 34px;
  --border-width: 1px;
  --white-color: #fff;
  /* Assets */
  --assets-check-svg: url(/hc/theming_assets/01JDPGA071G7G7DCAS4YM8H9HA);
  --assets-circle-svg: url(/hc/theming_assets/01JDPGA071T1T0FWPCAZJ8ZF5B);
}

/**********
 Light mode
 **********/
body {
  --primary-color: rgba(0, 0, 0, 1);
  --secondary-color: rgba(0, 0, 0, 1);
  --primary-bg-color: rgba(244, 240, 236, 1);
  --primary-bg-color-always: rgba(244, 240, 236, 1);
  --secondary-bg-color: rgba(227, 222, 218, 1);
  --secondary-bg-color-always: rgba(227, 222, 218, 1);
  --primary-text-color: #000C20;
  --secondary-text-color: rgba(0, 0, 0, 1);
  --link-color: rgba(0, 0, 0, 1);
  --border-color: rgba(0, 0, 0, 1);
  --info-color: #1863BC;
  --success-color: #67C30B;
  --warning-color: #F1D52F;
  --danger-color: #e64545;
  --primary-color-light-hover: #000;
  --primary-color-hover: #000;
  --primary-color-active: #000;
  --secondary-color-hover: #000;
  --secondary-color-active: #000;
  --secondary-bg-color-hover: #dad4ce;
  --secondary-bg-color-active: #d6cec9;
  --secondary-text-color-hover: #000;
  --secondary-text-color-active: #000;
  --link-color-hover: #000;
  --link-color-active: #000;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.5;
  --bg-image-color: var(--primary-text-color);
}

.layout--style-filled .section:nth-child(even),
.layout--style-invert .section:nth-child(odd),
.section--secondary {
  /* Invert colors */
  --primary-bg-color: rgba(227, 222, 218, 1);
  --secondary-bg-color: rgba(244, 240, 236, 1);
}

/*********
 Dark mode
 *********/
.ui-dark body {
  /* UI dark colors */
  --primary-color: #1863BC;
  --secondary-color: #6DBC1D;
  --primary-bg-color: #000C20;
  --primary-bg-color-always: #000C20;
  --secondary-bg-color: #182233;
  --secondary-bg-color-always: #182233;
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #8290A8;
  --link-color: #1863BC;
  --border-color: #242f42;
  --info-color: #1863BC;
  --success-color: #67C30B;
  --warning-color: #F1D52F;
  --danger-color: #e64545;
  --primary-color-light-hover: #1b71d7;
  --primary-color-hover: #2d81e4;
  --primary-color-active: #3b89e6;
  --secondary-color-hover: #8ce036;
  --secondary-color-active: #93e243;
  --secondary-bg-color-hover: #2c3e5d;
  --secondary-bg-color-active: #304567;
  --link-color-hover: #4891e8;
  --link-color-active: #5699e9;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.75;
  --bg-image-color: var(--primary-bg-color);
}

.ui-dark .layout--style-filled .section:nth-child(even),
.ui-dark .layout--style-invert .section:nth-child(odd),
.ui-dark .section--secondary {
  /* Invert colors */
  --primary-bg-color: #182233;
  --secondary-bg-color: #000C20;
}

/***********
 Base styles
 ***********/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
html {
  min-height: 100vh;
}

[dir] body,
[dir] html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary-text-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[dir] body {
  background-color: var(--secondary-bg-color);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover);
}

a:active,
a.is-active {
  color: var(--link-color-active);
}

[dir] a.is-disabled {
  cursor: default;
}

a.is-disabled,
a.is-disabled:hover,
a.is-disabled:active,
a.is-disabled.is-active {
  color: var(--secondary-text-color);
}

[dir] a,
[dir] button,
[dir] [type=submit],
[dir] [type=button],
[dir] [type=reset] {
  cursor: pointer;
}

a,
input,
button,
select,
textarea,
label {
  transition: all 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
}

a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus,
label:focus {
  outline: none;
}

a.focus-visible,
input.focus-visible,
button.focus-visible,
select.focus-visible,
textarea.focus-visible,
label.focus-visible {
  outline: auto 5px -webkit-focus-ring-color;
}

[dir] figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/********
 Headings
 ********/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font-family);
  font-weight: 700;
}

h1,
.h1 {
  font-size: var(--heading-2-font-size);
  line-height: 1.2;
}

[dir] h1,
[dir] .h1 {
  margin: 0 0 1.2em;
}

[dir] .markdown h1,
[dir] .markdown .h1 {
  margin-top: 1.2em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9), only screen and (min-width: 668px) and (min-height: 416px), only screen and (min-width: 980px) {
  h1,
  .h1 {
    font-size: var(--heading-1-font-size);
    line-height: 1.1;
  }

  [dir] h1,
  [dir] .h1 {
    margin: 0 0 1em;
  }

  [dir] .markdown h1,
  [dir] .markdown .h1 {
    margin-top: 1em;
  }
}

h2,
.h2 {
  font-size: var(--heading-3-font-size);
  line-height: 1.3;
}

[dir] h2,
[dir] .h2 {
  margin: 0 0 1.3em;
}

[dir] .markdown h2,
[dir] .markdown .h2 {
  margin-top: 1.3em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9), only screen and (min-width: 668px) and (min-height: 416px), only screen and (min-width: 980px) {
  h2,
  .h2 {
    font-size: var(--heading-2-font-size);
    line-height: 1.2;
  }

  [dir] h2,
  [dir] .h2 {
    margin: 0 0 1.2em;
  }

  [dir] .markdown h2,
  [dir] .markdown .h2 {
    margin-top: 1.2em;
  }
}

h3,
.h3 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h3,
[dir] .h3 {
  margin: 0 0 1.4em;
}

[dir] .markdown h3,
[dir] .markdown .h3 {
  margin-top: 1.4em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9), only screen and (min-width: 668px) and (min-height: 416px), only screen and (min-width: 980px) {
  h3,
  .h3 {
    font-size: var(--heading-3-font-size);
    line-height: 1.3;
  }

  [dir] h3,
  [dir] .h3 {
    margin: 0 0 1.3em;
  }

  [dir] .markdown h3,
  [dir] .markdown .h3 {
    margin-top: 1.3em;
  }
}

h4,
.h4 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h4,
[dir] .h4 {
  margin: 0 0 1.4em;
}

[dir] .markdown h4,
[dir] .markdown .h4 {
  margin-top: 1.4em;
}

h5,
.h5 {
  font-size: var(--heading-5-font-size);
  line-height: 1.5;
}

[dir] h5,
[dir] .h5 {
  margin: 0 0 1.5em;
}

[dir] .markdown h5,
[dir] .markdown .h5 {
  margin-top: 1.5em;
}

h6,
.h6 {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
}

[dir] h6,
[dir] .h6 {
  margin: 0 0 -4.0em;
}

[dir] .markdown h6,
[dir] .markdown .h6 {
  margin-top: 1.5em;
}

/**********************
 Other default elements
 *********************/
[dir] p,
[dir] ul,
[dir] ol,
[dir] dl,
[dir] pre,
[dir] table,
[dir] blockquote {
  margin: 1.5em 0 1.5em;
}

[dir] li {
  margin: 0.75em 0 0.75em;
}

small,
.small {
  font-size: var(--heading-6-font-size);
}

[role="main"] {
  flex-grow: 1;
  position: relative;
}

hr {
  display: block;
  height: 0;
}

[dir] hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  color: var(--primary-bg-color);
}

[dir] pre {
  padding: 8px 16px;
  border-radius: var(--border-radius-base);
  background-color: var(--primary-text-color);
}

.ui-dark pre {
  color: var(--secondary-text-color);
}

[dir].ui-dark pre {
  background-color: var(--secondary-bg-color);
}

blockquote {
  display: block;
  position: relative;
  z-index: 2;
}

[dir=ltr] blockquote {
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}

[dir=rtl] blockquote {
  padding-right: 16px;
  border-right: 1px solid var(--border-color);
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9), only screen and (min-width: 668px) and (min-height: 416px), only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 24px;
  }

  [dir=rtl] blockquote {
    padding-right: 24px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 32px;
  }

  [dir=rtl] blockquote {
    padding-right: 32px;
  }
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -4px;
  font-size: 60px;
  color: var(--secondary-bg-color);
}

[dir=ltr] blockquote:before {
  left: 8px;
}

[dir=rtl] blockquote:before {
  right: 8px;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9) and (max-width: 979px), only screen and (min-width: 668px) and (min-height: 416px) and (max-width: 979px) {
  [dir=ltr] blockquote:before {
    left: 12px;
  }

  [dir=rtl] blockquote:before {
    right: 12px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote:before {
    left: 16px;
  }

  [dir=rtl] blockquote:before {
    right: 16px;
  }
}

.list-unstyled {
  list-style: none;
}

[dir=ltr] .list-unstyled {
  padding-left: 0;
}

[dir=rtl] .list-unstyled {
  padding-right: 0;
}

dl.details {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}

[dir] dl.details {
  margin-bottom: 32px;
  margin-top: 0;
}

dl.details > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details > dt {
  font-weight: 700;
}

[dir] dl.details > dt {
  margin-bottom: 12px;
}

[dir=ltr] dl.details > dt {
  margin-right: 8px;
}

[dir=rtl] dl.details > dt {
  margin-left: 8px;
}

[dir] dl.details > dd {
  margin-bottom: 12px;
}

dl.details > div {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

[dir] dl.details > div {
  margin-bottom: 12px;
}

dl.details--type-2 {
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

[dir] dl.details--type-2 {
  margin-bottom: 0;
}

dl.details--type-2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details--type-2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details--type-2 > dd {
  color: var(--secondary-text-color);
}

@media only screen and (min-width: 980px), only screen and (max-width: 567px) and (max-aspect-ratio: 13 / 9) {
  [dir=ltr] dl.details--type-2 > dd {
    text-align: right;
  }

  [dir=rtl] dl.details--type-2 > dd {
    text-align: left;
  }
}

[dir] dl.details--no-margin {
  margin-bottom: 0;
}

.text-secondary {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
  color: var(--secondary-text-color);
}

/******
 Tables
 ******/
.table-container {
  display: block;
  width: 100%;
  overflow-x: auto;
}

[dir] .table-container {
  border: 1px solid var(--border-color);
}

.table-container table:not(.pika-table) {
  width: calc(100% + 3px);
  max-width: calc(100% + 3px);
}

[dir] .table-container table:not(.pika-table) {
  margin: -1px;
}

table:not(.pika-table) {
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table:not(.pika-table) thead {
  font-weight: 700;
}

[dir] table:not(.pika-table) thead {
  background-color: var(--secondary-bg-color);
}

[dir] table:not(.pika-table) tfoot {
  background-color: var(--secondary-bg-color);
}

table:not(.pika-table) thead,
table:not(.pika-table) tbody,
table:not(.pika-table) tfoot {
  width: 100%;
  max-width: 100%;
}

[dir=ltr] table:not(.pika-table) th {
  border-left: 1px solid var(--border-color);
}

[dir=rtl] table:not(.pika-table) th {
  border-right: 1px solid var(--border-color);
}

[dir] table:not(.pika-table) td {
  padding: 8px;
  border: 1px solid var(--border-color);
}

/*******
 Iframes
 *******/
.iframe {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
}

.iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

[dir=ltr] .iframe iframe {
  left: 0;
}

[dir=rtl] .iframe iframe {
  right: 0;
}

[dir] .markdown > * {
  margin: 1.5em 0 1.5em;
}

/* Wysiwyg body */
.wysiwyg-body p code {
  display: inline-block;
  color: var(--primary-text-color);
  white-space: pre;
}

[dir] .wysiwyg-body p code {
  padding: 0 0.25em;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background-color: var(--secondary-bg-color);
}

.wysiwyg-body a {
  text-decoration: underline;
}

.wysiwyg-body a:hover {
  text-decoration: none;
}

.wysiwyg-body blockquote {
  font-style: italic;
  overflow: hidden;
}

[dir=ltr] .wysiwyg-body blockquote {
  border-left: 5px solid var(--border-color);
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

[dir=rtl] .wysiwyg-body blockquote {
  border-right: 5px solid var(--border-color);
  margin-right: 0;
  margin-left: 0;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

.comments__item-body.wysiwyg-body blockquote:before {
  color: var(--primary-bg-color);
}

[dir] .comments__item-body.wysiwyg-body p code,
[dir].ui-dark .comments__item-body pre {
  background-color: var(--primary-bg-color);
}


/*******
 DEMA Changes
 *******/

/* Tilpas disse klasser, så de passer til dit eksisterende tema */

.contact-container {
  display: flex;
  flex-wrap: wrap;   /* Sørger for responsivitet på mindre skærme */
  gap: 5em;          /* Afstand mellem blokke */
  justify-content: center;  /* Centrér blokke i containeren */
}

.contact-info ul li {
  padding: 0.5em 0; /* Giver lidt luft top/bund */
}

/* Tilføj streg under alle LI undtagen den sidste */
.contact-info ul li {
  border-bottom: 1px solid #000000;
}

.page-heading {
  display: block !important;
  text-align: center !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0.5em 0 !important;
}

.page-heading__content,
.page-heading__content-left {
  margin: 0 !important;
  padding: 0 !important;
}

.container {
  padding: 0 !important;
  margin-top: 10px !important;
}

h1, .h1 {
  margin: 0.2em 0 !important;
  font-weight: bold !important;
}

h6, .h6 {
  margin: 0.2em 0 !important;
  font-weight: normal !important;
}


/* Hvis du vil fjerne eventuelle baggrundsfarver/billeder, 
   der måtte ligge i .welcome__bg eller .page-heading,
   kan du sikre dig, at den er neutral: */
.welcome__bg {
  display: none; /* Hvis du stadig har HTML-koden, men vil skjule det */
  background: none !important; /* Sikrer, at baggrund ikke vises */
}

.page-heading--type-1 .page-heading__content-left {
    max-width: none !important;
  }

.footer--style-1 {
  background-color: #CCBCB4 !important;
}

label[for="request_issue_type_select"] {
  display: none !important;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-item img {
  width: 20px;
  height: 20px;
}


SOFACOMPANY FR - New Request Page - EFTER ÆNDRING 03-09-2026 - VIRKER
------------------------------------------------------------


{{! Page heading }}
<div class="page-heading page-heading--type-{{settings.page_heading_type}} page-heading--style-{{settings.page_heading_style}}"
     data-heading-style="{{settings.page_heading_style}}"
>

  <div class="welcome__bg {{#if settings.welcome_mask_enable}}welcome__bg--with-mask{{/if}}">
    <img class="welcome__bg-image is-hidden--ui-dark" src="{{settings.welcome_bg}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
    <img class="welcome__bg-image is-hidden--ui-light" src="{{settings.welcome_bg_dark}}" alt="{{settings.welcome_title}}" data-plugin-load-image>
  </div>
	
  
  <div class="container">
    {{!--
    <div class="page-heading__breadcrumbs">
      {{breadcrumbs}}
    </div>
		--}}

  <div class="page-heading__content">
      <div class="page-heading__content-left">
        <h1 class="h1 page-heading__left">{{dc "fields-new_request_headline"}}</h1>
        <h6 class="h6 page-heading__center"> {{dc "fields-new_request_subheadline"}} </h6>
      </div>
    </div>
  </div>
</div>

<!-- Flex container til form og billede -->
<div class="container container--sm page-content form-image-wrapper">
  <div class="form-container">
    {{request_form wysiwyg=true}}
  </div>
</div>

<script>
  const FORM_ID = parseInt($('#request_issue_type_select').val()) || null;
  const FORM_NAME = $('#request_issue_type_select [selected]').text();

  sessionStorage.removeItem('isFormSubmited');
  
  $('[type="submit"]').on('click', function() {
  	sessionStorage.setItem('isFormSubmited', 'true');
  });
  
  $('#request_subject').val(FORM_NAME);
  $('.request_subject').add($('.suggestion-list')).hide();

  if (FORM_ID === 18461981373468) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = '{{dc "fields-description-order"}}'; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});

  }

if (FORM_ID === 18558387014300) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = '{{dc "fields-description-delivery"}}'; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});

  }

if (FORM_ID === 18558689847068) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = '{{dc "fields-description-product"}}'; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});

  }

if (FORM_ID === 18559689732380) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = "{{dc "fields-description-payment"}}"; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});

  }

if (FORM_ID === 18564602274716) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = '{{dc "fields-description-right_of_withdrawal"}}'; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});
  
  $('#request_custom_fields_26203672097436').closest('.form-field').append('<div style="margin-top: 4px;">{{dc "hc-please_note_that_purchases_can_only_be_cancelled_for_standard_orders"}}</div>');

  }

if (FORM_ID === 18459360425628) {

  const customText = '{{dc "fields-qc_number_-_youtube"}}';
  const customURL = '{{dc "fields-qc_number_-_yt_link"}}';

  $('.request_custom_fields_18457479409948').append(
    $(`<p><a href="${customURL}" target="_blank">${customText}</a></p>`)
  );

  $(document).ready(function () {

    /*
     * Warranty terms link
     */
    var fieldContent =
      $('.request_custom_fields_18685367461660').html();

    if (fieldContent) {

      var updatedContent = fieldContent.replace(
        '{{dc "fields-warranty_terms_word"}}',
        '<a href="{{dc "fields-warranty_terms_link"}}" target="_blank" style="text-decoration: underline;">{{dc "fields-warranty_terms_word"}}</a>'
      );

      $('.request_custom_fields_18685367461660')
        .html(updatedContent);
    }


    /*
     * Complaint description
     */
    var dynamicContent =
      '{{dc "fields-description-complaint"}}';

    $('#request_description_hint')
      .html(dynamicContent);


    /*
     * Complaint reason field
     */
    const $complaintReason =
      $('#request_custom_fields_18457409376412');


    /*
     * QC field
     */
    const $qcField =
      $('.request_custom_fields_18457479409948');


    /*
     * QC helper content
     */
    const qcImageSrc =
      "{{asset 'QC_Image.png'}}";

    const qcDynamicContent =
      '{{dc "fields-qc-helper-text"}}';


    /*
     * Create helper wrapper
     */
    if (!$('#qc-helper-wrapper').length && $qcField.length) {

      const $qcHelper = $(`
        <div id="qc-helper-wrapper" class="qc-helper-wrapper">

          <div class="qc-helper-text">
            ${qcDynamicContent}
          </div>

          <img
            id="qc-image-helper"
            src="${qcImageSrc}"
            alt="Example of where to find the serial number"
            class="clickable-image qc-image-helper"
          >

        </div>
      `);

      $qcField.after($qcHelper);
    }


    /*
     * Determine whether QC helper should be shown
     */
    function shouldShowQCHelper() {

      const reason =
        $complaintReason.val();

      /*
       * Hide when:
       * - nothing selected
       * - Transport damage selected
       */
      if (!reason || reason === 'transport_damage') {
        return false;
      }

      return true;
    }


    /*
     * Update visibility
     */
    function updateQCHelperVisibility() {

      if (shouldShowQCHelper()) {
        $('#qc-helper-wrapper').show();
      } else {
        $('#qc-helper-wrapper').hide();
      }

    }


    /*
     * Initial state
     */
    updateQCHelperVisibility();


    /*
     * React when Reason for complaint changes
     */
    $complaintReason.on('change', function () {
      updateQCHelperVisibility();
    });


    /*
     * Create reusable modal if it does not exist
     */
    if (!$('.image-modal').length) {

      const $modal = $(`
        <div class="image-modal" style="display:none;">
          <div class="modal-content">
            <span class="close">&times;</span>
            <img class="modal-image" src="" width="100%">
          </div>
        </div>
      `);

      $('body').append($modal);


      /*
       * Close modal with X
       */
      $modal.find('.close').on('click', function () {
        $modal.fadeOut();
      });


      /*
       * Close modal by clicking outside image
       */
      $modal.on('click', function (event) {

        if ($(event.target).hasClass('image-modal')) {
          $modal.fadeOut();
        }

      });

    }


    /*
     * Open QC image in modal
     */
    $('#qc-image-helper').on('click', function () {

      const imgSrc =
        $(this).attr('src');

      $('.image-modal .modal-image')
        .attr('src', imgSrc);

      $('.image-modal')
        .fadeIn();

    });

  });

}
  // Force attachment //
  
  $(document).ready(function () {

  const COMPLAINT_FORM_ID = 18459360425628;
  const RIGHT_OF_WITHDRAWAL_FORM_ID = 18564602274716;

  const RECEIVED_ORDER_FIELD = '#request_custom_fields_26203672097436';
  const RECEIVED_ORDER_YES = '__dc.fields-fields_has_received_my_order-yes__';

  const $attachmentPool = $('#request-attachments-pool');
  const $fileInput = $('#request-attachments');
  const $submitButton = $('[type="submit"]');

  const attachmentRequiredText =
    '{{dc "fields-attachment-required"}}';

  const $attachmentWarning = $(`
    <div id="attachment-required-warning"
         class="attachment-required-warning"
         style="display:none;">
      ${attachmentRequiredText}
    </div>
  `);

  // Insert warning only once
  if (!$('#attachment-required-warning').length) {
    $attachmentPool.after($attachmentWarning);
  }


  /*
   * Check whether Zendesk has registered
   * at least one uploaded attachment
   */
  function hasUploadedAttachment() {
    return $attachmentPool.find('.upload-item').length > 0;
  }


  /*
   * Decide whether attachments are mandatory
   * for the current form/state
   */
  function attachmentIsRequired() {

    // Complaint form:
    // Attachment is always mandatory
    if (FORM_ID === COMPLAINT_FORM_ID) {
      return true;
    }

    // Right of withdrawal:
    // Only mandatory when "Has received my order" = Yes
    if (FORM_ID === RIGHT_OF_WITHDRAWAL_FORM_ID) {
      return $(RECEIVED_ORDER_FIELD).val() === RECEIVED_ORDER_YES;
    }

    return false;
  }


  /*
   * Update button + warning
   */
  function updateAttachmentRequirement() {

    const required = attachmentIsRequired();
    const hasAttachment = hasUploadedAttachment();

    // Attachment not required
    if (!required) {

      $submitButton
        .prop('disabled', false)
        .removeClass('submit-disabled');

      $('#attachment-required-warning').hide();

      return;
    }


    // Attachment required AND present
    if (hasAttachment) {

      $submitButton
        .prop('disabled', false)
        .removeClass('submit-disabled');

      $('#attachment-required-warning').hide();

    }

    // Attachment required but missing
    else {

      $submitButton
        .prop('disabled', true)
        .addClass('submit-disabled');

      $('#attachment-required-warning').show();

    }

  }


  /*
   * Initial state
   */
  updateAttachmentRequirement();


  /*
   * Watch attachments being added/removed
   */
  if ($attachmentPool.length) {

    const attachmentObserver = new MutationObserver(function () {
      updateAttachmentRequirement();
    });

    attachmentObserver.observe(
      $attachmentPool[0],
      {
        childList: true,
        subtree: true
      }
    );

  }


  /*
   * Fallback when selecting files
   */
  $fileInput.on('change', function () {

    setTimeout(function () {
      updateAttachmentRequirement();
    }, 100);

  });


  /*
   * Watch "Has received my order"
   *
   * Zendesk/Nesty updates the hidden input,
   * so change event should fire when Yes/No changes.
   */
  $(RECEIVED_ORDER_FIELD).on('change', function () {
    updateAttachmentRequirement();
  });


  /*
   * Final safety check on submit
   */
  $('#new_request').on('submit', function (e) {

    if (
      attachmentIsRequired() &&
      !hasUploadedAttachment()
    ) {

      e.preventDefault();
      e.stopImmediatePropagation();

      updateAttachmentRequirement();

      if ($fileInput.length) {

        $('html, body').animate({
          scrollTop: $fileInput.offset().top - 150
        }, 300);

      }

      return false;

    }

  });

});
  
  // Force attachment //
  
  // Right of withdrawal form //
  
if (FORM_ID === 18564602274716) {

  	$(document).ready(function() {
  	// Find the specific field and update its content with dynamic content
  	var dynamicContent = '{{dc "fields-description-right_of_withdrawal"}}'; // Dynamic content
  	$('#request_description_hint').html(dynamicContent); // Replace the default text with Dynamic content
		});

  }
  
  var currentLocale = '{{help_center.locale}}';
  
  if (FORM_ID === 18564602274716) {
  let imageSrc = '';

 if (currentLocale === 'fr' || currentLocale === 'fr-fr') {
    imageSrc = "{{asset 'Return_FR.png'}}";
  } else {
    imageSrc = "{{asset 'short_complaint_uk.png'}}";
  }

  const image = $('<img>', {
    src: imageSrc,
    width: '35%',
    class: 'clickable-image'
  });

  $('.request_custom_fields_23405295069724').after(image);

  function updateRoWImageVisibility() {
    var fieldVal = $('#request_custom_fields_26203672097436').val();
    if (fieldVal === '__dc.fields-fields_has_received_my_order-no__') {
      image.hide();
    } else {
      image.show();
    }
  }

  updateRoWImageVisibility();
  $('#request_custom_fields_26203672097436').on('change', updateRoWImageVisibility);

  const modal = $(`
    <div class="image-modal" style="display:none;">
      <div class="modal-content">
        <span class="close">&times;</span>
        <img class="modal-image" src="" width="100%">
      </div>
    </div>
  `);

  $('body').append(modal);

  image.on('click', function () {
    const imgSrc = $(this).attr('src');
    $('.modal-image').attr('src', imgSrc);
    modal.fadeIn();
  });

  modal.find('.close').on('click', function () {
    modal.fadeOut();
  });

  $(window).on('click', function (event) {
    if ($(event.target).hasClass('image-modal')) {
      modal.fadeOut();
    }
  });
}
  
  // Right of withdrawal form end //

var currentLocale = '{{help_center.locale}}';
  
if (FORM_ID === 18459360425628) {
  let imageSrc = '';

  if (currentLocale === 'fr' || currentLocale === 'fr-fr') {
    imageSrc = "{{asset 'complaint_fr.png'}}";
  } else {
    imageSrc = "{{asset 'complaint_uk.png'}}";
  }

  const image = $('<img>', {
    src: imageSrc,
    width: '100%',
    class: 'clickable-image'
  });

  $('.request_custom_fields_18685367461660').after(image);

  const modal = $(`
    <div class="image-modal" style="display:none;">
      <div class="modal-content">
        <span class="close">&times;</span>
        <img class="modal-image" src="" width="100%">
      </div>
    </div>
  `);

  $('body').append(modal);

  image.on('click', function () {
    const imgSrc = $(this).attr('src');
    $('.modal-image').attr('src', imgSrc);
    modal.fadeIn();
  });

  modal.find('.close').on('click', function () {
    modal.fadeOut();
  });

  $(window).on('click', function (event) {
    if ($(event.target).hasClass('image-modal')) {
      modal.fadeOut();
    }
  });
}
</script>

<style>
  /* Modal styles */
  .image-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: none; /* Hidden by default */
  }

  .modal-content {
    position: relative;
    margin: auto;
    top: 10%;
    width: 80%;
  }

  .modal-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
  }

  .close:hover,
  .close:focus {
    color: #ddd;
    text-decoration: none;
    cursor: pointer;
  }

</style>