/* ==========================================
 * File Name:    styles.css
 * Updated By:   Chris Ennis
 * Updated On:   2025-11-08
 * Update Notes: Fixed login page layout.
 * ========================================== */
/* https://www.color-hex.com/color/151b54 */
/* https://stackoverflow.com/questions/68552638/should-you-use-preconnect-with-stylesheets */
/* https://www.w3schools.com/css/css3_mediaqueries.asp */
/* https://www.w3schools.com/css/css3_shadows.asp */
/* https://www.w3schools.com/css/css3_flexbox_container.asp */

/* ===========================================================
   Loreweave Global Styles
   Theme: Fantasy / Storytelling
   Fonts: Cinzel Decorative (titles), Cormorant Garamond (body)
   Colors: Moonlight blues, golds, and parchment neutrals
   =========================================================== */

/* === GOOGLE FONT IMPORTS === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:wght@400;500;700&display=swap');

/* === ROOT VARIABLES === */
:root {
    --bg-color: #1a1a1a;
    --text-color: #e6dccf;           /* parchment tone */
    --primary-color: #7fc7ff;        /* moonlight blue */
    --accent-color: #a58bff;         /* lavender glow */
    --secondary-color: #ffcb6b;      /* gold highlight */
    --border-radius: 12px;
}

/* === GLOBAL BODY === */
body {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    min-height: 100vh;
}

/* === LINKS === */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--secondary-color);
}

/ce-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* === HEADER / NAVIGATION BAR === */
.main-header {
    background: rgba(20, 20, 20, 0.85);
    border-bottom: 2px solid var(--accent-color);
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center; /* centers Loreweave title */
    align-items: center;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 100;
      backdrop-filter: blur(6px);
        background: rgba(20, 20, 20, 0.6);
}

.main-header h1 {
    margin: 0;
}

.header-link {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem;
    color: #c4a0ff;
    text-decoration: none;
    text-shadow: 0 0 18px rgba(165, 139, 255, 0.9);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header-link:hover {
    color: var(--secondary-color);
    text-shadow: 0 0 25px rgba(255, 203, 107, 0.7);
}

.nav-links {
    display: flex;
    gap: 1rem;
}

.nav-link {
    font-family: 'Cinzel Decorative', serif;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}
.nav-link:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: translateY(-2px);
}
/* === HEADER / NAVIGATION LINKS (Loreweave title glow) === */
.header-link {
    font-family: 'Cinzel Decorative', serif;
    color: #c4a0ff;
    text-decoration: none;
    text-shadow: 0 0 15px rgba(165, 139, 255, 0.9);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header-link:hover {
    color: var(--secondary-color);
    text-shadow: 0 0 25px rgba(255, 203, 107, 0.7);
}

/* ===========================================================
   FANTASY PAGE TRANSITION — RADIANT GOLDEN PORTAL
   =========================================================== */

#page-transition {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 203, 107, 0.8) 0%,
        rgba(255, 203, 107, 0.4) 15%,
        rgba(20, 10, 40, 0.98) 80%
    );
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transform: scale(0.6);
    transition: opacity 2.5s ease, transform 2.5s ease;
    border-radius: 50%;
    overflow: hidden;
}

/* Fade in (page load) */
body.fade-in #page-transition {
    opacity: 0;
    transform: scale(1);
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
}

/* Fade out (before navigation) — portal expansion */
body.fade-out #page-transition {
    opacity: 1;
    transform: scale(2.8); /* portal expands outward */
    transition: opacity 2.5s ease-in, transform 2.5s ease-in;
}

/* Sparkle overlay drifting over the portal */
#page-transition::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/gold-sparkles.png') repeat;
    background-size: 250px 250px;
    mix-blend-mode: screen;
    opacity: 0.1;
    animation: sparkleFloat 10s linear infinite;
}

/* Soft floating shimmer motion */
@keyframes sparkleFloat {
    0% { opacity: 0.08; transform: translateY(0) scale(1); }
    50% { opacity: 0.18; transform: translateY(-20px) scale(1.05); }
    100% { opacity: 0.08; transform: translateY(0) scale(1); }
}



/* === FOOTER (Fantasy Glow Style) === */
footer {
    position: fixed; /* stays anchored at bottom */
    bottom: 0;
    width: 100%;
    background: rgba(20, 10, 40, 0.85);
    color: #c4a0ff;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(165, 139, 255, 0.4);
    font-size: 1rem;
    font-family: 'Cormorant Garamond', serif;
    text-shadow: 0 0 10px rgba(165, 139, 255, 0.6);
    box-shadow: 0 -2px 12px rgba(165, 139, 255, 0.3);
    z-index: 50;
}

footer a {
    color: var(--secondary-color); /* gold accent links */
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 203, 107, 0.8);
}

.hero-container{
  background: url('/images/openbook.jpeg') center/cover no-repeat;
  position: relative;              /* not fixed */
  width: 100%;
  min-height: clamp(340px, 46vh, 560px);
  display: grid;
  place-items: center;
  padding-block: clamp(18px, 4vh, 36px);
  color: #fff;
  font-family: 'Cinzel Decorative', serif;
  overflow: hidden;
}

/* readable box behind title/subtitle/button */
.hero-textbox{
  display: grid;
  gap: .9rem;
  justify-items: center;
  max-width: min(92%, 980px);
  padding: .9rem 1.6rem;
  border-radius: 16px;
  background: rgba(25,10,50,.55);
  box-shadow: 0 0 32px rgba(80,40,160,.45);
}

.hero-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: #c5a4ff;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,0,0,.6), 0 0 25px rgba(180,150,255,.8);
}

.hero-subtitle{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.1vw, 1.4rem);
  color: #e8ddff;
  text-align: center;
  -webkit-text-stroke: .4px rgba(30,0,60,.8);
  text-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 14px rgba(180,150,255,.5);
}

/* CTA sits right under subtitle and stays centered */
.start-weaving{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .25rem;
  padding: .6rem 2.2rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: #f5edff;
  border: 1px solid rgba(165,139,255,.45);
  background: linear-gradient(to bottom, rgba(40,10,80,.6), rgba(20,5,50,.85));
  box-shadow: 0 0 25px rgba(165,139,255,.25), inset 0 0 15px rgba(80,40,160,.4);
  text-shadow: 0 0 6px rgba(0,0,0,.7), 0 0 12px rgba(255,203,107,.3);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.start-weaving:hover{
  background: linear-gradient(to bottom, rgba(120,70,200,.95), rgba(60,30,140,.95));
  color: #ffcb6b;
  border-color: rgba(255,203,107,.85);
  box-shadow: 0 0 35px rgba(255,203,107,.6), inset 0 0 18px rgba(165,139,255,.55);
  transform: translateY(-2px);
}
/* optional subtle fade at the bottom of the hero */
.hero-container::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 48px;                     /* was 120px */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(10,5,25,.85) 100%);
  pointer-events:none;
}

