/* Input fields for amounts, icons, and selects */
.amount-input,
.icon-input,
.sidebar-input,
.select-input {
   color: var(--clr-black);
   border-radius: var(--padding-tight);
   border: 1px solid var(--clr-lightgray);
   position: relative;

   background: var(--clr-white);

   font-family: inherit;
   font-size: inherit;

   padding: 0.7rem 0.6rem;

   isolation: isolate;

}

.amount-input {
   background: var(--clr-brightgray);

}
/* Input field with icon, adds left padding for icon space */
.icon-input {
   width: 100%;
   padding-left: calc(var(--padding-normal) + 20px);
         border-radius: var(--padding-tight);
   /* Extra padding to account for the icon */
   
}

/* FAQ: sökikon i sökrutan */
#faqSearch.icon-input {
   background-image: url('/img/icon_search.svg');
   background-repeat: no-repeat;
   background-position: 12px 50%;
   background-size: 32px 32px;

   /* lite mer luft så texten inte krockar med ikonen */
   padding-left: calc(var(--padding-normal) + 28px);
}

.sidebar-input {
     background-color: var(--clr-lightgray);
   padding-left: calc(var(--padding-normal) + 20px);
         border-radius: var(--padding-tight);

}

.icon-input:focus {
   outline: 1px solid var(--clr-accent);
}


/* Focus style for amount input */
.amount-input:focus {
   background: var(--clr-white);
   border: 1px solid var(--clr-accent);
}

/* Placeholder color for various inputs and disabled select options */
.amount-input::placeholder,
.icon-input::placeholder,
.select-input::placeholder,
.select-input option:disabled {
   color: var(--clr-mediumgray);
}

/* Custom slider input styling */
.slider-input {
   -webkit-appearance: none;
   appearance: none;

   height: 5px;
   background: var(--clr-mediumgray);
   border-radius: 5px;
   outline: none;
   opacity: 0.8;
   transition: opacity 0.3s;
}

/* Change slider opacity on hover */
.slider-input:hover {
   opacity: 1;
}

/* Customize the thumb (draggable part) of the slider for Webkit browsers */
.slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: var(--padding-close);
   height: var(--padding-close);
   background-color: var(--clr-accent);
   /* Custom color for the thumb */
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
}

/* Customize the thumb for Firefox browsers */
.slider-input::-moz-range-thumb {
   width: var(--padding-close);
   height: var(--padding-close);
   background-color: #4caf50;
   border-radius: var(--padding-close);
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
}


/* Container for amount input and label */
.amount-field {
   position: relative;
   isolation: isolate;
}

