/* ========== YM Global Tokens ========== */
/* ========== YM Global Tokens ========== */
:root {
  /* colors */
  --ym-light-orange: #fff9ea;
  --ym-gray-orange: #c2a96d;
  --ym-azure-dark: #162a3a;
  --ym-azure-mid: #617a8e;
  --ym-black: #0c0c0c;
  --ym-white: #ffffff;

  /* fonts */
  --ym-font-poppins:
    "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    "Helvetica Neue", Arial, sans-serif;
  --ym-font-montserrat: "Montserrat", system-ui, sans-serif;
  --ym-font-playwrite: "Playwrite US Trad", cursive;

  /* radii */
  --ym-radius-sm: 9px;
  --ym-radius-lg: 14px;

  /* sizing */
  --ym-input-h: 52px;
  --ym-gap: 14px;

  --ym-auth-bg: url("/wp-content/uploads/2025/10/login-bg.webp");

  --ym-icon-size: 24px;

  /* DOAR data-URI, fără SVG suplimentar după ; */
  --ym-icon-back: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 39'>\
<defs><clipPath id='clip0_1_523'><rect width='43.5' height='38.3' fill='white'/></clipPath></defs>\
<g clip-path='url(%23clip0_1_523)'>\
<path d='M3.0411 13.6275C3.93426 13.6275 4.82278 13.6275 5.71594 13.6275C7.83721 13.6275 9.95848 13.6275 12.0844 13.6275C14.6057 13.6275 17.1271 13.6275 19.6484 13.6275C21.7418 13.6275 23.8305 13.6275 25.9238 13.6275C26.8868 13.6275 27.8544 13.6042 28.8173 13.6322C29.2499 13.6462 29.6779 13.6835 30.1059 13.7394C29.8594 13.7068 29.6128 13.6741 29.3616 13.6415C30.4222 13.7907 31.455 14.075 32.4412 14.4853C32.2179 14.392 31.9946 14.2988 31.7759 14.2056C32.7575 14.6251 33.6786 15.1659 34.5206 15.8139C34.3345 15.6694 34.1438 15.5202 33.9577 15.3757C34.7764 16.0144 35.5114 16.7509 36.1487 17.5714C36.0045 17.3849 35.8557 17.1938 35.7115 17.0073C36.3627 17.8511 36.9023 18.7788 37.3164 19.7578C37.2233 19.534 37.1303 19.3103 37.0372 19.0912C37.4513 20.0795 37.735 21.1144 37.8792 22.1773C37.8467 21.9302 37.8141 21.6831 37.7816 21.4314C37.9304 22.5502 37.9304 23.6784 37.7816 24.7972C37.8141 24.5501 37.8467 24.3031 37.8792 24.0513C37.7304 25.1142 37.4466 26.1491 37.0372 27.1375C37.1303 26.9137 37.2233 26.6899 37.3164 26.4708C36.8977 27.4545 36.3581 28.3775 35.7115 29.2213C35.8557 29.0348 36.0045 28.8437 36.1487 28.6572C35.5114 29.4777 34.7764 30.2143 33.9577 30.8529C34.1438 30.7084 34.3345 30.5592 34.5206 30.4147C33.6786 31.0674 32.7528 31.6081 31.7759 32.023C31.9992 31.9298 32.2225 31.8366 32.4412 31.7433C31.455 32.1582 30.4222 32.4426 29.3616 32.5871C29.6081 32.5545 29.8547 32.5218 30.1059 32.4892C29.1895 32.6104 28.2777 32.6058 27.3566 32.6058C26.0867 32.6058 24.8213 32.6058 23.5514 32.6058C21.9046 32.6058 20.2578 32.6058 18.611 32.6058C17.1364 32.6058 15.6617 32.6058 14.1871 32.6058C13.4614 32.6058 12.7357 32.5964 12.0146 32.6058C12.0053 32.6058 11.996 32.6058 11.9821 32.6058C11.2657 32.6058 10.5167 32.9181 10.0097 33.4262C9.52586 33.9111 9.16301 34.7082 9.19092 35.4028C9.22348 36.1254 9.46073 36.876 10.0097 37.3795C10.5539 37.8829 11.2285 38.1999 11.9821 38.1999C13.6428 38.1999 15.3035 38.1999 16.9596 38.1999C19.788 38.1999 22.621 38.1999 25.4493 38.1999C27.7427 38.1999 30.0268 38.2885 32.269 37.7011C34.6136 37.0858 36.7535 35.8737 38.5538 34.2607C39.4562 33.4495 40.2378 32.4985 40.9216 31.5009C41.6101 30.5033 42.1171 29.4078 42.5498 28.2796C43.001 27.1095 43.215 25.9067 43.3685 24.6667C43.4987 23.6364 43.4987 22.5875 43.3685 21.5526C43.2103 20.3126 42.9963 19.1098 42.5498 17.9397C42.1125 16.8115 41.6054 15.716 40.9216 14.7184C39.5493 12.7278 37.7722 11.0262 35.6417 9.87009C33.446 8.68132 30.9805 8.03333 28.4824 8.01935C27.2822 8.01468 26.0866 8.01935 24.8865 8.01935C22.2116 8.01935 19.5368 8.01935 16.8619 8.01935C14.0056 8.01935 11.1494 8.01935 8.2931 8.01935C6.61841 8.01935 4.94837 8.01935 3.27369 8.01935C3.19461 8.01935 3.11087 8.01935 3.03179 8.01935C2.31539 8.01935 1.56644 8.33169 1.05938 8.83982C0.575581 9.32465 0.212732 10.1218 0.240644 10.8164C0.273207 11.539 0.510454 12.2896 1.05938 12.793C1.61296 13.3105 2.28283 13.6275 3.0411 13.6275Z' fill='%23000'/>\
<path d='M12.9451 16.8022C12.0566 15.9118 11.1634 15.0168 10.2749 14.1263C8.84677 12.6952 7.42328 11.2687 5.99515 9.83748C5.66951 9.51115 5.34388 9.18482 5.01359 8.85383C5.01359 10.1731 5.01359 11.4924 5.01359 12.8117C5.90211 11.9213 6.79528 11.0262 7.68379 10.1358C9.11193 8.70465 10.5354 7.27814 11.9635 5.84696C12.2892 5.52064 12.6148 5.19431 12.9451 4.86332C13.4522 4.35518 13.7638 3.60463 13.7638 2.88671C13.7638 2.20142 13.4615 1.38094 12.9451 0.9101C12.4148 0.420609 11.717 0.0569877 10.9727 0.0896203C10.233 0.122253 9.53525 0.373991 9.00028 0.9101C8.11177 1.80051 7.2186 2.69557 6.33009 3.58598C4.90195 5.01716 3.47847 6.44368 2.05033 7.87485C1.7247 8.20118 1.39906 8.52751 1.06878 8.8585C0.00349 9.92605 -0.00116184 11.7442 1.06878 12.8164C1.95729 13.7068 2.85046 14.6018 3.73897 15.4923C5.16711 16.9234 6.59059 18.3499 8.01873 19.7811C8.34436 20.1075 8.67 20.4338 9.00028 20.7648C9.50734 21.2729 10.2563 21.5852 10.9727 21.5852C11.6565 21.5852 12.4753 21.2822 12.9451 20.7648C13.4336 20.2333 13.7964 19.534 13.7638 18.7882C13.7313 18.0376 13.4801 17.3383 12.9451 16.8022Z' fill='%23000'/>\
</g></svg>");
}