/* === RESPONSIVE ADJUSTMENTS === */
 @media (max-width: 1024px) {
   .hero-title { font-size: 3.2rem; }
   .hero-subtitle { font-size: 1.2rem; }
   .hero-container { padding-top: 9vh; }
 }

 @media (max-width: 768px) {
   .hero-title { font-size: 2.5rem; }
   .hero-subtitle { font-size: 1rem; }
   .hero-textbox { padding: .75rem 1.25rem; }
   .hero-container { padding-top: 10vh; }
   .login-box { width: 90%; padding: 2rem; }
   .register-body .login-box { padding: 2.5rem 2rem; }
 }

@keyframes weaveGlow {
    0%, 100% {
        box-shadow: 0 0 25px rgba(165, 139, 255, 0.25), inset 0 0 15px rgba(80, 40, 160, 0.4);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 203, 107, 0.5), inset 0 0 25px rgba(165, 139, 255, 0.6);
    }
}

.start-weaving:hover {
    animation: weaveGlow 1.8s ease-in-out infinite;
}

/* ===========================================================
   MAIN CONTENT SECTIONS (used across pages)
   =========================================================== */
/* === WELCOME: MAIN CONTENT BELOW HERO === */
.vertical-content{
  margin: 0;                        /* kill the 40vh gap */
  padding: clamp(28px, 6vh, 56px) clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: linear-gradient(to bottom, rgba(20,10,40,.35), rgba(20,10,40,.85));
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.9;
  color: var(--text-color);
}


.content-container {
    width: 90%;
    max-width: 1000px;
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(165, 139, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
    margin-bottom: 3rem;
}

body.welcome-page{ padding-bottom: 64px; }  /* match footer height */

/* === INFO SECTIONS (fantasy container boxes) === */
.info-section{
  width: min(900px, 100%);
  margin: 0 0 2rem 0;
  padding: 2.2rem 2.6rem;
  background: rgba(15,8,30,.28);
  border: 1px solid rgba(165,139,255,.3);
  border-left: 4px solid var(--accent-color);
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(165,139,255,.2), inset 0 0 12px rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .3s ease;
}
.info-section:hover{
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(165,139,255,.4), inset 0 0 14px rgba(0,0,0,.7);
}
.info-section h2{
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  text-align: center;
  color: var(--accent-color);
  margin: 0 0 1.4rem 0;
  text-shadow: 0 0 14px rgba(165,139,255,.9);
}


.info-section p,
.info-section ul {
    font-size: 1.3rem;
    line-height: 1.9;
    color: var(--text-color);
}

.info-section li {
    list-style-type: disc;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
}


/* ===========================================================
   FORMS (Login, Register, Submit Story)
   =========================================================== */
form {
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    max-width: 500px;
    margin: 2rem auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}
form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    font-family: 'Cinzel Decorative', serif;
}
form input, form textarea, form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #555;
    border-radius: 8px;
    background-color: #222;
    color: #fff;
    margin-bottom: 1.25rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
}
form input:focus, form textarea:focus, form select:focus {
    border-color: var(--accent-color);
    outline: none;
}
button, .btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
button:hover, .btn:hover {
    background-color: var(--secondary-color);
    color: #000;
}

/* ===========================================================
   TABLES (Story Lists, Contributors)
   =========================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background-color: rgba(20, 20, 20, 0.9);
    color: var(--text-color);
}
table th, table td {
    border: 1px solid #333;
    padding: 0.75rem;
    text-align: left;
}
table th {
    background-color: rgba(100, 80, 200, 0.3);
    color: var(--secondary-color);
    font-family: 'Cinzel Decorative', serif;
}
table tr:nth-child(even) {
    background-color: rgba(40, 40, 40, 0.8);
}
table tr:hover {
    background-color: rgba(80, 60, 140, 0.5);
}

/* ===========================================================
   UTILITIES
   =========================================================== */
.center-text { text-align: center; }
.gold-text { color: var(--secondary-color); }
.shadow-text { text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.rounded-box {
    background: rgba(25,25,25,0.85);
    border: 1px solid rgba(165, 139, 255, 0.4);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* ===========================================================
   RESPONSIVE DESIGN
   =========================================================== */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1rem; }
    .start-weaving { font-size: 1.1rem; bottom: 20px; }
    .content-container { padding: 2rem; }
    form { padding: 1.5rem; }
}

.info-section h2 {
    font-size: 2.4rem; /* slightly larger */
    text-transform: capitalize;
    text-shadow: 0 0 18px rgba(165, 139, 255, 0.9);
}

/* ===========================================================
   LOGIN PAGE — FINAL CENTERED FIX
   =========================================================== */

.login-box .login-form {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
}



.login-box {
    background: rgba(20, 10, 40, 0.85);
    border: 1px solid rgba(165, 139, 255, 0.5);
    border-radius: 18px;
    padding: 2.5rem 3rem;
    width: 100%;
    max-width: 480px;
    margin: 0 1rem;
    box-shadow:
        0 0 30px rgba(165, 139, 255, 0.4),
        0 0 60px rgba(255, 203, 107, 0.25),
        inset 0 0 12px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin-bottom: 0.5rem;
    text-align: left;
}

.form-options {
    display: flex;
    justify-content: center; /* Center checkboxes */
    align-items: center;
    margin-top: 0.5rem;
    gap: 1.5rem; /* Add space between checkboxes */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

@media (max-width: 768px) {
    .login-box {
        padding: 2rem;
    }
    .form-options {
        flex-direction: column; /* Stack checkboxes on mobile */
        gap: 1rem;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .login-box {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }
}
.login-body, .login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

/* Add soft glow animation */
.login-box:hover {
    box-shadow:
        0 0 35px rgba(165, 139, 255, 0.7),
        0 0 70px rgba(255, 203, 107, 0.4),
        inset 0 0 18px rgba(0, 0, 0, 0.6);
    transform: scale(1.02);
}



/* === SIGN-IN TITLE === */
.login-heading {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.4rem;
    color: var(--accent-color);
    text-shadow: 0 0 20px rgba(165, 139, 255, 0.9);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* === FORM === */
.login-form label {
  font-family: 'Cinzel Decorative', serif;     /* fantasy title font */
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--secondary-color);               /* warm gold tone */
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}


/* === LABELS === */
.login-form label {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--secondary-color);
    text-align: left;
    margin-bottom: 0.25rem;
}

/* === INPUTS === */
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(165,139,255,0.4);          /* lavender border */
  border-radius: 10px;
  background: rgba(25,15,45,0.9);                   /* deep-purple backdrop */
  color: #f8f6ff;                                   /* soft parchment white */
  font-family: 'Cormorant Garamond', serif;         /* readable fantasy body font */
  font-size: 1.05rem;
  box-shadow:
      inset 0 0 6px rgba(165,139,255,0.25),
      0 0 10px rgba(80,40,160,0.3);
  transition: all 0.3s ease;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--secondary-color);             /* golden glow focus */
  box-shadow:
      0 0 10px rgba(255,203,107,0.6),
      inset 0 0 6px rgba(255,203,107,0.4);
  background: rgba(30,20,60,0.95);
}
.login-form input::placeholder {
  color: rgba(220,210,255,0.5);
  font-style: italic;
  letter-spacing: 0.5px;
}


