/*
 * Gupy redesign v2 — member settings (Ultimate Member account page and tabs) and
 * member profile (/profil/{login}/, VRD_Profile). The markup stays the legacy
 * one: this sheet aligns the page on the v2 grid (same width and side gutters as
 * the home: 80px, 160px from 1600px) and brings the v2 type and surfaces.
 * Scope: body.gv2-page-account / body.gv2-page-profile / body.gv2-page-list (a member list) (gv2_member_body_class(),
 * v2 only), so nothing here reaches v1.
 */

/* --------------------------------------------------------------------------
   Page width: the legacy .cactus-container (≈1180px, 20px inner padding)
   becomes the v2 container.
   -------------------------------------------------------------------------- */

body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container > .cactus-sidebar-control > .cactus-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 40px var(--gv2-gutter, 80px) 60px !important;
  box-sizing: border-box;
}
@media (min-width: 1600px) {
  body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container > .cactus-sidebar-control > .cactus-container {
    max-width: 1920px;
  }
}
@media (min-width: 2200px) {
  body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container > .cactus-sidebar-control > .cactus-container {
    max-width: 2400px;
  }
}
@media (max-width: 768px) {
  body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container > .cactus-sidebar-control > .cactus-container {
    padding-top: 24px !important;
  }
}
body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container :is(.cactus-row, .main-content-col, .main-content-col-body) {
  width: 100%;
  max-width: none;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  float: none;
}
body.gupy-v2:is(.gv2-page-account, .gv2-page-profile, .gv2-page-list) #cactus-body-container .main-content-col {
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Settings (Ultimate Member account)
   -------------------------------------------------------------------------- */

body.gupy-v2.gv2-page-account .um-account {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--gv2-font-body);
}
/* The account form (side tabs + panel) is capped at 1140px and centred: on a
   wide screen it sat in the middle of the v2 container with empty margins. */
body.gupy-v2.gv2-page-account .um-account .um-form > form {
  max-width: none !important;
  margin-inline: 0 !important;
  gap: 24px;
}
body.gupy-v2.gv2-page-account .um-account-side {
  flex: 0 0 260px;
  width: 260px !important;
}
body.gupy-v2.gv2-page-account .um-account-main {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}
/* Phones: Ultimate Member pads the form 0 8px, the v1 tab bar is pulled out
   by -25px and the panel gets no inner padding (text against its border).
   Everything goes back on the 20px page gutter, the panel is padded, and the
   email / username pair stacks. */
