/* Google Fonts - Inter (rubriker och brödtext) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/*///////////////////////////////////////////////////////////
 ___                 _           _               _   _
/ _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
> _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|


///////////////////////////////////////////////////////////*/
/*CSS template by Reclaimit AB / www.reclaimit.com */
/*Kund: PS of Sweden */

/*------------------------------*\
INDEX
- Special
- Base layout
- Text
- Buttons
- Stepbar
- Checkbox
- Specials: Step 1,3,4,5
- Modal
\*-----------------------------*/

/*------------*/
/*#SPECIAL*/
/*------------*/

/* Döljer Telefonnummer dagtid (titel + inputfält + readonly-värde i sammanfattning) */
.form-group:has(#CustomerPhoneEdit) {
  display: none !important;
}
.Readonly_CustomerPhone {
  display: none !important;
}
.Readonly_CustomerPhone + br {
  display: none !important;
}

/* Döljer texten/knappen edit i reklamationsflödet */
label.edit-link {
  display: none !important;
}

/* Lägger till minustecken före avdragsbelopp i "Övriga avdrag"-tabellen i popupmodalen i sista steget */
td.valuecol.othercostvalue::before {
  content: "- ";
}

/*------------*/
/*#BASE LAYOUT*/
/*------------*/

/* Sidans bakgrund, samma ljusgrå som i PS of Swedens butik */
body, .reclaimenableckeditor, #loadingspinner {
  background-color: #efefef !important;
}

/* Kort, tabellceller och popupmodaler är vita så att inga gråa rutor syns inuti korten */
.ChangeBackground, .modal-content, .Errandinfoarticles, .tab, td,
.bordered.mer-step4-details-body {
  background-color: #ffffff !important;
}

/* Linjer i butikens kantfärg */
hr, hr.h2_underline {
  background-color: #cfcfcf !important;
  height: 1px;
}

.hr-bootstrap {
  color: #cfcfcf !important;
}

/*-----*/
/*#TEXT*/
/*-----*/

/* Brödtext: Inter */
body, a, b, p, li, h2, h3, h4, label, div,
input, .select2-container--default, .select2-selection--single,
.text-danger, .select2-selection__rendered {
  font-family: 'Inter', sans-serif;
}

/* Inputfält: kantiga, med butikens kantfärg */
.form-control.text-box {
  font-family: 'Inter', sans-serif;
  border-radius: 0;
  border: 1px solid #cfcfcf;
}

/* Textfärg #1c1c1c */
body, b, .text-box, strong, p, li, h2, h3, .h3, h4, .control-label,
.select2-container--default, .select2-selection--single, .text-danger,
.select2-selection__rendered, .color-for-step-1-number, .color-for-step-2-number,
.color-for-step-3-number, .color-for-step-4-number, .textColor2, .text_dbvalue,
.form-control-step3-quantity, .tab, label, th, .form-control.textareaForStep4,
.article-number, .freight-label-content .item-text, .freight-label-content .item-price {
  color: #1c1c1c;
  font-size: 14px;
  font-weight: 400;
}

