/* ==========================================
   Vald mäklare + fler mäklare
   Tajtare och mer integrerad layout
   ========================================== */

.selected-agent-card {
   cursor: default;
}

.selected-agent-title-row {
   display: flex;
   align-items: center;
}

.selected-agent-title-stack {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   flex-wrap: wrap;
}

.agent-status-chip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.28rem 0.65rem;
   border-radius: 999px;
   border: 1px solid var(--clr-cta-line);
   background: var(--clr-lightcta);
   color: var(--clr-active);
   font-family: var(--ff-roboto-medium);
   font-size: 0.82rem;
   line-height: 1;
   white-space: nowrap;
}

/* ---------- Fler mäklare: accordion ---------- */

.more-agents-accordion {
   grid-column: 2 / 4;
   margin: var(--padding-small) 0 var(--padding-normal);
   border: 1px solid var(--clr-cta-line);
   border-radius: var(--padding-small);
   background: var(--clr-white);
   overflow: hidden;
   cursor: default;
}

.more-agents-trigger {
   display: flex;
   flex-direction: column;
   gap: var(--padding-close);
   padding: var(--padding-normal);
   cursor: pointer;
   list-style: none;
}

.more-agents-trigger::-webkit-details-marker {
   display: none;
}

.more-agents-trigger:focus-visible {
   outline: 2px solid var(--clr-active);
   outline-offset: -2px;
}

.more-agents-head {
   display: flex;
   flex-direction: column;
   gap: var(--padding-tight);
}

.more-agents-title {
   color: var(--clr-black);
   font-family: var(--ff-roboto-medium);
   font-size: 1.1rem;
   line-height: 1.3;
}

.more-agents-sub {
   color: var(--clr-lead);
   font-size: 0.95rem;
   line-height: 1.45;
}

.more-agents-bar {
   display: flex;
   align-items: center;
   gap: var(--padding-close);
   padding-top: var(--padding-close);
   border-top: 1px solid var(--clr-brightgray);
}

.more-agents-avatars {
   display: flex;
}

.more-agents-avatars img {
   width: 2.25rem;
   height: 2.25rem;
   object-fit: contain;
   border-radius: 50%;
   border: 2px solid var(--clr-white);
   background: var(--clr-white);
   box-shadow: 0 0 0 1px var(--clr-brightgray);
}

.more-agents-avatars img + img {
   margin-left: -0.6rem;
}

.more-agents-count {
   color: var(--clr-copy);
   font-size: 0.95rem;
}

.more-agents-toggle {
   margin-left: auto;
   display: inline-flex;
   align-items: center;
   gap: var(--padding-small);
   color: var(--clr-cta);
   font-family: var(--ff-roboto-medium);
   font-size: 0.95rem;
   white-space: nowrap;
}

.more-agents-trigger:hover .more-agents-toggle {
   color: var(--clr-active);
   text-decoration: underline;
}

.more-agents-toggle-open,
.more-agents-accordion[open] .more-agents-toggle-closed {
   display: none;
}

.more-agents-accordion[open] .more-agents-toggle-open {
   display: inline;
}

.more-agents-chevron {
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform 180ms ease;
   margin-top: -0.2rem;
   flex: 0 0 auto;
}

.more-agents-accordion[open] .more-agents-chevron {
   transform: rotate(-135deg);
   margin-top: 0.2rem;
}

.more-agents-content {
   padding: 0 var(--padding-normal) var(--padding-normal);
   max-height: 26rem;
   overflow-y: auto;
}

.more-agents-actions {
   display: flex;
   justify-content: flex-end;
   margin-bottom: var(--padding-small);
}

.more-agents-bulk-btn {
   padding: 0.45rem 0.8rem;
   font-size: 0.9rem;
}

/* ---------- Mäklarrader ---------- */

.compact-agent-container {
   gap: var(--padding-small);
}

.compact-agent-choice {
   display: block;
}

