/* =========================================================
   LeaveAppKit – Generator Components Only
   Integrated with LeaveApplication.in site styles
   ========================================================= */

/* Remove conflicting base styles - use site's styles.css instead */

/* ---------- Layout ---------- */
.tool-wrap{
  display:grid;gap:1rem;grid-template-columns:1fr;
  margin-bottom:1.5rem;
}
@media(min-width:960px){
  .tool-wrap{grid-template-columns:1fr 1fr;gap:1.4rem}
}

.card{
  background:#fff;border:1px solid #e5e7eb;
  border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);
  padding:1.1rem;
}

/* ---------- Form ---------- */
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.85rem;font-weight:600;color:#374151;margin-bottom:.3rem}
.field select,.field input,.field textarea{
  width:100%;padding:.55rem .7rem;font-size:.95rem;
  border:1px solid #e5e7eb;border-radius:8px;background:#fff;
  color:#111827;transition:border .15s,box-shadow .15s;
}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:0;border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.pill{
  padding:.35rem .75rem;border:1px solid #e5e7eb;
  border-radius:999px;font-size:.85rem;background:#f9fafb;color:#111827;
  transition:all .15s;cursor:pointer;
}
.pill.active{background:#2563eb;color:#fff;border-color:#2563eb}
.pill:hover{border-color:#2563eb}
.hide{display:none}

/* ---------- Preview ---------- */
.preview-card{display:flex;flex-direction:column;min-height:380px}
.preview-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px dashed #e5e7eb;
}
.preview-meta small{color:#6b7280;font-size:.8rem}
.variant-tabs{display:flex;gap:.3rem}
.variant-tabs button{
  padding:.25rem .6rem;font-size:.78rem;font-weight:600;
  border:1px solid #e5e7eb;border-radius:6px;background:#f9fafb;color:#6b7280;cursor:pointer;
}
.variant-tabs button.active{background:#2563eb;color:#fff;border-color:#2563eb}

#preview{
  flex:1;white-space:pre-wrap;word-wrap:break-word;
  font-family:Georgia,"Times New Roman",serif;font-size:.95rem;line-height:1.65;
  background:#fefefe;border:1px solid #e5e7eb;border-radius:8px;
  padding:1.1rem;color:#111827;min-height:280px;
}

/* ---------- Action buttons ---------- */
.actions{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;
}
.actions .btn,
.sticky-bar .btn{
  padding:.6rem 1rem;border-radius:8px;font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;
  transition:transform .1s, box-shadow .1s, background .15s;cursor:pointer;
  min-height:44px;
}
.actions .btn:active,
.sticky-bar .btn:active{transform:translateY(1px)}
.actions .btn-primary{background:#2563eb;color:#fff!important}
.actions .btn-primary:hover{background:#1d4ed8;text-decoration:none}
.actions .btn-secondary{background:#fff;border-color:#e5e7eb;color:#111827!important}
.actions .btn-secondary:hover{border-color:#2563eb;color:#2563eb!important;text-decoration:none}
.actions .btn-success{background:#16a34a;color:#fff!important}
.actions .btn-success:hover{background:#15803d;text-decoration:none}

/* ---------- Sticky mobile bar ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  background:#fff;border-top:1px solid #e5e7eb;
  padding:.5rem;display:none;gap:.4rem;
  box-shadow:0 -4px 14px rgba(0,0,0,.08);
}
.sticky-bar .btn{flex:1;justify-content:center;padding:.7rem .5rem;min-height:44px}
.sticky-bar .btn-primary{background:#2563eb;color:#fff!important}
.sticky-bar .btn-primary:hover{background:#1d4ed8}
.sticky-bar .btn-success{background:#16a34a;color:#fff!important}
.sticky-bar .btn-success:hover{background:#15803d}
@media(max-width:759px){.sticky-bar{display:flex}body{padding-bottom:74px}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:#111827;color:#fff;padding:.6rem 1rem;border-radius:8px;font-size:.9rem;
  opacity:0;pointer-events:none;transition:all .25s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Sections ---------- */
section{margin-top:2rem}
.samples{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.samples{grid-template-columns:repeat(3,1fr)}}
.sample{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  padding:1rem;box-shadow:0 1px 3px rgba(0,0,0,.1);
  display:flex;flex-direction:column;
}
.sample h3{color:#2563eb;font-size:.95rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
.sample pre{
  white-space:pre-wrap;font-family:Georgia,serif;font-size:.85rem;line-height:1.55;
  flex:1;color:#2a3146;margin:0 0 .6rem;
}
.sample .copy-mini{
  align-self:flex-start;font-size:.78rem;font-weight:600;color:#2563eb;
  border:1px solid #2563eb;padding:.3rem .6rem;border-radius:6px;background:#fff;
}
.sample .copy-mini:hover{background:#2563eb;color:#fff}

.steps{display:grid;gap:.8rem;grid-template-columns:1fr;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  padding:1rem;position:relative;counter-increment:s;
}
.step::before{
  content:counter(s);
  position:absolute;top:-12px;left:14px;
  width:26px;height:26px;background:#2563eb;color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;
}
.step h3{margin-top:.4rem}

ul.tips{padding-left:1.2rem;margin:0}
ul.tips li{margin-bottom:.5rem}

.faq details{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  padding:.9rem 1rem;margin-bottom:.6rem;box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.faq summary{
  cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq summary::after{content:"+";font-size:1.3rem;color:#2563eb;transition:transform .2s}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:.6rem 0 0;color:#3a4258}

/* ---------- Tool grid (homepage) ---------- */
.grid-tools{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:600px){.grid-tools{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid-tools{grid-template-columns:repeat(3,1fr)}}
.tool-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  padding:1.1rem;box-shadow:0 1px 3px rgba(0,0,0,.1);
  display:flex;flex-direction:column;gap:.4rem;color:inherit;text-decoration:none;
  transition:transform .12s, border .15s, box-shadow .12s;
}
.tool-card:hover{transform:translateY(-2px);border-color:#2563eb;box-shadow:0 6px 20px rgba(39,82,231,.12);text-decoration:none}
.tool-card .icon{font-size:1.6rem}
.tool-card h3{font-size:1rem;margin:0}
.tool-card p{font-size:.85rem;color:#6b7280;margin:0}
.tool-card .badge{display:inline-block;font-size:.7rem;color:#16a34a;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:3rem;padding:2rem 0;border-top:1px solid #e5e7eb;
  background:#fff;color:#6b7280;font-size:.85rem;
}
.site-footer .container{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:760px){.site-footer .container{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer h4{color:#0d1422;font-size:.9rem;margin:0 0 .6rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:.35rem}
.site-footer a{color:#6b7280}
.site-footer .copy{margin-top:1.4rem;text-align:center;color:#8a93a8;border-top:1px solid #e5e7eb;padding-top:1rem}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:#6b7280;margin:.4rem 0 .8rem}
.crumbs a{color:#6b7280}
.crumbs a:hover{color:#2563eb}

/* ---------- Validation ---------- */
.validation{background:#fff7ed;border:1px solid #fdba74;border-radius:8px;padding:.7rem .9rem;margin:.6rem 0;font-size:.85rem;color:#9a3412}
.validation strong{display:block;margin-bottom:.3rem}
.validation ul{margin:.2rem 0 0;padding-left:1.2rem}
.validation li{margin:.1rem 0}

/* ---------- Variations Grid ---------- */
.variations-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.6rem}
@media(min-width:880px){.variations-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Reason fallback select on small screens ---------- */
.reason-select{display:none;margin-bottom:.4rem}
@media(max-width:520px){.reason-select{display:block}}

/* ---------- Action group ---------- */
.actions .btn{flex:1 1 calc(50% - .25rem);min-width:120px;justify-content:center}
@media(min-width:760px){.actions .btn{flex:0 1 auto}}

/* ---------- Utility ---------- */
.muted{color:#6b7280}
.tag{
  display:inline-block;background:#eef2ff;color:#2563eb;
  font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em;
}
.hide{display:none}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.actions,.sticky-bar,.tool-wrap > .card:first-child,
  .samples,.steps,.faq,.tips,section h2,.crumbs{display:none!important}
  body{background:#fff;padding:0}
  #preview{border:0;padding:0;font-size:1rem}
}