/* Source #884: YOBB 07 – Worker preferences form */
/* ==================================================
   YOBB – WORKER PREFERENCES / MINUA KIINNOSTAA
   LAYOUT CSS V2

   Shortcode:
   [yobb_worker_preferences_form]

   Vain rakenne ja responsive.
   Visuaalinen tyyli tulee:
   YOBB – Global Component Styles
================================================== */


/* ==================================================
   KOKONAISUUS
================================================== */

.yobb-preferences-wrap {
  display: grid;
  width: 100%;
  gap: var(--yobb-space-md);
}


/* ==================================================
   OTSIKKORIVI
================================================== */

.yobb-preferences-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--yobb-space-md);
}

.yobb-preferences-section-copy {
  min-width: 0;
}

.yobb-preferences-section-copy > .yobb-heading {
  margin: 0;
}

.yobb-preferences-description {
  margin: 6px 0 0;
  line-height: 1.45;
}

.yobb-preferences-edit-button,
.yobb-preferences-cancel-button {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ==================================================
   YHTEENVETO
================================================== */

.yobb-preferences-summary-list {
  display: grid;
  gap: var(--yobb-space-sm);
  margin-top: var(--yobb-space-md);
}

.yobb-preferences-summary-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.yobb-preferences-summary-label,
.yobb-preferences-summary-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.yobb-preferences-summary-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.yobb-preferences-summary-tag {
  display: inline-flex;
  min-height: 30px;
  padding: 5px 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--yobb-primary) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--yobb-primary) 8%, #fff);
  color: var(--yobb-text);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}


/* ==================================================
   MUOKKAUSLOMAKE
================================================== */

.yobb-preferences-edit-form {
  display: grid;
  width: 100%;
  gap: var(--yobb-space-md);
}

.yobb-preferences-fields {
  display: grid;
  gap: var(--yobb-space-lg);
  margin-top: var(--yobb-space-lg);
}

.yobb-preferences-choice-field {
  min-width: 0;
}

.yobb-preferences-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--yobb-space-sm);
}


/* ==================================================
   PIILOTUS
================================================== */

.yobb-preferences-edit-form[hidden],
.yobb-preferences-edit-button[hidden] {
  display: none !important;
}


/* ==================================================
   MOBIILI
================================================== */

@media (max-width: 640px) {

  .yobb-preferences-section-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-preferences-edit-button,
  .yobb-preferences-cancel-button {
    width: 100%;
  }

  .yobb-preferences-summary-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .yobb-preferences-summary-value {
    gap: 6px;
  }

  .yobb-preferences-summary-tag {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 13px;
  }

  .yobb-preferences-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .yobb-preferences-actions .yobb-btn {
    width: 100%;
  }
}

.yobb-preferences-summary-section[hidden],
.yobb-preferences-edit-form[hidden] {
  display: none !important;
}