/* === CHECKBOX AREA (inline + no wrap) === */
.form-options {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.form-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap; /* keep text on one line */
    font-family: 'Cormorant Garamond', serif;
    color: #ddd;
    font-size: 1rem;
    cursor: pointer;
}


/* === BUTTON === */
.btn-login {
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(80, 40, 160, 0.95),
        rgba(40, 20, 100, 0.95)
    );
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    border: 1px solid rgba(165, 139, 255, 0.5);
    border-radius: 10px;
    padding: 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(165, 139, 255, 0.3);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: 1.2rem;
}

.btn-login:hover {
    background: linear-gradient(
        to bottom,
        rgba(120, 70, 200, 0.95),
        rgba(60, 30, 140, 0.95)
    );
    color: var(--secondary-color);
    box-shadow: 0 0 35px rgba(255, 203, 107, 0.7);
    transform: translateY(-2px);
}
/* === REGISTER PAGE SPECIFIC ADJUSTMENTS === */
.register-body .login-box {
    margin-top: 4rem; /* pushes box slightly lower under Loreweave title */
    padding: 3.5rem 3.5rem 3rem 3.5rem;
}

.register-body .login-form {
    gap: 1rem;
}

.register-body .btn-login {
    margin-top: 1rem;
}


/* === SIGN-UP TEXT (centered and balanced) === */
.signup-text {
    margin-top: 1.2rem;
    font-size: 1rem;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap; /* prevents “Create an account” from breaking */
}

.signup-text a {
    color: var(--accent-color);
    text-decoration: none;
    margin-left: 0.3rem;
    transition: color 0.3s ease;
}

.signup-text a:hover {
    color: var(--secondary-color);
}


/* === RESPONSIVENESS === */
@media (max-width: 992px) {
    .login-title { font-size: 3.5rem; }
    .login-box { width: 85%; padding: 2.5rem; }
}

@media (max-width: 768px) {
    .login-title { font-size: 2.8rem; }
    .login-box { width: 90%; padding: 2rem; }
    .login-heading { font-size: 2rem; }
    .form-options { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .login-title { font-size: 2rem; }
    .login-box { width: 95%; padding: 1.5rem; }
    .login-heading { font-size: 1.8rem; }
}
/* ===========================================================
   LOGIN BOX — PULSING GLOW ANIMATION
   =========================================================== */

/* Animation keyframes */
@keyframes boxGlow {
    0%, 100% {
        box-shadow:
            0 0 25px rgba(165, 139, 255, 0.35),
            0 0 60px rgba(80, 40, 160, 0.3),
            inset 0 0 10px rgba(0, 0, 0, 0.5);
        border-color: rgba(165, 139, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 45px rgba(255, 203, 107, 0.6),
            0 0 85px rgba(165, 139, 255, 0.5),
            inset 0 0 15px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 203, 107, 0.7);
    }
}
/* Apply animation to the login box */
.login-box {
    animation: boxGlow 4s ease-in-out infinite;
}
/* ===========================================================
   THEMED CHECKBOXES (Lavender Border + Gold Glow on Check)
   =========================================================== */

/* Reset default browser styling */
.form-options input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(165, 139, 255, 0.7); /* lavender border */
    border-radius: 4px;
    background-color: rgba(20, 10, 40, 0.8);
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 6px rgba(165, 139, 255, 0.4);
    transition: all 0.3s ease;
}

/* Hover shimmer */
.form-options input[type="checkbox"]:hover {
    box-shadow: 0 0 10px rgba(165, 139, 255, 0.6);
    transform: scale(1.05);
}

/* Checked state — glowing gold pulse */
.form-options input[type="checkbox"]:checked {
    background-color: rgba(255, 203, 107, 0.85);
    border-color: rgba(255, 203, 107, 0.9);
    box-shadow:
        0 0 12px rgba(255, 203, 107, 0.8),
        0 0 20px rgba(165, 139, 255, 0.6);
    animation: checkboxPulse 1.5s ease-in-out infinite;
}

/* Little golden check mark */
.form-options input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid #fff7d1;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Pulse animation */
@keyframes checkboxPulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 203, 107, 0.6),
            0 0 15px rgba(165, 139, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 15px rgba(255, 203, 107, 0.8),
            0 0 25px rgba(165, 139, 255, 0.6);
    }
}
/* ===========================================================
   START WEAVING BUTTON — GOLD LAVENDER PULSE ON HOVER
   =========================================================== */

/* Keyframes for gold-lavender glow */
@keyframes weavePulse {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(165, 139, 255, 0.4),
            0 0 30px rgba(165, 139, 255, 0.25),
            inset 0 0 8px rgba(80, 40, 160, 0.3);
        border-color: rgba(165, 139, 255, 0.6);
    }
    50% {
        box-shadow:
            0 0 25px rgba(255, 203, 107, 0.8),
            0 0 45px rgba(165, 139, 255, 0.6),
            inset 0 0 10px rgba(255, 203, 107, 0.6);
        border-color: rgba(255, 203, 107, 0.9);
    }
}

/* Apply pulse on hover */
.btn-login:hover {
    animation: weavePulse 2s ease-in-out infinite;
    background: linear-gradient(
        to bottom,
        rgba(120, 70, 200, 0.95),
        rgba(60, 30, 140, 0.95)
    );
    color: var(--secondary-color);
    transform: translateY(-2px);
}
/* ===========================================================
   REGISTER FORM — MAGICAL FIELD APPEAR-IN
   =========================================================== */

