/* style.css */

/* ================== THEME VARIABLES ================== */
:root {
  /* Backgrounds */
  --bg: #fff7fb;
  --bg-soft: #fdebf2;   /* rail / soft stripes */
  --card: #ffffff;

  /* Text */
  --text: #2b2b2f;
  --muted: #7b7f88;

  /* Accent */
  --accent: #ff8fb3;
  --accent-weak: #ffd6e4;

  /* Shape & Shadow */
  --radius-lg: 20px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ================== BASE STYLES ================== */
body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 8px 0 12px;
}
.app-header h1 {
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0;
  font-size: 26px;
}
.icon-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
}

/* Heart welcome screen */
.heart-screen {
  min-height: 100dvh;
  place-items: center;
  background: var(--bg);
}
.heart-card {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  border-radius: 32px;
  padding: 36px 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.heart {
  width: 180px;
  aspect-ratio: 1/1;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 60%, #0000 61%),
              radial-gradient(closest-side, var(--accent), var(--accent-weak));
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
.big { font-size: 22px; font-weight: 800; letter-spacing: .05em; }

/* Rail (background container for tiles) */
.rail {
  background: var(--bg-soft);
  border-radius: 28px;
  padding: 14px;
  box-shadow: inset 0 0 0 1px var(--accent-weak);
}

/* Feature tiles */
.tile {
  background: var(--card);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--accent-weak);
}
.tile + .tile { margin-top: 12px; }
.tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--accent-weak);
  display: grid;
  place-items: center;
  font-size: 28px;
}
.tile h3 { margin: 0 0 4px; font-size: 16px; }
.tile p { margin: 0; color: var(--muted); font-size: 13px; }

/* Inputs & buttons */
input, button, textarea {
  font: inherit;
  color: var(--text);
  border: 1px solid var(--accent-weak);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
button.btn {
  background: var(--accent);
  color: #2b0f18;
  border: none;
  font-weight: 800;
  border-radius: 16px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: "Poppins", system-ui, sans-serif;
}
.full { width: 100%; }
section{width: 94%;height: 100vh;display: flex;margin: auto;}
.center { text-align: center; }

/* Add to style.css */

.pin-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  width: 100%;
}
.pin{
  text-align:center;
  font-weight:800;
  font-size:20px;
  padding:14px 0;
  border-radius:16px;
  border:1px solid var(--accent-weak);
  background:#fff;
  color:var(--text);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.pin:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===== Love-Date Challenge (scoped) ===== */
.ldc {
  display: grid;
  place-items: center;
  padding: 18px;
}

.ldc .heart-wrap {
  cursor: pointer;
  perspective: 220px;
  filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.08));
}
.card{width:100%;padding-top: 50px;}
/* Size tokens for this component only */
.ldc {
  --ldc-dim-x: 240px;      /* width of heart area */
  --ldc-dim-y: 210px;      /* height of heart area */
  --ldc-curve-h: 20px;    /* wave band height */
}

/* Card container look that matches your theme */
.ldc .card {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 22px 18px;
  text-align: center;
  width: 100%;
  max-width: 360px;
}

.ldc .title {
  margin-top: 8px;
  font-weight: 700;
}

.ldc .note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* Heart tank */
.ldc .heart {
  position: relative;
  height: var(--ldc-dim-y);
  width: var(--ldc-dim-x);
  overflow: hidden;
  clip-path: url(#ldcPath);
  background-image: radial-gradient(var(--accent-weak) 60%, var(--accent));
  border-radius: 10px; /* invisible due to clip, but keeps shadows soft */
}

.ldc .tank {
  position: absolute;
  bottom: 0;
  height: 0;
  width: var(--ldc-dim-x);
  background-color: var(--accent);
  z-index: 5;
}

/* Waves */
.ldc .curve {
  position: absolute;
  bottom: calc(-1 * var(--ldc-curve-h));
  width: var(--ldc-dim-x);
  height: var(--ldc-curve-h);
}

.ldc .curve use {
  animation: ldc-move 2s cubic-bezier(.55,.5,.45,.5) infinite;
  /* override inline fills from SVG via CSS for theming */
  fill: var(--accent);
}
.ldc .curve use:nth-child(1) { animation-duration: 3s; opacity: .5; fill: color-mix(in oklab, var(--accent) 50%, white); }
.ldc .curve use:nth-child(2) { animation-duration: 4s; opacity: .3; fill: color-mix(in oklab, var(--accent) 30%, white); }
.ldc .curve use:nth-child(3) { animation-duration: 2s; opacity: 1;  }

@keyframes ldc-move {
  0%   { transform: translateX(-90px); }
  100% { transform: translateX(85px); }
}

/* SVG nesting fix from the Pen (plain CSS) */
#ldcPath path { transform: translate(0.125px, 0.033px); }

/* ===== Love Days: Personal Header + Polaroid ===== */
.ld-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.ld-title{
  text-align:center; margin:4px 0 8px; letter-spacing:.12em; font-weight:800;font-size: 20px; position: relative;
}
.ld-title::after{content: '';display: block;width: 60px;height: 60px;background-size: cover;background-repeat: no-repeat;
  position: absolute;left: 50%;bottom:-50px;transform: translateX(-50%);background-image: url(/assets/img/icons/hearts2.png);}
.ld-chip{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid var(--accent-weak); border-radius:999px; padding:6px 10px;
  box-shadow: var(--shadow);
}
.ld-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--bg-soft);
  display:grid; place-items:center; font-weight:800;
}
.ld-names{ font-weight:700 }
.ld-meta{
  display:grid; grid-template-columns: 1fr; gap:8px; margin-top:8px; color:var(--muted); font-size:12px;
}
.ld-meta .cell{ background:#fff; border:1px solid var(--accent-weak); border-radius:12px; padding:8px 10px; text-align:center; }
.ld-counter{ margin:10px 0 14px; text-align:center; }
.ld-counter .days{ font-size:26px; font-weight:800; color: var(--accent);}
.ld-counter .clock{ font-size:18px; letter-spacing:.08em; }

/* Polaroid */
.polaroid{
  width:300px; margin:12px auto 0; background:#fff; border:1px solid #eee;
  border-radius:12px; padding:10px 10px 16px; box-shadow: 0 12px 20px rgba(0,0,0,.08);
  transform: rotate(-2.5deg);
}
.polaroid img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;
}
.polaroid .cap{
  margin-top:8px; text-align:center; font-size:12px; color:var(--muted);
}


