/**

 * Member login & verification UI

 */



.member-login-page {

    max-width: 560px;

    margin: 0 auto;

    padding: 0 0.5rem 1.5rem;

}



.member-login-back {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    margin-bottom: 1rem;

    color: var(--enterprise-text-muted);

    font-size: 0.88rem;

    font-weight: 500;

    text-decoration: none;

    transition: color 0.15s ease;

}



.member-login-back:hover {

    color: var(--enterprise-blue);

}



.member-login-panel {

    margin-top: 0;

}



.member-login-panel .dashboard-stats-panel__title {

    font-size: 1.35rem;

}



.member-login-glass-block {

    position: relative;

    padding: 1rem;

    border-radius: var(--radius-md, 12px);

    border: 1px solid var(--enterprise-border-strong);

    background: var(--enterprise-surface-muted);

    overflow: hidden;

}



.member-login-glass-block__title {

    position: relative;

    margin: 0 0 0.85rem;

    text-align: center;

    color: var(--enterprise-text-primary);

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: -0.01em;

}



.member-login-scan-frame {

    position: relative;

    min-height: 220px;

    margin-bottom: 1rem;

    border: 2px dashed rgba(15, 26, 46, 0.14);

    border-radius: var(--radius-md, 12px);

    background: var(--enterprise-surface);

    overflow: hidden;

    transition: min-height 0.25s ease, padding 0.25s ease, margin-bottom 0.25s ease, border-color 0.25s ease;

}



.member-login-scan-frame::before,

.member-login-scan-frame::after {

    content: "";

    position: absolute;

    width: 28px;

    height: 28px;

    border-color: var(--color-gold, #C5A059);

    border-style: solid;

    z-index: 2;

    pointer-events: none;

}



.member-login-scan-frame::before {

    top: 12px;

    left: 12px;

    border-width: 3px 0 0 3px;

}



.member-login-scan-frame::after {

    top: 12px;

    right: 12px;

    border-width: 3px 3px 0 0;

}



.member-login-scan-frame__corners {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

}



.member-login-scan-frame__corners::before,

.member-login-scan-frame__corners::after {

    content: "";

    position: absolute;

    width: 28px;

    height: 28px;

    border-color: var(--color-gold, #C5A059);

    border-style: solid;

}



.member-login-scan-frame__corners::before {

    bottom: 12px;

    left: 12px;

    border-width: 0 0 3px 3px;

}



.member-login-scan-frame__corners::after {

    right: 12px;

    bottom: 12px;

    border-width: 0 3px 3px 0;

}



.member-login-scan-placeholder {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    min-height: 220px;

    padding: 1.5rem;

    color: var(--enterprise-text-muted);

    text-align: center;

}



.member-login-scan-placeholder__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    border-radius: 14px;

    background: var(--tblr-primary-lt);

    border: 1px solid rgba(30, 74, 138, 0.15);

    color: var(--enterprise-blue);

}



.member-login-scan-placeholder__text {

    font-size: 0.92rem;

    font-weight: 500;

}



.member-login-scan-active {

    min-height: 280px;

    margin-bottom: 0;

}



.member-login-scan-active:not(.member-login-scan-live) {

    padding: 0.75rem;

}



.member-login-scan-live {

    min-height: 0;

    padding: 0;

    margin-bottom: 0;

    border: none;

    background: #000;

}



.member-login-scan-live::before,

.member-login-scan-live::after {

    opacity: 0;

    visibility: hidden;

}



.member-login-reader-panel {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.member-login-reader-view {

    width: 100%;

    min-height: 220px;

    overflow: hidden;

}



.member-login-reader-view video {

    width: 100% !important;

    max-width: 100%;

    height: auto !important;

    display: block;

    object-fit: cover;

}



.member-login-scan-live .member-login-reader-view video {

    border-radius: 0;

}



.member-login-scan-active:not(.member-login-scan-live) .member-login-reader-view video {

    border-radius: var(--radius-sm, 8px);

}



.member-login-reader-view [id$="__scan_region"] {

    width: 100% !important;

    min-height: 0 !important;

}



.member-login-reader-view [id$="__scan_region"] video {

    width: 100% !important;

    max-width: 100% !important;

}



.member-login-reader-view #qr-shaded-region {

    border-left-color: rgba(11, 26, 48, 0.58) !important;

    border-right-color: rgba(11, 26, 48, 0.58) !important;

    border-top-color: rgba(11, 26, 48, 0.58) !important;

    border-bottom-color: rgba(11, 26, 48, 0.58) !important;

    z-index: 2;

    pointer-events: none;

}



.member-login-reader-view #qr-shaded-region > div {

    background-color: #ffffff !important;

    box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);

}



