/* Account page + legal pages. Builds on categories.css (.cat-page, .cat-bar). */

.acct-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #e6f3ec;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--bl-radius-pill, 10px);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.acct-back:hover { background: #fff; color: var(--bl-brown-dark, #0f2e21); border-color: #fff; }

.acct-main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(18px, 4vh, 36px) 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acct-profile {
  text-align: center;
  padding-bottom: 4px;
}

.acct-profile > i {
  font-size: clamp(3.2rem, 12vw, 4.4rem);
  line-height: 1;
  color: #0f2e21;
}

.acct-profile h1 {
  margin: 6px 0 0;
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 400;
  word-break: break-word;
}

.acct-profile p {
  margin: 2px 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.9rem;
  color: #4f6a5d;
  word-break: break-all;
}

.acct-section {
  padding: 16px 18px;
  background: var(--bl-white, rgba(248,253,250, 0.92));
  border: 1px solid #d7ebe0;
  border-radius: var(--bl-radius-lg, 16px);
  box-shadow: var(--bl-shadow-card, 0 2px 6px rgba(15,46,33, 0.12));
}

.acct-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 400;
  color: #0f2a1f;
}

.acct-section h2 i { color: #2b7355; font-size: 1.05rem; }

.acct-empty {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  color: #5f786c;
}

.acct-list,
.acct-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}