@media (max-width: 768px) {
  body.gupy-v2.gv2-page-account .um-account .um-form,
  body.gupy-v2.gv2-page-account .um-account .um-form > form {
    padding: 0 !important;
  }
  body.gupy-v2.gv2-page-account .vrd_account_mobile_tabs {
    margin: 0 0 12px !important;
    border-radius: var(--gv2-radius-lg);
  }
  body.gupy-v2.gv2-page-account .um-account-main {
    margin: 0 !important;
  }
  body.gupy-v2.gv2-page-account .um-account-tab {
    padding: 20px !important;
  }
  body.gupy-v2.gv2-page-account .um-account-tab .um-account-heading {
    margin: 0 0 16px !important;
  }
  body.gupy-v2.gv2-page-account .vrd_account_header .vrd_um_flex_row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  body.gupy-v2.gv2-page-account .vrd_account_header .vrd_um_flex_row > .um-field {
    width: 100% !important;
  }
  /* Services: search + All / None overflowed the panel. */
  body.gupy-v2.gv2-page-account .vrd_services_selector_header {
    flex-wrap: wrap;
    gap: 8px;
  }
  body.gupy-v2.gv2-page-account .vrd_services_selector_header > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  body.gupy-v2.gv2-page-account .vrd_services_selector_header .vrd_services_search {
    width: 100% !important;
    box-sizing: border-box;
  }
  body.gupy-v2.gv2-page-account .vrd_services_selector_header_actions {
    margin-left: 0 !important;
  }
}
body.gupy-v2.gv2-page-account .um-account-side,
body.gupy-v2.gv2-page-account .um-account-main {
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
}
body.gupy-v2.gv2-page-account .um-account-main .um-account-heading,
body.gupy-v2.gv2-page-account .um-account-main > .um-account-tab > h2,
body.gupy-v2.gv2-page-account .um-account-tab .um-account-heading {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-account .um-account-side li a {
  border-radius: var(--gv2-radius-md);
  font-weight: 700;
}
body.gupy-v2.gv2-page-account .um-field-label label {
  color: var(--gv2-text-muted);
  font-weight: 700;
}
body.gupy-v2.gv2-page-account .um-account input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"]),
body.gupy-v2.gv2-page-account .um-account select,
body.gupy-v2.gv2-page-account .um-account textarea {
  border-radius: var(--gv2-radius-sm) !important;
}
body.gupy-v2.gv2-page-account .um-account :is(input[type="submit"], .um-button) {
  border-radius: var(--gv2-radius-sm) !important;
  font-weight: 900 !important;
}

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */

body.gupy-v2.gv2-page-profile .vrd_profile_name {
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-profile .vrd_profile_meta {
  color: var(--gv2-text-muted);
}
body.gupy-v2.gv2-page-profile .vrd_profile_avatar {
  border-radius: var(--gv2-radius-lg);
}
body.gupy-v2.gv2-page-profile .vrd_lists_hub_tabs {
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
}
/* Handle · member since: each part stays on one line; on phones they stack
   (a wrapped "@gv2- / testeur · Membre depuis Oct / 2026" read badly). */
body.gupy-v2.gv2-page-profile .vrd_profile_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
body.gupy-v2.gv2-page-profile .vrd_profile_meta > span {
  white-space: nowrap;
}
@media (max-width: 768px) {
  body.gupy-v2.gv2-page-profile .vrd_profile_name {
    font-size: 26px;
  }
  body.gupy-v2.gv2-page-profile .vrd_profile_meta {
    flex-direction: column;
    align-items: flex-start;
  }
  body.gupy-v2.gv2-page-profile .vrd_profile_meta .vrd_profile_meta_sep {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Profile — tab bar: one line that scrolls sideways when the tabs do not fit
   (a 1024px screen cut the last ones off), the "New list" button kept in view
   at the end. gupy-v2-account.js scrolls the active tab into view.
   -------------------------------------------------------------------------- */

body.gupy-v2.gv2-page-profile .vrd_lists_hub_tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
body.gupy-v2.gv2-page-profile .vrd_lists_hub_tabs::-webkit-scrollbar {
  display: none;
}
body.gupy-v2.gv2-page-profile .vrd_lists_hub_tab {
  flex: 0 0 auto;
  white-space: nowrap;
}
body.gupy-v2.gv2-page-profile .vrd_lists_hub_tabs .vrd_profile_add_list_btn {
  position: sticky;
  right: 0;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  box-shadow: -14px 0 14px -4px var(--gv2-surface);
}
/* Phones: pinned, it would hide most of the bar; it scrolls with the tabs. */
@media (max-width: 640px) {
  body.gupy-v2.gv2-page-profile .vrd_lists_hub_tabs .vrd_profile_add_list_btn {
    position: static;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Profile — Notes & reviews, series tracking, followed programs: toolbar
   (search, Films / Series, sort, count) in the v2 filter bar style.
   -------------------------------------------------------------------------- */

body.gupy-v2.gv2-page-profile .vrd_reviews_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 24px 0;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  max-width: 460px;
  min-width: 0;
  margin: 0;
  padding: 0 6px 0 16px;
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  background: var(--gv2-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_wrap:focus-within {
  border-color: var(--vrd-primary);
  box-shadow: 0 0 0 3px rgba(219, 53, 117, 0.18);
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_icon {
  position: static;
  flex: 0 0 auto;
  transform: none;
  color: var(--gv2-text-dim);
  font-size: 15px;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_wrap:focus-within .vrd_reviews_search_icon {
  color: var(--vrd-primary);
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0 !important;
  padding: 0 10px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gv2-text);
  font-family: var(--gv2-font-body);
  font-size: 15px;
  font-weight: 700;
  outline: none;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search::placeholder {
  color: var(--gv2-text-dim);
  font-weight: 400;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_clear {
  position: static;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--gv2-text-muted);
  transform: none;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_search_clear:hover {
  background: var(--gv2-glass-bg);
  color: var(--gv2-text);
}
/* Films / Series: the filter bar's segmented group. */
body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  background: var(--gv2-surface);
}
body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle button {
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--gv2-text-muted);
  font-family: var(--gv2-font-body);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle button:hover:not(.is_active) {
  background: var(--gv2-glass-bg);
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle button.is_active {
  background: var(--vrd-primary);
  color: #fff;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_sort {
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 0 40px 0 16px;
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  background-color: var(--gv2-surface);
  color: var(--gv2-text);
  font-family: var(--gv2-font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body.gupy-v2.gv2-page-profile .vrd_reviews_sort option {
  background: var(--gv2-surface);
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-profile .vrd_reviews_count {
  align-self: center;
  margin-left: auto;
  color: var(--gv2-text-muted);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 640px) {
  body.gupy-v2.gv2-page-profile .vrd_reviews_search_wrap {
    flex-basis: 100%;
    max-width: none;
  }
  body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle {
    flex: 1 1 auto;
  }
  body.gupy-v2.gv2-page-profile .vrd_reviews_type_toggle button {
    flex: 1 1 auto;
    padding-inline: 10px;
  }
}

/* --------------------------------------------------------------------------
   Profile — the cards of those three tabs. Every card has the same height:
   poster fixed at the left, the text clamped to what fits; two per row (they
   were three, the text column was a few words wide). A review opened with
   "Voir plus" grows to its own height, alone.
   Review card body:  title (votes at the top right of the card)
                      rating · date
                      review (3 lines)
                      Voir plus ……………… Modifier
   -------------------------------------------------------------------------- */

body.gupy-v2.gv2-page-profile .vrd_profile_reviews_grid {
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  align-items: start;
  gap: 20px;
}
body.gupy-v2.gv2-page-profile .vrd_review_card {
  --gv2-rc-poster: 120px;
  position: relative;
  display: grid;
  grid-template-columns: var(--gv2-rc-poster) minmax(0, 1fr);
  gap: 20px;
  height: calc(var(--gv2-rc-poster) * 1.5 + 40px);
  margin: 0;
  padding: 20px;
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
  overflow: hidden;
  box-sizing: border-box;
}
body.gupy-v2.gv2-page-profile .vrd_review_card:has(.vrd_review_text.is_expanded) {
  height: auto;
}
body.gupy-v2.gv2-page-profile .vrd_review_poster {
  align-self: start;
  width: var(--gv2-rc-poster);
  margin: 0;
}
body.gupy-v2.gv2-page-profile .vrd_review_poster .picture-content {
  width: var(--gv2-rc-poster);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--gv2-radius-md);
  background: var(--gv2-surface-alt);
}
body.gupy-v2.gv2-page-profile .vrd_review_poster .picture-content img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  border-radius: 0;
  font-size: 0; /* a missing image shows no overflowing alt text */
}
/* The v1 poster notes (type, Gupy score, list button): the card says it all. */
body.gupy-v2.gv2-page-profile .vrd_review_poster .cactus-note {
  display: none !important;
}

/* Review body: a grid, so "Voir plus" and "Modifier" share the last row. */
body.gupy-v2.gv2-page-profile .vrd_review_card:not(.vrd_tracking_card) .vrd_review_content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "title  title"
    "rating date"
    "text   text"
    "more   edit";
  column-gap: 12px;
  row-gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.gupy-v2.gv2-page-profile .vrd_review_card .vrd_review_program_title {
  grid-area: title;
  margin: 0;
  padding-right: 120px; /* the votes */
  font-family: var(--gv2-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gv2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.gupy-v2.gv2-page-profile .vrd_review_card .vrd_review_program_title:hover {
  color: var(--vrd-primary);
}
body.gupy-v2.gv2-page-profile .vrd_review_user_rating {
  grid-area: rating;
  align-self: center;
  color: var(--vrd-primary);
  font-size: 16px;
  font-weight: 900;
}
body.gupy-v2.gv2-page-profile .vrd_review_date {
  grid-area: date;
  align-self: center;
  color: var(--gv2-text-dim);
  font-size: 12px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-profile .vrd_review_text {
  grid-area: text;
  align-self: start;
  margin: 2px 0 0;
  padding: 0 !important; /* the theme pads paragraphs (8px 0 7px) */
  color: var(--gv2-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* Exactly 3 whole lines. */
body.gupy-v2.gv2-page-profile .vrd_review_text:not(.is_expanded) {
  display: -webkit-box !important; /* the theme sets paragraphs to flow-root */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: calc(1.5em * 3);
  overflow: hidden;
}
body.gupy-v2.gv2-page-profile .vrd_review_text.is_expanded {
  display: block;
  max-height: none;
}
body.gupy-v2.gv2-page-profile .vrd_review_more {
  grid-area: more;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding: 0;
  color: var(--vrd-primary);
  font-weight: 700;
  text-align: left;
}
body.gupy-v2.gv2-page-profile .vrd_review_edit_btn {
  grid-area: edit;
  align-self: end;
  justify-self: end;
  margin: 0 !important;
  border-radius: 5px;
}
body.gupy-v2.gv2-page-profile .vrd_review_votes {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 6px;
  margin: 0;
}
body.gupy-v2.gv2-page-profile .vrd_review_votes .vrd_button {
  padding: 4px 10px;
  font-size: 12px;
}

/* Series tracking / followed programs: title, progress, date, action, bar. */
body.gupy-v2.gv2-page-profile .vrd_tracking_card .vrd_review_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.gupy-v2.gv2-page-profile .vrd_tracking_card .vrd_review_program_title {
  align-self: stretch; /* one-line title (ellipsis) in a flex-start column: its width fell to 0 */
  max-width: 100%;
  padding-right: 0;
}
body.gupy-v2.gv2-page-profile .vrd_tracking_progress {
  color: var(--gv2-text);
  font-size: 14px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-profile .vrd_tracking_label {
  display: block;
  color: var(--gv2-text-muted);
  font-size: 12px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-profile .vrd_review_card .vrd_review_date {
  align-self: flex-start; /* v1: centred */
  margin: 0;
  text-align: left;
}
body.gupy-v2.gv2-page-profile .vrd_review_card:not(.vrd_tracking_card) .vrd_review_date {
  align-self: center;
}
/* Same look as the review "Modifier" button. */
body.gupy-v2.gv2-page-profile .vrd_tracking_card .vrd_inline_action_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0 !important;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: var(--gv2-surface-alt);
  color: var(--gv2-text);
  font-size: 12px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-profile .vrd_tracking_card .vrd_inline_action_btn:hover {
  color: var(--vrd-primary);
}
body.gupy-v2.gv2-page-profile .vrd_tracking_bar {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--gv2-surface-alt);
  overflow: hidden;
}
body.gupy-v2.gv2-page-profile .vrd_tracking_bar_fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vrd-primary), #ff7aa8);
}

@media (max-width: 480px) {
  /* One card per row on phones: each at its own height, votes under the text. */
  body.gupy-v2.gv2-page-profile .vrd_review_card {
    --gv2-rc-poster: 90px;
    gap: 14px;
    height: auto;
    min-height: calc(var(--gv2-rc-poster) * 1.5 + 28px);
    padding: 14px;
  }
  body.gupy-v2.gv2-page-profile .vrd_review_votes {
    position: static;
    grid-column: 2;
  }
  body.gupy-v2.gv2-page-profile .vrd_review_card .vrd_review_program_title {
    padding-right: 0;
    font-size: 17px;
  }
}