/* Resume Builder page-specific styles, layered on top of easylife.solutions' app.css
 * (loaded first in partials/head.php) so nav/hero/buttons/colours/dark-mode match the
 * main site. Only things app.css doesn't already define live here. */

.search-bar{max-width:560px;margin:0 auto 10px;display:flex;gap:8px}
.search-bar input{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:12px;font-size:15px;background:var(--card-solid);color:var(--ink)}
.search-bar input:focus{outline:2px solid var(--accent)}

/* ---------- template cards (home gallery, category grid, search results) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.card{background:var(--card-solid);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 24px 50px rgba(20,30,50,.18);border-color:var(--accent)}
.card .thumb{aspect-ratio:3/4;background:linear-gradient(160deg,#eef0f8,#e3e7f5);overflow:hidden;position:relative}
.card .thumb iframe{width:286%;height:360%;transform:scale(.35);transform-origin:top center;border:0;pointer-events:none;
  position:absolute;left:50%;margin-left:-143%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .thumb iframe{transform:scale(.37) translateY(-6px)}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.14));pointer-events:none}
.card .body{padding:14px 16px}
.card .body h3{font-size:15px;margin:0 0 2px;font-weight:700;color:var(--ink)}
.card .body p{font-size:12.5px;color:var(--ink-2);margin:0}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag-chip{font-size:10.5px;font-weight:600;color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);border-radius:999px;padding:3px 9px;text-transform:capitalize}
.badge-soon{position:absolute;top:10px;right:10px;background:var(--card-solid);border:1px solid var(--line);color:var(--ink-2);font-size:10.5px;padding:3px 9px;border-radius:999px;z-index:2}

/* ---------- category grid (rich, colourful, motion) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cat-card{background:var(--card-solid);border:1px solid var(--line);border-radius:18px;padding:0;display:block;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(20,30,50,.16);border-color:transparent}
.cat-card-rich{position:relative}
.cat-card-rich::before{content:"";display:block;height:64px;background:linear-gradient(120deg,var(--cg));opacity:.92;
  transition:height .3s cubic-bezier(.2,.8,.2,1)}
.cat-card-rich:hover::before{height:76px}
.cat-ic{position:absolute;top:28px;left:20px;width:46px;height:46px;border-radius:14px;background:var(--card-solid);
  display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 18px rgba(20,30,50,.2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cat-card-rich:hover .cat-ic{transform:scale(1.1) rotate(-4deg)}
.cat-card h3{margin:20px 20px 4px;font-size:16.5px;color:var(--ink)}
.cat-count{display:inline-block;margin:0 20px 20px;color:var(--ink-2);font-size:13px;font-weight:600}

/* ---------- auth / dashboard panels ---------- */
.auth-wrap{display:flex;justify-content:center;padding:60px 20px}
.form-card{background:var(--card-solid);border:1px solid var(--line);border-radius:20px;padding:32px;max-width:420px;width:100%;box-shadow:var(--shadow)}
.form-card h1{font-size:22px;margin:0 0 18px;color:var(--ink)}
.form-card label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px;color:var(--ink)}
.form-card input,.form-card select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;background:var(--bg);color:var(--ink)}
.btn-block{width:100%;text-align:center}
.muted{color:var(--ink-2);font-size:13.5px}
.alert{padding:10px 14px;border-radius:10px;font-size:13.5px;margin-bottom:10px}
.alert-ok{background:rgba(16,185,129,.14);color:#0f9d6e}
.alert-err{background:rgba(239,68,68,.12);color:#dc3545}

.dash{padding:40px 0}
.dash-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
@media(max-width:800px){.dash-grid{grid-template-columns:1fr}}
.panel-box{background:var(--card-solid);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.panel-box h3{margin:0 0 10px;color:var(--ink)}
.share-link{display:flex;gap:8px;margin-top:8px}
.share-link input{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--bg);color:var(--ink)}
.frame-preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:1/1.2;background:#eef0f4}
.frame-preview iframe{width:250%;height:250%;transform:scale(.4);transform-origin:top left;border:0}