/* =========================================
   SETTINGS PAGE
========================================= */

.settings-page {
  max-width: 1120px;

  margin:
    24px auto
    48px;

  padding:
    0 20px;
}


/* =========================================
   HEADER
========================================= */

.settings-header {
  margin-bottom:
    24px;
}


.settings-eyebrow {
  margin:
    0 0 4px 0;

  color:
    var(--orange-dark);

  font-size:
    0.7rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.settings-title {
  margin:
    0 0 4px 0;

  color:
    var(--navy);

  font-size:
    2rem;

  font-weight:
    850;

  line-height:
    1.1;
}


.settings-subtitle {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.92rem;

  line-height:
    1.5;
}


/* =========================================
   ERROR
========================================= */

.settings-error {
  margin-bottom:
    20px;
}


/* =========================================
   MAIN GRID
========================================= */

.settings-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items:
    start;

  gap:
    20px;

  width:
    100%;
}


.settings-column {
  display:
    flex;

  flex-direction:
    column;

  gap:
    20px;

  min-width:
    0;
}


/* =========================================
   SETTINGS CARD
========================================= */

.settings-card {
  width:
    100%;

  padding:
    20px;

  box-sizing:
    border-box;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  box-shadow:
    0 5px 16px
    rgba(
      15,
      23,
      42,
      0.06
    );
}


.settings-card-title {
  margin:
    0 0 8px 0;

  color:
    var(--navy);

  font-size:
    1.05rem;

  font-weight:
    850;
}


.settings-card-description {
  margin:
    0 0 16px 0;

  color:
    var(--muted);

  font-size:
    0.86rem;

  line-height:
    1.5;
}


.settings-card-text {
  margin:
    0 0 16px 0;

  color:
    #475569;

  font-size:
    0.86rem;

  line-height:
    1.55;
}


/* =========================================
   ACTIONS
========================================= */

.settings-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    14px;
}


.settings-actions
.button {
  min-height:
    38px;

  margin:
    0;

  border-radius:
    8px;

  font-size:
    0.78rem;

  font-weight:
    750;
}


/* =========================================
   ACCOUNT BUTTONS
========================================= */

.settings-actions
.button.is-link {
  color:
    var(--navy);

  background-color:
    var(--orange);

  border:
    1px solid
    var(--orange);
}


.settings-actions
.button.is-link:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


.settings-actions
.button.is-light {
  color:
    var(--navy);

  background-color:
    #ffffff;

  border:
    1px solid
    #cbd5e1;
}


.settings-actions
.button.is-light:hover {
  background-color:
    #f8fafc;

  border-color:
    #94a3b8;
}


/* =========================================
   NOTIFICATION OPTIONS
========================================= */

.settings-notification-options {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.settings-notification-option {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--navy);

  font-size:
    0.86rem;

  font-weight:
    650;

  cursor:
    pointer;
}


.settings-notification-option
input {
  width:
    16px;

  height:
    16px;

  accent-color:
    var(--orange);
}


/* =========================================
   PUSH NOTIFICATIONS
========================================= */

.settings-divider {
  width:
    100%;

  height:
    1px;

  margin:
    20px 0;

  background-color:
    #e2e8f0;
}


.settings-push-section {
  width:
    100%;
}


.settings-subheading {
  margin:
    0 0 8px 0;

  color:
    var(--navy);

  font-size:
    0.92rem;

  font-weight:
    800;
}


.settings-push-section
.button.is-info {
  min-height:
    38px;

  color:
    #ffffff;

  background-color:
    var(--blue);

  border:
    1px solid
    var(--blue);

  border-radius:
    8px;

  font-size:
    0.78rem;

  font-weight:
    750;
}


.settings-push-section
.button.is-info:hover {
  background-color:
    var(--blue-dark);

  border-color:
    var(--blue-dark);
}


.settings-push-section
.button.is-info:disabled {
  opacity:
    0.65;

  cursor:
    not-allowed;
}


.settings-push-status {
  margin:
    9px 0 0;

  color:
    var(--muted);

  font-size:
    0.76rem;

  line-height:
    1.4;
}


.settings-push-status.is-success {
  color:
    #15803d;

  font-weight:
    700;
}


.settings-push-status.is-error {
  color:
    #b42318;

  font-weight:
    700;
}


/* =========================================
   PRIVACY
========================================= */

.settings-checkbox-row {
  margin-bottom:
    10px;
}


.settings-checkbox-row
.checkbox {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--navy);

  font-size:
    0.86rem;

  font-weight:
    650;
}


.settings-checkbox-row
input {
  width:
    16px;

  height:
    16px;

  accent-color:
    var(--orange);
}


.settings-help {
  margin:
    14px 0 0;

  color:
    var(--light-muted);

  font-size:
    0.72rem;

  line-height:
    1.45;
}


/* =========================================
   BUSINESS VERIFICATION
========================================= */

.settings-verification-success {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin:
    0 0 14px;

  padding:
    6px 10px;

  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #86efac;

  border-radius:
    999px;

  font-size:
    0.76rem;

  font-weight:
    800;
}


.settings-verification-error {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin:
    0 0 14px;

  padding:
    6px 10px;

  color:
    #991b1b;

  background-color:
    #fff1f2;

  border:
    1px solid
    #fecaca;

  border-radius:
    999px;

  font-size:
    0.76rem;

  font-weight:
    800;
}


.settings-business-details {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.settings-business-details
p {
  margin:
    0;

  color:
    #475569;

  font-size:
    0.84rem;

  line-height:
    1.45;
}


.settings-business-details
strong {
  color:
    var(--navy);
}


/* =========================================
   DANGER ZONE
========================================= */

.settings-danger-card {
  margin-top:
    20px;

  border-color:
    #fecaca;
}


.settings-danger-title {
  color:
    var(--red);
}


.settings-danger-warning {
  padding:
    14px 16px;

  margin-top:
    14px;

  color:
    #92400e;

  background-color:
    #fff7ed;

  border:
    1px solid
    #fed7aa;

  border-radius:
    9px;
}


.settings-danger-warning
p {
  margin:
    0;

  font-size:
    0.8rem;

  line-height:
    1.5;
}


.settings-danger-warning
p + p {
  margin-top:
    3px;
}


.settings-danger-card
.button.is-danger {
  color:
    #ffffff;

  background-color:
    var(--red);

  border:
    1px solid
    var(--red);
}


.settings-danger-card
.button.is-danger:hover {
  background-color:
    var(--red-dark);

  border-color:
    var(--red-dark);
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {

  .settings-page {
    max-width:
      760px;
  }


  .settings-grid {
    grid-template-columns:
      1fr;
  }


  .settings-column {
    gap:
      16px;
  }


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

}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .settings-page {
    margin:
      12px auto
      32px;

    padding:
      0 12px;
  }


  .settings-header {
    margin-bottom:
      18px;
  }


  .settings-title {
    font-size:
      1.65rem;
  }


  .settings-card {
    padding:
      16px;
  }


  .settings-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .settings-actions
  .button {
    width:
      100%;
  }


  .settings-push-section
  .button {
    width:
      100%;
  }

}