/* ============================================================
   Account Settings — Page layout: hero, tabs, container
   (resolved from AccountSettingsPage.module.scss + Tabs.module.scss + HelpSection.module.scss)
   ============================================================ */

/* ─── Page wrapper ──────────────────────────────────────────── */

.account-settings {
  background-color: #f8f9fb;
  min-height: 100vh;
}

/* ─── Hero (white background with heading + tabs) ───────────── */

.account-settings__hero {
  background-color: #ffffff;
  padding: 30px 0 0;
}

@media only screen and (max-width: 767px) {
  .account-settings__hero {
    padding: 0;
  }
}

/* ─── Container (page width + side padding) ─────────────────── */

.account-settings__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media only screen and (max-width: 767px) {
  .account-settings__container {
    padding: 0 16px;
  }
}

/* ─── Page heading (h1) ─────────────────────────────────────── */

.account-settings__heading {
  font-family: 'Parkinsans', Helvetica Neue, Arial;
  color: #22252a;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
  margin: 0 0 32px 0;
}

@media only screen and (max-width: 991px) {
  .account-settings__heading {
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
    margin-bottom: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .account-settings__heading {
    font-size: 24px;
    line-height: 28.8px;
    margin-bottom: 24px;
  }
}

/* ─── Content area below the tabs ───────────────────────────── */

.account-settings__content {
  padding: 24px 0 0;
}

/* ─── Tabs (horizontal scrollable nav) ──────────────────────── */

.settings-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #dfe1e6;
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-flow: row nowrap;
  gap: 24px;
}

.settings-tabs__tab {
  display: block;
  padding-bottom: 7px;
  border-bottom: 2px solid transparent;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 19.6px;
  color: #22252a;
  text-decoration: none;
}

.settings-tabs__tab:hover {
  color: #0daa76;
}

.settings-tabs__tab:focus-visible {
  outline: 2px solid #e40148;
  outline-offset: 2px;
}

.settings-tabs__tab--active {
  color: #0daa76;
  border-bottom-color: #0daa76;
}

@media only screen and (max-width: 991px) {
  .settings-tabs__tab {
    padding-bottom: 6px;
    font-weight: 400;
  }
}

/* ─── Help section (bottom of page) ─────────────────────────── */

.settings-help {
  padding: 32px 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  gap: 16px;
}

@media only screen and (max-width: 767px) {
  .settings-help {
    flex-flow: column nowrap;
    gap: 12px;
  }
}

.settings-help__text {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px;
  color: #22252a;
  margin: 0;
}

/* ============================================================
   Form controls used across all settings tabs
   (resolved from Input.module.scss, Label.module.scss, Switcher.module.scss,
    common-style/default-input mixin)
   ============================================================ */

/* ─── Shared card wrapper for settings sections ─────────────── */

.settings-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 22px 24px 32px;
}

.settings-card + .settings-card {
  margin-top: 16px;
}

.settings-card__title {
  font-family: 'Parkinsans', Helvetica Neue, Arial;
  color: #22252a;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6px;
  margin: 0 0 24px 0;
}

@media only screen and (max-width: 767px) {
  .settings-card__title {
    font-size: 24px;
    line-height: 28.8px;
  }
}

/* ─── Form field wrapper ────────────────────────────────────── */

.form-field {
  display: block;
}

.form-input-container {
  position: relative;
}

/* ─── Label ─────────────────────────────────────────────────── */

.form-label {
  display: block;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #22252a;
  margin-bottom: 8px;
}

.form-label--required::after {
  margin-left: 6px;
  color: #e40148;
  content: '*';
  font-weight: 700;
}

/* ─── Input (text/password/email/number) ────────────────────── */

.form-input {
  width: 100%;
  background-color: #ffffff;
  padding: 0 16px;
  color: #020408;
  border: 1px solid #dfe1e6;
  border-radius: 20px;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
}

.form-input:focus {
  border: 1px solid #9096a3;
  outline: none;
}

.form-input:disabled {
  background-color: #dfe1e6;
  cursor: not-allowed;
}

.form-input::selection {
  background-color: #dfe1e6;
  color: #22252a;
}

.form-input::-webkit-input-placeholder,
.form-input::placeholder {
  color: #9096a3;
  font-size: 14px;
  line-height: 19.6px;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: #020408 !important;
}

.form-input[type='search']::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}

/* Sizes */
.form-input--small {
  height: 31px;
  padding: 0 10px;
}

.form-input--medium {
  height: 40px;
}

.form-input--large {
  height: 48px;
}

/* Error variant */
.form-input--error {
  border-color: #e40148;
}

/* Inline blad pod polem */
.form-input__error {
  color: #e40148;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 12px;
  line-height: 16.8px;
  margin-top: 4px;
}

/* ─── Textarea ────────────────────── */

.form-textarea {
  width: 100%;
  background-color: #ffffff;
  padding: 16px;
  color: #020408;
  border: 1px solid #dfe1e6;
  border-radius: 20px;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  height: 9em;
}

.form-textarea:focus {
  border: 1px solid #9096a3;
  outline: none;
}

.form-textarea:disabled {
  background-color: #dfe1e6;
  cursor: not-allowed;
}

.form-textarea::selection {
  background-color: #dfe1e6;
  color: #22252a;
}