.compact-agent-card {
   grid-template-columns: 72px minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--padding-close);
   padding: var(--padding-small) var(--padding-close) var(--padding-small) var(--padding-small);
   border: 1px solid var(--clr-brightgray);
   border-radius: var(--padding-tight);
   box-shadow: none;
   background: var(--clr-white);
   opacity: 0.6;
   transition: opacity 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.compact-agent-logo {
   width: 72px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.compact-agent-card .compact-agent-logo img {
   width: 100%;
   height: 100%;
   min-height: 0;
   object-fit: contain;
   border-radius: var(--padding-tight);
}

.compact-agent-details {
   min-width: 0;
}

.compact-agent-name {
   display: block;
   font-size: 1rem;
   line-height: 1.25;
}

.compact-agent-details .copy {
   margin: 0.15rem 0 0;
   color: var(--clr-gray);
   font-size: 0.88rem;
   line-height: 1.35;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.compact-agent-action {
   display: flex;
   align-items: center;
   gap: var(--padding-small);
   font-family: var(--ff-roboto-medium);
   font-size: 0.88rem;
   white-space: nowrap;
}

.compact-agent-box {
   width: 1.15rem;
   height: 1.15rem;
   border: 2px solid var(--clr-lightgray);
   border-radius: var(--padding-tight);
   background: var(--clr-white);
   flex: 0 0 auto;
   position: relative;
}

.compact-agent-add {
   color: var(--clr-gray);
}

.compact-agent-remove {
   display: none;
   color: var(--clr-active);
}

.label-checkbox:hover > .compact-agent-card,
.label-checkbox:focus-within > .compact-agent-card {
   outline: none;
   border-color: var(--clr-cta-line);
   background-color: var(--clr-lightcta);
}

.agent-checkbox:focus-visible + .compact-agent-card {
   outline: 2px solid var(--clr-active);
   outline-offset: 1px;
}

.agent-checkbox:checked + .compact-agent-card {
   opacity: 1;
   border-color: var(--clr-cta-line);
   background-color: var(--clr-white);
   box-shadow: none;
}

.agent-checkbox:checked + .compact-agent-card .compact-agent-box {
   background: var(--clr-active);
   border-color: var(--clr-active);
}

.agent-checkbox:checked + .compact-agent-card .compact-agent-box::after {
   content: '';
   position: absolute;
   left: 0.32rem;
   top: 0.1rem;
   width: 0.3rem;
   height: 0.6rem;
   border: solid var(--clr-white);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.agent-checkbox:checked + .compact-agent-card .compact-agent-add {
   display: none;
}

.agent-checkbox:checked + .compact-agent-card .compact-agent-remove {
   display: inline;
}

@media (max-width: 600px) {
   .selected-agent-title-stack {
      align-items: flex-start;
      gap: var(--padding-small);
   }

   .more-agents-accordion {
      grid-column: 1 / -1;
   }

   .more-agents-trigger {
      padding: var(--padding-close);
   }

   .more-agents-bar {
      gap: var(--padding-small);
   }

   .more-agents-content {
      padding: 0 var(--padding-small) var(--padding-close);
   }

   .compact-agent-card {
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem 0.5rem 0.5rem;
   }

   .compact-agent-logo {
      width: 52px;
      height: 40px;
   }

   /* bara bocken på mobil, texten tar för mycket plats */
   .compact-agent-add,
   .compact-agent-remove,
   .agent-checkbox:checked + .compact-agent-card .compact-agent-remove {
      display: none;
   }

   .more-agents-actions,
   .more-agents-actions .btn-secondary {
      width: 100%;
   }
}


/* Formuläret har ingen bild bredvid längre – behöver padding även till vänster */
@media (min-width: 481px) {
   #userDetailsForm.box-padding {
      padding-left: var(--padding-normal);
   }
}

/* ---------- Prisförfrågan-formuläret ---------- */

.request-form {
   display: flex;
   flex-direction: column;
   gap: var(--padding-small);
   margin: 0;
   padding: 0;
   border: 0;
}

.request-form-legend {
   margin: 0;
   color: var(--clr-gray);
   font-family: var(--ff-roboto-medium);
   font-size: 0.85rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.request-form-legend + .request-summary,
.request-form-legend + .condition-options,
.request-form-legend + .request-fields {
   margin-bottom: var(--padding-normal);
}

.request-summary {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   background: var(--clr-white);
   border: 1px solid var(--clr-cta-line);
   border-radius: var(--padding-small);
}

.request-summary-item {
   display: flex;
   align-items: center;
   gap: var(--padding-small);
   padding: var(--padding-close);
   min-width: 0;
}

.request-summary-item + .request-summary-item {
   border-left: 1px solid var(--clr-brightgray);
}

.request-summary-item .icon {
   width: 2rem;
   height: 2rem;
   flex: 0 0 auto;
}

.request-summary-label {
   display: block;
   color: var(--clr-gray);
   font-size: 0.85rem;
   line-height: 1.3;
}

.request-summary-unit {
   display: inline-flex;
   align-items: baseline;
   gap: 0.25rem;
   font-family: var(--ff-roboto-medium);
   font-size: 1.1rem;
   color: var(--clr-black);
}

input.request-summary-value {
   all: unset;
   display: block;
   width: 100%;
   font-family: var(--ff-roboto-medium);
   font-size: 1.1rem;
   line-height: 1.4;
   color: var(--clr-black);
}

.request-summary-unit input.request-summary-value {
   display: inline;
   width: auto;
   field-sizing: content;
   max-width: 6ch;
}

.request-summary-unit input.request-summary-value::-webkit-inner-spin-button,
.request-summary-unit input.request-summary-value::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.request-summary-edit {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   margin-top: 0.15rem;
   padding: 0;
   color: var(--clr-cta);
   font-size: 0.85rem;
}

.request-fields {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--padding-close);
   max-width: 28rem;
}

.request-fields .form-group-details {
   margin: 0;
   max-width: none;
}

.request-fields .input,
.request-fields select {
   width: 100%;
   box-sizing: border-box;
}

/* Skick på bostaden – valbara kort */
.condition-options {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--padding-small);
}

.condition-option {
   position: relative;
   display: flex;
   cursor: pointer;
}

.condition-option input {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1px;
   height: 1px;
   margin: 0;
   opacity: 0;
}

.condition-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--padding-small);
   width: 100%;
   padding: var(--padding-close);
   background: var(--clr-white);
   border: 1px solid var(--clr-cta-line);
   border-radius: var(--padding-small);
   transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/* Radio-indikator uppe till höger */