/* tipografie globală */
html,
body {
  font-family: var(--ym-font-poppins);
  color: var(--ym-light-orange);
  background: #0b1620;
}

.ym-app {
  min-height: 100vh;
}

.ym-body,
.ym-container {
  min-height: -webkit-fill-available;
}

html * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:focus {
  outline: none !important;
}

/* ========== Layout Auth ========== */
.ym-auth {
  min-height: 100svh;
  position: relative;
  display: grid;
  background:
    radial-gradient(transparent, rgba(0, 0, 0, 0.55)),
    var(--ym-auth-bg) center/cover no-repeat fixed;
}

/* panou central (mobile: full-width cu margini; desktop: card centrat) */
.ym-auth__panel {
  position: relative;
  width: 85%;
  max-width: 500px;
  margin: 8svh auto;
}

/* logo */
.ym-auth__logo {
  display: block;
  margin: 0 auto 100px;
  max-width: 220px;
}

/* titluri */
.ym-auth__title {
  color: var(--ym-gray-orange);
  font-weight: 700;
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  text-align: center;
  margin: 6px 0 4px;
}
.ym-auth__subtitle {
  color: var(--ym-light-orange);
  font-weight: 400;
  text-align: center;
  opacity: 0.95;
  margin: 0 0 30px;
}

