/**
 * SWAGLIFT Article Styles
 * Version: 1.0
 * Usage: <link rel="stylesheet" href="/user/documents/css/sw-article.css">
 */

/* ═══════════════════════════════════════════════════════════
   BASE & CONTAINER
   ═══════════════════════════════════════════════════════════ */
.sw-art *{box-sizing:border-box}
.sw-art{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 20px 20px;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  color:rgba(255,255,255,0.78);
  line-height:1.7;
  font-size:18px
}
.sw-container{
  background:#0E0E0E;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow:hidden
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.sw-hero{
  padding:56px 70px;
  background:radial-gradient(1000px 420px at 18% 0%,rgba(120,237,43,0.18),transparent 62%),
             linear-gradient(180deg,rgba(120,237,43,0.12) 0%,transparent 100%)
}
.sw-hero h1{
  font-size:32px;
  font-weight:bold;
  line-height:1.35;
  margin:0 0 18px 0;
  color:#fff
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════ */
.sw-sec{
  padding:40px 70px;
  border-top:1px solid rgba(255,255,255,0.06)
}
.sw-sec:first-of-type{border-top:none}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
/* Headings */
.sw-h2{
  font-size:24px;
  font-weight:900;
  line-height:1.25;
  margin:0 0 12px 0;
  color:#fff;
  display:inline-block
}
.sw-h2-hl{
  padding:8px 20px 8px 0;
  background:linear-gradient(90deg,rgba(120,237,43,0.18) 0%,transparent 80%);
  border-left:3px solid #78ed2b;
  padding-left:16px;
  margin-left:-16px
}
.sw-h3{
  font-size:20px;
  font-weight:800;
  line-height:1.25;
  margin:24px 0 12px 0;
  color:#fff
}

/* Decorative line */
.sw-line{
  height:1px;
  width:420px;
  max-width:100%;
  background:linear-gradient(90deg,rgba(120,237,43,0.92),transparent 72%);
  margin:0 0 18px 0
}

/* Paragraphs */
.sw-p{
  margin:0 0 16px 0;
  color:rgba(255,255,255,0.72);
  line-height:1.85;
  font-size:18px
}
.sw-p:last-child{margin-bottom:0}
.sw-p strong{color:#fff}

/* Links */
.sw-link{color:#78ed2b;text-decoration:underline}
.sw-link:hover{color:#8fff3d}

/* ═══════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════ */
.sw-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:30px;
  margin:0
}
.sw-grid-r{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:30px;
  margin:0
}
.sw-grid-col{
  display:flex;
  flex-direction:column;
  justify-content:center
}
.sw-grid-img{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
  background:rgba(255,255,255,0.02);
  min-height:260px
}
.sw-grid-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.05) saturate(1.06)
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL BOXES
   ═══════════════════════════════════════════════════════════ */
/* Highlight box */
.sw-hl{
  margin:24px 0;
  padding:24px 28px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(120,237,43,0.08) 0%,rgba(120,237,43,0.02) 100%);
  border:1px solid rgba(120,237,43,0.15)
}
.sw-hl p{margin:0;color:rgba(255,255,255,0.85)}

/* Tip box */
.sw-tip{
  margin:20px 0 0 0;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(0,0,0,0.3);
  border-left:3px solid #78ed2b
}
.sw-tip-label{color:#78ed2b;font-weight:900;letter-spacing:.4px}
.sw-tip-text{color:rgba(255,255,255,0.66)}

/* ═══════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════ */
.sw-ach{list-style:none;padding:0;margin:0}
.sw-ach li{
  padding:16px 0 16px 28px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.72);
  font-size:18px;
  line-height:1.7
}
.sw-ach li:last-child{border-bottom:none}
.sw-ach li::before{
  content:'';
  position:absolute;
  left:0;
  top:22px;
  width:10px;
  height:10px;
  background:#78ed2b
}
.sw-ach li strong{
  color:#fff;
  display:block;
  margin-bottom:4px;
  font-size:18px
}

/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════ */
.sw-faq{
  margin:0 0 8px 0;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  transition:all .2s
}
.sw-faq:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.1)
}
.sw-faq summary{
  padding:18px 22px;
  font-size:17px;
  font-weight:700;
  color:rgba(255,255,255,0.90);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.sw-faq summary::-webkit-details-marker{display:none}
.sw-faq summary::after{
  content:'+';
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(120,237,43,0.14);
  border:1px solid rgba(120,237,43,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#78ed2b;
  font-size:20px;
  font-weight:800;
  transition:all .25s
}
.sw-faq[open] summary::after{
  content:'−';
  background:rgba(120,237,43,0.22);
  transform:rotate(180deg)
}
.sw-faq-a{
  padding:0 22px 18px 22px;
  color:rgba(255,255,255,0.68);
  line-height:1.8;
  font-size:16px
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════ */
.sw-cta-box{
  text-align:center;
  padding:50px 70px;
  background:radial-gradient(800px 300px at 50% 0%,rgba(120,237,43,0.15),transparent 70%),
             linear-gradient(180deg,rgba(120,237,43,0.06) 0%,transparent 50%);
  border-top:1px solid rgba(120,237,43,0.2)
}
.sw-cta-box h2{
  display:inline-block;
  margin:0 0 8px 0;
  padding:10px 24px;
  font-size:26px;
  color:#fff;
  background:linear-gradient(90deg,rgba(120,237,43,0.2),transparent 90%);
  border-left:3px solid #78ed2b
}
.sw-cta-box>p{
  color:rgba(255,255,255,0.72);
  margin:20px auto;
  font-size:18px;
  line-height:1.8;
  max-width:700px
}

/* CTA row - buttons + coupon stacked */
.sw-cta-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  margin-top:24px
}
.sw-cta-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center
}

/* Buttons */
.sw-btn{
  display:inline-block;
  padding:16px 45px;
  background:linear-gradient(135deg,#78ed2b,#5cbf1a);
  color:#000;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:10px;
  border-radius:8px;
  transition:all .2s;
  box-shadow:0 6px 18px rgba(120,237,43,0.35)
}
.sw-btn:hover{
  background:linear-gradient(135deg,#8fff3d,#78ed2b);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(120,237,43,0.5);
  color:#000;
  text-decoration:none
}
.sw-btn-o{
  background:transparent;
  border:2px solid rgba(255,255,255,0.5);
  color:#fff;
  box-shadow:none
}
.sw-btn-o:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  box-shadow:0 6px 18px rgba(255,255,255,0.15)
}

/* Coupon box */
.sw-coupon{
  padding:16px 20px;
  background:rgba(0,0,0,0.3);
  border:1px dashed rgba(120,237,43,0.4);
  border-radius:10px;
  text-align:center
}
.sw-coupon-label{
  display:block;
  color:rgba(255,255,255,0.6);
  font-size:14px;
  margin-bottom:8px
}
.sw-coupon-code{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:rgba(120,237,43,0.12);
  border:2px solid #78ed2b;
  border-radius:8px;
  font-size:20px;
  font-weight:900;
  letter-spacing:2px;
  color:#78ed2b;
  cursor:pointer;
  transition:all .2s;
  user-select:all
}
.sw-coupon-code:hover{
  background:rgba(120,237,43,0.2);
  transform:scale(1.02)
}
.sw-coupon-code.copied{
  background:rgba(120,237,43,0.3);
  border-color:#8fff3d
}
.sw-coupon-code.copied .sw-coupon-copy::after{
  content:' ✓';
  color:#8fff3d
}
.sw-coupon-copy{
  font-size:16px;
  opacity:0.7
}
.sw-coupon-note{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,0.45);
  max-width:320px
}

/* ═══════════════════════════════════════════════════════════
   TAGS
   ═══════════════════════════════════════════════════════════ */
.sw-tags{
  padding:24px 70px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  border-radius:0 0 12px 12px
}
.sw-tags-label{
  color:rgba(255,255,255,0.5);
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px
}
.sw-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.08);
  transition:all .2s
}
.sw-tag:hover{
  background:rgba(120,237,43,0.12);
  color:#78ed2b;
  border-color:rgba(120,237,43,0.3);
  text-decoration:none
}

