/* ==========================================================================
   Guide document styling — "The Ultimate Beauty & Makeup Guide"
   ========================================================================== */

.guide-body{
  background:#f3e4e9;
}

/* Toolbar */
.guide-toolbar{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(255,250,247,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(91,48,73,0.08);
  padding:14px 0;
}
.guide-toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.guide-toolbar-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.guide-access-pill{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(90deg, rgba(23,195,178,0.15), rgba(61,154,111,0.15));
  color:var(--success);
  font-size:0.82rem;
  font-weight:700;
  padding:8px 16px;
  border-radius:100px;
}

/* Document container */
.guide-doc{
  max-width:760px;
  margin:40px auto 80px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.guide-page{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:60px 64px;
  position:relative;
  min-height:600px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.guide-page-tag{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--pink-600);
  background:var(--pink-50);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:20px;
  width:fit-content;
}

.guide-page h2{
  font-size:1.9rem;
  margin-bottom:20px;
}

.guide-page p{
  color:var(--ink-soft);
  margin-bottom:14px;
  font-size:1rem;
}

.guide-page-num{
  position:absolute;
  bottom:26px;
  right:34px;
  font-family:var(--font-head);
  font-size:0.85rem;
  color:var(--pink-300);
  font-weight:700;
}

/* Cover page */
.guide-cover{
  background:linear-gradient(160deg, var(--plum) 0%, #7a3f5c 45%, var(--purple) 85%, var(--coral) 130%);
  color:#fff;
  align-items:center;
  text-align:center;
  justify-content:center;
  min-height:720px;
  padding:70px 50px;
  position:relative;
  overflow:hidden;
}
.guide-cover::before{
  content:'';
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,60,0.35), transparent 70%);
  top:-100px;right:-100px;
  z-index:0;
}
.guide-cover-eyebrow{
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sunny);
  margin-bottom:26px;
  position:relative;
  z-index:1;
}
.guide-cover-title{
  color:#fff;
  font-size:3rem;
  line-height:1.15;
  margin-bottom:22px;
  position:relative;
  z-index:1;
}
.guide-cover-sub{
  color:rgba(255,255,255,0.95) !important;
  max-width:420px;
  margin:0 auto 40px;
  font-size:1.05rem;
  position:relative;
  z-index:1;
}
.guide-cover-footer{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
  color:rgba(255,255,255,0.7);
  font-weight:500;
}
.guide-cover .dot{opacity:0.5;}
.guide-cover .guide-page-num{color:rgba(255,255,255,0.6);}

.guide-signoff{
  margin-top:26px;
  color:var(--plum);
  font-style:italic;
}

/* Table of contents */
.guide-toc{
  display:flex;
  flex-direction:column;
  gap:0;
  counter-reset:toc;
  list-style:none;
}
.guide-toc li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px dashed var(--pink-200);
  font-weight:500;
  color:var(--ink);
}
.guide-toc li span:last-child{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--purple-dark);
}

/* Numbered steps */
.guide-steps{
  display:flex;
  flex-direction:column;
  gap:14px;
  counter-reset:step;
  list-style:none;
  margin-bottom:16px;
}
.guide-steps li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  color:var(--ink);
  font-size:0.98rem;
}
.guide-steps li::before{
  counter-increment:step;
  content:counter(step);
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--coral), var(--purple));
  color:#fff;
  font-weight:700;
  font-size:0.82rem;
  display:flex;align-items:center;justify-content:center;
}
.guide-steps li strong{color:var(--plum);}

/* Tip callout */
.guide-tip{
  background:linear-gradient(90deg, var(--teal-light), var(--pink-50));
  border-left:4px solid var(--teal);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 20px;
  font-size:0.92rem;
  color:var(--ink);
  margin-top:auto;
}
.guide-tip i{color:var(--teal-dark);margin-right:6px;}

/* Two-column grid boxes */
.guide-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:6px;
}
.guide-box{
  background:var(--pink-50);
  border-radius:var(--radius-sm);
  padding:20px;
}
.guide-box h4{
  font-size:1rem;
  color:var(--plum);
  margin-bottom:8px;
}
.guide-box p{
  font-size:0.88rem;
  margin-bottom:0;
}

/* Checklists */
.guide-checklist{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:10px;
}
.guide-checklist li{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:0.98rem;
}
.guide-checklist i{color:var(--teal-dark);font-size:1.05rem;}
.guide-checklist-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
}
.guide-checklist-heading{
  font-size:1rem;
  color:var(--plum);
  margin-bottom:14px;
}

/* Closing page */
.guide-closing{
  align-items:center;
  text-align:center;
}
.guide-closing .btn{margin:20px 0 34px;}
.guide-disclosure{
  border-top:1px solid var(--pink-100);
  padding-top:24px;
  margin-top:auto;
}
.guide-disclosure p{
  font-size:0.8rem;
  color:var(--ink-soft);
}
.guide-disclosure a{color:var(--pink-600);font-weight:600;}

/* ==========================================================================
   Print styles — used by "Save / Print as PDF"
   ========================================================================== */
@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .guide-doc{margin:0;padding:0;max-width:none;gap:0;}
  .guide-page{
    box-shadow:none;
    border-radius:0;
    page-break-after:always;
    min-height:100vh;
    padding:50px 56px;
  }
  .guide-cover{background:linear-gradient(160deg, #5b3049 0%, #7a3f5c 45%, #9b5de5 85%, #ff6b6b 130%) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .guide-tip, .guide-box, .guide-page-tag, .guide-access-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px){
  .guide-page{padding:40px 28px;min-height:auto;}
  .guide-cover-title{font-size:2.2rem;}
  .guide-grid-2, .guide-checklist-2col{grid-template-columns:1fr;}
  .guide-toolbar-inner{justify-content:center;text-align:center;}
}