.condition-card::after {
   content: "";
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
   width: 1.1rem;
   height: 1.1rem;
   box-sizing: border-box;
   border: 2px solid var(--clr-inactive);
   border-radius: 50%;
   background: var(--clr-white);
   transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.condition-icon {
   width: 2rem;
   height: 2rem;
   flex: 0 0 auto;
   color: var(--clr-active);
}

.condition-text {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
   min-width: 0;
}

.condition-title {
   font-family: var(--ff-roboto-medium);
   font-size: 1rem;
   line-height: 1.3;
   color: var(--clr-black);
}

.condition-hint {
   font-size: 0.85rem;
   line-height: 1.35;
   color: var(--clr-gray);
}

.condition-option:hover .condition-card {
   border-color: var(--clr-cta);
   box-shadow: var(--clr-card-shadow);
}

.condition-option input:focus-visible + .condition-card {
   outline: 2px solid var(--clr-cta);
   outline-offset: 2px;
}

.condition-option input:checked + .condition-card {
   background: var(--clr-lightcta);
   border-color: var(--clr-cta);
   box-shadow: inset 0 0 0 1px var(--clr-cta);
}

.condition-option input:checked + .condition-card::after {
   border-color: var(--clr-cta);
   background: var(--clr-cta);
   box-shadow: inset 0 0 0 3px var(--clr-white);
}

.condition-option input:checked + .condition-card .condition-icon {
   color: var(--clr-cta);
}

@media (max-width: 700px) {
   .request-summary {
      grid-template-columns: 1fr;
   }

   .request-summary-item + .request-summary-item {
      border-left: 0;
      border-top: 1px solid var(--clr-brightgray);
   }

   .condition-options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

/* Smala mobiler: liggande kort, ikon till vänster */
@media (max-width: 400px) {
   .condition-options {
      grid-template-columns: 1fr;
   }

   .condition-card {
      flex-direction: row;
      align-items: center;
      gap: var(--padding-close);
      padding: 0.85rem 2.5rem 0.85rem var(--padding-close);
   }

   .condition-card::after {
      top: 50%;
      transform: translateY(-50%);
   }

   .condition-icon {
      width: 1.75rem;
      height: 1.75rem;
   }
}