/* ===== Fee Structure Page Styles ===== */
/* Uses site's existing fonts (Playfair Display + Inter) from main.css */

/* Container */
.fee-container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* Hero */
.fee-hero{position:relative;height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fee-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fee-hero-overlay{position:absolute;inset:0;background:rgba(61,15,27,0.7)}
.fee-hero-content{position:relative;z-index:2;text-align:center;padding:0 1rem;animation:feeFadeInUp .6s ease-out}
.fee-hero-content h1{font-size:3rem;font-weight:700;color:#f8f5ef;margin-bottom:1rem;font-family:'Playfair Display',serif}
.fee-hero-line{width:4rem;height:4px;background:linear-gradient(135deg,#c8962e,#d4ad5a);margin:0 auto 1rem;border-radius:4px}
.fee-hero-content p{color:#d4ad5a;font-size:1.15rem;font-weight:500}
@media(min-width:768px){.fee-hero{height:500px}.fee-hero-content h1{font-size:3.75rem}}

/* Reg Banner */
.fee-reg-banner{background:#fff;border-radius:16px;box-shadow:0 4px 24px -4px rgba(90,26,42,0.08);padding:1.5rem;display:flex;align-items:center;gap:1rem;border:1px solid rgba(200,150,46,.2);margin-top:-2rem;position:relative;z-index:20}
.fee-reg-icon{width:56px;height:56px;border-radius:50%;background:rgba(200,150,46,.1);display:flex;align-items:center;justify-content:center;font-size:1.75rem;flex-shrink:0}
.fee-reg-banner h3{font-size:1.1rem;font-weight:600;font-family:'Playfair Display',serif}
.fee-gold{color:#c8962e;font-weight:700}
.fee-reg-banner p{color:#8a7a7a;font-size:.875rem;margin-top:.25rem}

/* Section helpers */
.fee-section-header{text-align:center;margin-bottom:2.5rem}
.fee-section-header h2{font-size:2rem;font-weight:700;margin-bottom:.5rem;font-family:'Playfair Display',serif}
.fee-section-header p{color:#8a7a7a;max-width:36rem;margin:0 auto}
.fee-section-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2.5rem;font-family:'Playfair Display',serif}
.fee-badge-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;border-radius:999px;background:rgba(200,150,46,.1);border:1px solid rgba(200,150,46,.2);font-size:.85rem;font-weight:500;color:#9a7020;margin-bottom:1rem}
.fee-text-gold{background:linear-gradient(135deg,#c8962e,#d4ad5a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@media(min-width:768px){.fee-section-header h2,.fee-section-title{font-size:2.5rem}}

/* Programs */
.fee-programs-section{padding:5rem 0}

/* Tabs - Desktop: original inline style with emojis + badges */
.fee-tabs{display:flex;justify-content:center;margin-bottom:2.5rem}
.fee-tabs-inner{display:inline-flex;gap:.5rem;padding:.375rem;background:rgba(0,0,0,.03);border-radius:16px;border:1px solid #e8ddd0}
.fee-tab-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:12px;border:none;background:transparent;font-size:.875rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .3s;color:#8a7a7a;font-family:'Inter',sans-serif}
.fee-tab-btn:hover{color:#2d1a1a;background:rgba(255,255,255,.5)}
.fee-tab-btn.active{background:#fff;box-shadow:0 4px 24px -4px rgba(90,26,42,0.08);color:#2d1a1a;transform:scale(1.02)}
.fee-tab-emoji{font-size:1.15rem}

/* Badge tags on tabs */
.fee-tab-badge{font-size:.6rem;padding:2px 7px;border-radius:12px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.5px;display:inline-block;vertical-align:middle}
.fee-tab-badge.beginner{background-color:#4CAF50}
.fee-tab-badge.popular{background-color:#2196F3}
.fee-tab-badge.pro{background-color:#9C27B0}
.fee-tab-badge.advanced{background-color:#FF9800}
.fee-tab-badge.elite{background-color:#D4AF37}

/* Mobile tabs: wrapping pill style matching courses.html */
@media(max-width:768px){
  .fee-tabs-inner{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;padding:0 10px;background:none;border:none;border-radius:0}
  .fee-tab-btn{padding:6px 14px;border-radius:50px;border:1px solid #d0d0d0;background:#fff;font-size:.82rem;font-weight:700;color:#6c757d;white-space:nowrap}
  .fee-tab-btn:hover{border-color:#8b0000;color:#8b0000;background:#fff}
  .fee-tab-btn.active{background:#8b0000;border-color:#8b0000;color:#fff;box-shadow:0 4px 10px rgba(139,0,0,0.4);transform:none}
  .fee-tab-btn.active .fee-tab-badge{color:#fff;border:1px solid rgba(255,255,255,.4)}
  .fee-tab-emoji{display:none}
}

/* Program header icon - professional styled circle */
.fee-prog-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;color:#5a1a2a;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.fee-prog-icon.fee-level-0{background:rgba(59,130,246,.12);color:#2563eb}
.fee-prog-icon.fee-level-1{background:rgba(245,158,11,.12);color:#d97706}
.fee-prog-icon.fee-level-2{background:rgba(16,185,129,.12);color:#059669}
.fee-prog-icon.fee-level-3{background:rgba(139,92,246,.12);color:#7c3aed}
.fee-prog-icon.fee-level-4{background:rgba(244,63,94,.12);color:#e11d48}

/* Meta icons styling */
.fee-prog-meta-icon i{font-size:1.15rem;color:#5a1a2a}
/* Program header */
.fee-prog-header{border-radius:24px;padding:1rem 1.5rem;margin-bottom:2rem;border:1px solid rgba(0,0,0,.08)}
.fee-prog-header-inner{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.fee-prog-header-inner{flex-direction:row;align-items:center;justify-content:space-between}}
.fee-prog-meta{display:flex;gap:2rem;align-items:center}
.fee-prog-meta-item{text-align:center}
.fee-prog-meta-icon{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;font-size:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.fee-prog-meta-label{font-size:.75rem;color:#8a7a7a}
.fee-prog-meta-value{font-size:.85rem;font-weight:600}
.fee-prog-meta-extra{font-size:.65rem;color:#16a34a;font-weight:500;margin-top:2px}

/* Level gradients */
.fee-level-0{background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(59,130,246,.05));border-color:rgba(59,130,246,.2)}
.fee-level-1{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.05));border-color:rgba(245,158,11,.2)}
.fee-level-2{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.05));border-color:rgba(16,185,129,.2)}
.fee-level-3{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(139,92,246,.05));border-color:rgba(139,92,246,.2)}
.fee-level-4{background:linear-gradient(135deg,rgba(244,63,94,.12),rgba(244,63,94,.05));border-color:rgba(244,63,94,.2)}

/* Level accent colors for numbers */
.fee-num-0{color:#2563eb}.fee-num-1{color:#d97706}.fee-num-2{color:#059669}.fee-num-3{color:#7c3aed}.fee-num-4{color:#e11d48}

/* Course grid */
.fee-course-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:1100px;margin:0 auto}
@media(min-width:768px){.fee-course-grid{grid-template-columns:1fr 1fr}}
.fee-course-card{background:#fff;border-radius:16px;border:1px solid #e8ddd0;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:all .3s}
.fee-course-card:hover{box-shadow:0 12px 40px -8px rgba(90,26,42,0.15);border-color:rgba(200,150,46,.3)}
.fee-course-num{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0}
.fee-course-name{font-size:.95rem;font-weight:600;margin-bottom:.5rem;line-height:1.4}
.fee-course-pricing{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.fee-price-old{font-size:.85rem;color:#8a7a7a;text-decoration:line-through}
.fee-price-new{font-size:1.25rem;font-weight:700;color:#c8962e}
.fee-discount-badge{padding:.2rem .6rem;font-size:.7rem;font-weight:700;background:#fce7f3;color:#be185d;border-radius:999px;text-transform:uppercase}
.fee-enroll-btn{flex-shrink:0;padding:.625rem 1.25rem;font-size:.85rem;font-weight:600;border-radius:12px;background:linear-gradient(135deg,#c8962e,#d4ad5a);color:#3d0f1b;border:none;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.375rem}
.fee-enroll-btn:hover{box-shadow:0 4px 16px rgba(200,150,46,.3);transform:scale(1.05)}

/* Mobile course card adjustments */
@media(max-width:768px){
  .fee-course-card{flex-direction:column;align-items:flex-start;padding:1.25rem}
  .fee-course-card .fee-enroll-btn{align-self:flex-end}
  .fee-prog-meta{gap:1rem;flex-wrap:wrap;justify-content:center}
  .fee-prog-header{padding:1.25rem}
  .fee-stair-item{flex-wrap:wrap}
  .fee-programs-section{padding:3rem 0}
}

/* Grand Master 6 Stairs Free */
.fee-stairs-free{margin-top:2rem;border-radius:16px;border:1px solid rgba(200,150,46,.3);background:linear-gradient(135deg,rgba(200,150,46,.05),rgba(200,150,46,.1));padding:1.5rem}
.fee-stairs-free-title{text-align:center;margin-bottom:1rem}
.fee-stairs-free-title span{display:inline-block;padding:.5rem 1rem;font-size:.875rem;font-weight:700;color:#c8962e;background:rgba(200,150,46,.1);border-radius:999px;border:1px solid rgba(200,150,46,.2)}
.fee-stairs-free-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(min-width:768px){.fee-stairs-free-grid{grid-template-columns:repeat(3,1fr)}}
.fee-stairs-free-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid #e8ddd0}
.fee-stairs-free-num{width:24px;height:24px;border-radius:50%;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.fee-stairs-free-name{font-size:.875rem;font-weight:500}
.fee-stairs-free-tag{margin-left:auto;font-size:.75rem;color:#16a34a;font-weight:600}

/* 6 Stairs */
.fee-stairs-section{padding:5rem 0;background:rgba(0,0,0,.02)}
.fee-stairs-card{max-width:640px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid rgba(200,150,46,.3);box-shadow:0 4px 20px rgba(200,150,46,.08);background:#fff}
.fee-stairs-header{background:linear-gradient(135deg,#3d0f1b,#5a1a2a,#4a1525);padding:2rem;text-align:center;position:relative}
.fee-stairs-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,150,46,.15),transparent 60%)}
.fee-stairs-header>*{position:relative}
.fee-stairs-header h3{font-size:1.75rem;font-weight:700;color:#f8f5ef;margin:.5rem 0 .25rem;font-family:'Playfair Display',serif}
.fee-stairs-header p{color:#d4ad5a;font-size:.875rem}
.fee-stairs-list{padding:1.5rem}
.fee-stair-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:16px;background:rgba(0,0,0,.02);border:1px solid #e8ddd0;margin-bottom:.75rem;transition:all .3s}
.fee-stair-item:hover{border-color:rgba(200,150,46,.3);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.fee-stair-num{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#c8962e,#d4ad5a);display:flex;align-items:center;justify-content:center;color:#3d0f1b;font-weight:700;font-size:.875rem;flex-shrink:0;box-shadow:0 2px 8px rgba(200,150,46,.2)}

/* Payment */
.fee-payment-section{padding:4rem 0;background:rgba(0,0,0,.02)}
.fee-payment-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.fee-payment-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.fee-payment-grid{grid-template-columns:repeat(4,1fr)}}
.fee-pay-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 24px -4px rgba(90,26,42,0.08);border:1px solid #e8ddd0;text-align:center;transition:all .3s}
.fee-pay-card:hover{box-shadow:0 12px 40px -8px rgba(90,26,42,0.15)}
.fee-pay-icon{width:48px;height:48px;border-radius:50%;background:rgba(200,150,46,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.5rem}
.fee-pay-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;font-family:'Playfair Display',serif}
.fee-pay-card p{font-size:.85rem;color:#8a7a7a}

/* Included */
.fee-included-section{padding:4rem 0}
.fee-included-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:800px;margin:0 auto}
@media(min-width:768px){.fee-included-grid{grid-template-columns:1fr 1fr}}
.fee-included-card{background:#fff;border-radius:16px;padding:1.5rem;border:1px solid #e8ddd0;box-shadow:0 4px 24px -4px rgba(90,26,42,0.08)}
.fee-included-card h3{font-size:1.1rem;font-weight:600;margin-bottom:1rem;font-family:'Playfair Display',serif}
.fee-included-card ul{list-style:none;padding:0}
.fee-included-card li{font-size:.875rem;color:#8a7a7a;padding:.5rem 0}

/* CTA */
.fee-cta-section{padding:4rem 0;background:#5a1a2a;color:#f8f5ef}
.fee-cta-section h2{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#fff;font-family:'Playfair Display',serif}
.fee-cta-section p{color:#d4ad5a;font-size:1.1rem;margin-bottom:2rem;max-width:32rem;margin-left:auto;margin-right:auto}
.fee-cta-buttons{display:flex;flex-direction:column;align-items:center;gap:1rem}
@media(min-width:640px){.fee-cta-buttons{flex-direction:row;justify-content:center}}
.fee-btn-outline-light{padding:.75rem 2rem;border:1px solid rgba(200,150,46,.4);color:#d4ad5a;border-radius:12px;font-weight:600;transition:all .2s;text-decoration:none}
.fee-btn-outline-light:hover{background:rgba(200,150,46,.1)}
.fee-cta-section .fee-enroll-btn{padding:.75rem 2rem;font-size:.95rem}

/* Animation */
@keyframes feeFadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fee-animate-in{animation:feeFadeInUp .5s ease-out}
.fee-reg-banner {
  flex-wrap: wrap;
  padding: 12px 20px;
}
.fee-reg-icon {
  width: 45px;
  height: 45px;
}
.fee-reg-text {
  flex: 1;
  min-width: 0;
  padding: 0 15px;
}
.fee-reg-text h3 {
  margin: 0;
  font-size: 1.05rem;
}
.fee-reg-text p {
  margin: 3px 0 0 0;
  font-size: 0.85rem;
  line-height: 1.3;
}
.fee-reg-btn {
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 640px) {
  .fee-reg-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .fee-reg-text {
    padding: 0;
  }
  .fee-reg-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .fee-stairs-free-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .fee-hero-content h1 {
    font-size: 2.2rem;
  }
}