/* ========================================================================== 
   Yondr Profile Fix Step 11 — Visual Style Pass
   Purpose: make profile pages match Yondr's stronger dating-app identity.
   Scope: CSS-only visual polish. No backend/action/database changes.
   -------------------------------------------------------------------------- */
.y8c-profile-page {
  --yv-navy: #2B2D42;
  --yv-mid: #5D5F93;
  --yv-silver: #B5B7BB;
  --yv-blue: #236CFF;
  --yv-purple: #6C3BFF;
  --yv-ink: #191b2f;
  --yv-muted: #72768f;
  --yv-soft: #f7f8ff;
  --yv-card: rgba(255,255,255,.96);
  --yv-border: rgba(43,45,66,.10);
  --yv-gradient: linear-gradient(135deg, var(--yv-blue) 0%, var(--yv-purple) 100%);
  --yv-shadow: 0 22px 60px rgba(43,45,66,.10);
  --yv-shadow-tight: 0 12px 34px rgba(43,45,66,.085);
}

body:has(.y8c-profile-page) {
  background:
    radial-gradient(circle at 18% -10%, rgba(35,108,255,.08), transparent 34%),
    radial-gradient(circle at 98% 8%, rgba(108,59,255,.07), transparent 32%),
    #f7f8fc;
}

.y8c-profile-page.container {
  max-width: 1180px;
}

/* Main media card */
.y8c-profile-page .to_user_media {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-color: rgba(43,45,66,.08) !important;
  box-shadow: var(--yv-shadow) !important;
}

.y8c-profile-page .to_user_media::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.y8c-profile-page .to_user_media .avatar {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 24px 24px 18px 18px;
  background: #11142a;
}

.y8c-profile-page .to_user_media .avatar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(25,27,47,.46), rgba(25,27,47,0));
}

.y8c-profile-page .to_user_media .avatar > a,
.y8c-profile-page .to_user_media .avatar img {
  display: block;
  width: 100%;
}

.y8c-profile-page .to_user_media .avatar img {
  min-height: 520px;
  max-height: 680px;
  object-fit: cover;
  object-position: center;
}

.y8c-profile-page .yonder-profile-compact-gallery {
  margin: 12px 12px 0;
}

.y8c-profile-page .yonder-profile-gallery-row {
  gap: 8px;
}

.y8c-profile-page .yonder-profile-gallery-thumb,
.y8c-profile-page .yonder-profile-gallery-more {
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(43,45,66,.12);
}

.y8c-profile-page .yonder-profile-gallery-more {
  background: linear-gradient(135deg, rgba(43,45,66,.84), rgba(93,95,147,.88)) !important;
  color: #fff !important;
  font-weight: 900;
}

/* Primary profile actions */
.y8c-profile-page .dt_user_pro_info {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 14px !important;
  padding: 10px !important;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,45,66,.08);
  box-shadow: 0 18px 42px rgba(43,45,66,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.y8c-profile-page .dt_user_pro_info .btn,
.y8c-profile-page .dt_user_pro_info .yondr-profile-more-trigger {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--yv-navy) !important;
  border: 1px solid rgba(43,45,66,.08) !important;
  box-shadow: 0 10px 22px rgba(43,45,66,.08) !important;
}

.y8c-profile-page .dt_user_pro_info #like_btn,
.y8c-profile-page .dt_user_pro_info a[data-ajax-post="/useractions/hot"],
.y8c-profile-page .dt_user_pro_info a[data-ajax-callback="callback_like"] {
  background: var(--yv-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 32px rgba(71,71,255,.22) !important;
}

.y8c-profile-page .dt_user_pro_info #like_btn svg path,
.y8c-profile-page .dt_user_pro_info a[data-ajax-post="/useractions/hot"] svg path,
.y8c-profile-page .dt_user_pro_info a[data-ajax-callback="callback_like"] svg path {
  fill: currentColor !important;
}

/* Identity card */
.y8c-profile-page .yonder-profile-content-card {
  position: relative;
  overflow: hidden !important;
  background: var(--yv-card) !important;
  border-color: rgba(43,45,66,.08) !important;
  box-shadow: var(--yv-shadow) !important;
}

.y8c-profile-page .yonder-profile-content-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--yv-gradient);
}

