/*
 * mobile-signup.css
 * Mobile-only overrides for login/signup.html.twig (max-width: 768px)
 * Target design: Account-SignUp-mobile.html (390px viewport)
 *
 * These rules are purely additive — they only apply inside media queries
 * and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 */


/* ============================================================
   1. TOP BAR — design: height 44px, pad 0 20px, #231f20
   ============================================================ */
@media (max-width: 768px) {
  .th-header [data-v-header-component-link] {
    display: none !important;
  }

  .th-topbar,
  .th-topbar.top-bar {
    height: 44px !important;
    min-height: 44px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-direction: row !important;
  }

  .th-topbar .position-relative.container,
  .th-topbar .top-bar__inner,
  .th-topbar.top-bar .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    height: 44px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .th-topbar .d-flex.align-items-center.justify-content-center {
    display: contents !important;
  }

  .th-topbar-text,
  .th-topbar .top-bar__promo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .th-topbar-link,
  .th-topbar .top-bar__catalogue {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    line-height: 1.2 !important;
  }

  .th-topbar .fa-envelope,
  .th-topbar .fal.fa-envelope,
  .th-topbar .top-bar__envelope {
    display: none !important;
  }
}


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: height 60px, pad 0 20px, logo 22px,
   icons 20px, gap 12px, hamburger 40px, border-bottom #ececec
   Login mockup keeps search + pinboard + account icon.
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .th-menu-wrapper.mobile-menu {
    max-width: none !important;
    overflow: visible !important;
  }

  .sticky-wrapper.desktop-menu {
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
  }

  .sticky-wrapper.desktop-menu .menu-area {
    padding: 0 !important;
    background: #ffffff !important;
  }

  .sticky-wrapper.desktop-menu .container,
  .sticky-wrapper.desktop-menu .container.th-container {
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area .row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 60px !important;
    width: 100% !important;
  }

  .sticky-wrapper .col-4.d-flex {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .sticky-wrapper .col-4:first-child {
    justify-content: flex-start !important;
    grid-column: 1;
  }

  .sticky-wrapper .col-4:nth-child(2) {
    justify-content: center !important;
    grid-column: 2;
  }

  .sticky-wrapper .col-4:last-child {
    justify-content: flex-end !important;
    grid-column: 3;
  }

  .sticky-wrapper .th-nav-section-px {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hamburger — design: 40x40, font 18px, margin-left -8px */
  button.th-menu-toggle.d-block.d-lg-none {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: -8px !important;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    color: #231f20 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  button.th-menu-toggle.d-block.d-lg-none i {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  .header-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  .header-logo a img {
    height: 22px !important;
    width: auto !important;
    display: block !important;
    max-height: 22px !important;
  }

  /* Hide desktop-only chrome (keep account icon — design shows it) */
  .sticky-wrapper .d-none.d-lg-inline-block,
  .sticky-wrapper .header-button.d-none.d-lg-inline-block,
  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
  }

  .th-header-search {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fa-regular.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass {
    font-size: 20px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #pinboard-button,
  a[aria-controls="offcanvasRight"] {
    width: 20px !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pinboard-button img,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  .th-user-dropdown,
  #user-profile-info {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1051 !important;
  }

  .th-user-dropdown .dropdown-toggle,
  #user-profile-info .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    font-size: 20px !important;
  }

  .th-user-dropdown .dropdown-menu,
  .th-user-dropdown .dropdown-menu.show,
  #user-profile-info .dropdown-menu,
  #user-profile-info .dropdown-menu.show {
    z-index: 1052 !important;
  }

  .fa-solid.fa-user,
  .th-user-dropdown .fa-solid.fa-user,
  #user-profile-info .fa-solid.fa-user {
    font-size: 20px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  /* Header must sit above signup hero; allow dropdown to extend past nav bar */
  .th-header {
    position: relative !important;
    z-index: 1050 !important;
  }

  .th-menu-wrapper,
  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .menu-area,
  .sticky-wrapper.desktop-menu .container,
  .sticky-wrapper.desktop-menu .container.th-container,
  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper .col-4:last-child,
  .sticky-wrapper .d-flex.align-items-end.gap-3 {
    overflow: visible !important;
  }

  #signup-page {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* ============================================================
   2b. MOBILE MENU OVERLAY
   Match home/about: black 64px head bar, logo left, circled X right
   ============================================================ */
@media (max-width: 768px) {
  .th-menu-wrapper.mobile-menu .th-menu-area {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .th-menu-wrapper.mobile-menu .th-mobile-menu-head {
    flex-shrink: 0 !important;
    height: 64px !important;
    background: #231f20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
  }

  .th-menu-wrapper.mobile-menu .mobile-logo {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
    display: block !important;
  }

  .th-menu-wrapper.mobile-menu .mobile-logo img,
  .th-menu-wrapper.mobile-menu .mobile-logo svg {
    height: 20px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .th-menu-wrapper.mobile-menu .th-menu-toggle {
    position: static !important;
    right: auto !important;
    top: auto !important;
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .th-menu-wrapper.mobile-menu .th-menu-toggle i {
    font-size: 12px !important;
    line-height: 1 !important;
    color: #ffffff !important;
  }

  .th-menu-wrapper.mobile-menu .th-menu-toggle:hover {
    background: #3a3536 !important;
    background-color: #3a3536 !important;
    color: #ffffff !important;
  }

  .th-menu-wrapper.mobile-menu .th-mobile-menu {
    margin-top: 0 !important;
    flex: 1 1 auto !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ============================================================
   3. SIGNUP HERO + FORM CARD
   Design: 230px image + gradient overlay + title 26/700 white
   Card: pad 32px 20px 44px, inner border #e8e8e8 r10 pad 24px 20px
   ============================================================ */
@media (max-width: 768px) {
  #signup-page.th-login,
  #signup-page.th-login.pt-0 {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #signup-page .container,
  #signup-page .container.th-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #signup-page .row,
  #signup-page .row.align-items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  #signup-page .row > [class*="col-"],
  #signup-page .row > .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Undo desktop "hide image on mobile" so the 230px hero can show */
  #signup-page .th-img-container,
  #signup-page .th-imge-container,
  .th-signup .th-img-container,
  .th-signup .th-imge-container,
  .th-login .th-img-container,
  .th-login .th-imge-container {
    display: block !important;
    position: relative !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #signup-page .th-img-container img,
  #signup-page .th-imge-container img,
  .th-login .th-img-container img,
  .th-login .th-imge-container img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    display: block !important;
  }

  /* Design overlay: linear-gradient(180deg, rgba(35,31,32,0.15), rgba(35,31,32,0.82)) */
  #signup-page .th-img-container::after,
  #signup-page .th-imge-container::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.12) 0%, rgba(35, 31, 32, 0.74) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Title is moved into the image wrap by mobile-signup.js */
  #signup-page .th-img-container .th-login-form-header,
  #signup-page .th-imge-container .th-login-form-header,
  #signup-page .th-img-container .th-signup-form-header,
  #signup-page .th-imge-container .th-signup-form-header {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 0 20px 22px !important;
    margin: 0 !important;
    text-align: start !important;
  }

  #signup-page .th-img-container .th-login-form-header h2,
  #signup-page .th-imge-container .th-login-form-header h2,
  #signup-page .th-img-container .th-signup-form-header h2,
  #signup-page .th-imge-container .th-signup-form-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
    text-align: start !important;
    text-transform: none !important;
    color: #ffffff !important;
    text-wrap: pretty;
  }

  /* Form column — design outer pad 40px 20px 48px */
  #signup-page .row > .col-md-6:last-child {
    padding: 32px 20px 44px !important;
    background: #ffffff !important;
  }

  #signup-page .th-login-form-container,
  #signup-page .th-login-form-container.pt-100,
  #signup-page .th-login-form-container.w-100,
  .th-login .th-login-form-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }

  /* Card — design: border 1px #e2e0de, radius 10px, pad 24px 20px */
  #signup-page .th-login-form-body {
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    padding: 24px 20px !important;
    background: #ffffff !important;
  }

  /* Injected by mobile-signup.js — design h2 Sign up */
  #signup-page .th-signup-mobile-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-align: left !important;
  }

  #signup-page .th-signup-mobile-subtitle {
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-align: left !important;
  }

  #signup-page #signup-form {
    margin: 0 !important;
  }

  /* Email label — design: 11px uppercase #6b6764, mb 8px */
  #signup-page #signup-form .form-group::before {
    content: "Email address";
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6a67;
    margin-bottom: 8px;
  }

  #signup-page #signup-form .form-group {
    margin-bottom: 8px !important;
  }

  /* Email input — design: h46, pad 0 14px, 12px, border #d7d5d2, r8 */
  #signup-page #signup-form input.form-control,
  #signup-page #signup-form #email {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    color: #231f20 !important;
    background: #fff !important;
    border: 1px solid #dcdcde !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #signup-page #signup-form input.form-control::placeholder,
  #signup-page #signup-form #email::placeholder {
    color: #8a8785 !important;
    font-size: 12px !important;
    opacity: 1 !important;
  }

  #signup-page #signup-form input.form-control:focus,
  #signup-page #signup-form input.form-control:focus-visible,
  #signup-page #signup-form #email:focus {
    border-color: #dcdcde !important;
    box-shadow: none !important;
    outline: 2px solid #231f20 !important;
    outline-offset: 2px !important;
  }

  #signup-page #signup-form .invalid-feedback {
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  #signup-page #signup-form .th-pt-20 {
    padding-top: 0 !important;
    margin: 8px 0 0 !important;
  }

  /* Send OTP — design: h46, r8, bg #231f20, 13/600, hover #000 */
  #signup-page #send-otp-button,
  #signup-page #signup-form .th-btn-primary {
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #signup-page #send-otp-button:before,
  #signup-page #send-otp-button:after,
  #signup-page #signup-form .th-btn-primary:before,
  #signup-page #signup-form .th-btn-primary:after {
    display: none !important;
    content: none !important;
  }

  #signup-page #send-otp-button:hover,
  #signup-page #signup-form .th-btn-primary:hover {
    background: #3a3536 !important;
    background-color: #3a3536 !important;
    color: #ffffff !important;
    text-shadow: none !important;
  }

  #signup-page #send-otp-button:focus-visible,
  #signup-page #signup-form .th-btn-primary:focus-visible {
    outline: 2px solid #231f20 !important;
    outline-offset: 2px !important;
  }

  #signup-page #send-otp-button:disabled,
  #signup-page #send-otp-button:disabled:hover {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #f9fafb !important;
    cursor: not-allowed !important;
  }

  #signup-page #signup-error-message {
    font-size: 12px !important;
    padding-top: 12px !important;
  }

  #signup-page #signup-error-message:empty {
    display: none !important;
    padding: 0 !important;
  }

  /* Create an account — design: mt 16, 12px, link 600 underline offset 3 */
  #signup-page .th-login-form-footer,
  #signup-page .th-login-form-footer.text-center.pt-20 {
    padding-top: 16px !important;
    text-align: center !important;
  }

  #signup-page .th-login-form-footer p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
  }

  #signup-page .th-login-form-footer a,
  #signup-page .th-login-form-footer a.th-underline.th-bold {
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  /* Or divider — design: flex, gap 12, lines #e2e0de, 11px uppercase #8a8785 */
  #signup-page .th-login-form-body > .text-center.my-3 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 20px 0 !important;
    padding: 0 !important;
  }

  #signup-page .th-login-form-body > .text-center.my-3::before,
  #signup-page .th-login-form-body > .text-center.my-3::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: #e2e0de !important;
  }

  #signup-page .th-login-form-body > .text-center.my-3 .text-muted,
  #signup-page .th-login-form-body > .text-center.my-3 .font-weight-600 {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #8a8785 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  /* Social buttons — design: column gap 10, h46, border #d7d5d2 r8, 12/600 */
  #signup-page .th-login-form-body > .d-grid.gap-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #signup-page #google-login-form,
  #signup-page #microsoft-login-form {
    display: contents !important;
  }

  #signup-page #google-login-link,
  #signup-page #microsoft-login-link,
  #signup-page .th-login-form-body .th-btn-gray {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #dcdcde !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #231f20 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #signup-page #google-login-link:before,
  #signup-page #google-login-link:after,
  #signup-page #microsoft-login-link:before,
  #signup-page #microsoft-login-link:after,
  #signup-page .th-login-form-body .th-btn-gray:before,
  #signup-page .th-login-form-body .th-btn-gray:after {
    display: none !important;
    content: none !important;
  }

  #signup-page #google-login-link:hover,
  #signup-page #microsoft-login-link:hover,
  #signup-page .th-login-form-body .th-btn-gray:hover {
    background: #f6f5f3 !important;
    background-color: #f6f5f3 !important;
    color: #231f20 !important;
    text-shadow: none !important;
  }

  #signup-page #google-login-link:focus-visible,
  #signup-page #microsoft-login-link:focus-visible {
    outline: 2px solid #231f20 !important;
    outline-offset: 2px !important;
  }

  #signup-page #google-login-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  #signup-page #microsoft-login-link svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  #signup-page #google-login-link span,
  #signup-page #microsoft-login-link span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
}



