/* Xmas Theme Styles */
:root {
  --bg-main: radial-gradient(circle at 30% 30%, #8b0000, #400000 65%, #140000 90%);
  --bg-overlay: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 12px, rgba(255,255,255,0.0) 12px 24px);
  --snow-color: rgba(255,255,255,0.85);
  --panel-bg: rgba(255,255,255,0.10);
  --panel-border: rgba(255,255,255,0.35);
  --accent: #d4af37; /* gold */
  --accent-red: #e53935;
  --accent-green: #2ecc71;
  --danger: #ff5252;
  --font-stack: 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: 180ms ease;
}
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family: var(--font-stack);
  background: var(--bg-main), var(--bg-overlay);
  background-attachment: fixed;
  color:#fff;
  overflow-x:hidden;
}

/* Snow layer */
body::before, body::after {
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 10% 20%, var(--snow-color) 0 2px, transparent 3px),
                    radial-gradient(circle at 80% 40%, var(--snow-color) 0 2px, transparent 3px),
                    radial-gradient(circle at 50% 80%, var(--snow-color) 0 2px, transparent 3px);
  background-size: 300px 300px, 400px 400px, 500px 500px;
  animation: snowfall 18s linear infinite;
  opacity:.35;
  mix-blend-mode: screen;
}
body::after { animation-duration: 28s; opacity:.25; filter: blur(1px); }
@keyframes snowfall { from { background-position:0 0,0 0,0 0; } to { background-position:0 600px,0 800px,0 1000px; } }

header { text-align:center; padding:2.6rem 1rem 1.2rem; position:relative; }
header h1 {
  margin:0; font-size: clamp(2.2rem,4vw,3.2rem); letter-spacing:.06em; font-weight:700;
  background: linear-gradient(90deg,#fff,#ffe08a,#fff); -webkit-background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

.container { max-width: 1080px; margin:0 auto; padding:1rem 1.2rem 3.5rem; }

.panel {
  background: var(--panel-bg);
  backdrop-filter: blur(16px) saturate(140%);
  border: 2px solid var(--panel-border);
  border-radius: 22px;
  padding:1.6rem 1.9rem 1.55rem;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.55), 0 4px 10px -2px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.05) inset;
  position:relative; overflow:hidden;
}
.panel::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(130deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), repeating-linear-gradient(45deg, rgba(212,175,55,0.15) 0 10px, rgba(212,175,55,0) 10px 20px);
  mix-blend-mode: overlay; pointer-events:none;
}

/* Form */
form#login { display:flex; gap:.8rem; flex-wrap:wrap; margin:.4rem 0 1.1rem; }
form input {
  flex:1 1 240px; background: rgba(255,255,255,.5); border:1px solid rgba(255,255,255,0.55); color:#fff;
  padding:.75rem .95rem; font-size:1rem; border-radius:12px; outline:none; transition:var(--transition);
}
form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(212,175,55,.35);
}
form input::placeholder {
    color: #ffffff;
    opacity: 0.95;
    text-shadow: 0 0 4px rgba(255,255,255,0.6);
}

#loginButton {
    background: linear-gradient(135deg,#b00000,#ff3434 50%,#b00000 100%);
    color: #fff;
    font-weight: 600;
    border: none;
    padding: .8rem 1.25rem;
    border-radius: 16px;
    cursor: pointer;
    letter-spacing: .55px;
    position: relative;
    transition: var(--transition);
    box-shadow: 0 8px 22px -8px rgba(255,40,40,.65), 0 2px 4px rgba(0,0,0,.5);
}

    #loginButton:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px -8px rgba(255,40,40,.75);
    }

    #loginButton:active {
        transform: translateY(0) scale(.97);
    }

    #loginButton::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 8px, rgba(255,255,255,0) 8px 16px);
        mix-blend-mode: overlay;
        opacity: .35;
        pointer-events: none;
    }

/* Centered gift canvas wrapper */
.gift-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:1.25rem auto 0;
  max-width:460px;
  width:100%;
}
.gift-wrapper p { text-align:center; }

#cubeCanvas { display:block; width:420px; max-width:100%; height:auto; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.25); border-radius:18px; }

/* Utility */
.fade-in { animation: fadeIn .6s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Welcome banner horizontal layout */
.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}


/* Wishlist Card Styles (migrated from partial view) */
.wishlist-card {
    background: #fffdfb;
    border: 3px solid #b31217 !important;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 10;
}
.wishlist-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.wishlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #ffcc00;
}
.wishlist-header h3 {
  margin: 0 !important;
  color: #b31217 !important;
  font-size: 1.4rem !important;
  text-transform: capitalize;
  font-weight: 700;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  filter: none !important;
}

.own-wishlist {
    background: #faf1e6 !important;
}

.own-wishlist::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 8px, rgba(255,255,255,0) 8px 16px);
    mix-blend-mode: overlay;
    opacity: .35;
    pointer-events: none;
}

.user-badge {
  background: lightblue;
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.wishlist-content { min-height: 60px; color: #333 }
.gift-list { list-style: none; padding: 0; margin: 0; }
.gift-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e0e0e0;
}
.gift-item:last-child { border-bottom: none; }
.gift-description {
  flex: 1;
  color: #333;
  line-height: 1.5;
  font-size: 0.95rem;
}
.gift-link {
  margin-left: 0.5rem;
  text-decoration: none;
  font-size: 0.85rem;
  color: #23511c;
  font-weight: 600;
  opacity: 0.8;
  transition: opacity 0.2s;
}
    .gift-link:hover,
    .gift-link:focus {
        opacity: 1;
        text-decoration: underline;
    }
.gift-delete {
    margin-right: 0.5rem;
    background: none;
    border: none;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0;
    color: #800000;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-weight: 600;
}
    .gift-delete:hover,
    .gift-delete:focus {
        opacity: 1;
        text-decoration: underline;
        outline: none;
    }

.gift-add {
    background: none;
    border: none;
    padding: 0;
    color: #4CAF50;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-weight: 600;
}

    .gift-add:hover,
    .gift-add:focus {
        opacity: 1;
        text-decoration: underline;
        outline: none;
    }


.empty-list {
  color: #999 !important;
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}
.wishlist-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}
.gift-count {
  color: #666 !important;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Scrollbar festive */
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#e53935,#d4af37); border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#ff5a55,#ffce3a); }

/* Responsive */
@media (max-width:700px) {
  form#login { flex-direction:column; }
  form input { max-height: 50px; border-radius: 3px 4px; }
  header { padding:2.2rem .8rem .9rem; }
  #cubeCanvas { width:340px; }
  .welcome-banner > * { margin-top: 20px; }
  .user-badge { display: none; }
}