/* =========================================================
   Affiliate CRM - Shared Guides Styles
========================================================= */

.guide-page,
.settings-guides-page{
  background:#f6f8fb;
}

/* Wider content wrapper used in guide hero sections */
.guide-wide-wrap{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding-left:12px;
  padding-right:12px;
}

/* =========================================================
   Hero
========================================================= */

.guide-hero,
.guides-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0b1f3b 0%, #12345a 100%);
  color:#fff;
  padding:4.5rem 0 4rem;
  margin-bottom:0;
}

.guide-hero .guide-wide-wrap,
.guide-hero .container,
.guide-hero .row,
.guide-hero [class*="col-"],
.guides-hero .container,
.guides-hero .row,
.guides-hero [class*="col-"]{
  position:relative;
  z-index:2;
}

.guide-hero-icon,
.guides-hero-icon{
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  font-size:180px;
  color:#ffc107;
  opacity:1;
  pointer-events:none;
  line-height:1;
  z-index:1;
}

.guide-hero h1,
.guides-hero h1{
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:700;
  margin-bottom:1rem;
}

.guide-hero p,
.guides-hero p{
  font-size:1.15rem;
  max-width:760px;
  margin:0 auto;
  color:rgba(255,255,255,0.88);
  line-height:1.7;
}

.guide-hero-icon.is-soft,
.guides-hero-icon.is-soft{
  opacity:0.18;
}

.guide-hero-icon.is-right,
.guides-hero-icon.is-right{
  left:auto;
  right:8%;
}

/* =========================================================
   Main content
========================================================= */

.guide-content,
.settings-guides-content{
  padding:3rem 0 4rem;
}

/* =========================================================
   Standard guide cards
========================================================= */

.guide-card,
.settings-intro-card{
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:18px;
  padding:2rem;
  margin-bottom:2rem;
  box-shadow:0 12px 35px rgba(15,35,60,0.08);
}

.guide-card h2,
.settings-section-header h2{
  font-size:1.7rem;
  font-weight:700;
  color:#0b1f3b;
  margin-bottom:1rem;
}

.guide-card h3{
  font-size:1.2rem;
  font-weight:700;
  color:#0b1f3b;
  margin-bottom:0.75rem;
}

.guide-card p,
.guide-card li,
.settings-intro-card p,
.settings-section-header p{
  font-size:1rem;
  line-height:1.75;
  color:#334155;
}

.guide-card ul{
  padding-left:1.2rem;
  margin-bottom:0;
}

.guide-intro{
  font-size:1.05rem;
}

.guide-section-label,
.settings-section-label{
  display:inline-block;
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#64748b;
  margin-bottom:0.8rem;
}

/* =========================================================
   Split boxes
========================================================= */

.guide-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-top:1.5rem;
}

.guide-split-box{
  background:#f8fafc;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:1.25rem;
  height:100%;
}

/* =========================================================
   Feature cards
========================================================= */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.25rem;
  margin-top:1.5rem;
}

.feature-box{
  background:#f8fafc;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:1.4rem;
  height:100%;
}

.feature-box .icon{
  font-size:1.4rem;
  margin-bottom:0.85rem;
  display:inline-block;
}

/* =========================================================
   Image blocks
========================================================= */

.guide-image-box{
  background:#f8fafc;
  border:1px solid #e3e8f1;
  border-radius:14px;
  padding:1rem;
  margin-top:1.5rem;
  text-align:center;
}

.guide-image-box img{
  width:100%;
  max-width:100%;
  border-radius:10px;
  display:block;
  margin:0 auto;
  box-shadow:0 8px 22px rgba(15,23,42,0.08);
}

.guide-image-caption{
  font-size:0.92rem;
  color:#64748b;
  margin-top:0.75rem;
  line-height:1.5;
}

/* =========================================================
   Notes
========================================================= */

.guide-note{
  background:#eef6ff;
  border:1px solid #cfe1fb;
  color:#355070;
  border-radius:12px;
  padding:0.9rem 1rem;
  margin-top:1rem;
  font-size:0.95rem;
  line-height:1.6;
}

.guide-note.note-warning{
  background:#fff8db;
  border-color:#f5e39b;
  color:#6b5a19;
}

/* =========================================================
   Back area
========================================================= */

.guide-back{
  text-align:center;
  margin-top:1rem;
}

.guide-back a{
  display:inline-block;
  padding:0.8rem 1.5rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

/* =========================================================
   Guides / settings index cards
========================================================= */

.guides-grid,
.settings-guides-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}