@media (max-width: 768px) {
  /* Terms under the card — injected */
  #signup-page .th-signup-mobile-terms {
    margin: 24px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #6b6a67 !important;
    text-align: left !important;
  }

  #signup-page .th-signup-mobile-terms a {
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 400 !important;
  }

  /* Social signup — injected */
  #signup-page .th-signup-mobile-or {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 22px 0 !important;
  }

  #signup-page .th-signup-mobile-or::before,
  #signup-page .th-signup-mobile-or::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: #e8e8e8 !important;
  }

  #signup-page .th-signup-mobile-or span {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    color: #8f8d8a !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
  }

  #signup-page .th-signup-mobile-social {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #signup-page .th-signup-mobile-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #dcdcde !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    text-decoration: none !important;
    background: #ffffff !important;
  }

  #signup-page .th-signup-mobile-social a:hover {
    background: #f6f5f3 !important;
    color: #231f20 !important;
  }

  #signup-page .th-signup-form-footer.pt-20 {
    padding-top: 16px !important;
  }
}


/* ============================================================
   4. OTP MODAL
   Design: overlay rgba(35,31,32,0.55), card r10,
   pad 32/20/28, OTP grid 6×48 h, gap 8, btn min-h 46 r6
   ============================================================ */
@media (max-width: 768px) {
  #signup-page #verifyEmailModal.show,
  #signup-page #verifyEmailModal.modal.show,
  #verifyEmailModal.show,
  #verifyEmailModal.modal.show {
    background-color: rgba(35, 31, 32, 0.55) !important;
    padding: 80px 16px 20px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #signup-page #verifyEmailModal,
  #verifyEmailModal {
    background-color: rgba(35, 31, 32, 0.55) !important;
  }

  #verifyEmailModal .modal-dialog,
  #verifyEmailModal .modal-dialog.modal-lg,
  #verifyEmailModal .modal-dialog.modal-dialog-centered {
    max-width: 350px !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-height: 100% !important;
  }

  #verifyEmailModal .modal-content,
  #verifyEmailModal .modal-content.modelBorderRadius {
    width: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 32px 20px 28px !important;
    box-shadow: 0 24px 60px rgba(35, 31, 32, 0.28) !important;
  }

  #verifyEmailModal .modal-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    z-index: 2 !important;
    border: none !important;
    border-bottom: 0 !important;
  }

  #verifyEmailModal .modal-header .btn-close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    font-size: 16px !important;
    color: #33322f !important;
    background-size: 12px !important;
    box-shadow: none !important;
  }

  #verifyEmailModal .modal-body {
    padding: 0 !important;
  }

  #verifyEmailModal .guest-signup-form {
    padding: 0 !important;
  }

  #verifyEmailModal .text-center.py-10.mb-20 {
    padding: 0 !important;
    margin: 0 0 22px !important;
  }

  #verifyEmailModal .modal-content {
    position: relative !important;
  }

  #verifyEmailModal h6 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #231f20 !important;
  }

  #verifyEmailModal .text-center.py-10.mb-20 p,
  #verifyEmailModal #verify-email-form > .text-center p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-align: center !important;
  }

  #verifyEmailModal #verify-email-form > .text-center p br {
    display: none !important;
  }

  #verifyEmailModal #verify-email-display,
  #verifyEmailModal strong {
    font-weight: 600 !important;
  }

  #verifyEmailModal .otp-wrapper,
  #verifyEmailModal .otp-wrapper.mb-20 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    justify-content: stretch !important;
  }

  #verifyEmailModal .otp-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    border: 1px solid #dcdcde !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #verifyEmailModal .otp-input:focus,
  #verifyEmailModal .otp-input:focus-visible {
    border-color: #dcdcde !important;
    box-shadow: none !important;
    outline: 2px solid #231f20 !important;
    outline-offset: 2px !important;
  }

  #verifyEmailModal #verify-email-button,
  #verifyEmailModal .th-btn-primary {
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #verifyEmailModal #verify-email-button:before,
  #verifyEmailModal #verify-email-button:after,
  #verifyEmailModal .th-btn-primary:before,
  #verifyEmailModal .th-btn-primary:after {
    display: none !important;
    content: none !important;
  }

  #verifyEmailModal #verify-email-button:hover,
  #verifyEmailModal .th-btn-primary:hover {
    background: #3a3536 !important;
    background-color: #3a3536 !important;
    color: #ffffff !important;
    text-shadow: none !important;
  }

  #verifyEmailModal .text-center.mt-15 {
    margin-top: 16px !important;
  }

  #verifyEmailModal .text-center.mt-15 + .text-center.mt-15 {
    margin-top: 14px !important;
  }

  #verifyEmailModal #otp-timer-text,
  #verifyEmailModal .text-center.mt-15,
  #verifyEmailModal .text-center.mt-15 small {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    text-align: center !important;
  }

  #verifyEmailModal .text-center.mt-15 + .text-center.mt-15,
  #verifyEmailModal .text-center.mt-15 + .text-center.mt-15 small {
    color: #8f8d8a !important;
  }

  #verifyEmailModal .resend-link,
  #verifyEmailModal #resend-otp-button {
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    color: #231f20 !important;
    cursor: pointer !important;
  }
}




/* ============================================================
   6. GENERAL
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #231f20;
  }

  a {
    color: #231f20;
    text-decoration: none;
  }

  a:hover {
    color: #000;
  }

  .th-container,
  .th-container-md {
    max-width: 100% !important;
  }

  .th-component-edit-link,
  [data-v-header-component-link] {
    display: none !important;
  }

  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .way-points-container {
    display: none !important;
  }

  .th-footer-section-py {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
  }
}


/* Hide design-only injected nodes if JS hasn't torn them down yet */
@media (min-width: 769px) {
  .th-signup-mobile-title,
  .th-signup-mobile-subtitle,
  .th-signup-mobile-or,
  .th-signup-mobile-social,
  .th-signup-mobile-terms {
    display: none !important;
  }
}