.member-login-reader-starting {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    min-height: 220px;

    padding: 1rem;

    color: var(--enterprise-text-secondary);

    font-size: 0.92rem;

    font-weight: 600;

}



.member-login-reader-controls {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

    padding: 1rem;

    border-top: 1px solid var(--enterprise-border-strong);

    background: linear-gradient(180deg, var(--color-cream, #F9F8F3) 0%, var(--color-cream-muted, #F0EDE4) 100%);

}



.member-login-reader-controls__field {

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

}



.member-login-reader-controls__label {

    display: block;

    margin: 0;

    color: var(--color-midnight, #0B1A30);

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}



.member-login-reader-controls__count {

    margin-left: 0.2rem;

    color: var(--color-gold-dark, #A8863F);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0;

    text-transform: none;

}



.member-login-camera-select-wrap {

    position: relative;

}



.member-login-camera-select {

    width: 100%;

    min-height: 50px;

    padding: 0.7rem 2.5rem 0.7rem 0.95rem;

    border: 1px solid var(--enterprise-border-strong);

    border-radius: var(--radius-md, 12px);

    background-color: var(--enterprise-surface);

    color: var(--color-midnight, #0B1A30);

    font-family: var(--tblr-font-sans-serif);

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.35;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    box-shadow: inset 0 1px 2px rgba(11, 26, 48, 0.04), var(--shadow-xs);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 0.85rem center;

    background-size: 18px;

    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;

}



.member-login-camera-select option {

    color: var(--color-midnight, #0B1A30);

    background: var(--enterprise-surface);

    font-weight: 600;

}



.member-login-camera-select:hover {

    border-color: var(--color-gold, #C5A059);

    background-color: #fff;

}



.member-login-camera-select:focus {

    outline: none;

    border-color: var(--color-gold, #C5A059);

    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.18), inset 0 1px 2px rgba(11, 26, 48, 0.04);

    background-color: #fff;

}



.member-login-camera-select:disabled {

    opacity: 0.55;

    cursor: not-allowed;

}



.member-login-reader-stop {

    margin-top: 0;

}



.member-login-scan-action-btn {

    width: 100%;

}



.member-login-scan-action-enter-active,

.member-login-scan-action-leave-active {

    transition: opacity 0.22s ease, transform 0.22s ease;

}



.member-login-scan-action-enter-from,

.member-login-scan-action-leave-to {

    opacity: 0;

    transform: translateY(6px);

}



.member-login-btn-primary {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    width: 100%;

    min-height: 52px;

    padding: 0.85rem 1rem;

    border: 1px solid var(--color-gold-dark, #A8863F);

    border-radius: var(--radius-md, 12px);

    background: linear-gradient(180deg, var(--color-gold-light, #D4B878) 0%, var(--color-gold, #C5A059) 100%);

    color: var(--color-midnight, #0B1A30);

    font-size: 1rem;

    font-weight: 700;

    box-shadow: var(--shadow-sm);

    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;

}



.member-login-btn-primary:hover:not(:disabled) {

    transform: translateY(-1px);

    box-shadow: var(--shadow-md);

    color: var(--color-midnight, #0B1A30);

}



.member-login-btn-primary:disabled {

    opacity: 0.65;

    cursor: not-allowed;

}



.member-login-btn-secondary {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    width: 100%;

    min-height: 50px;

    padding: 0.8rem 1rem;

    border: 1px solid rgba(30, 74, 138, 0.2);

    border-radius: var(--radius-md, 12px);

    background: var(--tblr-primary-lt);

    color: var(--enterprise-blue-dark);

    font-size: 0.98rem;

    font-weight: 700;

    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;

}



.member-login-btn-secondary:hover:not(:disabled) {

    background: #e3edf9;

    border-color: rgba(30, 74, 138, 0.3);

    color: var(--enterprise-blue-dark);

}



.member-login-btn-secondary:disabled {

    opacity: 0.55;

    cursor: not-allowed;

}



.member-login-btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 46px;

    padding: 0.7rem 1rem;

    border: 1px solid var(--enterprise-border-strong);

    border-radius: var(--radius-md, 12px);

    background: var(--enterprise-surface);

    color: var(--enterprise-text-secondary);

    font-size: 0.92rem;

    font-weight: 600;

    transition: background 0.15s ease, border-color 0.15s ease;

}



.member-login-btn-outline:hover:not(:disabled) {

    background: var(--enterprise-surface-muted);

    border-color: rgba(15, 26, 46, 0.18);

    color: var(--enterprise-text-primary);

}



.member-login-divider {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin: 1.15rem 0;

    color: #94a3b8;

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: lowercase;

}



.member-login-divider::before,

.member-login-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--enterprise-border-strong);

}



.member-login-manual-panel__head {

    position: relative;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.member-login-manual-panel__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 11px;

    background: var(--tblr-primary-lt);

    border: 1px solid rgba(30, 74, 138, 0.15);

    color: var(--enterprise-blue);

    flex-shrink: 0;

}



.member-login-manual-panel__title {

    margin: 0;

    color: var(--enterprise-text-primary);

    font-size: 0.98rem;

    font-weight: 700;

}



.member-login-manual-panel__caption {

    margin: 0.1rem 0 0;

    color: var(--enterprise-text-muted);

    font-size: 0.78rem;

}



.member-login-field-label {

    position: relative;

    display: block;

    margin-bottom: 0.45rem;

    color: var(--enterprise-text-secondary);

    font-size: 0.88rem;

    font-weight: 700;

}



.member-login-input,

.member-login-otp-input {

    position: relative;

    width: 100%;

    min-height: 48px;

    padding: 0.75rem 0.9rem;

    border: 1px solid rgba(15, 26, 46, 0.12);

    border-radius: var(--radius-sm, 10px);

    background: var(--enterprise-surface);

    color: var(--enterprise-text-primary);

    font-size: 1rem;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.member-login-otp-input {

    min-height: 58px;

    border-radius: var(--radius-md, 12px);

    font-size: 2rem;

    letter-spacing: 0.35em;

    text-align: center;

}



.member-login-input::placeholder,

.member-login-otp-input::placeholder {

    color: #94a3b8;

}



.member-login-input:focus,

.member-login-otp-input:focus {

    outline: none;

    border-color: var(--color-gold, #C5A059);

    box-shadow: 0 0 0 3px rgba(30, 74, 138, 0.1);

}



.member-login-member-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 0.85rem;

    margin-bottom: 1rem;

    padding: 0.85rem 1rem;

    border: 1px solid var(--enterprise-border-strong);

    border-radius: var(--radius-md, 12px);

    background: var(--enterprise-surface-muted);

}



.member-login-member-card__avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border-radius: 999px;

    background: var(--tblr-primary-lt);

    border: 1px solid rgba(30, 74, 138, 0.15);

    color: var(--enterprise-blue);

    font-weight: 800;

    flex-shrink: 0;

}



.member-login-member-card__name {

    margin: 0;

    color: var(--enterprise-text-primary);

    font-size: 0.98rem;

    font-weight: 700;

}



.member-login-member-card__branch {

    margin: 0.15rem 0 0;

    color: var(--enterprise-text-muted);

    font-size: 0.82rem;

}



.member-login-alert {

    position: relative;

    margin-top: 1rem;

    padding: 0.85rem 0.95rem;

    border-radius: var(--radius-sm, 10px);

    font-size: 0.88rem;

    line-height: 1.45;

}



.member-login-alert--info {

    background: var(--tblr-primary-lt);

    border: 1px solid rgba(30, 74, 138, 0.18);

    color: var(--enterprise-blue-dark);

}



.member-login-alert--warning {

    background: #fffbeb;

    border: 1px solid #fde68a;

    color: #92400e;

}



.member-login-alert--danger {

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #b91c1c;

}



.member-login-picker {

    position: relative;

    margin-top: 1rem;

    border: 1px solid var(--enterprise-border-strong);

    border-radius: var(--radius-md, 12px);

    overflow: hidden;

    background: var(--enterprise-surface);

    box-shadow: var(--shadow-xs);

}



.member-login-picker__title {

    margin: 0;

    padding: 0.85rem 1rem;

    border-bottom: 1px solid var(--enterprise-border-strong);

    background: var(--enterprise-surface-muted);

    color: var(--enterprise-text-secondary);

    font-size: 0.92rem;

    font-weight: 700;

}



.member-login-picker__item {

    display: block;

    width: 100%;

    padding: 0.85rem 1rem;

    border: 0;

    border-bottom: 1px solid var(--enterprise-border-strong);

    background: transparent;

    text-align: left;

    transition: background 0.15s ease;

}



.member-login-picker__item:last-child {

    border-bottom: 0;

}



.member-login-picker__item:hover {

    background: var(--tblr-primary-lt);

}



.member-login-picker__name {

    color: var(--enterprise-text-primary);

    font-size: 0.92rem;

    font-weight: 700;

}



.member-login-picker__branch {

    margin-top: 0.15rem;

    color: var(--enterprise-text-muted);

    font-size: 0.8rem;

}



.member-login-actions {

    position: relative;

    display: grid;

    gap: 0.65rem;

    margin-top: 1rem;

}



@media (min-width: 576px) {

    .member-login-panel .dashboard-stats-panel__title {

        font-size: 1.45rem;

    }

}