/* Label inside amount field, positioned absolutely */
.amount-label {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

/* Hide slider layout on mobile by default */
.slider-mobile-layout {
   display: none;
}


/* Form layout using CSS grid */
.form-layout,
.contact-layout {
   display: grid;
   row-gap: 0.25rem;
   margin-bottom: 0; 
   
   border-radius: 0.5rem;
}

/* Kontaktformuläret på startsidan – ljusgrå sektion (ljusare än .secondary-bg ovanför),
   formuläret som ett vitt kort utan ram */
.contact-section {
   background-color: var(--clr-offwhite-light);
}

.contact-layout {
   padding: var(--padding-normal);
   background: var(--clr-white);
   border-radius: var(--padding-close);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.contact-layout .input,
.contact-layout textarea {
   width: 100%;
   background-color: var(--clr-offwhite-bg);
   border: 1px solid var(--clr-brightgray);
   border-radius: 0.5rem;
   transition: border-color 200ms ease-out,
      box-shadow 200ms ease-out,
      background-color 200ms ease-out;
}

.contact-layout textarea {
   min-height: 9rem;
}

.contact-layout .input:hover,
.contact-layout textarea:hover {
   border-color: var(--clr-lightgray);
}

.contact-layout .input:focus,
.contact-layout textarea:focus {
   background-color: var(--clr-white);
   border-color: var(--clr-accent);
   box-shadow: 0 0 0 3px hsl(209 93% 38% / 0.15);
}

/* Vänsterkolumnen: rubrik, underrubrik och mejladress */
.contact-intro h2 {
   margin-top: 0;
   margin-bottom: var(--padding-small);
}

.contact-intro .lead {
   margin-top: 0;
   padding-block: 0;
}

.contact-email {
   display: inline-flex;
   align-items: center;
   gap: var(--padding-small);

   font-family: var(--ff-roboto-medium);
   font-size: 1.1rem;
   color: var(--clr-accent);
   text-decoration: none;
}

.contact-email:hover,
.contact-email:focus-visible {
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

@media (max-width: 480px) {
   .contact-intro {
      margin-bottom: var(--padding-big);
   }
}
/* Indent utility class for spacing */
.indent {
   padding-left: calc(24px + var(--padding-close));
}

/* General input, textarea, and select styling */
textarea,
.input,
select {
   font-family: var(--ff-secondary);
   font-size: inherit;
   color: var(--clr-primary);
   border-radius: var(--padding-tight);

}

/* Hide placeholder text for input and textarea */
input::placeholder,
textarea::placeholder {
   color: transparent;
}

/* Grouping for form details, relative positioning */
.form-group-details {
   margin-bottom: var(--padding-close);

   position: relative;

}

/* Floating label for input fields */
.label,
.textarea-label {
   position: absolute;
   left: 0;
   top: calc(50% - 1.75rem);
   padding: 1rem 0.3rem;
   pointer-events: none;
   transform-origin: top;
   color: var(--clr-gray);
   transition: all 250ms ease-in-out;
}

/* Adjust label position for input fields */
.label {
   white-space: nowrap;
   left: 0.4rem;
}

/* Adjust label position for textarea fields */
.textarea-label {
   left: 0.4rem;
   top: -0.2rem;

}

/* Floating label effect when input/textarea is focused or filled */
textarea:focus+.textarea-label,
textarea:not(:placeholder-shown)+.textarea-label,
.input:focus+.label,
.input:not(:placeholder-shown)+.label {
   top: 2.1rem;
   transform: translateY(-100%);
   font-size: 0.8rem;
   color: var(--clr-copy);
}

/* Floating label effect for textarea specifically */
textarea:focus+.textarea-label,
textarea:not(:placeholder-shown)+.textarea-label {
   top: 1.2rem;
   padding-bottom: 0;
   background: transparent;
   font-weight: 500;
}

/* Floating label for select inside wrapper */
.select-wrapper .label {
   position: absolute;
   top: 50%;
   left: 0.4rem;
   transform: translateY(-50%);
   transition: top 250ms ease-in-out, font-size 250ms ease-in-out;

   color: var(--clr-primary);
   background: transparent;
   padding-bottom: 0;
   font-size: 0.75rem;
   font-weight: 500;
}


@media (max-width: 1200px) {
   .form-group-details {
      max-width: 100%;
   }
}


/* Flexbox group for form fields */
.form-group {
   display: flex;
   gap: var(--padding-close);
   align-items: center;
   position: relative;
   margin-bottom: var(--padding-tight);
}


/* Main input field styling */
.input {
   
   width: min(32ch, 100%);
   background-color: var(--clr-offwhite-bg);
   color: var(--clr-black);
   padding: 1rem 0.6rem;
   border: 1px solid transparent;
   
}




/* Focus style for input, select, and textarea */
.input:focus,
select:focus,
textarea:focus {
   outline: none;
   border: 1px solid var(--clr-copy);
}



.input[inert] {
   background-color: transparent;
}

/* Main textarea styling */
textarea {
   min-height: 12vh;
   width: 100%;
   border-radius: var(--padding-tight);
   background-color: var(--clr-offwhite-bg);
   padding: 1rem 0.6rem;
   transition: border-color 250ms ease-in-out;
   resize: none;
   color: var(--clr-neutral-800);
   border: 1px solid transparent;

}

/* Focus style for textarea */
textarea:focus {
   outline: none;
   border-color: var(--clr-copy);
   color: var(--clr-neutral-800);

}

/* Fieldset styling for form sections */
fieldset {
   margin-top: 0;
   margin-bottom: var(--padding-tight);
   border: none;
   padding: 0;
}


/*Select styling */

/* Select field inside form-group-details */
.form-group-details select {
   position: relative;
   width: auto;
   background-color: transparent;
   padding: 1rem .5rem;
   appearance: auto;
   -webkit-appearance: auto;
   -moz-appearance: auto;
   transition: border-bottom-color 250ms ease-in-out;
   color: var(--clr-offwhite);

   border: 1px solid transparent;
}

/* Hover effect for select arrow icon */
.select-wrapper:hover::after {
   filter: brightness(120%);
}

/* Focus style for select in form-group-details */
.form-group-details select:focus {
   outline: none;
   color: var(--clr-offwhite);
   border-color: var(--clr-secondary);
}

.form-group-details select {
   background-color: var(--clr-offwhite-bg);
   color: var(--clr-copy);
   padding: 1rem 0.4rem;

}

/* Gör kr/m²-rutan smalare */
      .sqm-field {
         display: inline-block;
         max-width: 180px;   /* Prova 140–200 beroende på smak */
           margin-bottom: 12px; 
           background-color: var(--clr-lightgray);
         border-radius: var(--padding-tight);

      }

      .sqm-input {
         max-width: 120px;   /* Begränsar själva inputfältet */
         width: 100%;
           background-color: var(--clr-lightgray);
         border-radius: var(--padding-tight);
      }



      /* Layout för kr/m² + Booli-knapp bredvid varandra */
      .sqm-wrapper {
         display: flex;
         flex-wrap: wrap;
         row-gap: 0;
         column-gap: var(--padding-close);

         align-items: top;
         margin-bottom: var(--padding-close);
      }

      .sqm-booli {
         display: flex;
         flex-direction: column;
         gap: 4px;
         max-width: 260px;
      }

      .sqm-booli-text {
         font-size: 0.9rem;
      }



/* Set color of select dropdown options  */
select option {
   color: var(--clr-gray);

}

/* It's not possible to reliably change the color of <option> elements on select:focus using only CSS in most browsers.
  As a workaround, you can style the select itself when focused. */

.form-group-details select:focus {
   color: var(--clr-black);
}

.form-group-details select {
   color: var(--clr-black);
}


.search-bar {
   padding-inline: 1rem;
   padding-block: 1rem;

   border-radius: 0.5rem;
}

@media (min-width: 640px) {
   .search-bar {
      position: sticky;
      top: 1.5rem;
   }
}


@media (max-width: 480px) {
   .form-group-details {
      width: 100%;
   }

   .form-group {
      flex-direction: column;
      align-items: start;
   }

   .input { 
      width: 100%;
   }
   
   .form-group-details .select { 
      width: 100%;
   }
}



/* form both for form and contract */
@media (max-width: 763px) {


   .form-send {
      display: flex;
      justify-content: right;
   }
}


/* Kontaktformulär styling */
.contact-form-wrapper {
   max-width: 700px;
   margin: 0 auto;
}

.contact-form {
   width: 100%;
}

.contact-fieldset {
   border: none;
   padding: 0;
   margin: 0;
}

.form-input-group {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.form-input-group.textarea-group {
   align-items: flex-start;
}

.input-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding-top: 0.5rem;
   flex-shrink: 0;
}

.input-icon svg {
   width: 24px;
   height: 24px;
}

.form-input-group .form-group-details,
.form-input-group .form-group {
   flex: 1;
}

@media (max-width: 480px) {
   .contact-form-wrapper {
      max-width: 100%;
   }
   
   .form-input-group {
      gap: 0.75rem;
   }
   
   .input-icon {
      min-width: 32px;
      height: 32px;
   }
   
   .input-icon svg {
      width: 20px;
      height: 20px;
   }
}

.width-max {
   width: 100%;
}