/* Final mobile presentation layer for the Orvon wishlist homepage.
   Loaded after Bootstrap, the design system, templates, and editor styles. */
@media (max-width: 809.98px) {
  /* Keep every phone control visually identical to the branded desktop control. */
  .dark-button,
  .light-button,
  .mobile-join,
  .steps-cta,
  .section-cta,
  .submit-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    margin-inline: 0 !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background-image: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .dark-button,
  .mobile-join,
  .steps-cta,
  .section-cta,
  .submit-button {
    border: 1px solid #11120f !important;
    background: #11120f !important;
    color: #fff !important;
  }

  .light-button {
    border: 2px solid #11120f !important;
    background: #fff !important;
    color: #111 !important;
  }

  .dark-button:hover,
  .dark-button:focus-visible,
  .mobile-join:hover,
  .mobile-join:focus-visible,
  .steps-cta:hover,
  .steps-cta:focus-visible,
  .section-cta:hover,
  .section-cta:focus-visible,
  .submit-button:hover,
  .submit-button:focus-visible {
    border-color: #11120f !important;
    background: #11120f !important;
    color: #fff !important;
  }

  .light-button:hover,
  .light-button:focus-visible {
    border-color: #11120f !important;
    background: #fff !important;
    color: #111 !important;
  }

  .menu-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #dadad7 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  .menu-button svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
  }

  .nav .mobile-join {
    margin-top: 20px !important;
  }

  /* Remove native/Bootstrap button chrome from the image stepper. */
  #how button.step {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    border-bottom: 1px solid #cfd3cd !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #111 !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
  }

  #how button.step:last-of-type {
    border-bottom: 0 !important;
  }

  #how button.step > span {
    border: 1px solid #aeb2ad !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #111 !important;
    font-weight: 600 !important;
  }

  #how button.step.active > span {
    border-color: #111 !important;
    background: #111 !important;
    color: #fff !important;
  }

  #how button.step h3 {
    color: #111 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
  }

  #how button.step p {
    color: #555a55 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
  }

  /* Bootstrap was drawing its own arrow and active-blue state behind Orvon's FAQ icon. */
  #faq .accordion-button,
  #faq .accordion-button.collapsed,
  #faq .accordion-button:not(.collapsed) {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    color: #171717 !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
  }

  #faq .accordion-button::after,
  #faq .accordion-button.collapsed::after,
  #faq .accordion-button:not(.collapsed)::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    content: none !important;
    background: none !important;
    transform: none !important;
  }

  #faq .accordion-button:focus,
  #faq .accordion-button:focus-visible {
    outline: 2px solid #171717 !important;
    outline-offset: -3px !important;
    box-shadow: none !important;
  }

  #faq .faq-item button > svg {
    display: block !important;
    flex: 0 0 30px !important;
    color: #171717 !important;
  }

  /* The signup modal keeps the same field and action proportions as desktop. */
  .modal-backdrop > .modal {
    width: calc(100% - 16px) !important;
    max-width: 560px !important;
    margin: 8px auto !important;
  }

  .waitlist-form .form-control,
  .waitlist-form .form-select,
  .waitlist-form input,
  .waitlist-form select {
    -webkit-appearance: none;
    appearance: none;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    border: 1px solid #aaa !important;
    border-radius: 7px !important;
    background-color: #fff !important;
    color: #11120f !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
  }

  .waitlist-form .form-select,
  .waitlist-form select {
    appearance: auto;
    -webkit-appearance: menulist;
  }

  .modal-close {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  /* Signed-in editing controls use the same touch-safe treatment on live pages. */
  .owner-toolbar button,
  .section-admin-controls button,
  .section-admin-controls .btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .section-admin-controls .btn-danger,
  .section-delete-button,
  .orvon-section-delete {
    border-color: #b42318 !important;
    background: #b42318 !important;
    color: #fff !important;
  }
}