/* ===== Gallery – Polaroid Grid ===== */
.gallery-wrap { max-width: 480px; margin: 0 auto; }
.gallery-title { text-align:center; font-weight:800; letter-spacing:.12em; margin: 6px 0 12px; font-size: 20px;position: relative;}
.gallery-title::after{content:'';width: 60px;height: 60px;display: block;position: absolute;right: 0;top:0;background-size: cover;background-repeat: no-repeat;background-image: url(/assets/img/icons/love2.png);}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* like screenshot: 2 cols on mobile */
  gap: 12px;
}

.polaroid-card{
  background:#fff; border:1px solid var(--accent-weak);
  border-radius: 10px; padding: 8px 8px 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  margin:0;
}
.polaroid-card:nth-of-type(3){position: relative;}
.polaroid-card:nth-of-type(3)::after{
  content:'';width: 60px;height: 60px;display: block;position: absolute;right: 0;top:0;background-size: cover;background-repeat: no-repeat;background-image: url(/assets/img/icons/hearts2.png)
}
.polaroid-card:nth-of-type(6){position: relative;}
.polaroid-card:nth-of-type(6)::after{
  content:'';width: 60px;height: 60px;display: block;position: absolute;right: 0;bottom:50%;background-size: cover;background-repeat: no-repeat;background-image: url(/assets/img/icons/love.png)
}
.polaroid-photo{
  width:100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 10px; display:block;
}
.polaroid-cap{
  margin-top:8px; font-size:12px; color:var(--text);
  text-align:center; line-height:1.35;
}
.polaroid-cap small{ color: var(--muted); display:block; margin-top:2px; font-size:11px; }

/* ===== Features Page – Hub ===== */

.features-grid{
  display:grid;
  gap:16px;
  margin-top:14px;
}

.feature-box{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 20px rgba(255,105,180,.15);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  outline:none;
  text-align: center;
}
.feature-box:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,105,180,.22); }
.feature-box:focus{ box-shadow:0 0 0 3px rgba(255,105,180,.35); }

.feature-thumb{ width:64px; height:64px; object-fit:contain; }
.feature-title{ margin:0; font-size:1.06rem; }
.feature-desc{ margin:.15rem 0 0; color:#6b7280; font-size:.92rem; }
.feature-mini{ font-size:1.1rem; opacity:.9; }

/* =================== Lightbox ===================*/
.lb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9999;
}
.lb-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.lb-stage{
  position: relative;
  max-width: min(92vw, 980px);
  max-height: 86vh;
  display: grid;
  gap: 10px;
}

.lb-img{
  max-width: 100%;
  max-height: 76vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: #111;
}

.lb-caption{
  text-align: center;
  color: #f3f4f6;
  font-size: .98rem;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.lb-close,
.lb-nav{
  position: fixed;
  top: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent);
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close{ right: 20px; }
.lb-nav{ top: 50%; transform: translateY(-50%); }
.lb-prev{ left: 20px; }
.lb-next{ right: 20px; }

@media (hover:hover){
  .lb-close:hover, .lb-nav:hover{ background:#fff; }
}

.ll-flap { pointer-events: auto; cursor: pointer; }
.ll-envelope .ll-stage,
.ll-envelope .ll-letter,
.ll-envelope .ll-box {
  pointer-events: none;
}

/* Only the flap should be clickable to open */
.ll-flap {
  pointer-events: auto;
  cursor: pointer;
}

/* Once the card has jumped out, enable clicks on the card */
.ll-envelope.ll-show-card .ll-stage,
.ll-envelope.ll-show-card .ll-box {
  pointer-events: auto;
}

.ll-title{text-align: center;font-size: 20px;}