/* Base fade-in keyframes */
@keyframes fieldAppear {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animate the inputs and labels in order */
.register-body .login-form label,
.register-body .login-form input,
.register-body .login-form .form-text,
.register-body .login-form .form-check,
.register-body .login-form .signup-text {
    opacity: 0;
    animation: fieldAppear 0.6s ease forwards;
}
/* Ensure the button is visible by default */
.register-body .login-form button {
    opacity: 1;
    animation: none;
}

/* Stagger the animation for each element */
.register-body .login-form label:nth-of-type(1),
.register-body .login-form input:nth-of-type(1) { animation-delay: 0.2s; }
.register-body .login-form label:nth-of-type(2),
.register-body .login-form input:nth-of-type(2) { animation-delay: 0.4s; }
.register-body .login-form label:nth-of-type(3),
.register-body .login-form input:nth-of-type(3) { animation-delay: 0.6s; }
.register-body .login-form label:nth-of-type(4),
.register-body .login-form input:nth-of-type(4) { animation-delay: 0.8s; }
.register-body .login-form label:nth-of-type(5),
.register-body .login-form input:nth-of-type(5) { animation-delay: 1s; }
.register-body .login-form .form-check { animation-delay: 1.2s; }
.register-body .login-form button { animation-delay: 1.4s; }
.register-body .login-form .signup-text { animation-delay: 1.6s; }
/* ===========================================================
   CREATE ACCOUNT BUTTON — GOLDEN SEAL PULSE
   =========================================================== */

/* Golden pulse keyframes */
@keyframes goldenSeal {
    0% {
        box-shadow: 0 0 0 rgba(255, 203, 107, 0);
        background: linear-gradient(
            to bottom,
            rgba(80, 40, 160, 0.95),
            rgba(40, 20, 100, 0.95)
        );
    }
    40% {
        box-shadow:
            0 0 25px rgba(255, 203, 107, 0.8),
            0 0 55px rgba(255, 203, 107, 0.6);
        background: linear-gradient(
            to bottom,
            rgba(255, 203, 107, 0.9),
            rgba(165, 139, 255, 0.9)
        );
    }
    100% {
        box-shadow:
            0 0 10px rgba(165, 139, 255, 0.4),
            0 0 30px rgba(165, 139, 255, 0.25);
        background: linear-gradient(
            to bottom,
            rgba(80, 40, 160, 0.95),
            rgba(40, 20, 100, 0.95)
        );
    }
}

/* Apply pulse after form fields animate */
.register-body .btn-login:hover {
    animation: goldenSeal 2s ease-in-out;
}
/* ===========================================================
   CREATE ACCOUNT BUTTON — GOLD SPARKLE CHIME EFFECT
   =========================================================== */

.register-body .btn-login {
    position: relative;
    overflow: hidden; /* keeps sparkles inside button */
}

/* Sparkle container inside the button */
.register-body .btn-login::before,
.register-body .btn-login::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 203, 107, 1) 0%, rgba(255, 203, 107, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Chime burst (main sparkles) */
.register-body .btn-login::before {
    animation: sparkleChime 2s ease-out 2.2s 1; /* syncs with goldenSeal timing */
}

/* Secondary faint sparkle burst */
.register-body .btn-login::after {
    animation: sparkleChime 2s ease-out 2.4s 1;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0);
}

/* Sparkle burst keyframes */
@keyframes sparkleChime {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 -30px 0 0 rgba(255, 203, 107, 0.9),
            20px -10px 0 0 rgba(255, 203, 107, 0.8),
            25px 20px 0 0 rgba(255, 203, 107, 0.6),
            -25px 20px 0 0 rgba(255, 203, 107, 0.6),
            -15px -20px 0 0 rgba(255, 203, 107, 0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
        box-shadow: none;
    }
}
/* ===========================================================
   REGISTER PAGE — Matching login fantasy theme
   =========================================================== */

/* === Checkbox styling (lavender border + gold glow when checked) === */
.register-form input[type="checkbox"],
.login-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(165, 139, 255, 0.7);
    border-radius: 4px;
    background: rgba(30, 15, 60, 0.8);
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 8px rgba(165, 139, 255, 0.4);
    transition: all 0.25s ease;
}
.register-form input[type="checkbox"]:hover,
.login-form input[type="checkbox"]:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(165, 139, 255, 0.6);
}
.register-form input[type="checkbox"]:checked,
.login-form input[type="checkbox"]:checked {
    background: radial-gradient(circle, rgba(255,203,107,1) 0%, rgba(165,139,255,0.6) 70%);
    border-color: rgba(255,203,107,0.9);
    box-shadow: 0 0 15px rgba(255,203,107,0.7), 0 0 25px rgba(165,139,255,0.5);
}
.register-form input[type="checkbox"]:checked::after,
.login-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff8d6;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Sparkle animation */
@keyframes sparkleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    30% { opacity: 1; transform: translateY(-4px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.6); }
}

/* === "Create Account" button — golden pulse with sparkles === */
.btn-register {
    background: linear-gradient(to bottom, rgba(80,40,160,0.95), rgba(40,20,100,0.95));
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    border: 1px solid rgba(165,139,255,0.5);
    border-radius: 10px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    box-shadow: 0 0 20px rgba(165,139,255,0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: visible; /* fix: allow sparkles to render properly */
    z-index: 2;
}
.btn-register:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(255,203,107,0.7);
    animation: goldPulse 2s ease-in-out infinite;
}
.btn-login:hover,
.btn-register:hover {
    animation: weavePulse 2s ease-in-out infinite;
}

.btn-register:active::after {
    animation: sparkleBurst 1s ease-out forwards;
}


/* Gold pulse on hover */
.btn-register:hover {
    animation: goldPulse 1.5s ease-in-out infinite;
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(255, 203, 107, 0.7);
}

/* Gold pulse animation */
@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 203, 107, 0.4),
                    inset 0 0 10px rgba(165, 139, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 203, 107, 0.9),
                    inset 0 0 20px rgba(255, 203, 107, 0.6);
    }
}

/* Sparkle particles emitted on click */
.btn-register::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255, 203, 107, 0.9), transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.btn-register:active::after {
    animation: sparkleBurst 1s ease-out forwards;
}

/* Sparkle expansion animation */
@keyframes sparkleBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 203, 107, 0.8);
    }
    60% {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(255, 203, 107, 0.6);
    }
    100% {
        transform: translate(-50%, -50%) scale(15);
        opacity: 0;
    }
}

/* ===== LOGIN INPUT + LABEL THEME (force override Bootstrap) ===== */

/* Labels above inputs */
.login-box label {
  font-family: 'Cinzel Decorative', serif !important;
  font-size: 1rem !important;
  letter-spacing: 1px !important;
  color: var(--secondary-color) !important; /* gold */
  text-transform: uppercase !important;
  margin-bottom: 0.35rem !important;
}

/* Target all text-like inputs inside the login box */
.login-box input[type="text"],
.login-box input[type="password"],
.login-box input.form-control,
.login-box .form-control[type="text"],
.login-box .form-control[type="password"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100% !important;
  padding: 0.85rem 1rem !important;

  /* Fantasy surface */
  background: rgba(25, 15, 45, 0.9) !important;
  color: #f8f6ff !important;
  border: 1px solid rgba(165, 139, 255, 0.45) !important;
  border-radius: 10px !important;

  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;

  box-shadow:
    inset 0 0 6px rgba(165,139,255,0.25),
    0 0 10px rgba(80,40,160,0.30) !important;

  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}

/* Focus glow */
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus,
.login-box .form-control:focus {
  outline: none !important;
  background: rgba(30, 20, 60, 0.95) !important;
  border-color: var(--secondary-color) !important;          /* gold */
  box-shadow:
    0 0 10px rgba(255,203,107,0.60),
    inset 0 0 6px rgba(255,203,107,0.40) !important;
}

/* Placeholder tone */
.login-box input::placeholder,
.login-box .form-control::placeholder {
  color: rgba(220,210,255,0.55) !important;
  font-style: italic !important;
  letter-spacing: .5px !important;
}

/* Chrome/Safari autofill – kill white fill */
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8f6ff !important;
  transition: background-color 9999s ease-in-out 0s !important;
  box-shadow: 0 0 0px 1000px rgba(25,15,45,0.9) inset !important;
  border: 1px solid rgba(165,139,255,0.45) !important;
}

/* Optional: spacing between fields if tight */
.login-box .form-group { margin-bottom: 1.2rem !important; }

/* ===========================================================
   REGISTER PAGE — CONSOLIDATED STYLES
   =========================================================== */

.login-body.register-body {
    background: url('/images/hero-bg.jpeg') no-repeat center center;
    background-size: cover;
    background-color: transparent !important;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-color);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-attachment: fixed;
}

