/* Hëllef Dir application theme. Loaded after the compiled Angular stylesheet. */
:root {
  --hd-ink: #173d36;
  --hd-deep: #10332e;
  --hd-paper: #fffdf8;
  --hd-cream: #f7f5ef;
  --hd-muted: #526962;
  --hd-line: #d8ded6;
  --hd-coral: #ef805e;
  --hd-lime: #dcebb9;
  --hd-shadow: 0 18px 48px rgba(17, 55, 44, .09);
}

body.mat-typography:has(app-root) {
  background: var(--hd-cream);
  color: var(--hd-ink);
  font-family: Inter, 'Avenir Next', Avenir, 'Segoe UI', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body:has(app-root) * { box-sizing: border-box; }
body:has(app-root) :focus-visible { outline: 3px solid var(--hd-coral); outline-offset: 3px; }
body:has(app-root) ::selection { background: var(--hd-lime); color: var(--hd-deep); }

/* Keep navigation visually continuous with the new homepage. */
body app-navigation-bar .sticky-header {
  background: rgba(255, 253, 248, .97) !important;
  border-bottom: 1px solid var(--hd-line) !important;
  box-shadow: 0 6px 22px rgba(23, 61, 54, .045) !important;
  backdrop-filter: blur(16px);
}
body app-navigation-bar .nav-bar { color: var(--hd-ink) !important; }
body app-navigation-bar .nav-brand,
body app-navigation-bar .nav-link { color: var(--hd-ink) !important; }
body app-navigation-bar .nav-brand { font-weight: 800 !important; letter-spacing: -.045em; }
body app-navigation-bar .nav-link:hover { color: #b65d42 !important; }
body app-navigation-bar .nav-btn,
body app-navigation-bar .language-select {
  border-radius: 10px !important;
}
body app-navigation-bar .login-btn {
  background: var(--hd-ink) !important;
  color: white !important;
  border-color: var(--hd-ink) !important;
}

/* Shared surfaces and type across the request and provider journeys. */
body :is(app-simplequestions, app-questionnaire, app-detailquestions,
  app-apply-service-wizard, app-apply-personal-data, app-apply-work-experience,
  app-apply-create-account, app-register, app-login, app-offer-review,
  app-provider-offer, app-userview) :is(h1, h2, h3, .section-title, .form-title,
  .q-title) { color: var(--hd-ink); letter-spacing: -.035em; }

body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account, app-register,
  app-login, app-offer-review, app-provider-offer, app-userview)
  :is(.email-form-container, .service-provider-form, .work-experience-form,
  .create-account-form, .register-wrapper, .content-wrapper, .main-container,
  .profile-card, .booking-card, .offer-card, .inquiry-card, .questions-card,
  .action-card, .scheduling-card) {
  background-color: var(--hd-paper) !important;
  border-color: var(--hd-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--hd-shadow);
}

/* Input rules are scoped to actual forms, leaving Stripe's card iframe alone. */
body app-root form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea),
body app-detailquestions :is(.q-counter-input, .q-select-group select,
  .q-text-group textarea),
