/*
-------------------------------------------
wf-drawer-self-service.css
-------------------------------------------

  Beskrivning: Stilregler för utfällbar självservice
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Utfällbar självservice
------------------------------------------- */

.wf-drawer-self-service > .sv-layout {
  max-width: var(--wf-grid-8-col);
  margin: 0 auto; 
}

.wf-drawer-self-service .env-ui-text-sectionheading {
  margin-bottom: var(--wf-spacing-20) !important;
}

.wf-drawer-self-service .wf-self-service-list {
  background-color: transparent;
  padding: 0;
}

.wf-drawer-self-service .wf-self-service-list::before,
.wf-drawer-self-service .wf-self-service-list .env-ui-text-subheading {
  display: none;
}

.wf-drawer-self-service .wf-self-service-list a,
.wf-drawer-self-service .wf-self-service-list a {
  border: 2px solid var(--june-mossa-70);
  background-color: var(--june-mossa-05);
}

.wf-drawer-self-service .wf-deco-btn-my-pages .env-button--primary {
  background: transparent;
}


/*
-------------------------------------------
UTV feb 2026
------------------------------------------- */

.wf-drawer-self-service div:has(>.wf-clickable-area) {
  display: grid;
  gap:var(--wf-spacing-40);
  grid-template-columns: 1fr 1fr;
}
  
.wf-drawer-self-service .wf-clickable-area {
  padding: var(--wf-spacing-40);
  background: var(--june-mossa-10);
  box-sizing: border-box;
  border: 2px solid var(--june-mossa-70);
  border-radius: var(--env-border-radius-large);
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap:var(--wf-spacing-40);
  align-items:center;
  transition: transform 0.3s ease;
}

.wf-drawer-self-service .wf-clickable-area:hover {
  transform:scale(1.05);
  background-color:var(--june-mossa-05);
}

.wf-drawer-self-service .wf-clickable-area > .sv-layout{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.wf-drawer-self-service .env-ui-text-subheading{
  font-size: var(--wf-font-size-h4);
  color:var(--june-mossa);
  margin-bottom:var(--wf-spacing-20) !important;
}
  
.wf-drawer-self-service .wf-clickable-area p.normal{
  margin-bottom:0;
}

.wf-drawer-self-service .wf-clickable-area .normal a {
  font-family: var(--wf-heading-font);
  font-weight: 500;
  color: var(--june-mossa);
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
  
.wf-drawer-self-service .wf-clickable-area:after{
  display:block;
  content:"";
  height:1em;
  width:1em;
  background:var(--wf-chevron-right-june-mossa);
  background-repeat:no-repeat;
}



/*
-------------------------------------------
Mobil
------------------------------------------- */

@media screen and (max-width: 767px) {

  .wf-drawer-self-service div:has(>.wf-clickable-area) {
    grid-template-columns: 1fr;
  }

  .wf-drawer-self-service .wf-clickable-area > .sv-image-portlet {
    max-width: 36px;
  }

}