/* PackSmart — styles.css
   Modern, responsive layout with many animations.
   Keep this file alongside the HTML files.
   NOTE: uses CSS variables for easy theming.
*/

:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --muted:#65758a;
  --accent:#1f6feb;
  --accent-2:#84b6ff;
  --glass: rgba(255,255,255,0.6);
  --radius: 12px;
  --shadow: 0 8px 30px rgba(20,30,60,0.08);
  --glass-border: 1px solid rgba(255,255,255,0.55);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,var(--bg), #eef6ff 60%);
  color:#122028;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* header */
.site-header{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 28px;
  position:sticky;
  top:0;
  backdrop-filter: blur(6px) saturate(120%);
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(18,32,40,0.06);
  z-index:40;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--accent);
  font-weight:700;
  font-size:18px;
}
.nav{display:flex;gap:12px; margin-left:auto}
.nav-link{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;}
.nav-link.current, .nav-link:hover{color:var(--accent); background:rgba(31,111,235,0.06)}
.cta{margin-left:10px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); border:none; color:white; padding:8px 12px; border-radius:10px; cursor:pointer}
.burger{display:none; border:none; background:none; margin-left:8px; cursor:pointer}
.burger span{display:block; width:20px; height:2px; background:var(--muted); margin:4px 0; border-radius:2px}

/* hero */
.hero{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:32px;
  align-items:center;
  padding:56px 56px 32px;
  max-width:1200px;
  margin:0 auto;
}
.hero-left .hero-title{font-size:40px; margin:0 0 12px}
.hero-sub{color:var(--muted); margin-bottom:18px}
.hero-actions{display:flex; gap:12px; margin-bottom:18px}
.btn{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none}
.btn-primary{background:var(--accent); color:#fff}
.btn-ghost{background:transparent; border:1px solid rgba(18,32,40,0.06); color:var(--muted)}

/* suitcase animation */
.suitcase-wrap{position:relative; width:100%; height:360px; display:flex; align-items:center; justify-content:center}
.suitcase{width:260px; height:170px; border-radius:12px; transform-origin:center; transition:transform 0.8s cubic-bezier(.2,.9,.2,1)}
.suitcase.enter{animation:popIn 900ms cubic-bezier(.2,.9,.2,1) both}
@keyframes popIn { from { transform: translateY(20px) scale(.96); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }
.suitcase-body{position:relative; width:100%; height:100%; background:linear-gradient(180deg,#2468d9 0%, #1f6feb 100%); border-radius:12px; box-shadow:var(--shadow); display:flex}
.suitcase-handle{position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:110px; height:20px; background:#84b6ff; border-radius:6px 6px 3px 3px;}

.suitcase-sticker{position:absolute; font-size:20px; transform:rotate(-8deg); animation:sticker-bob 5s ease-in-out infinite}
@keyframes sticker-bob { 0%,100%{ transform:translateY(0) rotate(-8deg)} 50%{ transform:translateY(-6px) rotate(-6deg)} }
.sticker-1{left:12px; top:22px}
.sticker-2{right:18px; top:36px}
.tag{position:absolute; right:8px; bottom:-12px; background:var(--accent-2); color:#06325b; padding:6px 10px; border-radius:6px; font-weight:600; box-shadow:0 6px 18px rgba(31,111,235,0.12)}

.floating-items{position:absolute; width:360px; height:240px; pointer-events:none}
.item{position:absolute; font-size:28px; opacity:0; transform:translateY(20px) rotate(-8deg)}
.float-in .item{animation:floatIn 1100ms cubic-bezier(.2,.9,.2,1) forwards}
@keyframes floatIn { to { opacity:1; transform:translateY(0) rotate(0) } }
.item.shirt{left:12%; top:10%; animation-delay:200ms}
.item.camera{left:70%; top:18%; animation-delay:400ms}
.item.shoes{left:55%; top:62%; animation-delay:600ms}
.item.passport{left:18%; top:60%; animation-delay:900ms}

/* quick features */
.quick-features{display:flex; gap:14px; list-style:none; padding:0; margin-top:18px}
.quick-features li{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)); border-radius:10px; padding:8px 12px; color:var(--muted); font-size:14px}

/* how it works */
.how-it-works{max-width:1000px; margin:34px auto; padding:28px; text-align:center}
.steps{display:flex; gap:20px; justify-content:center; margin-top:20px}
.step{background:var(--card); padding:20px; border-radius:14px; width:260px; box-shadow:var(--shadow); transition:transform .3s}
.step:hover{transform:translateY(-8px)}
.step-icon{width:48px; height:48px; border-radius:50%; background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px}

/* layout for pack page */
.container{max-width:1100px; margin:30px auto; padding:0 18px; display:flex; gap:26px; align-items:flex-start}
.pack-left{flex:0 0 360px}
.pack-right{flex:1}

/* cards */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.hidden{display:none}
.row{display:flex; gap:12px}
label{display:block; margin-bottom:12px; color:#102126}
input,select,textarea{width:100%; padding:10px; border-radius:8px; border:1px solid rgba(10,20,30,0.06)}
textarea{min-height:72px; resize:vertical}
.chips label{display:inline-block; background:#f3f8ff; padding:8px 10px; margin:6px 6px 0 0; border-radius:10px; font-size:14px}

/* result list */
.result-header{display:flex; justify-content:space-between; align-items:center; gap:12px}
.result-actions .btn{margin-left:8px}
.meta{color:var(--muted); font-size:13px; margin:8px 0}
.packing-list{list-style:none; padding:0; margin:12px 0}
.packing-list li{display:flex; justify-content:space-between; padding:8px 10px; border-radius:10px; margin-bottom:8px; align-items:center; background:linear-gradient(180deg,#fff,#fbfdff)}
.packing-list li .item-left{display:flex; gap:12px; align-items:center}
.packing-list li .badge{background:#eef6ff; color:var(--accent); padding:6px 8px; border-radius:8px; font-weight:600}

/* estimates */
.estimates{display:flex; gap:14px; justify-content:flex-end; color:var(--muted); font-size:14px; margin-top:8px}

/* saved lists */
.saved ul{list-style:none; padding:0; margin:0}
.saved li{padding:8px 10px; border-radius:8px; margin:6px 0; display:flex; justify-content:space-between; align-items:center}
.saved li .btn{margin-left:10px}

/* footer */
.site-footer{margin-top:30px; padding:24px; text-align:center; color:var(--muted)}

/* responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; gap:18px}
  .container{flex-direction:column}
  .nav{display:none}
  .burger{display:block}
}

/* small utilities */
.small{font-size:12px; color:var(--muted)}
.center{display:flex; align-items:center; justify-content:center}

/* extra animations for visuals on features page */
.animated-closet{height:120px; background:linear-gradient(90deg,#fff,#f3fbff); border-radius:8px; position:relative; overflow:hidden}
.animated-closet::after{content:''; position:absolute; left:-40%; top:-10%; width:60%; height:160%; transform:rotate(25deg); background:linear-gradient(90deg, transparent, rgba(31,111,235,0.06)); animation:shine 3s linear infinite}
@keyframes shine{to{left:140%}}

/* print friendly */
@media print{
  .site-header, .site-footer, .nav, .cta, .burger{display:none}
  body{background:white}
  .card{box-shadow:none}
}
.footer {
  text-align: center;
  background: linear-gradient(135deg, #007aff, #005ecf);
  color: white;
  padding: 1.5rem 0;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-top: 4rem;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease;
}

.footer strong {
  color: #ffeb3b;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}