/* Rubriker: Inter, versaler och brett teckenavstånd som i butiken */
h1, .h1, .h1-searchreclaim, .Login-style, .container-for-headline-steps-dotted-circle-bar {
  font-family: 'Inter', sans-serif !important;
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Rubrik i modaler */
.modal-title {
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Mobil: mindre teckenavstånd och luftigare radhöjd på rubriker och artikelnamn så de inte bryts och krockar */
@media (max-width: 767px) {
  h1, .h1, .h1-searchreclaim, .Login-style, .container-for-headline-steps-dotted-circle-bar {
    font-size: 18px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.35 !important;
  }
  .customer-details-wrapper h2,
  .mer-step4-details-title-row h2,
  .h2-step4.mer-step4-sub-title,
  .mer-container-overall.mer-step4-2-container-overall h2,
  #step5Wrapper .medium-title {
    font-size: 16px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
  }
  .article-name {
    letter-spacing: 0.06em !important;
  }
}

/*--------*/
/*#BUTTONS*/
/*--------*/

/* Aktiv knapp: svart, kantig, med "wipe"-animation vid hover som i butiken (svart fyllning sveper bort från vänster till höger) */
.mer-btn.mer-step-btn,
.mer-btn.mer-step-btn:focus,
.reclaim--btn-main.loading,
.mer-btn.mer-step-btn:visited,
a.mer-btn.mer-step-btn:visited,
.links-wrapper .btn {
  opacity: 1;
  font-weight: 400;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  border: 1px solid #1c1c1c;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none !important;
  padding: 10.4px 28px;
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(#1c1c1c, #1c1c1c), linear-gradient(transparent, transparent);
  background-origin: border-box;
  background-size: 101% 101%, 0 101%;
  background-position: right;
  background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              background-position 0.45s step-end,
              color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Hover: svart fyllning försvinner, knappen blir kantad med svart text */
.mer-btn.mer-step-btn:hover,
.mer-btn.mer-step-btn:visited:hover,
a.mer-btn.mer-step-btn:visited:hover,
.links-wrapper .btn:hover {
  color: #1c1c1c;
  border-color: #1c1c1c;
  background-color: transparent;
  background-size: 0 101%, 101% 101%;
  background-position: left;
  text-decoration: none !important;
}

/* Inaktiv knapp: ljusgrå med mörk text för läsbar kontrast, ingen animation */
.mer-btn.mer-step-btn.disabled,
.mer-btn.mer-step-btn.disabled.btn-default,
.mer-btn.mer-step-btn.disabled:hover,
.mer-btn.mer-step-btn.disabled:focus,
.mer-btn.mer-step-btn.disabled:active,
[disabled].mer-btn.mer-step-btn,
[disabled].mer-btn.mer-step-btn:hover {
  opacity: 1;
  font-weight: 400;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  background-color: #d4d4d4 !important;
  background-image: none !important;
  border-color: #d4d4d4 !important;
  color: #5c5c5c !important;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
}

/*--------*/
/*#STEPBAR*/
/*--------*/

/* Inaktiv steg-linje */
.step-line {
  background: #cfcfcf;
}

/* Aktiv steg-linje */
.step-line.step-color-active {
  background: #1c1c1c;
}

/*---------*/
/*#CHECKBOX*/
/*---------*/

/* glyphSpan fyller hela label-elementet (34x34) */
.steps-glyphiconLabel.glyphiconLabel .glyphSpan {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1.5px solid #cfcfcf !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Döljer Reclaimits check.svg */
.steps-glyphiconLabel.glyphiconLabel .glyphSpan::before {
  display: none !important;
}

/* Checkbox markerad: svart accent */
.steps-glyphiconLabel.glyphiconLabel > input[type="checkbox"]:checked ~ .glyphSpan {
  background: #1c1c1c !important;
  border-color: #1c1c1c !important;
}

/* Checkbox: CSS-ritad vit bock */
.steps-glyphiconLabel.glyphiconLabel > input[type="checkbox"]:checked ~ .glyphSpan::after {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 13px !important;
  border: 2.5px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  margin-bottom: 3px !important;
}

/* Radio: runda */
.steps-glyphiconLabel.glyphiconLabel .mer-radio-icon {
  border-radius: 50% !important;
}

/* Radio markerad: svart accent */
.steps-glyphiconLabel.glyphiconLabel > input[type="radio"]:checked ~ .glyphSpan {
  background: #1c1c1c !important;
  border-color: #1c1c1c !important;
}

/* Radio: CSS-ritad vit bock */
.steps-glyphiconLabel.glyphiconLabel > input[type="radio"]:checked ~ .glyphSpan::after {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 13px !important;
  border: 2.5px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  margin-bottom: 3px !important;
}

/* Valideringsfel: puls-animation när has-error läggs på checkbox/radio */
@keyframes glyphSpanErrorPulse {
  0%   { border-color: #cfcfcf; }
  50%  { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,0.2); }
  100% { border-color: #cfcfcf; }
}

.steps-glyphiconLabel.has-error .glyphSpan {
  animation: glyphSpanErrorPulse 1s ease-in-out 3;
  border-color: #e53935 !important;
}

/*---------------------*/
/*STEP SPECIFIC STYLING*/
/*---------------------*/

/*-------*/
/*#STEP 1*/
/*-------*/

/* Etiketter i inloggningssteget */
.mer-form-group-step1 label.control-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Inputfält i steg 1 */
.form-control.form-control-step-1,
.form-control.form-control-step-1:focus {
  font-weight: 400;
  background-color: #ffffff;
}

/*-------*/
/*#STEP 3*/
/*-------*/

/* Desktop: reserverar plats till höger om artikelnamnet i steg 3 så texten inte går in i antalsväljaren */
@media (min-width: 768px) {
  .step3-table tr > td.step3-td-details {
    padding-right: 50px !important;
  }
}

/* Antal-kontroll: samlad widget med kantig border, som i butikens varukorg */
.step3-table tr > td#numberBox {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-width: unset !important;
  width: auto !important;
  border: 1px solid #cfcfcf !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  height: 42px !important;
}

.step3-table tr > td#numberBox > span.article-quantity {
  display: none !important;
}

.step3-table tr > td#numberBox > br {
  display: none !important;
}

/* Plus/minus-knappar, transparenta som i butiken, svart vid hover */
.step3-table tr > td#numberBox > button {
  padding: 0 14px !important;
  width: auto !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  color: #1c1c1c !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.step3-table tr > td#numberBox > button:hover {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}

.step3-table tr > td#numberBox > button > span {
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
  color: inherit !important;
  font-size: 18px !important;
}

/* Sifferfält: centrerat och utan avdelare, som i butiken */
.step3-table tr > td#numberBox > input:not([type='hidden']) {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #1c1c1c !important;
  min-width: 36px !important;
  height: 100% !important;
}