body app-provider-offer .price-input-wrapper input,
body app-offer-review .address-field input {
  background: #fff !important;
  color: var(--hd-ink) !important;
  border: 1px solid #bbcbbf !important;
  border-radius: 11px !important;
  min-height: 48px;
  padding: 11px 14px;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s;
}
body app-root form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea):focus,
body app-detailquestions :is(.q-counter-input, .q-select-group select,
  .q-text-group textarea):focus {
  border-color: #538d68 !important;
  box-shadow: 0 0 0 4px rgba(83, 141, 104, .15) !important;
  outline: 0 !important;
}
body app-root form :is(input, textarea)::placeholder { color: #81978a; }
body app-root form :is(label, legend) { color: var(--hd-ink); font-weight: 650; }
body app-root :is(input[type=checkbox], input[type=radio]) { accent-color: #2c7654; }
body app-root :is(.error, .error-message, .error-hint, .card-error) {
  color: #a74430 !important;
}

body app-root :is(button, .btn, .q-btn-submit, .q-btn-back) {
  font-family: inherit;
  transition: transform .18s, background-color .18s, box-shadow .18s, border-color .18s;
}
body app-root :is(button, .btn, .q-btn-submit):not(:disabled):hover {
  transform: translateY(-2px);
}
body app-root :is(button, .btn, .q-btn-submit):disabled {
  opacity: .58;
  cursor: not-allowed;
}
body app-root form :is(button[type=submit], input[type=submit]) {
  background: var(--hd-ink) !important;
  border: 1px solid var(--hd-ink) !important;
  border-radius: 11px !important;
  color: white !important;
  font-weight: 750;
}
body app-root form :is(button[type=submit], input[type=submit]):not(:disabled):hover {
  background: #28594b !important;
  box-shadow: 0 9px 18px rgba(17, 55, 44, .15);
}
body app-root .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #bbcbbf !important;
}
body app-root .mat-form-field.mat-focused .mat-form-field-outline-thick {
  color: #538d68 !important;
}
body app-root .mat-card {
  background: var(--hd-paper) !important;
  color: var(--hd-ink) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 17px !important;
  box-shadow: var(--hd-shadow) !important;
}

/* Questionnaire stages and answer cards. */
body app-questionnaire {
  display: block;
  background: var(--hd-cream);
  --primary: var(--hd-ink);
  --primary-light: #326e55;
  --accent: var(--hd-coral);
  --accent-glow: rgba(239, 128, 94, .16);
  --bg-body: var(--hd-cream);
  --bg-surface: var(--hd-paper);
  --bg-card: #fff;
  --bg-card-hover: #f1f7ea;
  --border-subtle: var(--hd-line);
  --border-medium: #b9cbbf;
  --text-primary: var(--hd-ink);
  --text-secondary: var(--hd-muted);
  --text-muted: #6f8377;
}
body app-questionnaire > #jobTypePage {
  min-height: 100vh;
  background: var(--hd-cream);
}
body app-questionnaire :is(app-simplequestions, app-detailquestions) { display: block; }
body app-questionnaire app-progress-bar { display: block; padding: 18px 20px 0; }
body app-questionnaire app-progress-bar .progress-bar {
  width: min(100%, 780px) !important;
  height: 8px !important;
  margin: 34px auto 37px !important;
  background: #e4eade !important;
  border: 0 !important;
  box-shadow: none !important;
}
body app-questionnaire app-progress-bar .progress {
  background: var(--hd-coral) !important;
  box-shadow: none !important;
}
body app-questionnaire app-progress-bar .station {
  width: 15px !important;
  height: 15px !important;
  background: var(--hd-paper) !important;
  border: 2px solid #8aa993 !important;
}
body app-questionnaire .loading-overlay {
  background: rgba(247, 245, 239, .8) !important;
  backdrop-filter: blur(5px);
}
body app-questionnaire .loading-spinner,
body app-questionnaire .loading-spinner-lg {
  border-top-color: var(--hd-coral) !important;
}

