/* ═══════════════════════════════════════════════
   auth.css — Login & Register Pages
   Pink & Cream Elegant Theme — Clean Layout v2
   ═══════════════════════════════════════════════ */

/* ── Hard Reset ────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Page Shell ────────────────────────────── */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;           /* nothing ever scrolls or overflows */
}

body.auth-page {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(160deg, #FFF8F0 0%, #FFF1E6 40%, #FDE8EE 100%);
    background-attachment: fixed;
}

/* ── Petal Canvas — always behind everything ─ */
#petalCanvas {
    position: fixed;
    inset: 0;                   /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ── Centering Wrapper ─────────────────────── */
.auth-wrapper {
    position: fixed;
    inset: 0;                   /* stretches to full viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    z-index: 2;                 /* above canvas */
    overflow-y: auto;           /* scroll only if card is taller than viewport */
}

/* ── Auth Card ─────────────────────────────── */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    border: 1px solid rgba(240,226,214,.55);
    padding: 40px 32px;
    box-shadow:
        0 20px 60px rgba(180,140,120,.12),
        0 1px 3px rgba(209,77,114,.06);
    animation: cardUp .6s cubic-bezier(.22,1,.36,1) both;
    flex-shrink: 0;             /* don't compress when viewport is tight */
}
.auth-card.register-card { max-width: 460px; }

@keyframes cardUp {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Brand Header ──────────────────────────── */
.auth-brand { text-align: center; margin-bottom: 28px; }

.auth-brand .brand-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #D14D72, #B73E60);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
    box-shadow: 0 8px 24px rgba(209,77,114,.22);
    animation: iconPulse 2.5s ease-in-out infinite;
}
@keyframes iconPulse {
    0%,100% { box-shadow: 0 8px 24px rgba(209,77,114,.22); }
    50%     { box-shadow: 0 8px 32px rgba(209,77,114,.35); }
}

.auth-brand h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700; font-size: 1.35rem;
    color: #2D1F2B; margin-bottom: 4px;
}
.auth-brand p {
    font-size: .82rem; color: #9A8890; margin: 0;
}

/* ── Form Floating Fields ──────────────────── */
.auth-card .form-floating {
    position: relative;
    margin-bottom: 14px;
}
.auth-card .form-floating > .form-control {
    background: rgba(255,248,240,.55);
    border: 1.5px solid rgba(226,210,200,.7);
    border-radius: 14px;
    height: 56px;
    font-size: .88rem; font-weight: 500;
    color: #2D1F2B;
    padding-right: 48px;
    transition: border-color .3s, background .3s, box-shadow .3s;
}
.auth-card .form-floating > .form-control:focus {
    border-color: #D14D72;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(209,77,114,.08);
}
.auth-card .form-floating > label {
    color: #B0A0A8; font-size: .84rem; font-weight: 400;
}
.auth-card .form-floating > label i {
    color: #D4A8B5; font-size: .78rem;
}

/* ── Password Eye Toggle ──────────────────── */
.password-toggle {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: none; border: none;
    cursor: pointer; color: #C8B8C0;
    font-size: .95rem; padding: 4px;
    transition: color .25s;
}
.password-toggle:hover { color: #D14D72; }

/* ── Alert ─────────────────────────────────── */
.auth-card .alert {
    border-radius: 14px; font-size: .82rem;
    border: none; padding: 14px 18px; margin-bottom: 16px;
}
.auth-card .alert-danger {
    background: rgba(209,77,114,.07); color: #B73E60;
}

/* ── Submit Button ─────────────────────────── */
.btn-auth {
    display: block; width: 100%;
    background: linear-gradient(135deg, #D14D72, #B73E60);
    color: #fff; border: none;
    border-radius: 14px; padding: 15px;
    font: 700 .92rem/1.4 'Inter', sans-serif;
    letter-spacing: .3px; text-align: center;
    cursor: pointer; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(209,77,114,.2);
    transition: transform .3s, box-shadow .3s;
    position: relative; overflow: hidden;
}
.btn-auth::after {
    content: ''; position: absolute;
    inset: 0; left: -100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: left .5s;
}
.btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(209,77,114,.28);
    color: #fff;
}
.btn-auth:hover::after { left: 100%; }
.btn-auth:active { transform: translateY(0); }

/* ── Divider ───────────────────────────────── */
.auth-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0;
}
.auth-divider span {
    font-size: .75rem; color: #C8B8C0;
    white-space: nowrap; font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(209,77,114,.12), transparent);
}

/* ── Footer Link ───────────────────────────── */
.auth-footer {
    text-align: center; font-size: .82rem; color: #9A8890;
}
.auth-footer a {
    color: #D14D72; font-weight: 600;
    text-decoration: none; transition: color .25s;
}
.auth-footer a:hover {
    color: #B73E60; text-decoration: underline;
}

/* ── Date Hint (register page) ─────────────── */
.date-hint {
    font-size: .72rem; color: #C8B8C0;
    margin: -8px 0 16px 4px; font-style: italic;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 480px) {
    .auth-wrapper { padding: 16px 10px; }
    .auth-card    { padding: 32px 20px; border-radius: 24px; }
}
@media (max-width: 360px) {
    .auth-card       { padding: 24px 16px; border-radius: 20px; }
    .auth-brand h4   { font-size: 1.15rem; }
    .btn-auth        { padding: 13px; font-size: .85rem; }
}