/* form container */
.ym-form {
  display: grid;
  gap: var(--ym-gap);
}
.ym-field {
  position: relative;
  display: flex;
}
.ym-field:has(.ym-field-hint) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ym-field-hint {
  font-size: 0.8rem;
  color: var(--ym-light-orange, #fff9ea);
  opacity: 0.85;
}
.ym-input {
  width: 100%;
  height: var(--ym-input-h);
  padding: 0 44px 0 44px; /* loc pt icon stânga și buton dreapta */
  background: transparent;
  border: 1px solid var(--ym-gray-orange);
  border-radius: var(--ym-radius-sm);
  color: var(--ym-light-orange);
  outline: none;
}
.ym-input::placeholder {
  color: var(--ym-light-orange);
  opacity: 0.92;
}

/* icon stânga în input */
.ym-field .ym-icon-left {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  opacity: 0.95;
  pointer-events: none;
  color: var(--ym-light-orange);
}

/* buton “Show” parolă (dreapta) */
.ym-toggle-pass {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--ym-light-orange);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.display-none {
  display: none !important;
}

.gray-orange-text {
  color: var(--ym-gray-orange);
}

/* butoane */
.ym-btn {
  font-family: var(--ym-font-montserrat);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ym-input-h);
  border-radius: var(--ym-radius-sm);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 0;
  font-size: 1.5rem;
}
.ym-btn--primary {
  background: var(--ym-gray-orange);
  color: var(--ym-azure-dark);
}
.ym-btn--secondary {
  background: var(--ym-azure-dark);
  color: var(--ym-light-orange);
}
.ym-btn--ghost {
  background: transparent;
  border: 1px solid var(--ym-gray-orange);
  color: var(--ym-gray-orange);
}

/* separatoare, linkuri */
.ym-auth__or {
  margin: 9vh 0 6px;
  text-align: center;
  opacity: 0.9;
  color: var(--ym-light-orange);
}
.ym-auth__cta {
  text-align: center;
  margin-top: 10vh;
}
.ym-auth__cta a {
  color: var(--ym-gray-orange);
  font-weight: 600;
  text-decoration: none;
}

/* Forgot password link below Log In button */
.ym-auth__forgot {
  margin: 0;
  text-align: center;
}
.ym-auth__forgot a {
  color: var(--ym-light-orange);
  font-size: 0.8rem;
  text-decoration: none;
  opacity: 0.95;
}
.ym-auth__forgot a:hover {
  text-decoration: underline;
}

/* Back to Log In link (forgot / set-password views) */
.ym-auth__back {
  margin-top: 20px;
  text-align: center;
}
.ym-auth__back a {
  color: var(--ym-gray-orange);
  font-weight: 600;
  text-decoration: none;
}
.ym-auth__back a:hover {
  text-decoration: underline;
}

/* Auth views: only one visible at a time */
.ym-auth__view[hidden] {
  display: none !important;
}

