/* Shared member gate and customer login panel, inspired by the mini-program. */
.myopal-auth-open { overflow: hidden; }
.myopal-member-gate { padding: 3rem 1.25rem 4rem; text-align: center; }
.myopal-member-gate h2 { font-size: 1.125rem; font-weight: 600; }
.myopal-member-gate p { max-width: 28rem; margin: .75rem auto 1.75rem; font-size: .875rem; line-height: 1.65; color: #8b806f; }
.myopal-auth-primary { display:flex; align-items:center; justify-content:center; min-height:var(--myopal-action-height); padding:var(--myopal-action-padding); border:1px solid var(--myopal-color-black); border-radius:var(--myopal-radius-pill); background:var(--myopal-action-background); color:var(--myopal-action-foreground); font-size:var(--myopal-action-font-size); font-weight:var(--myopal-weight-strong); text-decoration:none; }
.myopal-member-gate .myopal-auth-primary { width: fit-content; margin: auto; border-radius: 999px; min-width: 12rem; }
.myopal-auth-panel { position: fixed; inset: auto 0 0; width: min(100%, 32rem); max-width: 100%; max-height: calc(100dvh - 1rem); margin: 0 auto; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 1.25rem 1.25rem 0 0; background: #fffdf8; color: #17130d; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -10px 40px #0002; }
.myopal-auth-panel::backdrop { background: #0007; }
.myopal-auth-panel-handle { width: 2.25rem; height: 3px; border-radius: 9px; margin: 0 auto 1.25rem; background: #d6ccbb; }
.myopal-auth-preparation { margin-bottom: 1rem; padding: .75rem; border-radius: .75rem; background: #f6f2ea; font-size: .8125rem; color: #746d63; }
.myopal-auth-preparation button { min-height: 44px; margin-top: .5rem; border: 1px solid #b69a6340; border-radius: 999px; background: #fffdf8; color: #806435; }
.myopal-auth-form .myopal-auth-primary:disabled { opacity: .55; cursor: wait; }
.myopal-auth-forms h2, .myopal-auth-page-content > h2 { font-size: 1.25rem; text-align: center; font-weight: 600; }
.myopal-auth-intro { text-align: center; color: #8b806f; font-size: .875rem; line-height: 1.65; margin: .5rem 0 1.5rem; }
.myopal-auth-form { display: grid; gap: .625rem; font-size: .8125rem; }
.myopal-auth-form > label { color: #746d63; margin-top: .375rem; }
.myopal-auth-form input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #17130d20; border-radius: .75rem; background: white; padding: .75rem; font-size: 1rem; }
.myopal-auth-form input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: none; accent-color: #8f7340; }
.myopal-auth-options { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: .25rem 0; }
.myopal-auth-options label, .myopal-auth-consent { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.myopal-auth-consent { line-height: 1.6; align-items: start; padding-block: .5rem; }
.myopal-auth-consent input { margin-top: .2rem; }
.myopal-auth-options a, .myopal-auth-switch a, .myopal-auth-consent a { color: #806435; text-underline-offset: 3px; }
.myopal-auth-options a { display: inline-flex; align-items: center; min-height: 44px; }
.myopal-auth-switch { text-align: center; font-size: .8125rem; color: #746d63; margin-top: 1rem; }
.myopal-auth-switch a { display: inline-flex; align-items: center; min-height: 44px; }
.myopal-auth-cancel { display: block; margin: .25rem auto 0; min-height: 44px; background: transparent; border: 0; color: #746d63; font-size: .875rem; }
.myopal-auth-forms [hidden] { display: none; }
.myopal-auth-page { background: #f6f2ea; padding-bottom: 3rem; }
.myopal-auth-page-content { position: relative; max-width: 30rem; margin: -1rem auto 0; border-radius: 1rem; padding: 2rem 1.25rem; background: #fffdf8; }