/* ── Vacation Planner Assistant — Login Page Stylesheet ─────────────────────── */
/* Extracted from login.html <style> block.                                   */
/* All @keyframes names prefixed with "login-" to avoid conflicts with        */
/* holiday_agent.css which defines its own eyeBlink / armWave animations.     */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 15px; line-height: 1.5;
    background: #e4e8ee;
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 36px 36px;        /* side: 44→36px; bottom: 44→36px */
    width: 100%; max-width: 400px;  /* 460→400px */
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* ── Avatar area ─────────────────────────────────────────────────────────── */
.avatar-wrap {
    display: flex; justify-content: center;
    margin-bottom: 14px;
}

/* Robot SVG container */
.robot-svg {
    width: 78px; height: 78px;      /* 90→78px */
}

/* ── Robot animations ────────────────────────────────────────────────────── */

/* Whole robot: gentle float up/down */
.robot-body-group {
    animation: login-robotFloat 3.6s ease-in-out infinite;
    transform-origin: 50% 70%;
}
@keyframes login-robotFloat {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-5px); }
}

/* Eyes: blink */
.robot-eye {
    animation: login-eyeBlink 4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.robot-eye:nth-child(2) { animation-delay: .07s; }
@keyframes login-eyeBlink {
    0%,88%,100% { transform: scaleY(1); }
    92%          { transform: scaleY(0.08); }
}

/* Antenna glow */
.robot-antenna-tip {
    animation: login-antennaPulse 2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
@keyframes login-antennaPulse {
    0%,100% { opacity: 1;   r: 4; }
    50%     { opacity: 0.5; r: 5.5; }
}

/* Arms: slight rock */
.robot-arm-l {
    animation: login-armRock 3.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 100% 30%;
}
.robot-arm-r {
    animation: login-armRock 3.6s ease-in-out infinite reverse;
    transform-box: fill-box;
    transform-origin: 0% 30%;
}
@keyframes login-armRock {
    0%,100% { transform: rotate(0deg); }
    30%     { transform: rotate(-8deg); }
    70%     { transform: rotate(8deg); }
}

/* Mouth glow */
.robot-mouth {
    animation: login-mouthGlow 2.8s ease-in-out infinite;
}
@keyframes login-mouthGlow {
    0%,100% { opacity: 0.9; }
    50%     { opacity: 0.4; }
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.card-title {
    text-align: center;
    font-size: 20px; font-weight: 700;
    color: #111827; margin-bottom: 4px;
}
.card-sub {
    text-align: center;
    font-size: 14px; color: #6b7280;
    margin-bottom: 24px;            /* 32→24px */
}

/* ── Error ────────────────────────────────────────────────────────────────── */
.error-msg {
    background: #fff0f0; border: 1px solid #fca5a5;
    color: #b91c1c; border-radius: 10px;
    padding: 11px 16px; margin-bottom: 20px;
    font-size: 13px;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }     /* 20→16px */

/* Icon + input wrapper */
.input-wrap {
    position: relative;
}
.input-wrap .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.input-wrap .field-icon svg {
    width: 17px; height: 17px;
    display: block;
}

.field input {
    width: 100%;
    background: #fef9c3;
    border: 1px solid #e9e2a0;
    border-radius: 8px;
    padding: 12px 16px 12px 42px;   /* vertical: 14→12px */
    font-size: 15px; font-family: inherit;
    color: #1a2332; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
    border-color: #2952d9;
    box-shadow: 0 0 0 3px rgba(41,82,217,.12);
    background: #fffef5;
}

/* ── Sign-in button ──────────────────────────────────────────────────────── */
.btn-signin {
    width: 100%; margin-top: 16px;
    background: #2952d9;
    color: #fff; border: none;
    border-radius: 50px;
    padding: 13px;                  /* 16→13px */
    font-size: 16px; font-weight: 600; font-family: inherit;
    cursor: pointer; letter-spacing: .01em;
    transition: background .15s, transform .1s;
}
.btn-signin:hover  { background: #1f45c8; }
.btn-signin:active { transform: scale(0.99); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
    text-align: center; margin-top: 32px;
    font-size: 11px; color: #aab4be;
}

/* ── Responsive — tablet (481 px – 768 px) ──────────────────────────────── */
@media (max-width: 768px) {
    body { padding: 20px; }
    .card {
        padding: 24px 28px 32px;
        max-width: 380px;
    }
}

/* ── Responsive — mobile (≤ 480 px) ─────────────────────────────────────── */
@media (max-width: 480px) {

    /* Body: add horizontal padding so card never touches screen edges */
    body { padding: 16px; }

    /* Card: reduce side padding and soften radius */
    .card {
        padding: 24px 20px 32px;
        border-radius: 12px;
    }

    /* Robot: slightly smaller on narrow viewports */
    .robot-svg { width: 72px; height: 72px; }

    /* Headings */
    .card-title { font-size: 18px; }
    .card-sub   { font-size: 13px; margin-bottom: 24px; }

    /* Form fields */
    .field input { font-size: 14px; padding: 12px 14px 12px 38px; }

    /* Button */
    .btn-signin { padding: 14px; font-size: 15px; }
}