/* ═══════════════════════════════════════════════════════════
   FINAL IMAGE
   ═══════════════════════════════════════════════════════════ */
.sw-final-img{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.06)
}
.sw-final-img img{
  width:100%;
  max-width:600px;
  display:block;
  margin:0 auto
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
#sw-nav{
  max-width:1200px;
  margin:0 auto 20px auto;
  padding:0 20px
}
.sw-nav-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  background:rgba(255,255,255,0.08);
  border-radius:8px;
  padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3)
}
.sw-nav-link{
  flex:1;
  text-align:center;
  padding:12px 20px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  border-radius:6px;
  transition:all .2s
}
.sw-nav-link:hover{background:rgba(255,255,255,0.12);text-decoration:none}
.sw-nav-link.active{background:rgba(120,237,43,0.15);color:#78ed2b}
.sw-nav-sep{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.2);
  flex:0 0 1px
}

/* ═══════════════════════════════════════════════════════════
   STICKY BAR
   ═══════════════════════════════════════════════════════════ */
#sw-sticky-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  opacity:0;
  transform:translateY(-100%);
  transition:opacity .3s,transform .3s;
  pointer-events:none;
  background:#000
}
#sw-sticky-bar.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.sw-sticky-inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  align-items:center;
  gap:0;
  background:#000
}
.sw-sticky-links{
  display:flex;
  align-items:center;
  gap:0;
  flex:1;
  background:rgba(255,255,255,0.06);
  border-radius:6px;
  padding:2px
}
.sw-sticky-link{
  flex:1;
  text-align:center;
  padding:8px 16px;
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  border-radius:5px;
  transition:all .2s
}
.sw-sticky-link:hover{background:rgba(255,255,255,0.10);color:#fff;text-decoration:none}
.sw-sticky-link.active{background:rgba(120,237,43,0.18);color:#78ed2b}
.sw-sticky-sep{
  width:1px;
  height:20px;
  background:rgba(255,255,255,0.12);
  flex:0 0 1px
}
.sw-sticky-cta{
  margin-left:14px;
  flex:0 0 auto;
  padding:10px 28px;
  background:linear-gradient(135deg,#78ed2b,#5cbf1a);
  color:#000;
  font-weight:800;
  font-size:14px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(120,237,43,0.4);
  transition:all .2s
}
.sw-sticky-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(120,237,43,0.5)
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.sw-mt-0{margin-top:0!important}
.sw-mt-16{margin-top:16px!important}
.sw-mt-24{margin-top:24px!important}
.sw-mt-30{margin-top:30px!important}
.sw-mt-40{margin-top:40px!important}
.sw-mb-20{margin-bottom:20px!important}
.sw-intro{font-size:20px;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,0.35)}
.sw-white{color:#fff}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:991px){
  .sw-grid,.sw-grid-r{grid-template-columns:1fr}
  .sw-grid-img{min-height:200px;max-height:350px}
}
@media(max-width:767px){
  .sw-sec,.sw-cta-box,.sw-tags{padding-left:24px;padding-right:24px}
  .sw-hero{padding:32px 24px}
  .sw-hero h1{font-size:24px}
  .sw-h2{font-size:20px}
  .sw-h2-hl{margin-left:0;padding-left:12px}
  .sw-p{font-size:16px}
  .sw-nav-link{padding:10px 8px;font-size:13px}
  .sw-sticky-links{display:none!important}
  .sw-sticky-cta{margin-left:0;flex:1;text-align:center}
  .sw-ach li{font-size:16px;padding:14px 0 14px 24px}
  .sw-faq summary{font-size:15px;padding:14px 16px}
  .sw-faq-a{padding:0 16px 14px 16px;font-size:14px}
  .sw-btn{padding:14px 32px;font-size:14px}
  .sw-cta-box{padding:35px 24px}
  .sw-cta-box h2{font-size:22px;padding:8px 16px}
}
@media(max-width:480px){
  .sw-hero{padding:24px 16px}
  .sw-sec,.sw-cta-box,.sw-tags{padding-left:16px;padding-right:16px}
  .sw-h2{font-size:18px}
  #sw-nav{padding:0 12px}
  .sw-nav-link{padding:8px 4px;font-size:12px}
}