.y8c-profile-page .yonder-profile-identity-block {
  position: relative;
  padding: 10px 4px 16px;
  border-bottom-color: rgba(43,45,66,.08) !important;
}

.y8c-profile-page .yonder-profile-identity-block h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--yv-ink);
  font-weight: 900;
  letter-spacing: -.045em;
}

.y8c-profile-page .yonder-profile-identity-block h2 span {
  display: inline-flex;
}

.y8c-profile-page .dt_usr_opts_mnu .btn {
  border-radius: 16px !important;
  background: rgba(43,45,66,.045) !important;
  color: var(--yv-navy) !important;
  box-shadow: none !important;
}

.y8c-profile-page .to_user_stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.y8c-profile-page .to_user_stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(93,95,147,.08);
  color: var(--yv-navy);
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(43,45,66,.07);
}

.y8c-profile-page .to_user_stats svg {
  width: 17px;
  height: 17px;
  color: var(--yv-purple);
}

/* Dating abroad / Ready to Meet panel: remove soft pink, use Yondr blue-purple identity */
.y8c-profile-page .yonder_profile_abroad_panel {
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(35,108,255,.45), rgba(108,59,255,.45)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 18px 46px rgba(43,45,66,.08) !important;
}

.y8c-profile-page .yonder_profile_abroad_head span {
  display: inline-flex !important;
  align-items: center;
  min-height: 26px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--yv-gradient) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

.y8c-profile-page .yonder_profile_abroad_head h4 {
  margin-top: 10px !important;
  color: var(--yv-ink) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em;
}

.y8c-profile-page .yonder_profile_abroad_head p {
  color: var(--yv-muted) !important;
}

.y8c-profile-page .yonder_profile_trust_summary {
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(43,45,66,.045), rgba(93,95,147,.07)) !important;
  border: 1px solid rgba(43,45,66,.08) !important;
  box-shadow: none !important;
}

.y8c-profile-page .yonder_profile_trust_summary small,
.y8c-profile-page .yonder_profile_abroad_card span {
  color: var(--yv-muted) !important;
  font-weight: 900 !important;
}

.y8c-profile-page .yonder_profile_trust_summary strong,
.y8c-profile-page .yonder_profile_abroad_card strong {
  color: var(--yv-ink) !important;
  font-weight: 900 !important;
}

.y8c-profile-page .yonder_profile_trust_summary > span {
  background: var(--yv-gradient) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.y8c-profile-page .yonder_profile_trust_bar,
.y8c-profile-page .yonder_profile_trust_bar i {
  border-radius: 999px !important;
}

.y8c-profile-page .yonder_profile_trust_bar i {
  background: var(--yv-gradient) !important;
}

.y8c-profile-page .yonder_profile_abroad_card {
  min-height: 72px;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(247,248,255,.96), rgba(255,255,255,.96)) !important;
  border: 1px solid rgba(43,45,66,.075) !important;
  box-shadow: 0 10px 24px rgba(43,45,66,.045);
}

.y8c-profile-page .yonder_profile_abroad_icon {
  background: linear-gradient(135deg, rgba(35,108,255,.12), rgba(108,59,255,.14)) !important;
  color: var(--yv-navy) !important;
  border: 1px solid rgba(43,45,66,.05);
}

