/* ===========================================================================
 * account.css — member auth UI chrome. Loaded site-wide via snap_header.
 *
 * The login/register popup + the /account page reuse the ORIGINAL xvideos
 * markup (#signin-popup-form / #signin-form-block / #premium-info-frame /
 * .x-overlay / .advantages / .form-horizontal …), so the scraped main-black CSS
 * does the heavy lifting. This file only adds what the snapshot CSS doesn't:
 * the overlay show/centre behaviour, a couple of layout guarantees, the header
 * button group + user menu, the settings drawer, the user centre, and member
 * section pages. Dark by default; light overrides under html.light.
 * ========================================================================= */

:root {
  --acc-red: #e1351f;
  --acc-red-d: #c12a16;
  --acc-card: #232323;
  --acc-line: #3a3a3a;
  --acc-text: #f1f1f1;
  --acc-muted: #9a9a9a;
}

.hidden { display: none !important; }
html.modal-open { overflow: hidden; }

/* ---- Header: login button group ---------------------------------------- */
#header-mobile-right { display: flex; align-items: center; gap: 4px; }
/* .auth-state wrappers are transparent to the flex row (display:contents), so
   the logged-out / logged-in buttons sit directly in #header-mobile-right with
   the original spacing; auth.js toggles .hidden to swap whole groups. */