.form-textarea::-webkit-input-placeholder,
.form-textarea::placeholder {
  color: #9096a3;
  font-size: 14px;
  line-height: 19.6px;
}

.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus,
.form-textarea:-webkit-autofill:active {
  -webkit-text-fill-color: #020408 !important;
}

.form-textarea[type='search']::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}

/* Sizes */
.form-textarea--small {
  height: 31px;
  padding: 0 10px;
}

.form-textarea--medium {
  height: 40px;
}

.form-textarea--large {
  height: 48px;
}

/* Error variant */
.form-textarea--error {
  border-color: #e40148;
}

/* Inline blad pod polem */
.form-textarea__error {
  color: #e40148;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 12px;
  line-height: 16.8px;
  margin-top: 4px;
}

/* ─── Switcher (toggle) ─────────────────────────────────────── */

.switcher {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  gap: 16px;
}

.switcher__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  outline: none;
}

.switcher__input:focus-visible ~ .switcher__track {
  outline: 2px solid #22252a;
  outline-offset: 2px;
}

.switcher__track {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 20px;
  background-color: #9096a3;
  transition:
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.switcher__track:hover {
  filter: brightness(0.92);
}

.switcher__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(2, 4, 8, 0.3);
  transition:
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.switcher__label {
  flex: 1;
  min-width: 0;
  font-family: 'DMSans', Helvetica Neue, Arial;
  color: #22252a;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px;
  pointer-events: none;
}

/* "On" state — driven by checked attribute on the input + JS toggle class on label */
.switcher__input:checked ~ .switcher__track,
.switcher--on .switcher__track {
  background-color: #0daa76;
}

.switcher__input:checked ~ .switcher__track .switcher__thumb,
.switcher--on .switcher__track .switcher__thumb {
  transform: translateX(16px);
}

.switcher__input:checked ~ .switcher__label,
.switcher--on .switcher__label {
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .switcher,
  .switcher__track,
  .switcher__thumb {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .switcher__track {
    border: 2px solid #22252a;
  }

  .switcher__thumb {
    border: 2px solid #22252a;
  }
}

/* ============================================================
   Settings — User Data Tab
   (resolved from UserDataTab.module.scss)
   ============================================================ */

.user-data__field {
  max-width: 440px;
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .user-data__field {
    max-width: 100%;
  }
}

.user-data__hint {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #9096a3;
  margin: 6px 0 0 0;
}

.user-data__save {
  margin-top: 8px;
}

/* ─── Email row (input + "Zmien" button) ────────────────────── */

.user-data__email-row {
  margin-top: 40px;
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-flow: row nowrap;
  gap: 16px;
}

@media only screen and (max-width: 767px) {
  .user-data__email-row {
    align-items: flex-start;
    flex-flow: column nowrap;
    gap: 12px;
  }
}

.user-data__email-input {
  flex: 1;
  max-width: 440px;
}

@media only screen and (max-width: 767px) {
  .user-data__email-input {
    max-width: 100%;
    width: 100%;
  }
}

/* ─── Verified row (green checkmark + label) ────────────────── */

.user-data__verified-row {
  margin-top: 8px;
  color: #0daa76;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  gap: 6px;
}

.user-data__verified-icon {
  flex-shrink: 0;
}

.user-data__verified-text {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #0daa76;
}

/* ─── Delete-account card ───────────────────────────────────── */

.user-data__delete-card {
  padding: 16px 24px;
  margin-top: 16px;
}

.user-data__delete-link {
  background: none;
  border: none;
  padding: 0;
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #e40148;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}

.user-data__delete-link:hover {
  opacity: 0.8;
}

.user-data__delete-link:focus-visible {
  outline: 2px solid #e40148;
  outline-offset: 2px;
}

/* ============================================================
   Settings — Login Tab
   (resolved from LoginTab.module.scss + ProviderRow.module.scss)
   ============================================================ */

.login-tab__field {
  max-width: 440px;
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .login-tab__field {
    max-width: 100%;
  }
}

.login-tab__submit {
  margin-top: 8px;
}

.login-tab__description {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #22252a;
  margin: 0 0 16px 0;
}

.login-tab__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  gap: 16px;
}

/* ─── Provider row (icon + email + connect/disconnect button) ─── */

.provider-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  gap: 16px;
}

.provider-row__icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dfe1e6;
  background-color: #ffffff;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.provider-row__icon {
  width: 24px;
  height: 24px;
}

.provider-row__email {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px;
  color: #22252a;
}

/* Form wokol przycisku "Usun" — nie powinien dodawac wlasnego layoutu */
.provider-row__disconnect-form {
  margin: 0;
  display: inline-flex;
}

/* ============================================================
   Settings — Notifications Tab
   (resolved from NotificationsTab.module.scss)
   ============================================================ */

.notifications-tab .settings-card__title {
  /* Override default settings-card title bottom margin — section uses tighter spacing */
  margin-bottom: 11px;
}

.notifications-tab__subtitle {
  font-family: 'DMSans', Helvetica Neue, Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px;
  color: #22252a;
  margin: 0 0 24px 0;
}

.notifications-tab__list {
  max-width: 540px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-flow: column nowrap;
  gap: 16px;
}

.notifications-tab__item {
  /* Each switcher sits in its own <li>; the label inside controls layout. */
}

.notifications-tab__submit {
  margin-top: 24px;
}