.y8c-profile-page .yonder_profile_trust_row span {
  min-height: 30px;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.y8c-profile-page .yonder_profile_trust_row span.is-on {
  background: rgba(35,108,255,.10) !important;
  color: var(--yv-blue) !important;
  border: 1px solid rgba(35,108,255,.15) !important;
}

.y8c-profile-page .yonder_profile_trust_row span.is-muted {
  background: rgba(43,45,66,.06) !important;
  color: var(--yv-muted) !important;
}

.y8c-profile-page .yonder_ready_connect_panel {
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(43,45,66,.98), rgba(45,49,91,.98)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 48px rgba(43,45,66,.18);
  overflow: hidden;
}

.y8c-profile-page .yonder_ready_connect_head span,
.y8c-profile-page .yonder_ready_connect_head strong,
.y8c-profile-page .yonder_ready_connect_head p,
.y8c-profile-page .yonder_ready_connect_head em {
  color: inherit !important;
}

.y8c-profile-page .yonder_ready_connect_head em {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.y8c-profile-page .yonder_ready_connect_actions a {
  border-radius: 18px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.y8c-profile-page .yonder_ready_connect_actions a:hover,
.y8c-profile-page .yonder_ready_connect_actions a:focus {
  background: rgba(255,255,255,.16) !important;
}

.y8c-profile-page .yonder_profile_safety_note {
  border-radius: 18px !important;
  background: rgba(43,45,66,.04) !important;
  border: 1px solid rgba(43,45,66,.06) !important;
}

/* Content sections */
.y8c-profile-page .yonder-profile-section,
.y8c-profile-page .dt_cp_photos_list,
.y8c-profile-page .to_usr_info_things {
  position: relative;
  border-color: rgba(43,45,66,.08) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: var(--yv-shadow-tight) !important;
}

.y8c-profile-page .to_usr_info_block h5,
.y8c-profile-page .dt_user_prof_complt h5,
.y8c-profile-page .yonder-profile-section-title,
.y8c-profile-page .to_usr_info_things > h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--yv-ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.y8c-profile-page .to_usr_info_block h5::before,
.y8c-profile-page .yonder-profile-section-title::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--yv-gradient);
  box-shadow: 0 0 0 5px rgba(35,108,255,.08);
}

.y8c-profile-page .to_intrst_des {
  color: #4c5068 !important;
  font-size: 14.5px !important;
  line-height: 1.72 !important;
}

.y8c-profile-page .to_intrst_chp {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  background: rgba(43,45,66,.045) !important;
  border: 1px solid rgba(43,45,66,.08) !important;
  color: var(--yv-navy) !important;
}

.y8c-profile-page .to_intrst_chp:hover {
  background: rgba(35,108,255,.08) !important;
  border-color: rgba(35,108,255,.18) !important;
}

.y8c-profile-page .dt_cp_photos_list {
  gap: 12px !important;
}

.y8c-profile-page .dt_cp_l_photos a,
.y8c-profile-page .dt_cp_l_photos img {
  border-radius: 18px !important;
}

.y8c-profile-page .dt_cp_l_photos a {
  position: relative;
  overflow: hidden;
  background: var(--yv-soft);
  box-shadow: 0 10px 24px rgba(43,45,66,.08);
}

.y8c-profile-page .dt_cp_l_photos a::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
}

.y8c-profile-page .to_usr_info_things .dt_profile_info {
  border-bottom-color: rgba(43,45,66,.07) !important;
}

.y8c-profile-page .to_usr_info_things .dt_profile_info .row {
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
  border-radius: 15px;
  background: rgba(43,45,66,.025);
}

.y8c-profile-page .to_usr_info_things .dt_profile_info .row:last-child {
  margin-bottom: 0 !important;
}

.y8c-profile-page .to_usr_info_things .dt_profile_info p.info_title {
  color: var(--yv-muted) !important;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 10px;
}

.y8c-profile-page .to_usr_info_things .dt_profile_info p:not(.info_title) {
  color: var(--yv-ink) !important;
  font-weight: 800;
}

.y8c-profile-page .yonder_location_map {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 22px rgba(43,45,66,.06);
}

.y8c-profile-page .yonder_location_placeholder span {
  filter: drop-shadow(0 6px 10px rgba(43,45,66,.12));
}

@media (min-width: 993px) {
  .y8c-profile-page .y8c-profile-layout {
    gap: 18px;
  }

  .y8c-profile-page .y8c-profile-media-col {
    width: calc(41.6666666667% - 9px) !important;
  }

  .y8c-profile-page .y8c-profile-info-col {
    width: calc(58.3333333333% - 9px) !important;
  }
}