.register-body .login-box {
    background: rgba(20, 10, 40, 0.88);
    border: 1px solid rgba(165, 139, 255, 0.6);
    border-radius: 16px;
    padding: 3rem 3.5rem;
    width: 480px;
    max-width: 90%;
    box-shadow:
        0 0 25px rgba(165, 139, 255, 0.4),
        0 0 60px rgba(80, 40, 160, 0.3),
        inset 0 0 12px rgba(255, 203, 107, 0.25);
    backdrop-filter: blur(10px);
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: 4rem;
}

.register-body .login-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 768px) {
    .register-body .login-box {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 480px) {
    .login-body.register-body {
        background-attachment: scroll;
    }

    .register-body .login-box {
        padding: 1.5rem;
        margin-top: 2rem;
        max-width: 95%;
    }
}

/* ===========================================================
   FIX: Make Welcome Page Header Scroll Naturally
   =========================================================== */

body.welcome-page .main-header {
    position: relative !important;
    top: auto !important;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(6px);
    z-index: 10;
}
/* ===========================================================
   VERIFY EMAIL PAGE — FANTASY THEME MATCH (No Background Image)
   =========================================================== */

/* Base body styling */
./* Ensure body takes full width for centering */
 .verify-body {
   background-color: #12101a;
   font-family: 'Cormorant Garamond', serif;
   color: var(--text-color);
   margin: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;  /* stack main + footer */
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
 }

/* Fix the container itself */
.verify-container {
  margin: 0 auto;
  width: 420px;
  max-width: 90%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Footer fixed neatly to bottom without overlapping */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0.8rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  color: #c8baff;
  background: rgba(20, 10, 40, 0.6);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(165, 139, 255, 0.2);
  box-shadow: 0 -5px 15px rgba(165, 139, 255, 0.15);
  z-index: 5; /* stays above the sparkle layers */
}


/* Header & subtext */
.verify-container h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  color: var(--accent-color);
  text-shadow: 0 0 20px rgba(165, 139, 255, 0.9);
  margin-bottom: 1rem;
}

.verify-container p {
  color: #c8baff;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* OTP input */
.verify-container input[type="text"] {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(165, 139, 255, 0.4);
  border-radius: 10px;
  background: rgba(20, 10, 40, 0.8);
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.verify-container input[type="text"]:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 12px rgba(255, 203, 107, 0.6);
  outline: none;
}

/* Verify button */
.verify-container button {
  background: linear-gradient(to bottom, rgba(80, 40, 160, 0.95), rgba(40, 20, 100, 0.95));
  color: #fff;
  font-family: 'Cinzel Decorative', serif;
  border: 1px solid rgba(165, 139, 255, 0.5);
  border-radius: 10px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 1rem;
  box-shadow: 0 0 20px rgba(165, 139, 255, 0.3);
}

.verify-container button:hover {
  background: linear-gradient(
      to bottom,
      rgba(120, 70, 200, 0.95),
      rgba(60, 30, 140, 0.95)
  );
  color: var(--secondary-color);
  box-shadow: 0 0 35px rgba(255, 203, 107, 0.7);
  transform: translateY(-2px);
  animation: goldPulse 1.8s ease-in-out infinite;
}

/* Success & error alerts */
.verify-container .alert {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gold pulse animation reuse */
@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 203, 107, 0.4),
                inset 0 0 10px rgba(165, 139, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 203, 107, 0.9),
                inset 0 0 20px rgba(255, 203, 107, 0.6);
  }
}

/* Links below button */
.verify-container a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
.verify-container a:hover {
  color: var(--secondary-color);
}
/* ===========================================================
   VERIFY EMAIL — SOFT ROTATING SPARKLE AURA
   =========================================================== */

/* Sparkle background layer (behind verify container) */
.verify-body::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
      circle,
      rgba(255, 203, 107, 0.25) 0%,
      rgba(165, 139, 255, 0.2) 35%,
      rgba(20, 10, 40, 0.8) 80%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rotateSparkle 40s linear infinite;
  filter: blur(30px);
  opacity: 0.6;
  z-index: 0;
}

/* Subtle smaller shimmer (inner rotation) */
.verify-body::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  background: radial-gradient(
      circle,
      rgba(255, 203, 107, 0.35) 0%,
      rgba(165, 139, 255, 0.25) 50%,
      transparent 90%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: rotateSparkleReverse 60s linear infinite;
  filter: blur(20px);
  opacity: 0.4;
  z-index: 0;
}



/* Rotation animations */
@keyframes rotateSparkle {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateSparkleReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}
/* Center the verification container */
.verify-body main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;                /* ensures it fills height between header/footer */
  width: 100%;
  margin: 0;
  padding: 2rem 1rem;
  box-sizing: border-box;
}


/* If your global footer is fixed, add a little space so it doesn't overlap */
.verify-body {
  padding-bottom: 64px;  /* match your footer height */
}

/* ===========================================================
   PROFILE PAGE — Fantasy Theme with Aurora Background
   =========================================================== */

/* Main page background */
.profile-body {
  background: url('/images/aurora.jpeg') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2rem;
  position: relative;
}

/* Subtle dark overlay for readability */
.profile-body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 5, 25, 0.7);
  z-index: 0;
}

/* Ensure all content sits above overlay */
main, footer, .navbar {
  position: relative;
  z-index: 2;
}

/* Profile sections (cards) */
.profile-body section {
  background: rgba(30, 15, 60, 0.85);
  border: 1px solid rgba(165, 139, 255, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 25px rgba(165, 139, 255, 0.3),
    inset 0 0 15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  color: var(--text-color);
  margin-bottom: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-body section:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 35px rgba(165, 139, 255, 0.5);
}

/* Headings */
.profile-body h1, .profile-body h2, .profile-body h4, .profile-body h5, .profile-body h6 {
  font-family: 'Cinzel Decorative', serif;
  color: var(--accent-color);
  text-shadow: 0 0 15px rgba(165, 139, 255, 0.7);
}

/* Buttons (Edit, View, etc.) */
.profile-body .btn {
  background: linear-gradient(to bottom, rgba(80, 40, 160, 0.9), rgba(40, 20, 100, 0.95));
  border: 1px solid rgba(165, 139, 255, 0.5);
  color: #fff;
  font-family: 'Cinzel Decorative', serif;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(165, 139, 255, 0.3);
}

.profile-body .btn:hover {
  background: linear-gradient(to bottom, rgba(120, 70, 200, 0.95), rgba(60, 30, 140, 0.95));
  color: var(--secondary-color);
  box-shadow: 0 0 35px rgba(255, 203, 107, 0.7);
  transform: translateY(-2px);
}

/* Footer styling */
footer {
  background: rgba(20, 10, 40, 0.85);
  color: #c4a0ff;
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(165, 139, 255, 0.4);
  font-family: 'Cormorant Garamond', serif;
  text-shadow: 0 0 10px rgba(165, 139, 255, 0.6);
  box-shadow: 0 -2px 12px rgba(165, 139, 255, 0.3);
  width: 100%;
  margin-top: auto;
}
@keyframes sectionGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(165, 139, 255, 0.3); }
  50% { box-shadow: 0 0 45px rgba(255, 203, 107, 0.5); }
}