.acct-list li { padding: 8px 0; border-top: 1px solid #d7ebe0; }
.acct-list li:first-child { border-top: 0; }

.acct-links li + li { border-top: 1px solid #d7ebe0; }

.acct-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  font-size: 1rem;
  color: #0f2a1f;
  text-decoration: none;
  transition: background 0.2s;
}

.acct-links a:hover,
.acct-links a:focus-visible { background: #dcefe4; color: #0f2a1f; }

.acct-links i { color: #2b7355; }

/* log out lives at the very bottom */
.acct-logout {
  margin: auto 0 0; /* pushes it to the very bottom of the page */
  padding-top: 16px;
}

.acct-logout button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--bl-grad-brown, #1f5a41);
  border: 0;
  border-radius: var(--bl-radius-pill, 8px);
  box-shadow: var(--bl-shadow-btn, none);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.acct-logout button:hover { background: var(--bl-grad-brown-hover, #0c2419); transform: translateY(-2px); box-shadow: var(--bl-shadow-btn-hover, none); }

/* edit profile button (under the name/email) */
.acct-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 22px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f5a41;
  background: #fff;
  border: 2px solid #1f5a41;
  border-radius: var(--bl-radius-pill, 25px);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.acct-edit i { font-size: 1rem; line-height: 1; }

.acct-edit:hover,
.acct-edit:focus-visible { background: #1f5a41; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,46,33, 0.22); }

.acct-flash {
  padding: 10px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  color: #2f5d2a;
  background: #e8f5e2;
  border: 1px solid #b9dcae;
  border-radius: 8px;
}

/* edit profile form */
.acct-form { display: flex; flex-direction: column; gap: 14px; }

.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.acct-field label {
  display: block;
  margin-bottom: 5px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #0f2a1f;
}

.acct-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  color: #222;
  background: #f3faf6;
  border: 1.5px solid #bcd8c9;
  border-radius: var(--bl-radius-sm, 6px);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.acct-field input:focus { border-color: #1f5a41; box-shadow: 0 0 0 3px rgba(31,90,65, 0.18); }

.acct-field-error {
  margin: 5px 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  color: #b30000;
}

.acct-error {
  padding: 10px 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.9rem;
  color: #8b1a1a;
  background: #fdeaea;
  border: 1px solid #f0b9b9;
  border-radius: 6px;
}

.acct-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 4px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--bl-grad-brown, #1f5a41);
  border: 0;
  border-radius: var(--bl-radius-pill, 8px);
  box-shadow: var(--bl-shadow-btn, none);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.acct-save:hover { background: var(--bl-grad-brown-hover, #0c2419); transform: translateY(-2px); box-shadow: var(--bl-shadow-btn-hover, none); }

.acct-cancel {
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f5a41;
  text-decoration: underline;
}

@media (max-width: 420px) {
  .acct-row { grid-template-columns: 1fr; }
}
/* section titles inside the edit-profile cards + password eye */
.acct-form-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  color: #0f2a1f;
}

.acct-form-title i { color: #2b7355; font-size: 1.05rem; }

.acct-pass { position: relative; }
.acct-pass input { padding-right: 46px; }

.acct-eye {
  position: absolute;
  top: 0;
  right: 2px;
  width: 42px;
  height: 44px;
  padding: 0;
  color: #0f2a1f;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* help center FAQ */
.acct-links a span { display: inline-flex; align-items: center; gap: 10px; }
.acct-links a span i { color: #2b7355; }

.acct-faq details { border-top: 1px solid #d7ebe0; }
.acct-faq details:first-child { border-top: 0; }

.acct-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #0f2a1f;
  cursor: pointer;
  list-style: none;
}

.acct-faq summary::-webkit-details-marker { display: none; }

.acct-faq summary::after {
  content: "\F282"; /* bootstrap-icons chevron-down */
  font-family: 'bootstrap-icons';
  color: #2b7355;
  transition: transform 0.2s;
}

.acct-faq details[open] summary::after { transform: rotate(180deg); }

.acct-faq p {
  margin: 0 0 14px;
  padding: 0 2px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1d3a2e;
}
/* legal pages */
.acct-legal-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 400;
  text-transform: uppercase;
}

.acct-legal h2 { font-size: 1.05rem; }

.acct-legal p {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1d3a2e;
}

@media (min-width: 700px) {
  .acct-main { max-width: 720px; gap: 20px; padding-top: 40px; }
  .acct-back { font-size: 1rem; padding: 8px 16px; }
  .acct-section { padding: 20px 24px; }
  .acct-section h2 { font-size: 1.3rem; }
  .acct-links a { font-size: 1.1rem; }
  .acct-logout button { height: 54px; font-size: 1.1rem; }
}


/* headings in the same bold Josefin Sans as "WELCOME TO BREWLINK!" */
.acct-profile h1,
.acct-section h2,
.acct-form-title,
.acct-legal-title,
.acct-legal h2,
.acct-menu-name { font-weight: 700; }

.acct-empty,
.acct-list,
.acct-legal p,
.acct-faq p { font-size: 1rem; }
.acct-field label { font-size: 0.82rem; }
.acct-profile p { font-size: 0.98rem; }

/* ---------- order history: each order opens its ticket ---------- */
.acct-orders li { padding: 0; }

.acct-orders a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  color: #0f2a1f;
  text-decoration: none;
  transition: background 0.2s;
}

.acct-orders a:hover,
.acct-orders a:focus-visible { background: #dcefe4; color: #0f2a1f; }

.acct-order-main { display: grid; gap: 1px; min-width: 0; }
.acct-order-main small { color: #5f786c; font-size: 0.82rem; }
.acct-order-side { display: grid; justify-items: end; gap: 3px; }

.acct-status {
  padding: 1px 10px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
}

.acct-status--received  { color: #8a5a0a; background: #fdf1d6; border-color: #efcd7d; }
.acct-status--preparing { color: #1f5f8b; background: #e3f0fa; border-color: #9cc7e6; }
.acct-status--ready     { color: #1f6b2c; background: #e3f4e6; border-color: #86ca92; }
.acct-status--completed { color: #3c554a; background: #e3f1e9; border-color: #c6d8ce; }
.acct-status--cancelled { color: #a3221b; background: #fde8e6; border-color: #eaa39d; }

/* ---------- Favorites: drinks saved from their View page ---------- */
.fav-message {
  margin: 0;
  padding: 10px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 12px;
}

.fav-message--success { color: #1f6b2c; background: #e3f4e6; }
.fav-message--error { color: #a3221b; background: #fde8e6; }

.fav-drink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 !important;
}

.fav-drink-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #0f2a1f;
  text-decoration: none;
}

.fav-drink-main:hover strong { text-decoration: underline; }

/* a little cup, filled with the drink's colour */
.fav-swatch {
  flex: none;
  width: 34px;
  height: 44px;
  background: linear-gradient(to top, var(--drink) 78%, transparent 78%);
  border: 2px solid rgba(15,46,33, 0.35);
  border-top-width: 3px;
  border-radius: 3px 3px 10px 10px;
}

.fav-drink-text { display: grid; gap: 3px; min-width: 0; }
.fav-drink-text strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.fav-drink-text small { font-size: 0.8rem; color: #5f786c; line-height: 1.35; }

.fav-drink-side { display: grid; justify-items: end; gap: 6px; flex: none; }
.fav-drink-side em { font-size: 0.78rem; font-style: normal; font-weight: 700; color: #a3221b; }
.fav-drink-actions { display: flex; gap: 6px; }
.fav-drink-actions form { margin: 0; }

.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.fav-btn:disabled { opacity: 0.45; cursor: default; }
.fav-btn--go { color: #fff; background: var(--bl-grad-brown, #1f5a41); }
.fav-btn--remove { padding: 6px 9px; color: #a3221b; background: #fff; box-shadow: inset 0 0 0 1.5px #eaa39d; }
.fav-btn--remove:hover { background: #fde8e6; }

@media (max-width: 480px) {
  .fav-drink { flex-direction: column; align-items: stretch; }
  .fav-drink-side { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

/* ---------- phones: bigger things to tap and read ---------- */
@media (max-width: 560px) {
  .acct-back { padding: 10px 18px; font-size: 0.92rem; }
  .acct-cancel { display: block; padding: 12px 0; }
  .acct-status { padding: 3px 11px; font-size: 0.8rem; }
  .acct-field label { font-size: 0.86rem; }
  .acct-field label small { font-size: 0.9em; text-transform: none; }
  .acct-field input { height: 48px; }

  .fav-btn { min-height: 42px; padding: 8px 16px; font-size: 0.92rem; }
  .fav-btn--remove { justify-content: center; min-width: 42px; padding: 8px; }
}