/* Login wrapper */
.alg-login-wrapper {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.alg-login-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

.alg-login-title {
    margin: 0 0 1.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #1a1a2e;
}

/* Error */
.alg-error-msg {
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    color: #c0392b;
    font-size: .9rem;
    padding: .65rem .9rem;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

/* Fields */
.alg-field {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.alg-field label {
    font-size: .875rem;
    font-weight: 600;
    color: #444;
}

.alg-field input[type="email"],
.alg-field input[type="password"],
.alg-field input[type="text"] {
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    font-size: .95rem;
    color: #1a1a2e;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.alg-field input:focus {
    border-color: #6c47ff;
    box-shadow: 0 0 0 3px rgba(108,71,255,.12);
    background: #fff;
}

/* Password toggle */
.alg-password-wrap { position: relative; display: flex; align-items: center; }
.alg-password-wrap input { padding-right: 2.75rem !important; }
.alg-toggle-pass {
    position: absolute; right: .65rem;
    background: none; border: none; cursor: pointer;
    color: #888; padding: 0; display: flex; align-items: center;
    transition: color .15s;
}
.alg-toggle-pass:hover { color: #6c47ff; }

/* Forgot link */
.alg-forgot-link {
    display: block; text-align: right;
    font-size: .82rem; color: #6c47ff;
    text-decoration: none; margin-top: -.5rem;
    margin-bottom: 1.25rem; font-weight: 600;
}
.alg-forgot-link:hover { text-decoration: underline; }

/* Login button */
.alg-login-btn {
    width: 100%; padding: .8rem 1rem;
    background: #6c47ff; color: #fff;
    border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    gap: .5rem; margin-top: .5rem;
    transition: background .2s, transform .1s;
}
.alg-login-btn:hover:not(:disabled) { background: #5535e0; transform: translateY(-1px); }
.alg-login-btn:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner */
.alg-btn-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50%;
    animation: alg-spin .7s linear infinite;
}
@keyframes alg-spin { to { transform: rotate(360deg); } }

/* Booking view */
.alg-booking-wrapper { width: 100%; }
.alg-user-bar {
    display: flex; align-items: center;
    justify-content: flex-end; gap: 1rem;
    padding: .5rem 0 1rem; flex-wrap: wrap;
}
.alg-user-greeting { font-size: .9rem; color: #555; font-weight: 600; }
.alg-logout-btn {
    background: none; border: 1.5px solid #d0d5dd;
    border-radius: 6px; color: #555;
    font-size: .82rem; font-weight: 600;
    padding: .35rem .8rem; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.alg-logout-btn:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 480px) {
    .alg-login-card { padding: 2rem 1.25rem; }
    .alg-login-title { font-size: 1.3rem; }
}


/* Login button pink -> black */
.alg-login-btn{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
}

.alg-login-btn:hover{
    background:#000 !important;
    color:#fff !important;
}

.alg-login-btn:hover .alg-btn-text{
    color:#fff !important;
}

/* Forgot password pink/blue -> black */
.alg-forgot-link{
    color:#000 !important;
}

.alg-forgot-link:hover{
    color:#000 !important;
    text-decoration:underline;
}

/* Password field wrapper */
.alg-password-wrap{
    position:relative;
}

/* Give input space for eye icon */
.alg-password-wrap input{
    padding-right:48px !important;
}

/* Remove border/box around eye button */
.alg-toggle-pass{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    height:auto !important;
    min-width:auto !important;
    min-height:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000 !important;
    cursor:pointer;
}

/* Eye icon color black */
.alg-toggle-pass svg{
    stroke:#000 !important;
    color:#000 !important;
}

/* Remove any focus border around eye */
.alg-toggle-pass:focus,
.alg-toggle-pass:active,
.alg-toggle-pass:hover{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    color:#000 !important;
}

.alg-login-btn .alg-btn-text{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:inherit !important;
}

.alg-login-btn:disabled{
    opacity:1 !important;
    cursor:not-allowed;
}

.alg-login-btn:disabled .alg-btn-text{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#000 !important;
}

.alg-auth-tabs{
    display:flex;
    gap:8px;
    margin:0 0 22px;
    border:1px solid #ddd;
    padding:4px;
    border-radius:8px;
}

.alg-auth-tab{
    flex:1;
    border:0 !important;
    background:transparent !important;
    color:#000 !important;
    padding:10px 14px !important;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    box-shadow:none !important;
}

.alg-auth-tab.is-active{
    background:#000 !important;
    color:#fff !important;
}

.alg-success-msg{
    background:#edf8ef;
    color:#166534;
    border:1px solid #bbf7d0;
    padding:12px 14px;
    border-radius:8px;
    margin-bottom:16px;
    font-size:14px;
}

.alg-error-msg{
    margin-bottom:16px;
}

.alg-register-btn{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
    padding:12px 22px !important;
    border-radius:4px;
    cursor:pointer;
}

.alg-register-btn:hover{
    background:#000 !important;
    color:#fff !important;
}

.alg-register-btn .alg-btn-text,
.alg-login-btn .alg-btn-text{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
}

.alg-register-btn:disabled,
.alg-login-btn:disabled{
    opacity:1 !important;
    cursor:not-allowed;
}

.alg-auth-foot{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:14px;
}

.alg-link-btn{
    border:0 !important;
    background:transparent !important;
    color:#000 !important;
    font-weight:700;
    padding:0 !important;
    cursor:pointer;
    text-decoration:underline;
    box-shadow:none !important;
}

.alg-link-btn:hover{
    color:#000 !important;
}


/* Logout button color fix */
.alg-logout-btn{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
    box-shadow:none !important;
}

.alg-logout-btn:hover,
.alg-logout-btn:focus,
.alg-logout-btn:active{
    background:#000 !important;
    color:#fff !important;
    border-color:#000 !important;
    box-shadow:none !important;
    outline:none !important;
}