/* =========================================
   Evie Mae — Pastel Princess UI
   ========================================= */

/* ----- Base / Palette ----- */
* { box-sizing: border-box; }
:root {
  --pink-50:#fff0f5;   /* soft bg */
  --pink-100:#ffe4e1;  /* pastel */
  --pink-200:#ffb6c1;  /* bubblegum */
  --pink-300:#ff69b4;  /* medium */
  --pink-400:#ff1493;  /* vivid */
  --text:#333;
  --radius:24px;
  --shadow-soft:0 6px 18px rgba(255,182,193,.25);
  --shadow:0 8px 24px rgba(255,105,180,.3);
  --glow:0 0 12px rgba(255,105,180,.45);
}

html, body { height:100%; scroll-behavior:smooth; }
body {
  font-family:'Pacifico', cursive;
  background:var(--pink-50);
  color:var(--text);
  margin:0;
  padding:0;
  overflow-x:hidden;
}

/* Links */
a { color:var(--pink-300); text-decoration:none; transition:color .2s ease; }
a:hover { color:var(--pink-400); text-decoration:underline; }

/* Images */
img { max-width:100%; height:auto; display:block; }

/* =========================================
   Header
========================================= */
header {
  text-align:center;
  padding:20px 16px;
  background:var(--pink-100);
  border-bottom:2px solid #ffc0cb;
  box-shadow:var(--shadow-soft);
}
header .avatar {
  width:100px; height:100px; object-fit:cover;
  border-radius:50%;
  border:3px solid var(--pink-200);
  margin:0 auto 8px;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease;
}
header .avatar:hover { transform:scale(1.05); }
header h1 {
  margin:6px 0 10px;
  color:var(--pink-400);
  letter-spacing:.3px;
}
nav {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
nav a {
  font-weight:bold;
  padding:6px 10px;
  border-radius:16px;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
nav a:hover {
  background:#ffd6e0;
  color:#c31372;
  transform:translateY(-1px);
}

/* =========================================
   Hero
========================================= */
.hero {
  text-align:center;
  padding:80px 20px;
  background:linear-gradient(135deg,#ffc0cb 0%, #ffe4e1 100%);
}
.hero h2 {
  font-size:2.7em;
  color:var(--pink-300);
  margin:0 0 10px;
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.hero p {
  font-size:1.25em;
  color:var(--pink-400);
  margin:18px 0 26px;
}
.hero .button {
  display:inline-block;
  background:var(--pink-200);
  color:#fff;
  padding:14px 26px;
  border-radius:28px;
  font-weight:bold;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.hero .button:hover {
  background:var(--pink-300);
  transform:scale(1.05);
  box-shadow:var(--shadow);
}

/* =========================================
   About Preview
========================================= */
.about-preview {
  text-align:center;
  background:var(--pink-50);
  padding:52px 20px;
  margin-top:-6px;
  border-top:2px solid var(--pink-100);
}
.about-preview h2 {
  font-size:2.25em;
  color:var(--pink-300);
  margin:0 0 10px;
}
.about-preview p {
  font-size:1.05em;
  color:var(--pink-400);
  line-height:1.55;
  max-width:760px;
  margin:0 auto 18px;
}
.about-preview img {
  width:200px;
  border-radius:20px;
  border:3px solid var(--pink-200);
  margin:14px auto 0;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease;
}
.about-preview img:hover { transform:scale(1.04); }

/* =========================================
   Projects
========================================= */
.projects-preview {
  text-align:center;
  padding:76px 20px;
  background:linear-gradient(135deg,#ffe4e1,#fff0f5);
}
.projects-preview h2 {
  font-size:2.15em;
  color:var(--pink-300);
  margin:0 0 16px;
}
.projects-preview p {
  font-size:1.15em;
  color:var(--pink-400);
  margin:0 0 32px;
}
.project-cards {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:26px;
}
.project-card {
  width:220px;
  background:var(--pink-50);
  border:2px solid var(--pink-200);
  border-radius:20px;
  padding:14px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.project-card img {
  width:100%;
  border-radius:14px;
  transition:transform .4s ease;
}
.project-card:hover img {
  transform:scale(1.07);
  box-shadow:var(--glow);
}
.project-card h3 {
  margin:10px 0 6px;
  color:var(--pink-300);
  font-size:1.15em;
}
.project-card:hover {
  transform:translateY(-4px) scale(1.03);
  box-shadow:var(--glow);
}

/* =========================================
   Contact / Login / Register Forms
========================================= */
.contact {
  text-align:center;
  padding:60px 20px 80px;
  background:var(--pink-50);
}
.contact h2 {
  font-size:2.2em;
  color:var(--pink-300);
  margin-bottom:10px;
}
.contact p {
  color:var(--pink-400);
  font-size:1.05em;
  margin-bottom:36px;
}
.contact-form {
  background:var(--pink-100);
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  max-width:500px;
  margin:0 auto;
  padding:30px;
  text-align:left;
}
.contact-form label {
  display:block;
  margin-bottom:6px;
  color:var(--pink-400);
  font-size:1.1em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;
  padding:10px 14px;
  border:2px solid var(--pink-200);
  border-radius:16px;
  font-family:'Pacifico', cursive;
  font-size:16px;
  margin-bottom:14px;
  background:#fff;
  color:var(--text);
  transition:all 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color:var(--pink-300);
  box-shadow:0 0 8px rgba(255,105,180,0.3);
  outline:none;
}

/* 🌸 Fixed Gender Dropdown — Perfect Match */
.contact-form select {
  appearance:none;
  border-radius:16px;
  background:#fff;
  border:2px solid var(--pink-200);
  padding:10px 14px;
  color:var(--text);
  font-family:'Pacifico', cursive;
  font-size:16px;
  box-shadow:var(--shadow-soft);
  transition:all 0.25s ease;
  background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff69b4" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px;
}
.contact-form select:hover {
  background-color:var(--pink-50);
  box-shadow:var(--shadow);
}
.contact-form select option {
  background:var(--pink-50);
  color:var(--text);
}

.contact-form .submit {
  background:var(--pink-200);
  color:#fff;
  border:none;
  border-radius:24px;
  padding:10px 26px;
  font-weight:bold;
  cursor:pointer;
  display:block;
  margin:0 auto;
  transition:all 0.25s ease;
  box-shadow:var(--shadow-soft);
}
.contact-form .submit:hover {
  background:var(--pink-300);
  transform:scale(1.05);
  box-shadow:var(--shadow);
}

/* =========================================
   Dashboard
========================================= */
.dashboard {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:30px;
  padding:60px 20px 80px;
  background:var(--pink-50);
  border-top:2px solid var(--pink-100);
}
.dashboard-card {
  background:var(--pink-100);
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:30px;
  width:270px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.dashboard-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}
.dashboard-card h3 {
  color:var(--pink-300);
  font-size:1.5em;
  margin-bottom:10px;
}
.dashboard-card p {
  color:var(--pink-400);
  font-size:1.05em;
  margin-bottom:20px;
}
.dashboard-card .button {
  background:var(--pink-200);
  color:#fff;
  padding:10px 24px;
  border-radius:22px;
  font-weight:bold;
  display:inline-block;
  transition:background .25s ease, transform .25s ease;
}
.dashboard-card .button:hover {
  background:var(--pink-300);
  transform:scale(1.05);
  box-shadow:var(--glow);
}

/* =========================================
   Floating Hearts
========================================= */
.hearts {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:-1;
}
.hearts span {
  position:absolute;
  display:block;
  width:18px;
  height:18px;
  background:rgba(255,192,203,0.6);
  clip-path:path("M8.4 1.7c1.6-1.3 3.8-1.3 5.3 0 1.7 1.4 1.7 3.9 0 5.3l-5.3 5.2-5.3-5.2c-1.7-1.4-1.7-3.9 0-5.3 1.5-1.3 3.7-1.3 5.3 0z");
  animation: floatHearts 10s linear infinite;
  bottom: -20px;
}
.hearts span:nth-child(1){ left:10%; animation-delay:0s; animation-duration:9s; }
.hearts span:nth-child(2){ left:30%; animation-delay:2s; animation-duration:12s; }
.hearts span:nth-child(3){ left:50%; animation-delay:4s; animation-duration:10s; }
.hearts span:nth-child(4){ left:70%; animation-delay:1s; animation-duration:11s; }
.hearts span:nth-child(5){ left:90%; animation-delay:3s; animation-duration:13s; }

@keyframes floatHearts {
  0% { transform:translateY(0) scale(1); opacity:1; }
  100% { transform:translateY(-100vh) scale(1.2); opacity:0; }
}

/* =========================================
   Profile
========================================= */
.profile {
  text-align:center;
  background:var(--pink-50);
  padding:60px 20px;
}
.profile .banner img {
  width:100%;
  max-height:250px;
  object-fit:cover;
  border-bottom:3px solid var(--pink-200);
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.profile-avatar {
  width:120px;
  height:120px;
  border-radius:50%;
  border:4px solid var(--pink-200);
  margin-top:-60px;
  box-shadow:var(--shadow-soft);
  background:#fff;
  object-fit:cover;
}
.profile-info {
  background:var(--pink-100);
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  max-width:600px;
  margin:20px auto;
  padding:30px;
  box-shadow:var(--shadow-soft);
}
.profile-info h2 {
  color:var(--pink-300);
  font-size:2em;
  margin:10px 0;
}
.profile-info .badge {
  background-color:#66b3ff;
  color:white;
  font-size:0.6em;
  padding:4px 8px;
  border-radius:12px;
  margin-left:6px;
}
.profile-info .join {
  color:#999;
  font-size:0.95em;
  margin-bottom:18px;
}

/* 🌸 Bio Form */
.bio-form {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.bio-form label {
  color:var(--pink-400);
  font-size:1.2em;
}
.bio-form textarea {
  width:90%;
  min-height:120px;
  resize:vertical;
  border-radius:20px;
  border:2px solid var(--pink-200);
  font-family:'Pacifico', cursive;
  padding:12px 14px;
  background:#fff;
  color:var(--text);
  font-size:16px;
  transition:all 0.2s ease;
}
.bio-form textarea:focus {
  border-color:var(--pink-300);
  box-shadow:0 0 8px rgba(255,105,180,0.3);
  outline:none;
}
.bio-form .submit {
  background:var(--pink-200);
  color:white;
  border:none;
  border-radius:24px;
  padding:10px 26px;
  font-weight:bold;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:var(--shadow-soft);
}
.bio-form .submit:hover {
  background:var(--pink-300);
  transform:scale(1.05);
  box-shadow:var(--shadow);
}

/* =========================================
   Settings Page
========================================= */
.settings {
  text-align:center;
  background:linear-gradient(180deg,#ffeaf0 0%,#fff0f5 100%);
  padding:60px 20px 80px;
  min-height:100vh;
}
.settings h2 {
  font-size:2.2em;
  color:var(--pink-300);
  margin-bottom:10px;
}
.settings p {
  color:var(--pink-400);
  font-size:1.05em;
  margin-bottom:36px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}
.settings-container {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:28px;
  max-width:900px;
  margin:0 auto;
  padding:0 10px;
}
.settings-card {
  background:var(--pink-100);
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  padding:28px 20px;
  width:270px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.settings-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.settings-card h3 {
  color:var(--pink-300);
  margin-bottom:10px;
  font-size:1.4em;
}
.settings-card p {
  color:var(--pink-400);
  font-size:1em;
  margin-bottom:12px;
}
.settings-card img.profile-avatar {
  width:110px;
  height:110px;
  border-radius:50%;
  border:4px solid var(--pink-200);
  box-shadow:var(--shadow-soft);
  object-fit:cover;
  margin:0 auto 14px;
  display:block;
}
#avatarPreview {
  width:110px;
  height:110px;
  border-radius:50%;
  border:4px solid var(--pink-200);
  box-shadow:var(--shadow-soft);
  object-fit:cover;
  display:none;
  margin:0 auto 12px;
}
.settings-card input[type="file"],
.settings-card input[type="password"] {
  width:90%;
  padding:10px;
  border-radius:16px;
  border:2px solid var(--pink-200);
  font-family:'Pacifico', cursive;
  margin:6px 0 10px;
  background:#fff;
  color:var(--pink-400);
  text-align:center;
  font-size:15px;
  transition:all 0.2s ease;
}
.settings-card input:focus {
  border-color:var(--pink-300);
  box-shadow:0 0 6px rgba(255,105,180,0.3);
  outline:none;
}
button.submit {
  background:var(--pink-200);
  color:white;
  border:none;
  padding:10px 24px;
  border-radius:24px;
  font-weight:bold;
  cursor:pointer;
  transition:all 0.3s ease;
  font-family:'Pacifico', cursive;
  box-shadow:var(--shadow-soft);
  margin-top:8px;
}
button.submit:hover {
  background:var(--pink-300);
  transform:scale(1.05);
  box-shadow:var(--glow);
}

/* =========================================
   Footer
========================================= */
footer {
  text-align:center;
  padding:24px 16px;
  background:var(--pink-100);
  color:var(--pink-400);
  font-weight:bold;
  border-top:2px solid #ffc0cb;
}

/* =========================================
   Responsive
========================================= */
@media (max-width:900px) {
  .hero h2 { font-size:2.35em; }
  .about-preview h2,
  .projects-preview h2,
  .about h2,
  .contact h2,
  .dashboard h2 { font-size:2em; }
  .project-card { width:46%; }
}
@media (max-width:640px) {
  header .avatar { width:84px; height:84px; }
  .hero { padding:64px 18px; }
  .project-card { width:100%; }
  .dashboard-card,
  .settings-card,
  .contact-form { width:100%; max-width:340px; }
}

/* =========================================================
   🔧 Additions Only (no removals) — Alignment & Panel polish
   These rules extend/override gently without deleting originals
   ========================================================= */

/* Make selects perfectly match input height & centering */
.contact-form select {
  height:48px;               /* match comfy input height */
  line-height:48px;          /* center text vertically */
  padding-right:44px;        /* room for caret */
}

/* Tighter label spacing so fields feel consistent */
.contact-form label { margin-bottom:8px; }
.contact-form input,
.contact-form textarea { min-height:48px; }

/* Optional inline field helper (works even if not used elsewhere) */
.contact-form .inline {
  display:flex;
  gap:12px;
  align-items:center;
}
.contact-form .inline > * { flex:1; }

/* Cross-browser appearance reset for the select */
@supports (-webkit-appearance:none) or (appearance:none) {
  .contact-form select { -webkit-appearance:none; appearance:none; }
}

/* Admin/Owner panel goodies (non-breaking, use if desired) */
.panel {
  max-width:1000px;
  margin:0 auto;
  padding:40px 20px;
}
.panel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.panel-card {
  background:var(--pink-100);
  border:2px solid var(--pink-200);
  border-radius:var(--radius);
  padding:22px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.panel-card:hover { transform:translateY(-4px); box-shadow:var(--glow); }

/* Subtle role accents you can add on cards/headers */
.badge-admin {
  display:inline-block;
  background:#ffd6e0;
  color:#c31372;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8em;
  box-shadow:var(--shadow-soft);
}
.badge-owner {
  display:inline-block;
  background:linear-gradient(135deg,#ffe08a,#ffd24d);
  color:#7a5400;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8em;
  box-shadow:0 6px 18px rgba(255,210,77,.35);
  border:1px solid rgba(122,84,0,.1);
}

/* Make settings area match other page widths on tiny screens */
@media (max-width:480px){
  .contact-form{ padding:22px; }
  .settings-card{ width:100%; max-width:360px; }
}

/* Slight focus ring upgrade for accessibility (keeps your vibe) */
:where(input, select, textarea, button).focus-visible,
:where(input, select, textarea, button):focus-visible {
  outline:2px solid rgba(255,105,180,.55);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(255,105,180,.18);
}