.profile-body section:hover {
  animation: sectionGlow 2s ease-in-out infinite;
}
/* ===========================================================
   PROFILE PAGE — Aurora theme integration
   =========================================================== */

.profile-body {
    background: url('/images/aurora.jpeg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-color, #f8f4ff);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Soft golden glow around main sections */
.profile-container section {
    background: rgba(15, 8, 30, 0.28); /* base transparency */
    border: 1px solid rgba(255, 203, 107, 0.3);
    border-radius: 12px;
    box-shadow:
        0 0 25px rgba(255, 203, 107, 0.12),
        0 0 60px rgba(165, 139, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.6s ease;
}

/* Intensify transparency and glow on hover */
.profile-container section:hover {
    background: rgba(15, 8, 30, 0.18); /* lighter = more transparent */
    box-shadow:
        0 0 35px rgba(255, 203, 107, 0.18),
        0 0 75px rgba(165, 139, 255, 0.25);
    transform: scale(1.01);
}

/* Maintain text readability */
.profile-container section p,
.profile-container section span,
.profile-container section strong {
    color: #f3ecff;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Headings with fantasy glow */
.profile-container h1,
.profile-container h2,
.profile-container h4,
.profile-container h5,
.profile-container h6 {
    font-family: 'Cinzel Decorative', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffd98e;
    text-shadow: 0 0 10px rgba(255, 203, 107, 0.5);
}

/* Links and buttons match theme */
.profile-container a {
    color: #cdb4ff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.profile-container a:hover {
    color: #ffcb6b;
}

.profile-container .btn {
    background: linear-gradient(to bottom, rgba(80, 40, 160, 0.85), rgba(40, 20, 100, 0.85));
    border: 1px solid rgba(165, 139, 255, 0.6);
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    box-shadow: 0 0 15px rgba(165, 139, 255, 0.3);
    transition: all 0.3s ease;
}

.profile-container .btn:hover {
    color: #ffcb6b;
    box-shadow:
        0 0 25px rgba(255, 203, 107, 0.7),
        0 0 45px rgba(165, 139, 255, 0.5);
}

/* Subtle shimmer animation for sections */
@keyframes auroraGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(165, 139, 255, 0.25); }
    50% { box-shadow: 0 0 30px rgba(255, 203, 107, 0.25); }
}

.profile-container section {
    animation: auroraGlow 5s ease-in-out infinite alternate;
}

/* Responsive centering */
.profile-container {
    width: 100%;
    max-width: 900px;
    margin: 4rem auto;
    padding: 1rem;
}
/* ===========================================================
   NAVBAR — Transparent, Unified Fantasy Look
   =========================================================== */
.fantasy-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1rem 3rem;
  z-index: 100;
}

.navbar-brand {
  background: rgba(30, 10, 60, 0.6);
    color: #d9c9ff;
    border: 1px solid rgba(165, 139, 255, 0.5);
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    text-align: center;
    min-width: 140px;
    transition: all 0.3s ease;
}
.navbar-brand:hover {
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255, 203, 107, 0.9),
               0 0 35px rgba(165, 139, 255, 0.7);
}

/* Center links */
.navbar-center {
  display: flex;
  gap: 0.5rem;
}

.nav-link,
.signout-btn {
  background: rgba(30, 10, 60, 0.6);
  color: #d9c9ff;
  border: 1px solid rgba(165, 139, 255, 0.5);
  border-radius: 8px;
  padding: 0.65rem 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  text-align: center;
  min-width: 140px;
  transition: all 0.3s ease;
}

/* Hover gold glow */
.nav-link:hover,
.signout-btn:hover {
  background: rgba(80, 40, 160, 0.9);
  color: #ffcb6b;
  border-color: rgba(255, 203, 107, 0.8);
  box-shadow: 0 0 15px rgba(255, 203, 107, 0.5),
              0 0 25px rgba(165, 139, 255, 0.3);
  transform: translateY(-2px);
}