/* The category selection screens shown before the detailed questionnaire. */
body app-simplequestions #jobTypePage {
  min-height: calc(100vh - 150px);
  padding: 0 0 70px;
  background: var(--hd-cream) !important;
}
body app-simplequestions .container {
  display: block !important;
  width: min(calc(100% - 40px), 960px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(23px, 4vw, 52px) !important;
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--hd-shadow) !important;
  color: var(--hd-ink) !important;
}
body app-simplequestions .container::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 20px;
  border-radius: 99px;
  background: var(--hd-coral);
}
body app-simplequestions .caption {
  display: block;
  color: var(--hd-ink) !important;
  font: 740 clamp(1.9rem, 3.9vw, 3rem)/1.12 Inter, 'Avenir Next', Avenir, 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: -.052em !important;
  margin: 0 auto 10px !important;
  text-align: center;
}
body app-simplequestions .second_caption {
  display: block;
  color: var(--hd-muted) !important;
  font-size: clamp(.97rem, 1.5vw, 1.1rem) !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  max-width: 620px;
  margin: 0 auto 31px !important;
}
body app-simplequestions #answers {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body app-simplequestions .answer-row { display: contents !important; }
body app-simplequestions .answer {
  display: flex !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 172px !important;
  height: auto !important;
  padding: 22px 20px !important;
  background: #fff !important;
  border: 1px solid #d5e0d3 !important;
  border-radius: 15px !important;
  color: var(--hd-ink) !important;
  box-shadow: none !important;
  text-align: center !important;
  transform: none !important;
}
body app-simplequestions .answer:hover,
body app-simplequestions .answer:focus-visible,
body app-simplequestions .answer.active {
  background: #f1f7ea !important;
  border-color: #7ea98a !important;
  box-shadow: 0 12px 28px rgba(34, 81, 55, .1) !important;
  transform: translateY(-3px) !important;
}
body app-simplequestions .answer:focus-visible { outline: 3px solid var(--hd-coral) !important; }
body app-simplequestions .answer-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  width: 100%;
  overflow: visible !important;
  gap: 0 !important;
}
body app-simplequestions .answer-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: #e9f2e2;
}
body app-simplequestions .answer:nth-child(3n + 2) .answer-content::before { background: #f8ede4; }
body app-simplequestions .answer:nth-child(3n) .answer-content::before { background: #e6eeea; }
body app-simplequestions .answer-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 48px !important;
  height: 48px !important;
  margin: 11px 0 27px;
  object-fit: contain;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(23%) sepia(17%) saturate(1110%) hue-rotate(108deg) brightness(90%) contrast(91%) !important;
}
body app-simplequestions .answer-text {
  display: block !important;
  color: var(--hd-ink) !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
body app-simplequestions .buttonContainer {
  justify-content: flex-start !important;
  width: 100%;
  margin: 27px 0 0 !important;
}
body app-simplequestions .back-button {
  flex: 0 0 auto !important;
  min-width: 130px;
  min-height: 47px;
  margin: 0 !important;
  padding: 10px 20px !important;
  background: transparent !important;
  border: 1px solid #aac4b3 !important;
  border-radius: 10px !important;
  color: var(--hd-ink) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body app-simplequestions .back-button:hover {
  background: #ecf3e7 !important;
  border-color: #729d7e !important;
}

body app-detailquestions .questionnaire-page { background: var(--hd-cream) !important; }
body app-detailquestions .questionnaire-container {
  background: transparent !important;
  color: var(--hd-ink) !important;
  max-width: 760px !important;
}
body app-detailquestions .q-title {
  font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
  font-weight: 750 !important;
  line-height: 1.14 !important;
  letter-spacing: -.05em !important;
}
body app-detailquestions .q-subtitle,
body app-detailquestions .q-progress-text { color: var(--hd-muted) !important; }
body app-detailquestions .q-progress-bar { background: #e1e9dc !important; border-radius: 999px !important; }
body app-detailquestions .q-progress-fill { background: var(--hd-coral) !important; border-radius: 999px !important; }
body app-detailquestions .q-card {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 17px !important;
  box-shadow: var(--hd-shadow) !important;
}
body app-detailquestions .q-card.active {
  border-color: #88ae8f !important;
  box-shadow: 0 0 0 3px rgba(97, 151, 105, .13), var(--hd-shadow) !important;
}
body app-detailquestions .q-card.answered { border-left: 3px solid #6c9d76 !important; }
body app-detailquestions .q-card.hidden {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body app-detailquestions .q-card-number {
  background: var(--hd-lime) !important;
  color: var(--hd-deep) !important;
  border-color: #b6cda8 !important;
}
body app-detailquestions .q-card.active .q-card-number,
body app-detailquestions .q-card.answered .q-card-number {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: #fff !important;
}
body app-detailquestions .q-card-label { color: var(--hd-ink) !important; font-weight: 730 !important; }
body app-detailquestions :is(.q-option-btn, .q-checkbox-item) {
  background: #fff !important;
  border: 1px solid #ccdacb !important;
  border-radius: 11px !important;
  color: var(--hd-ink) !important;
}
body app-detailquestions :is(.q-option-btn, .q-checkbox-item):hover {
  border-color: #80a98a !important;
  background: #f1f7ea !important;
}
body app-detailquestions :is(.q-option-btn.selected, .q-checkbox-item.checked) {
  border-color: var(--hd-ink) !important;
  background: var(--hd-ink) !important;
  color: #fff !important;
}
body app-detailquestions .q-checkbox-item input[type=checkbox] {
  display: inline-block !important;
  width: 17px;
  height: 17px;
  margin: 0 5px 0 0;
  accent-color: var(--hd-ink);
}
body app-detailquestions .q-checkbox-item.checked input[type=checkbox] { accent-color: var(--hd-lime); }
body app-detailquestions .q-checkbox-mark { display: none !important; }
body app-detailquestions .q-counter-btn {
  background: #fff !important;
  border-color: #b8cabc !important;
  color: var(--hd-ink) !important;
  border-radius: 9px !important;
}
body app-detailquestions .q-counter-btn:hover {
  background: #e9f2e2 !important;
  border-color: #719d7c !important;
}
body app-detailquestions :is(.q-number-input, .q-select, .q-textarea) {
  background: #fff !important;
  border: 1px solid #b8cabc !important;
  border-radius: 10px !important;
  color: var(--hd-ink) !important;
}
body app-detailquestions :is(.q-number-input, .q-select, .q-textarea):focus {
  border-color: #538d68 !important;
  box-shadow: 0 0 0 4px rgba(83, 141, 104, .15) !important;
}
body app-detailquestions .q-price-label { color: #4e7558 !important; }
body app-detailquestions .q-price-amount { color: var(--hd-ink) !important; }
body app-detailquestions .q-price-card {
  background: #eaf2e3 !important;
  border-color: #aec9ad !important;
  border-radius: 13px !important;
}
body app-detailquestions .q-btn-submit {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: white !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 20px rgba(23, 61, 54, .17) !important;
}
body app-detailquestions .q-btn-back {
  background: transparent !important;
  border-color: #aac4b3 !important;
  color: var(--hd-ink) !important;
  border-radius: 11px !important;
}

/* Provider onboarding stages. */
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .step-indicator {
  background: #edf2e7 !important;
  border-radius: 13px !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .step-num {
  background: #dceabb !important;
  color: var(--hd-deep) !important;
  border-color: #dceabb !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .active-step .step-num {
  background: var(--hd-ink) !important;
  color: white !important;
  border-color: var(--hd-ink) !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) :is(.btn, button[type=submit]) {
  border-radius: 11px !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) :is(.btn-primary, button[type=submit]) {
  background: var(--hd-ink) !important;
  color: white !important;
  border-color: var(--hd-ink) !important;
}
body app-apply-personal-data .field-doc-upload {
  background: #f4f8ee !important;
  border: 1px dashed #a6bfa9 !important;
  border-radius: 11px !important;
}
body app-apply-service-wizard .lu-notice {
  background: #ecf4e5 !important;
  border-color: #bed4b9 !important;
  border-radius: 11px !important;
  color: var(--hd-ink) !important;
}

/* Account forms and the booking/payment surfaces. */
body app-register .register-wrapper,
body app-login form { max-width: 560px; margin-inline: auto; }
body app-login form {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 18px !important;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--hd-shadow);
}
body :is(app-register, app-login) :is(#signin, button[type=submit]) {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: white !important;
  border-radius: 11px !important;
}
body app-register .sp-notice {
  background: #edf4e7 !important;
  color: var(--hd-ink) !important;
  border-radius: 11px !important;
}
body :is(app-offer-review, app-provider-offer, app-userview)
  :is(.booking-card, .offer-card, .inquiry-card, .action-card,
  .scheduling-card, .profile-card, .review-form) {
  border-radius: 17px !important;
  border-color: var(--hd-line) !important;
}
body app-offer-review :is(.offer-price-display, .booking-agreed-price,
  .payment-info, .payment-saved-card, .payment-confirmed-card),
body app-provider-offer :is(.recap-price-row, .contract-card) {
  background: #edf4e7 !important;
  border-color: #b9d0b9 !important;
  border-radius: 12px !important;
  color: var(--hd-ink) !important;
}
body app-offer-review :is(.slot-radio, .action-option),
body app-provider-offer .slot-row {
  border-radius: 11px !important;
  border-color: var(--hd-line) !important;
}
body app-offer-review :is(.slot-radio, .action-option):hover {
  border-color: #80a98a !important;
  background: #f1f7ea !important;
}

@media (max-width: 700px) {
  body app-login form { margin: 16px; }
  body app-detailquestions .q-card { border-radius: 13px !important; }
  body app-root form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    font-size: 16px;
  }
  body app-simplequestions .container {
    width: min(calc(100% - 28px), 560px) !important;
    padding: 28px 22px !important;
    border-radius: 17px !important;
  }
  body app-simplequestions #answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body app-simplequestions .answer { min-height: 155px !important; padding: 18px 12px !important; }
  body app-detailquestions .questionnaire-page { padding-top: 12px !important; }
}

@media (max-width: 480px) {
  body app-questionnaire app-progress-bar { padding: 10px 19px 0; }
  body app-questionnaire app-progress-bar .progress-bar { margin: 26px auto 31px !important; }
  body app-simplequestions .container {
    width: calc(100% - 24px) !important;
    padding: 27px 18px !important;
  }
  body app-simplequestions .caption { font-size: 1.82rem !important; }
  body app-simplequestions .second_caption { margin-bottom: 23px !important; }
  body app-simplequestions #answers { grid-template-columns: 1fr; gap: 9px !important; }
  body app-simplequestions .answer {
    min-height: 104px !important;
    padding: 16px 18px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body app-simplequestions .answer-content {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 17px !important;
  }
  body app-simplequestions .answer-content::before {
    top: 50%;
    left: 0;
    width: 62px;
    height: 62px;
    transform: translateY(-50%);
  }
  body app-simplequestions .answer-image {
    width: 42px !important;
    height: 42px !important;
    margin: 0 10px;
    flex: none;
  }
  body app-simplequestions .answer-text { text-align: left; font-size: .96rem !important; }
  body app-detailquestions .q-title { font-size: 1.78rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  body app-root :is(button, .btn, .q-btn-submit, .q-btn-back) { transition: none !important; }
  body app-simplequestions .answer { transition: none !important; }
}