/* ========== Coming Soon (auth-style layout, incl. front page) ========== */
/* Hide theme header/footer so coming soon is full-screen like login */
body.page-template-page-ym-coming-soon-php .wp-block-template-part,
body.page-template-page-ym-coming-soon-php header:not(.ym-auth *),
body.page-template-page-ym-coming-soon-php footer,
body.page-template-page-ym-coming-soon-php
  [data-wp-block-group-outer-wrapper]
  > header,
body.page-template-page-ym-coming-soon-php
  [data-wp-block-group-outer-wrapper]
  > footer {
  display: none !important;
}
.ym-coming-soon .ym-auth__logo {
  margin-bottom: 32px;
}
.ym-coming-soon__panel {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.ym-coming-soon__text {
  color: var(--ym-gray-orange);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ========== MODAL Age Verification ========== */
.ym-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
}
.ym-modal.is-open {
  display: grid;
}
.ym-modal__dialog {
  text-align: center;
  width: 80%;
  max-width: 500px;
  background: var(--ym-white);
  color: var(--ym-black);
  border-radius: var(--ym-radius-sm);
  padding: 20px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.ym-modal h2 {
  margin: 4px 0 30px;
  font-weight: 700;
}
.ym-modal p {
  margin: 0 0 10px;
}
.ym-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 16px;
  justify-content: center;
  color: var(--ym-black);
  font-weight: 600;
}
.ym-check input {
  width: 18px;
  height: 18px;
}

/* butoane modal */
.ym-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.ym-btn--decline {
  background: var(--ym-azure-dark);
  color: var(--ym-white);
}
.ym-btn--confirm {
  background: var(--ym-gray-orange);
  color: var(--ym-azure-dark);
}

/* ========== Bottom Sheet (T&C + SignUp) ========== */
.ym-sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ym-light-orange);
  color: var(--ym-black);
  border-top-left-radius: var(--ym-radius-lg);
  border-top-right-radius: var(--ym-radius-lg);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 75vh;
  min-height: 50vh;
  max-width: 600px;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, content, footer */
  margin: 0 auto;
}
.ym-sheet.is-open {
  transform: translateY(0);
}

.ym-sheet__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 25px 25px 8px;
}
.ym-back {
  inline-size: var(--ym-icon-size);
  block-size: var(--ym-icon-size);
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ym-azure-dark); /* sau altă culoare implicită */
  outline: none;
}

.ym-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--ym-icon-back) no-repeat center / contain;
  mask: var(--ym-icon-back) no-repeat center / contain;
}

.ym-sheet__title {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  right: 24px;
}
.ym-sheet__content {
  overflow: auto;
  padding: 8px 25px 12px;
}
.ym-sheet__footer {
  padding: 10px 16px 16px;
  display: grid;
  gap: 10px;
}

/* scrollbar/progress custom (indicator lateral) */
.ym-scroll-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.ym-scroll-indicator__thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--ym-gray-orange);
  border-radius: 999px;
  top: 0%;
}

/* steps indicator */
.ym-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
  color: var(--ym-azure-mid);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.ym-steps__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--ym-azure-mid);
}
.ym-steps__dot.is-active {
  background: var(--ym-azure-dark);
}