.guide-card-link,
.settings-guide-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:18px;
  padding:1.4rem;
  box-shadow:0 12px 35px rgba(15,35,60,0.08);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height:100%;
}

.guide-card-link:hover,
.settings-guide-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,35,60,0.12);
  border-color:#d5dde9;
  text-decoration:none;
}

.guide-card-icon,
.settings-guide-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,112,228,0.10);
  color:#1170e4;
  font-size:1.1rem;
  margin-bottom:0.95rem;
}

.guide-card-link h3,
.settings-guide-card h3{
  font-size:1.1rem;
  font-weight:700;
  color:#0b1f3b;
  margin-bottom:0.55rem;
}

.guide-card-link p,
.settings-guide-card p{
  color:#475569;
  margin-bottom:0;
  line-height:1.65;
  font-size:0.97rem;
}

.guide-card-spacer,
.settings-guide-spacer{
  flex-grow:1;
}

.guide-card-btn,
.settings-guide-btn{
  display:block;
  width:100%;
  text-align:center;
  margin-top:1.25rem;
  padding:0.8rem 1rem;
  border-radius:10px;
  background:#ffc107;
  color:#0b1f3b;
  font-weight:700;
  text-decoration:none;
  transition:all 0.2s ease;
}

.guide-card-link:hover .guide-card-btn,
.settings-guide-card:hover .settings-guide-btn{
  background:#ffcd39;
  color:#0b1f3b;
}

/* =========================================================
   Alternate single-guide layout used by Calendar-style pages
========================================================= */

.guide-block{
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:18px;
  padding:2rem;
  box-shadow:0 12px 35px rgba(15,35,60,0.08);
  margin-bottom:1.5rem;
}

.guide-block h2{
  color:#0b1f3b;
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:1rem;
}

.guide-block h3{
  color:#0b1f3b;
  font-size:1.1rem;
  font-weight:700;
  margin-top:1.25rem;
  margin-bottom:0.75rem;
}

.guide-block p,
.guide-block li{
  color:#475569;
  line-height:1.8;
  font-size:1rem;
}

.guide-block ul{
  margin-bottom:0;
  padding-left:1.2rem;
}

/* =========================================================
   Calendar / alternate image box icon support
========================================================= */

.guide-image-box{
  background:#f8fafc;
  border:1px solid #e3e8f1;
  border-radius:14px;
  padding:1rem;
  margin-top:1.5rem;
  text-align:center;
}

.guide-image-box.is-placeholder{
  background:linear-gradient(135deg,#f8fafc,#eef3f8);
  border:1px dashed #cfd8e3;
  border-radius:16px;
  padding:2rem;
  color:#64748b;
}

.guide-image-box i{
  font-size:2.2rem;
  color:#f0b100;
  margin-bottom:0.75rem;
  display:block;
}

/* =========================================================
   Tip cards used by Calendar-style pages
========================================================= */

.tip-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}

.tip-card{
  background:#fff7db;
  border:1px solid #f4df95;
  border-radius:16px;
  padding:1rem 1rem 0.9rem;
  height:100%;
}

.tip-card h4{
  color:#0b1f3b;
  font-size:1rem;
  font-weight:700;
  margin-bottom:0.5rem;
}

.tip-card p{
  margin-bottom:0;
  color:#5b6472;
  font-size:0.95rem;
  line-height:1.7;
}

/* =========================================================
   Alternate footer actions
========================================================= */

.guide-footer-actions{
  margin-top:2rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.btn-guide-back{
  background:#ffc107;
  color:#0b1f3b;
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:0.85rem 1.35rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
}

.btn-guide-back:hover{
  color:#0b1f3b;
  opacity:0.95;
  text-decoration:none;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991.98px){
  .guide-split{
    grid-template-columns:1fr;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .guides-grid,
  .settings-guides-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .guide-card,
  .settings-intro-card{
    padding:1.5rem;
  }
}

@media (max-width: 768px){
  .guide-hero-icon,
  .guides-hero-icon{
    font-size:120px;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    opacity:0.15;
  }
}

@media (max-width: 767.98px){
  .guide-content,
  .settings-guides-content{
    padding:2rem 0 3rem;
  }

  .guides-grid,
  .settings-guides-grid{
    grid-template-columns:1fr;
  }

  .guide-card-link,
  .settings-guide-card{
    padding:1.2rem;
  }
}