@media (max-width: 992px) {
  body:has(.y8c-profile-page) {
    background:
      radial-gradient(circle at 20% -5%, rgba(35,108,255,.09), transparent 28%),
      #f7f8fc;
  }

  .y8c-profile-page.container {
    margin-top: 0 !important;
    padding-top: 8px;
  }

  .y8c-profile-page .to_user_media .avatar img {
    min-height: 430px;
    max-height: 560px;
  }

  .y8c-profile-page .dt_user_pro_info {
    margin-top: -22px !important;
    max-width: calc(100% - 24px);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .y8c-profile-page .yonder-profile-content-card {
    padding: 16px !important;
  }

  .y8c-profile-page .yonder-profile-identity-block h2 {
    font-size: 27px !important;
  }

  .y8c-profile-page .yonder_profile_abroad_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .y8c-profile-page.container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .y8c-profile-page .to_user_media,
  .y8c-profile-page .yonder-profile-content-card,
  .y8c-profile-page .yonder-profile-section,
  .y8c-profile-page .dt_cp_photos_list,
  .y8c-profile-page .to_usr_info_things {
    border-radius: 24px !important;
  }

  .y8c-profile-page .to_user_media .avatar {
    border-radius: 24px 24px 18px 18px !important;
  }

  .y8c-profile-page .to_user_media .avatar img {
    min-height: 390px;
    max-height: 520px;
  }

  .y8c-profile-page .dt_user_pro_info {
    gap: 7px;
    padding: 8px !important;
    border-radius: 22px;
  }

  .y8c-profile-page .dt_user_pro_info .btn,
  .y8c-profile-page .dt_user_pro_info .yondr-profile-more-trigger {
    width: 47px !important;
    height: 47px !important;
    min-width: 47px !important;
    min-height: 47px !important;
    border-radius: 16px !important;
  }

  .y8c-profile-page .yonder-profile-identity-block h2 {
    font-size: 25px !important;
  }

  .y8c-profile-page .yonder_profile_abroad_panel,
  .y8c-profile-page .yonder-profile-content-card,
  .y8c-profile-page .yonder-profile-section,
  .y8c-profile-page .dt_cp_photos_list,
  .y8c-profile-page .to_usr_info_things {
    padding: 15px !important;
  }

  .y8c-profile-page .yonder_profile_abroad_head h4 {
    font-size: 18px !important;
  }

  .y8c-profile-page .yonder_profile_abroad_grid {
    grid-template-columns: 1fr !important;
  }

  .y8c-profile-page .yonder_ready_connect_actions {
    grid-template-columns: 1fr !important;
  }

  .y8c-profile-page .dt_cp_photos_list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .y8c-profile-page .to_usr_info_things .dt_profile_info .row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
}

@media (max-width: 390px) {
  .y8c-profile-page .to_user_media .avatar img {
    min-height: 350px;
  }

  .y8c-profile-page .dt_user_pro_info .btn,
  .y8c-profile-page .dt_user_pro_info .yondr-profile-more-trigger {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }
}

/* Dynamic bottom-left profile info overlay on the original main profile photo. */
.y8c-profile-page .to_user_media .avatar::after {
  z-index: 1;
}

.y8c-profile-page .yonder-profile-info-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  max-width: min(92%, 520px);
  color: #fff;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.38);
}

.y8c-profile-page .yonder-profile-overlay-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.05;
}

.y8c-profile-page .yonder-profile-overlay-name {
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: #fff;
}

.y8c-profile-page .yonder-profile-overlay-age {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

.y8c-profile-page .yonder-profile-overlay-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #236CFF, #6C3BFF);
  box-shadow: 0 10px 24px rgba(35,108,255,.35);
  text-shadow: none;
}

.y8c-profile-page .yonder-profile-overlay-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: clamp(15px, 1.8vw, 23px);
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

.y8c-profile-page .yonder-profile-overlay-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-shadow: none;
}

.y8c-profile-page .yonder-profile-overlay-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.y8c-profile-page .yonder-profile-overlay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 900;
  line-height: 1.1;
  background: rgba(20,22,42,.46);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: 0 2px 10px rgba(0,0,0,.24);
}

.y8c-profile-page .yonder-profile-overlay-chip-discovery {
  background: rgba(35,108,255,.48);
  border-color: rgba(255,255,255,.30);
}