/* role buttons */
.ym-role-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 6px auto 0;
  width: 65%;
}
.ym-role-grid--two {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.ym-role-grid--two .ym-role-btn {
  flex: 1;
  min-width: 140px;
}
.ym-role-btn {
  background: var(--ym-gray-orange);
  color: var(--ym-azure-dark);
  border-radius: var(--ym-radius-sm);
  height: var(--ym-input-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  font-size: 1.5rem;
}

/* signup inputs (pe sheet) */
.ym-input--dark {
  border-color: var(--ym-azure-dark);
  color: var(--ym-azure-dark);
}
.ym-input--dark::placeholder {
  color: var(--ym-azure-dark);
  opacity: 0.7;
}
.ym-agree {
  color: var(--ym-black);
  font-size: 0.8125rem;
  line-height: 1.5;
  display: flex;
  gap: 5px;
}
.ym-agree input {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  background: transparent;
}
.ym-agree input:focus {
  outline: none !important;
}

/* harden hidden attribute (unele reseturi îl invalidează) */
[hidden] {
  display: none !important;
}

/* Desktop tweaks */
@media (min-width: 960px) {
  .ym-auth__panel {
    width: min(90vw, 720px);
  }
  .ym-auth__logo {
    max-width: 260px;
  }
}

/* ascunde orice [hidden] garantat */
[hidden] {
  display: none !important;
}

/* steps bar numeric cu label "STEPS" */
.ym-steps--bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 6px 0 10px;
}
.ym-steps--bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  height: 2px;
  background: var(--ym-azure-mid);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.ym-steps--bar::after {
  content: "STEPS";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--ym-azure-mid);
}
.ym-steps__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: var(--ym-azure-mid);
  z-index: 1;
}
.ym-steps__dot.is-active {
  background: var(--ym-azure-dark);
}
.ym-steps__dot::before {
  content: attr(data-step-num);
  font-size: 0.875rem;
  line-height: 1;
}

/* stare disabled pentru buton */
.ym-btn:disabled {
  opacity: 0.5;
  filter: grayscale(20%);
  cursor: not-allowed;
}

/* specific pentru Secondary (T&C Continue) ca să pară inactiv */
.ym-btn--secondary:disabled {
  background: var(--ym-azure-mid);
  color: var(--ym-light-orange);
}

/* când intrăm în flow-ul Sign Up (de la T&C încolo), ascundem DOAR login-ul */
html[data-ym-flow="signup"] .ym-auth__panel .ym-auth__title,
html[data-ym-flow="signup"] .ym-auth__panel .ym-auth__subtitle,
html[data-ym-flow="signup"] .ym-auth__panel .ym-form {
  visibility: hidden; /* păstrează spațiul (fără shift) */
  opacity: 0; /* fade out */
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.i-am-title {
  text-align: center;
  margin: 0 0 20px;
  font-size: 2rem;
  font-weight: 700;
}

/* opțional: ascunde și “Or sign in with” + CTA (dacă vrei) */
/*
html[data-ym-flow="signup"]  .ym-auth__or,
html[data-ym-flow="signup"] .ym-auth__cta{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
*/

.ym-sheet__content-choose-role {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ym-input-signup {
  font-size: 1rem;
}

.ym-form-signup {
  margin: 30px auto 0;
  max-width: 400px;
}

/* Signup: icon 10px de la stânga + centrare verticală */
.ym-form-signup .ym-icon-left {
  position: absolute;
  inset-inline-start: 10px; /* ~10px cum ai cerut */
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  opacity: 0.95;
  z-index: 5;
  pointer-events: none;
}

/* Dacă vrei să te asiguri că textul nu calcă peste icon în cazul unor override-uri: */
.ym-form-signup .ym-input-signup {
  position: relative; /* la nevoie — nu afectează iconul care e poziționat relativ la .ym-field */
}

.ym-btn-submit {
  font-size: 1.5rem;
}

.ym-btn-signup {
  margin-block: 20px 30px;
}

/* YM: error message styling */
.ym-error {
  margin: 0.5rem 0 0;
  color: #ff5a7a; /* roz-roșiatic */
  font-weight: 600;
  font-size: 0.875rem;
}
.ym-success-msg {
  margin: 0.5rem 0 0;
  color: var(--ym-gray-orange);
  font-weight: 600;
  font-size: 0.875rem;
}

/* YM: shake effect */
@keyframes ym-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
input.shake {
  animation: ym-shake 0.35s ease;
}

.ym-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

#header,
#footer,
hr {
  display: none !important;
}

#ym-preference-label {
  color: var(--ym-azure-dark) !important;
}

/* Padding pentru input-urile noi din signup */
.ym-input-new {
  padding-inline: 10px !important;
}