.step3-table tr > td#numberBox > input:is([disabled='True']) {
  opacity: 0.3 !important;
}

/* Backoffice-fix: .form-group-shadow saknar position:relative vilket gör att td#numberBox med position:absolute flyr ut ur kortets bounds */
.form-group-shadow {
  position: relative !important;
}

/* Backoffice-fix: td#numberBox utan .step3-table som förälder */
tr.form-group-shadow > td#numberBox {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  min-width: unset !important;
  border: 1px solid #cfcfcf !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  height: 42px !important;
  margin-left: auto !important;
  float: none !important;
  width: 150px !important;
  flex-shrink: 0 !important;
}

tr.form-group-shadow > td#numberBox > span.article-quantity {
  display: none !important;
}

tr.form-group-shadow > td#numberBox > br {
  display: none !important;
}

tr.form-group-shadow > td#numberBox > button {
  padding: 0 14px !important;
  width: auto !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  color: #1c1c1c !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

tr.form-group-shadow > td#numberBox > button:hover {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}

tr.form-group-shadow > td#numberBox > button > span {
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
  color: inherit !important;
  font-size: 18px !important;
}

tr.form-group-shadow > td#numberBox > input:not([type='hidden']) {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #1c1c1c !important;
  min-width: 36px !important;
  height: 100% !important;
}

/* Touchskärmar: stänger av svart hover på plus/minus så knappen inte fastnar i svart efter tryck */
@media (hover: none) {
  .step3-table tr > td#numberBox > button:hover,
  tr.form-group-shadow > td#numberBox > button:hover {
    background-color: transparent !important;
    color: #1c1c1c !important;
  }
}

/* Döljer webbläsarens inbyggda upp/ner-pilar i antalsfältet (input type="number") */
.step3-table tr > td#numberBox > input[type='number'],
tr.form-group-shadow > td#numberBox > input[type='number'] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.step3-table tr > td#numberBox > input[type='number']::-webkit-outer-spin-button,
.step3-table tr > td#numberBox > input[type='number']::-webkit-inner-spin-button,
tr.form-group-shadow > td#numberBox > input[type='number']::-webkit-outer-spin-button,
tr.form-group-shadow > td#numberBox > input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  margin: 0 !important;
}

/* Artikelnamn i versaler med brett teckenavstånd, som produkttitlar i butiken */
.article-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Artikelnummer i dämpad grå ton */
.article-number {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #6b6b6b !important;
  font-style: normal !important;
}

/*-------*/
/*#STEP 4*/
/*-------*/

/* Returorsak-dropdown: sökfältet kantigt med tunn grå kant som övriga fält */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #cfcfcf !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* Döljer dragspelsknappen i steg 4 och frigör dess plats i griden */
#step4Wrapper .article-collapse > .right-position.card-header {
  display: none !important;
}

/* Griden går från tre till två kolumner, med samma radhöjd så båda kolumnerna ligger i linje */
#step4Wrapper .row.article-collapse {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline !important;
  column-gap: 16px !important;
}