/* Remove any outer container or background from logout */
.signout-form {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===========================================================
   RESPONSIVE TWEAKS (navbar, buttons, layout)
   Append at the end of styles.css
   =========================================================== */

/* Let the bar wrap naturally when space is tight */
.fantasy-navbar {
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1rem clamp(1rem, 2vw, 3rem);
}

/* Brand scales by viewport; stays classy on all sizes */
.navbar-brand {
  font-size: clamp(1.6rem, 2.6vw + 1rem, 2.6rem);
}

/* Center group can wrap */
.navbar-center {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

/* Buttons scale & don’t force a fixed width on small screens */
.nav-link,
.signout-btn {
  min-width: clamp(120px, 18vw, 160px);
  padding: clamp(0.55rem, 1.2vw, 0.65rem) clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw + 0.2rem, 1rem);
}

/* — Breakpoint 1: large tablets and down — */
@media (max-width: 992px) {
  .fantasy-navbar {
    justify-content: center;
  }
  .navbar-left, .navbar-right {
    order: 0;
  }
  .navbar-center {
    order: 1;           /* push the button row under the brand on medium screens */
    width: 100%;
  }
}

/* — Breakpoint 2: tablets and large phones — */
@media (max-width: 768px) {
  /* Make the center buttons a tidy 2-per-row grid */
  .navbar-center {
    justify-content: center;
    gap: 0.5rem;
  }
  .navbar-center .nav-link {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;      /* allow true flexibility */
    text-align: center;
  }
  .navbar-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .signout-btn {
    width: min(320px, 90%);
  }
}

/* — Breakpoint 3: small phones — */
@media (max-width: 576px) {
  /* Stack everything vertically with comfy tap targets */
  .navbar-brand {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .navbar-center .nav-link {
    flex: 1 1 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  .signout-btn {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
}

/* ===========================================================
   PROFILE PAGE LAYOUT RESPONSIVENESS
   =========================================================== */

.profile-container {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
}

/* Section blocks: breathe on desktop, tighten on phones */
.profile-container > section {
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 12px;
  background: rgba(25, 15, 45, 0.55); /* translucent over aurora */
  border: 1px solid rgba(165,139,255,0.35);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

/* Buttons inside sections scale nicely */
.profile-container .btn,
.profile-container .btn-outline-light {
  padding: clamp(0.6rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
  font-size: clamp(0.95rem, 1.2vw + 0.2rem, 1rem);
}

/* Tables/lists don’t overflow on phones */
.profile-container .list-group-item {
  padding: clamp(0.65rem, 1.5vw, 0.85rem) clamp(0.75rem, 2vw, 1rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profile-container .list-group-item .btn {
  margin-left: auto;
}
@media (max-width: 576px) {
  .profile-container .list-group-item {
    flex-wrap: wrap;
  }
  .profile-container .list-group-item .btn {
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* ===========================================================
   AURORA BACKGROUND FIT (already added, but make it resilient)
   =========================================================== */
.profile-body {
  background: url('/images/aurora.jpeg') center / cover fixed no-repeat;
}
@media (max-width: 768px) {
  .profile-body {
    background-attachment: scroll; /* smoother on mobile */
  }
}
/* === Unified fantasy button — use on ALL nav/actions === */
.btn-fantasy {
  background: linear-gradient(to bottom, rgba(80,40,160,.95), rgba(40,20,100,.95));
  color: #fff !important;
  font-family: 'Cinzel Decorative', serif;
  border: 1px solid rgba(165,139,255,.55);
  border-radius: 10px;
  padding: .8rem 1.6rem;
  min-width: 150px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 0 18px rgba(165,139,255,.35);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.btn-fantasy:hover {
  background: linear-gradient(to bottom, rgba(120,70,200,.95), rgba(60,30,140,.95));
  color: #ffcb6b !important;             /* gold text on hover */
  border-color: rgba(255,203,107,.85);
  box-shadow: 0 0 35px rgba(255,203,107,.6), 0 0 25px rgba(165,139,255,.35);
  transform: translateY(-2px);
}
.btn-fantasy:active { transform: scale(.98); }

/* Make all existing “primary” buttons match too */
.btn, .btn-primary { all: unset; }       /* clear Bootstrap look */
.btn, .btn-primary { composes: btn-fantasy; }  /* keep old classes working */

/* Remove any outer box around Sign Out (form/wrapper) */
.signout-form,
.signout-wrapper,
.navbar-right > div,
.navbar-right > form {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure the nav pills match the same size */
.fantasy-navbar .nav-link,
.fantasy-navbar .signout-btn {
  all: unset;
  composes: btn-fantasy;
}

/* Optional: tighten spacing between brand and buttons */
.fantasy-navbar { gap: .75rem 1rem; }

/* ===========================================================
   LOGIN — Fixed, centered box (scroll-safe), fantasy theme
   =========================================================== */

/* Background stays scrollable; content can be taller than 100vh */
.login-body {
  background: url('/images/hero-bg.jpeg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  margin: 0;
  color: var(--text-color);
  font-family: 'Cormorant Garamond', serif;
  /* allow normal page scroll; the box itself is fixed */
  overflow-y: auto;
}

/* Keep the “Loreweave” header simple above the fixed box */
.login-header {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100%;
  margin: 2rem 0 1rem 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.login-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: #c4a0ff;
  text-shadow: 0 0 25px rgba(165,139,255,.9), 0 0 50px rgba(165,139,255,.5);
  margin: 0;
}

/* Remove any wrappers’ backgrounds so only the box glows */
.login-wrapper,
.login-body::before,
.login-body::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* >>> The fixed, centered login box <<< */


/* Inputs, labels, and button—the same fantasy look, tightened a hair */
.login-box label {
  font-family: 'Cinzel Decorative', serif;
  font-size: .95rem;
  letter-spacing: 1px;
  color: var(--secondary-color);
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  width: 50%;
  padding: .85rem 1rem;
  border: 1px solid rgba(165,139,255,.45);
  border-radius: 10px;
  background: rgba(25,15,45,.92);
  color: #f8f6ff;
  font-size: 1.05rem;
  box-shadow: inset 0 0 6px rgba(165,139,255,.25), 0 0 10px rgba(80,40,160,.30);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
  outline: none;
  border-color: var(--secondary-color);
  background: rgba(30,20,60,.96);
  box-shadow: 0 0 10px rgba(255,203,107,.6), inset 0 0 6px rgba(255,203,107,.4);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  flex-wrap: nowrap;
}

.btn-login {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  font-family: 'Cinzel Decorative', serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 10px;
  border: 1px solid rgba(165,139,255,.55);
  color: #fff;
  background: linear-gradient(to bottom, rgba(80,40,160,.95), rgba(40,20,100,.95));
  box-shadow: 0 0 20px rgba(165,139,255,.3);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.btn-login:hover {
  background: linear-gradient(to bottom, rgba(120,70,200,.95), rgba(60,30,140,.95));
  color: var(--secondary-color);
  box-shadow: 0 0 35px rgba(255,203,107,.7);
  transform: translateY(-2px);
}

/* Footer should NOT be fixed on login page to avoid overlap */


/* Small screens: relax padding & ensure inner scroll feels good */
@media (max-width: 576px) {
  .login-body .login-box {
    padding: 1.25rem;
    max-height: 86vh;
  }
  .form-options { flex-direction: column; align-items: flex-start; }
}
/* ===========================================================
   LOGIN BOX — Refined center layout, no scrollbars
   =========================================================== */

/* Fix box position, disable scrollbars */
.login-body .login-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(440px, 92vw);          /* slightly narrower for symmetry */
  max-height: none;                 /* remove restriction */
  overflow: visible;                /* disable scrollbar entirely */
  background: rgba(20, 10, 40, 0.88);
  border: 1px solid rgba(165,139,255,.55);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow:
    0 0 35px rgba(165,139,255,.45),
    0 0 70px rgba(255,203,107,.25),
    inset 0 0 14px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

/* Center heading nicely */
.login-box h2.login-heading {
  text-align: center;
  margin-bottom: 1rem;
}

/* Shorten and center input fields */
.login-box input[type="text"],
.login-box input[type="password"] {
  width: 50%;                       /* reduced width */
  margin: 0.4rem auto 1rem;         /* centers input fields */
  display: block;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(165,139,255,.45);
  border-radius: 10px;
  background: rgba(25,15,45,.92);
  color: #f8f6ff;
  font-size: 1rem;
  text-align: left;
  box-shadow: inset 0 0 6px rgba(165,139,255,.25), 0 0 10px rgba(80,40,160,.3);
  transition: all 0.3s ease;
}
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 10px rgba(255,203,107,.6), inset 0 0 6px rgba(255,203,107,.4);
  background: rgba(30,20,60,.96);
  outline: none;
}

/* Adjust labels above input for better alignment */
.login-box label {
  width: 85%;
  margin: 0.5rem auto 0.25rem;
  display: block;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.9rem;
  color: var(--secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Form options — center beneath inputs */
.form-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 85%;
  margin: 1rem auto;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Button width matches the new centered layout */
.btn-login {
  display: block;
  width: 85%;
  margin: 1.2rem auto 0;
  padding: 0.9rem;
  font-size: 1.1rem;
  border-radius: 10px;
  font-family: 'Cinzel Decorative', serif;
  text-transform: uppercase;
  border: 1px solid rgba(165,139,255,.55);
  background: linear-gradient(to bottom, rgba(80,40,160,.95), rgba(40,20,100,.95));
  color: #fff;
  box-shadow: 0 0 20px rgba(165,139,255,.3);
  transition: all 0.3s ease;
}
.btn-login:hover {
  background: linear-gradient(to bottom, rgba(120,70,200,.95), rgba(60,30,140,.95));
  color: var(--secondary-color);
  box-shadow: 0 0 35px rgba(255,203,107,.7);
  transform: translateY(-2px);
}

/* Keep footer low without affecting fixed box */
.login-body footer {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  color: #cfc6ff;
  text-shadow: 0 0 10px rgba(165,139,255,.35);
  font-size: 0.9rem;
}

/* Small screens: ensure box still fits cleanly */
@media (max-height: 700px) {
  .login-body .login-box {
    top: 48%;
    transform: translate(-50%, -48%);
    padding: 1.25rem;
  }
  .login-box input {
    width: 90%;
  }
}
/* ===========================================================
   REGISTER PAGE LAYOUT OVERRIDES (keeps form centered & scrollable)
   =========================================================== */

.register-body .login-wrapper,
.login-body .login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 10vh, 120px) 16px 32px; /* room for header + breathing room */
}

/* Undo the fixed positioning we applied for the login dialog */
.register-body .login-box,
.login-body .login-box {
  position: relative;     /* not fixed */
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto;
  width: min(640px, 92vw); /* wider than login to fit all fields nicely */
  max-height: none;
  overflow: visible;
}

/* Header on register should not be fixed; let it scroll naturally */
.register-body .login-header,
.login-body .login-header {
  position: static;
  margin: 1.5rem 0 0.5rem;
}

/* Inputs and labels align nicely in the wider register box */
.register-body .login-form label,
.register-body .login-form input:not([type="checkbox"]) {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.register-body .btn-login {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

/* Keep the footer at the bottom without overlapping the form */
.register-body footer,
.login-body footer {
  position: static;
  margin-top: 2rem;
}
/* ------------------------------
   REGISTER: inputs & checkbox fix
   ------------------------------ */

/* Only widen text-like inputs (not checkboxes) */
.register-body .login-form input:not([type="checkbox"]) {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Layout for the "Show password" row */
.register-body .login-form .form-options,
.login-body .login-form .form-options {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
  margin: 12px 4% 0; /* lines up with 92% inputs */
}

/* Label next to checkbox */
.register-body .login-form .form-options label,
.login-body .login-form .form-options label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin: 0;
}

/* Fantasy checkbox */
.register-body .login-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(165,139,255,0.7);
  border-radius: 4px;
  background: rgba(30,15,60,0.85);
  box-shadow: 0 0 8px rgba(165,139,255,0.35);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  cursor: pointer;
}

.register-body .login-form input[type="checkbox"]:hover {
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(165,139,255,0.55);
}

/* Stays gold when checked */
.register-body .login-form input[type="checkbox"]:checked {
  border-color: rgba(255,203,107,0.95);
  background: radial-gradient(circle at 50% 50%, rgba(255,203,107,0.95) 0%, rgba(165,139,255,0.55) 70%);
  box-shadow: 0 0 16px rgba(255,203,107,0.70), 0 0 24px rgba(165,139,255,0.45);
}

/* Checkmark */
.register-body .login-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fff8d6;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ------------------------------
   Focus glow rules
   ------------------------------ */

/* Gold glow for ALL fields … */
.register-body .login-form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: rgba(255,203,107,0.9);
  box-shadow:
    0 0 0 1px rgba(255,203,107,0.55) inset,
    0 0 14px rgba(255,203,107,0.75);
}

/* … EXCEPT the email field (keep it lavender/arcane) */
.register-body .login-form input[type="email"]:focus {
  border-color: rgba(165,139,255,0.9);
  box-shadow:
    0 0 0 1px rgba(165,139,255,0.6) inset,
    0 0 14px rgba(165,139,255,0.75);
}
/* ===========================================================
   MESSAGES — Match Profile / Profile-Edit look
   =========================================================== */

/* Use the Aurora background from Profile pages via .profile-body */

/* Fantasy navbar buttons already defined as .btn-fantasy /
   .fantasy-navbar; messages.html already uses them */

/* Panels (same translucent treatment as profile sections) */
.panel {
  background: rgba(25, 25, 35, 0.70);            /* translucent charcoal */
  border: 1px solid rgba(165, 139, 255, 0.35);   /* lavender edge */
  border-radius: 16px;
  box-shadow:
    0 8px 26px rgba(0,0,0,0.45),
    inset 0 0 12px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

.panel--soft { padding: 1.25rem; }
.panel-body  { padding: 1rem; }

/* Section headings (match profile) */
.panel h1, .panel h2, .panel h3 {
  font-family: 'Cinzel Decorative', serif;
  letter-spacing: .5px;
  color: var(--accent-color);
  text-shadow: 0 0 14px rgba(165,139,255,.45);
  margin-bottom: .75rem;
}

/* Message list container */
.message-scroll {
  max-height: 50vh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(165,139,255,.5) transparent;
}

/* WebKit scrollbar (subtle) */
.message-scroll::-webkit-scrollbar {
  height: 8px; width: 8px;
}
.message-scroll::-webkit-scrollbar-thumb {
  background: rgba(165,139,255,.45);
  border-radius: 8px;
}
.message-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Message bubbles (left/right) */
.msg {
  display: inline-block;
  max-width: 85%;
  padding: .6rem .9rem;
  border-radius: 12px;
  margin-bottom: .4rem;
  background: rgba(32, 18, 60, .85);
  border: 1px solid rgba(165,139,255,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.msg--me {
  background: linear-gradient(180deg, rgba(80,40,160,.9), rgba(40,20,100,.9));
  border-color: rgba(165,139,255,.55);
}

/* Make your JS builder use .msg / .msg--me (see note below) */
.msg-time {
  font-size: .78rem;
  color: #a7a0c8;
  margin-top: .15rem;
}

/* Form look (match edit-profile inputs) */
.form-fantasy .form-label {
  font-family: 'Cormorant Garamond', serif;
  color: #e6dafc;
}
.form-fantasy .form-control, .form-fantasy textarea {
  background: rgba(20, 10, 40, 0.75);
  color: #fff;
  border: 1px solid rgba(165, 139, 255, 0.35);
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}

.form-fantasy .form-control:focus,
.form-fantasy textarea:focus {
  outline: none;
  border-color: rgba(255,203,107,.85);
  box-shadow:
    0 0 14px rgba(255,203,107,.45),
    inset 0 0 14px rgba(255,203,107,.20);
}

/* Send button (match other primary buttons) */
.form-fantasy .btn.btn-primary {
  font-family: 'Cinzel Decorative', serif;
  border-radius: 10px;
  border: 1px solid rgba(165,139,255,.5);
  background: linear-gradient(180deg, rgba(80,40,160,.95), rgba(40,20,100,.95));
  box-shadow: 0 0 18px rgba(165,139,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.form-fantasy .btn.btn-primary:hover {
  transform: translateY(-1px);
  color: var(--secondary-color);
  box-shadow: 0 0 30px rgba(255,203,107,.65);
}

/* Conversation list items alignment */
.list-group-item.bg-body-tertiary,
.list-group-item {
  background: rgba(25, 25, 35, 0.35);
  color: #e6dafc;
  border-color: rgba(165,139,255,.25);
}
.list-group-item a { color: var(--accent-color); text-decoration: none; }
.list-group-item a:hover { color: var(--secondary-color); }

/* Responsive polish */
@media (max-width: 992px) {
  .panel--soft { padding: 1rem; }
  .message-scroll { max-height: 42vh; }
}