/*
 * La Ruota 2026 design: the account pages (include/page_user_account.php and page_user_history.php
 * over styles_u.css). Loaded by header_common.php, with lr-p-user on <body>.
 *
 * The handoff has no account design: the pages keep their layout, fields and actions and take the
 * brand's light ground, white cards, type and pills. The older sheet's blue becomes red.
 */

body.lr-p-user {
  background: var(--lr-ground);
}

/* the older sheet kept the content under a fixed 85px header; the header is in the flow now */
body.lr-p-user .user {
  margin-top: 0;
  padding-top: 32px;
  padding-bottom: 80px;
}

body.lr-p-user .user h3 {
  margin-bottom: 12px;
  color: var(--lr-ink);
  font-size: 22px;
  letter-spacing: .04em;
}

body.lr-p-user .user .box {
  padding: 24px 28px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 70px -40px rgba(60, 40, 15, .35);
}

/* profile fields: a label over its value; while editing, the handoff's warm field */
body.lr-p-user .user .iarea .b {
  color: var(--lr-muted);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.lr-p-user .user .iarea input:not(:disabled),
body.lr-p-user .user .iarea select:not(:disabled) {
  border: 1px solid transparent;
  border-radius: 12px;
  background: #F6F3EF;
  color: var(--lr-ink);
  transition: border-color .2s, background .2s;
}

body.lr-p-user .user .iarea input:not(:disabled):focus,
body.lr-p-user .user .iarea select:not(:disabled):focus {
  border-color: var(--lr-gold);
  background: #fff;
}

body.lr-p-user .user .iarea input:disabled,
body.lr-p-user .user .iarea select:disabled {
  color: var(--lr-ink);
}

body.lr-p-user .user .chk-area .cbox.checked {
  border-color: var(--lr-red);
}

body.lr-p-user .user .chk-area .cbox.checked span,
body.lr-p-user .user .mradio span {
  background: var(--lr-red);
}

body.lr-p-user .user .mradio.checked .c {
  border-color: var(--lr-red);
}

body.lr-p-user .user .error {
  border: 0;
  border-radius: 12px;
  background: rgba(173, 29, 29, .08);
  color: var(--lr-red);
  font-style: normal;
}

/* actions: red pills, the secondary ones light */
body.lr-p-user .user .btn div {
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--lr-red);
  font-size: 12.5px;
  letter-spacing: .1em;
}

body.lr-p-user .user .btn.grey div {
  background: var(--lr-ground);
  color: var(--lr-ink);
}

/* rewards and saved addresses */
body.lr-p-user .user .rwst-text .det,
body.lr-p-user .user .rwst-text .rpdet span {
  color: var(--lr-red);
}

body.lr-p-user .user .rwst-text .rpdet h4 {
  color: var(--lr-ink);
}

body.lr-p-user .user .a-area .ai {
  border-bottom: 1px solid var(--lr-rule-soft);
}

body.lr-p-user .user .a-area .ai .left h4 {
  color: var(--lr-ink);
  font-size: 18px;
}

body.lr-p-user .user .a-area .ai .left div {
  color: var(--lr-muted);
  font-size: 14px;
}

/* order history */
body.lr-p-user .user .history .oh-item .dtc {
  border-top-color: var(--lr-rule-soft);
}

body.lr-p-user .user .history .oh-item .ya span {
  color: var(--lr-muted);
  font-size: 11px;
  letter-spacing: .14em;
}

body.lr-p-user .user .history .oh-item .ya div {
  color: var(--lr-ink);
  font-size: 17px;
}

/* an order's details (opens from Details) */
body.lr-p-user .uhpopup .a-top .b {
  color: var(--lr-muted);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.lr-p-user .uhpopup .a-top .y {
  color: var(--lr-ink);
}

body.lr-p-user .uhpopup .a-top .y a {
  color: var(--lr-red);
}

body.lr-p-user .uhpopup .a-bottom {
  margin: 8px 0 0;
  border-radius: 16px;
  background: #F6F3EF;
}

body.lr-p-user .uhpopup .i-area .item .ic {
  border-top-color: var(--lr-rule);
  color: var(--lr-body);
}

body.lr-p-user .uhpopup .i-area .item .ic.total {
  color: var(--lr-ink);
}

body.lr-p-user .uhpopup .btn div {
  border-radius: 999px;
  background: var(--lr-red);
}

@media (max-width: 760px) {
  body.lr-p-user .user {
    padding-top: 20px;
  }

  body.lr-p-user .user .box {
    padding: 18px 18px;
    border-radius: 20px;
  }
}