@media (max-width: 600px) {
  .y8c-profile-page .yonder-profile-info-overlay {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
  }

  .y8c-profile-page .yonder-profile-overlay-name {
    font-size: 34px;
  }

  .y8c-profile-page .yonder-profile-overlay-age {
    font-size: 26px;
  }

  .y8c-profile-page .yonder-profile-overlay-verified {
    width: 27px;
    height: 27px;
  }

  .y8c-profile-page .yonder-profile-overlay-line {
    margin-top: 8px;
    font-size: 15px;
  }

  .y8c-profile-page .yonder-profile-overlay-chips {
    gap: 8px;
    margin-top: 12px;
  }

  .y8c-profile-page .yonder-profile-overlay-chip {
    min-height: 33px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Precision update: Dating Abroad Profile block only */
.y8c-profile-page .yonder_profile_abroad_panel,
.yonder_profile_abroad_panel {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.y8c-profile-page .yonder_abroad_ticket_card,
.yonder_abroad_ticket_card {
  --yonder-ticket-cutout: #f7f8fd;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(117, 103, 220, .17);
  box-shadow: 0 18px 44px rgba(28, 32, 74, .075);
  overflow: visible;
  isolation: isolate;
}

.y8c-profile-page .yonder_abroad_ticket_card::before,
.yonder_abroad_ticket_card::before,
.y8c-profile-page .yonder_abroad_ticket_card::after,
.yonder_abroad_ticket_card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--yonder-ticket-cutout);
  border: 1px solid rgba(117, 103, 220, .12);
  z-index: 6;
}

.y8c-profile-page .yonder_abroad_ticket_card::before,
.yonder_abroad_ticket_card::before { left: -12px; }
.y8c-profile-page .yonder_abroad_ticket_card::after,
.yonder_abroad_ticket_card::after { right: -12px; }

.y8c-profile-page .yonder_abroad_ticket_main,
.yonder_abroad_ticket_main {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 26px 0 0 26px;
  background: #fff;
  z-index: 1;
}

.y8c-profile-page .yonder_abroad_ticket_header,
.yonder_abroad_ticket_header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: 13px 18px 13px 18px;
  background: linear-gradient(90deg, #7a35ff 0%, #236cff 100%);
  color: #fff;
}

.y8c-profile-page .yonder_abroad_ticket_label,
.yonder_abroad_ticket_label {
  display: block;
  min-width: 0;
  color: #fff !important;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.y8c-profile-page .yonder_abroad_ticket_plane,
.yonder_abroad_ticket_plane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  min-width: 31px;
  color: #fff;
}

.y8c-profile-page .yonder_abroad_ticket_plane svg,
.yonder_abroad_ticket_plane svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.y8c-profile-page .yonder_abroad_ticket_trust,
.yonder_abroad_ticket_trust {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 5px 12px !important;
  align-items: end !important;
  margin: 14px 16px 13px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.y8c-profile-page .yonder_abroad_ticket_trust small,
.yonder_abroad_ticket_trust small {
  display: block;
  margin: 0 0 4px;
  color: #80849a !important;
  font-size: 10px !important;
  line-height: 1.1;
  font-weight: 900 !important;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.y8c-profile-page .yonder_abroad_ticket_trust strong,
.yonder_abroad_ticket_trust strong {
  display: block;
  margin: 0;
  color: #10142b !important;
  font-size: 15px !important;
  line-height: 1.15;
  font-weight: 900 !important;
}

.y8c-profile-page .yonder_abroad_ticket_trust > span,
.yonder_abroad_ticket_trust > span {
  display: block !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 2px !important;
  color: #6c3cff !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.y8c-profile-page .yonder_abroad_ticket_trust .yonder_profile_trust_bar,
.yonder_abroad_ticket_trust .yonder_profile_trust_bar {
  grid-column: 1 / -1;
  height: 6px !important;
  margin: 5px 0 0 !important;
  border-radius: 999px !important;
  background: rgba(108, 60, 255, .10) !important;
  overflow: hidden;
}

.y8c-profile-page .yonder_abroad_ticket_trust .yonder_profile_trust_bar i,
.yonder_abroad_ticket_trust .yonder_profile_trust_bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #236cff 0%, #7a35ff 100%) !important;
}

.y8c-profile-page .yonder_abroad_ticket_grid,
.yonder_abroad_ticket_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 0 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(43, 45, 66, .075);
  border-radius: 18px;
  background: #fff;
}

.y8c-profile-page .yonder_abroad_ticket_item,
.yonder_abroad_ticket_item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 72px;
  padding: 11px 11px;
  background: #fff;
  border-right: 1px solid rgba(43, 45, 66, .065);
  border-bottom: 1px solid rgba(43, 45, 66, .065);
  box-sizing: border-box;
}

.y8c-profile-page .yonder_abroad_ticket_item:nth-child(2n),
.yonder_abroad_ticket_item:nth-child(2n) { border-right: 0; }
.y8c-profile-page .yonder_abroad_ticket_item:nth-last-child(-n+2),
.yonder_abroad_ticket_item:nth-last-child(-n+2) { border-bottom: 0; }
.y8c-profile-page .yonder_abroad_ticket_item.is-wide,
.yonder_abroad_ticket_item.is-wide {
  grid-column: 1 / -1;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

.y8c-profile-page .yonder_abroad_ticket_icon,
.yonder_abroad_ticket_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  color: #7542ff;
  background: linear-gradient(135deg, rgba(122, 53, 255, .09), rgba(35, 108, 255, .08));
  border: 1px solid rgba(122, 53, 255, .12);
}

.y8c-profile-page .yonder_abroad_ticket_icon svg,
.yonder_abroad_ticket_icon svg,
.y8c-profile-page .yonder_abroad_ticket_globe svg,
.yonder_abroad_ticket_globe svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.y8c-profile-page .yonder_abroad_ticket_text,
.yonder_abroad_ticket_text {
  min-width: 0;
  flex: 1 1 auto;
}

.y8c-profile-page .yonder_abroad_ticket_text span,
.yonder_abroad_ticket_text span {
  display: block;
  margin: 0 0 4px;
  color: #83879d !important;
  font-size: 9.5px !important;
  line-height: 1.1;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.y8c-profile-page .yonder_abroad_ticket_text strong,
.yonder_abroad_ticket_text strong {
  display: block;
  margin: 0;
  color: #11152d !important;
  font-size: 13.5px !important;
  line-height: 1.18;
  font-weight: 900 !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.y8c-profile-page .yonder_abroad_ticket_side,
.yonder_abroad_ticket_side {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  padding: 28px 8px 22px;
  border-left: 1px dashed rgba(117, 103, 220, .22);
  border-radius: 0 26px 26px 0;
  background: linear-gradient(180deg, #fbfbff 0%, #fff 100%);
  overflow: hidden;
  z-index: 1;
}

.y8c-profile-page .yonder_abroad_ticket_side::before,
.yonder_abroad_ticket_side::before,
.y8c-profile-page .yonder_abroad_ticket_side::after,
.yonder_abroad_ticket_side::after {
  content: '';
  position: absolute;
  left: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yonder-ticket-cutout);
  border: 1px solid rgba(117, 103, 220, .12);
  z-index: 4;
}

.y8c-profile-page .yonder_abroad_ticket_side::before,
.yonder_abroad_ticket_side::before { top: -1px; }
.y8c-profile-page .yonder_abroad_ticket_side::after,
.yonder_abroad_ticket_side::after { bottom: -1px; }

.y8c-profile-page .yonder_abroad_ticket_barcode,
.yonder_abroad_ticket_barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
}

.y8c-profile-page .yonder_abroad_ticket_barcode i,
.yonder_abroad_ticket_barcode i {
  display: block;
  height: 4px;
  border-radius: 1px;
  background: #8d92a5;
  opacity: .82;
}

.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(1),
.yonder_abroad_ticket_barcode i:nth-child(1) { width: 32px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(2),
.yonder_abroad_ticket_barcode i:nth-child(2) { width: 24px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(3),
.yonder_abroad_ticket_barcode i:nth-child(3) { width: 34px; height: 6px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(4),
.yonder_abroad_ticket_barcode i:nth-child(4) { width: 20px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(5),
.yonder_abroad_ticket_barcode i:nth-child(5) { width: 31px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(6),
.yonder_abroad_ticket_barcode i:nth-child(6) { width: 27px; height: 6px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(7),
.yonder_abroad_ticket_barcode i:nth-child(7) { width: 35px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(8),
.yonder_abroad_ticket_barcode i:nth-child(8) { width: 21px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(9),
.yonder_abroad_ticket_barcode i:nth-child(9) { width: 33px; height: 6px; }
.y8c-profile-page .yonder_abroad_ticket_barcode i:nth-child(10),
.yonder_abroad_ticket_barcode i:nth-child(10) { width: 26px; }

.y8c-profile-page .yonder_abroad_ticket_side_label,
.yonder_abroad_ticket_side_label {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  color: #737990;
  margin-bottom: 13px;
}

.y8c-profile-page .yonder_abroad_ticket_side_label strong,
.yonder_abroad_ticket_side_label strong {
  color: #62687f;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .13em;
  white-space: nowrap;
}

.y8c-profile-page .yonder_abroad_ticket_side_label span,
.yonder_abroad_ticket_side_label span {
  color: #737990;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .16em;
  white-space: nowrap;
}

.y8c-profile-page .yonder_abroad_ticket_globe,
.yonder_abroad_ticket_globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: #777d93;
  margin-bottom: 3px;
}

@media (max-width: 640px) {
  .y8c-profile-page .yonder_abroad_ticket_card,
  .yonder_abroad_ticket_card {
    grid-template-columns: minmax(0, 1fr) 58px;
    border-radius: 23px;
  }
  .y8c-profile-page .yonder_abroad_ticket_main,
  .yonder_abroad_ticket_main { border-radius: 23px 0 0 23px; }
  .y8c-profile-page .yonder_abroad_ticket_side,
  .yonder_abroad_ticket_side {
    border-radius: 0 23px 23px 0;
    padding: 24px 6px 18px;
  }
  .y8c-profile-page .yonder_abroad_ticket_header,
  .yonder_abroad_ticket_header {
    min-height: 51px;
    padding: 12px 14px;
  }
  .y8c-profile-page .yonder_abroad_ticket_label,
  .yonder_abroad_ticket_label {
    font-size: 10.5px;
    letter-spacing: .14em;
  }
  .y8c-profile-page .yonder_abroad_ticket_plane,
  .yonder_abroad_ticket_plane {
    width: 27px;
    height: 27px;
    min-width: 27px;
  }
  .y8c-profile-page .yonder_abroad_ticket_trust,
  .yonder_abroad_ticket_trust {
    margin: 12px 12px 12px !important;
  }
  .y8c-profile-page .yonder_abroad_ticket_grid,
  .yonder_abroad_ticket_grid {
    margin: 0 12px 13px;
    border-radius: 16px;
  }
  .y8c-profile-page .yonder_abroad_ticket_item,
  .yonder_abroad_ticket_item {
    min-height: 66px;
    padding: 10px 9px;
    gap: 7px;
  }
  .y8c-profile-page .yonder_abroad_ticket_icon,
  .yonder_abroad_ticket_icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .y8c-profile-page .yonder_abroad_ticket_icon svg,
  .yonder_abroad_ticket_icon svg {
    width: 18px;
    height: 18px;
  }
  .y8c-profile-page .yonder_abroad_ticket_text span,
  .yonder_abroad_ticket_text span {
    font-size: 8.5px !important;
    letter-spacing: .055em;
  }
  .y8c-profile-page .yonder_abroad_ticket_text strong,
  .yonder_abroad_ticket_text strong {
    font-size: 12.5px !important;
    line-height: 1.14;
  }
  .y8c-profile-page .yonder_abroad_ticket_barcode,
  .yonder_abroad_ticket_barcode { gap: 4px; }
  .y8c-profile-page .yonder_abroad_ticket_barcode i,
  .yonder_abroad_ticket_barcode i { height: 3px; }
  .y8c-profile-page .yonder_abroad_ticket_side_label strong,
  .yonder_abroad_ticket_side_label strong { font-size: 10.5px; }
  .y8c-profile-page .yonder_abroad_ticket_side_label span,
  .yonder_abroad_ticket_side_label span { font-size: 8px; }
}

@media (max-width: 380px) {
  .y8c-profile-page .yonder_abroad_ticket_card,
  .yonder_abroad_ticket_card { grid-template-columns: minmax(0, 1fr) 52px; }
  .y8c-profile-page .yonder_abroad_ticket_label,
  .yonder_abroad_ticket_label { font-size: 9.5px; letter-spacing: .11em; }
  .y8c-profile-page .yonder_abroad_ticket_text strong,
  .yonder_abroad_ticket_text strong { font-size: 11.5px !important; }
  .y8c-profile-page .yonder_abroad_ticket_text span,
  .yonder_abroad_ticket_text span { font-size: 7.8px !important; }
  .y8c-profile-page .yonder_abroad_ticket_icon,
  .yonder_abroad_ticket_icon { width: 29px; height: 29px; min-width: 29px; }
  .y8c-profile-page .yonder_abroad_ticket_item,
  .yonder_abroad_ticket_item { padding: 9px 7px; gap: 6px; }
}