#step4Wrapper .article-collapse .group-receipt-article,
#step4Wrapper .article-collapse > div[class*="col-xs-2"] > div {
  padding-top: 0 !important;
  line-height: 22px !important;
}

/* Neutraliserar Bootstraps clearfix som annars blir egna grid-celler */
#step4Wrapper .row.article-collapse::before,
#step4Wrapper .row.article-collapse::after {
  content: none !important;
}

/* Antal högerställs och bryts inte */
#step4Wrapper .article-collapse > div[class*="col-xs-2"] {
  width: auto !important;
  float: none !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Tar bort reserverad bildyta endast när artikeln saknar bild */
#step4Wrapper .article-collapse > div[class*="col-xs-8"]:not(:has(img)) {
  padding-left: 0 !important;
}

/* Produktinfon vänsterställs */
#step4Wrapper .article-collapse > div[class*="col-xs-8"] {
  text-align: left !important;
}

/* Döljer avdelarlinjen ovanför orsaksvalet i steg 4 */
#step4Wrapper .row.itemRow > div:has(> hr) {
  display: none !important;
}

/* Orsaksrubriken i steg 4 får full bredd så texten inte bryts i smal kolumn */
#step4Wrapper .mer-step4-cause-dropdown-title {
  width: 100% !important;
  float: none !important;
  margin-bottom: 6px !important;
}

/* Dropdownens kolumn läggs på egen rad under rubriken */
#step4Wrapper .mer-step4-cause-dropdown-title + div[class*="col-"] {
  width: 100% !important;
  float: none !important;
}

/* Returorsak-dropdown: kantig som övriga fält */
.select2-container--default .select2-selection {
  border-radius: 0 !important;
}

/* Returorsak-dropdown: markerat alternativ i svart i stället för Select2-blått */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}

/* Centrerar radioknapp, text och logotyp vertikalt i fraktvalet */
label.freight-label-option {
  display: flex !important;
  align-items: center !important;
}

label.freight-label-option > .input-radio {
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

label.freight-label-option .freight-label-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
}

label.freight-label-option .item-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Fraktväljaren: priset hålls på en rad */
label.freight-label-option .item-price {
  white-space: nowrap !important;
}

/* Fraktväljaren i steg 4 får vit bakgrund som övriga kort */
#UpdatedListCarrierprofiles .row.bordered,
.step4-freight-options-wrapper.bordered {
  background-color: #ffffff !important;
}

/* Centrerar "Ja"/"Nej"-text i höjd med kryssrutan, oavsett kryssat eller inte (produktfrågan) */
#step4Wrapper .step4MerchantQuestion .row[class*="questionsonexchangefor_"] > div[class*="col-xs-4"][class*="col-sm-2"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#step4Wrapper .step4MerchantQuestion .row[class*="questionsonexchangefor_"] .steps-glyphiconLabel.glyphiconLabel {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#step4Wrapper .step4MerchantQuestion .row[class*="questionsonexchangefor_"] label.control-label {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Rubriker i steg 4: versaler och brett teckenavstånd */
.customer-details-wrapper h2,
.mer-step4-details-title-row h2,
.h2-step4.mer-step4-sub-title,
.mer-container-overall.mer-step4-2-container-overall h2 {
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Döljer produktmottagarinformationen i flödet */
.recipient-name-group-1, .recipient-name-group-2 {
  display: none;
}

/* FIX for max 35 characters too long address */
.form-group:has(input.has-error#CustomerAddressEdit)::after {
  content: "Max 35 characters including spaces";
  display: block;
  color: #dc0000;
  font-size: 14px;
  margin-top: 4px;
}

/*-------*/
/*#STEP 5*/
/*-------*/

/* Rubriker i steg 5 */
#step5Wrapper .medium-title {
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Döljer "Nytt ärende"-knappen */
button[name="NewErrand"] {
  display: none;
}

/*------*/
/*#MODAL*/
/*------*/

/* Godkänn i popupen är ett input-fält med Bootstraps .form-control, som ger inre skugga och eget kantläge. Nollställs så knappen ser ut som Avbryt utan streck vid kanten */
.modal-footer input.mer-btn.mer-step-btn,
#TermsNext {
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid #1c1c1c !important;
  border-radius: 0 !important;
  background-origin: border-box !important;
  outline: none !important;
}