.auth-state { display: contents; }
.head__login-btn-group { display: flex; align-items: center; gap: 6px; }
.head__btn--id { display: none; }
.head__btn--connection, .head__btn--join {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 4px;
  font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.head__btn--login { color: #fff; }
.head__btn--login:hover { color: var(--acc-red); }
.head__btn--join-free { background: var(--acc-red); color: #fff; }
.head__btn--join-free:hover { background: var(--acc-red-d); }
.head__btn--join { background: #f0a500; color: #1b1b1b; }
.head__btn--join:hover { filter: brightness(1.08); }
/* Logged-in Account button: user icon + "Account" label (scraped --settings
   button base supplies the rest). Chat button mirrors the head__btn icon size. */
.head__btn--settings--account { display: inline-flex; align-items: center; gap: 6px; }
.head__btn--settings--account .label { font-size: 13px; font-weight: 700; }
.account-chat-btn .icf-comments-o { font-size: 18px; }

/* ---- Settings / account popup (x-popup listing-settings-popup) ----------
   Look comes from the scraped main-black CSS, but that bundle doesn't ship a
   `.x-popup { display:none }` default — so we own the hidden→shown flip here and
   gate the logged-in-only account links. */
#site-settings-popup { display: none; }
#site-settings-popup.is-open { display: block; }
#site-settings-popup .auth-in { display: none; }
#site-settings-popup.is-logged-in .auth-in { display: block; }

/* ---- Login/register popup (overlay) ------------------------------------
   The overlay reuses the scraped .x-overlay (position:fixed; z-index:80001).
   We darken the backdrop, centre + scroll the .x-body box, and cap its width.
   The inner look (two columns, premium panel, forms, hr, social) is all from
   the scraped CSS via the original ids/classes. */
.account-modal.x-overlay {
  position: fixed; inset: 0; height: 100%; max-height: 100%;
  background: rgba(0,0,0,.82); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 80001;
}
.account-modal.x-overlay .x-body {
  position: relative; width: 100%; max-width: 880px; margin: 5vh auto; padding: 26px 22px;
  background: #1b1b1b; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
}
.account-modal .x-close { position: absolute; cursor: pointer; }

/* Column layout guarantee (don't depend on bootstrap float being present). */
#signin-popup-form .row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; }
#signin-popup-form .row > [class*="col-"] { box-sizing: border-box; padding: 0 14px; float: none; }
#signin-popup-form .info-pannel-frame { align-self: stretch; }

/* /account page (logged-out) box. */
#account-box { max-width: 880px; margin: 26px auto; }
body.account-page #signin-popup-form { background: var(--acc-card); border: 1px solid var(--acc-line); border-radius: 8px; padding: 24px 16px; }

/* Password show/hide eye (icon swap driven by auth.js .is-visible). */
.visible-password { display: flex; align-items: center; }
.visible-password input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; outline: none; }
.visible-password .btn-clear { order: 2; background: none; border: 0; cursor: pointer; color: var(--acc-muted); padding: 0 8px; }
.visible-password .icf-eye-blocked { display: none; }
.visible-password.is-visible .icf-eye { display: none; }
.visible-password.is-visible .icf-eye-blocked { display: inline; }

.account-lostpw-note { color: #ffb24d; font-size: 12px; margin: 8px 0 0; }
.js-auth-error { color: #ff6b5e; font-size: 13px; margin: 0 0 8px; }
.js-auth-error:empty { display: none; }
.js-auth-error.is-ok { color: #3fae5a; }

/* ---- Buttons used by the user centre ----------------------------------- */
.account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.account-btn--ghost { background: transparent; border: 1px solid var(--acc-line); color: var(--acc-text); }
.account-btn--ghost:hover { border-color: var(--acc-red); color: #fff; }

/* ---- /account: user centre --------------------------------------------- */
.account-center { max-width: 860px; margin: 28px auto; color: var(--acc-text); }
.account-center__head { display: flex; align-items: center; gap: 16px; background: var(--acc-card); border: 1px solid var(--acc-line); border-radius: 10px; padding: 20px; flex-wrap: wrap; }
.account-center__avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-red); color: #fff; font-size: 28px; font-weight: 700; text-transform: uppercase; }
.account-center__id { flex: 1 1 200px; min-width: 0; }
.account-center__name { font-size: 22px; margin: 0; }
.account-center__email { color: var(--acc-muted); margin: 4px 0 0; font-size: 14px; }
.account-center__since { color: var(--acc-muted); margin: 2px 0 0; font-size: 12px; }
.account-center__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.account-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; background: var(--acc-card); border: 1px solid var(--acc-line); border-radius: 10px; color: var(--acc-text); text-decoration: none; font-size: 14px; font-weight: 600; text-align: center; }
.account-tile:hover { border-color: var(--acc-red); color: #fff; }
.account-tile__icon { font-size: 30px; color: var(--acc-red); }

/* ---- Member section pages (liked / history / …) ------------------------ */
.member-section { max-width: 1100px; margin: 24px auto; color: var(--acc-text); }
.member-section__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.member-section__back { color: var(--acc-muted); text-decoration: none; font-size: 14px; }
.member-section__back:hover { color: var(--acc-red); }
.member-section__title { font-size: 22px; margin: 0; }
.member-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 20px; color: var(--acc-muted); text-align: center; background: var(--acc-card); border: 1px solid var(--acc-line); border-radius: 10px; }
.member-empty__icon { font-size: 44px; opacity: .5; }

/* ---- Light theme overrides --------------------------------------------- */
html.light { --acc-card: #fff; --acc-line: #e2e2e2; --acc-text: #1c1c1c; --acc-muted: #6a6a6a; }
/* Login 是文字按钮 → 亮主题深色;MY ACCOUNT 是红底按钮(#de2600)→ 文字保持白色 */
html.light .head__btn--login { color: #1c1c1c; }
html.light .head__btn--settings--account,
html.light .head__btn--settings--account .label,
html.light .head__btn--settings--account .icon-f { color: #fff; }

/* ---- Responsive (mobile / H5) ------------------------------------------ */
@media (max-width: 767px) {
  .head__login-btn-group .head__btn--connection, .head__login-btn-group .head__btn--join { display: none; }
  .head__btn--id { display: inline-flex; align-items: center; justify-content: center; }
  /* On mobile the Account button collapses to just the user icon (scraped CSS
     hides .label via .mobile-hide elsewhere; keep the flag chip visible). */
  .head__btn--settings--account .label { display: none; }

  /* Stack the popup: form full-width, premium panel hidden. */
  #signin-popup-form .row { flex-direction: column; }
  #signin-popup-form .row > [class*="col-"] { width: 100%; padding: 0; }
  #premium-info-frame { display: none; }
  .account-modal.x-overlay .x-body { margin: 3vh 8px; padding: 18px 14px; }
  #account-box { margin: 14px; }

  .account-center { margin: 16px; }
  .account-center__grid { grid-template-columns: repeat(2, 1fr); }
}