/* =========================================================================
   SATYUG HEALTHCARE — SITE REDESIGN (Phase 4)
   Applies the approved teal / gold / brown design system across the live
   homepage. Targets the REAL class names already in
   application/views/front/index.php and its includes — no markup was
   assumed beyond what was confirmed on the live site.

   HOW TO APPLY
   1. Upload this file to: public_html/assets/css/satyug-redesign.css
      (create the assets/css folder if it does not already exist)
   2. Add ONE line to application/views/front/layout/head.php, right
      before </head>:
        <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/satyug-redesign.css">
   3. Hard-refresh the homepage. Because this is pure CSS layered on top
      of the existing markup, nothing about the carousels, forms, PHP
      loops or the flight/estimate widgets changes — only appearance.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --sh-paper:   #F3FAF9;
  --sh-surface: #FFFFFF;
  --sh-ink:     #16302E;
  --sh-ink-soft:#4B615F;
  --sh-teal:    #1F8B89;
  --sh-teal-br: #40BEBD;
  --sh-teal-wash:#E4F4F3;
  --sh-gold:    #E9A830;
  --sh-gold-dp: #A9701A;
  --sh-brown:   #6C3D33;
  --sh-brown-tx:#FBEFE9;
  --sh-line:    #D6E7E5;
  --sh-line-st: #40BEBD;
  --sh-shadow:  rgba(22,48,46,.10);
}

/* ---------- base type ---------- */
body{
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--sh-ink);
  background: var(--sh-paper);
}
h1,h2,h3,h4,.title,.title-header{
  font-family:'Sora','IBM Plex Sans',sans-serif !important;
  color: var(--sh-ink);
}
a{ color: var(--sh-teal); }
a:hover{ color: var(--sh-teal-br); }

/* ---------- top helpdesk bar + header ---------- */
.top-header,.topbar,.header-top{ background: var(--sh-brown) !important; }
.top-header a, .topbar a{ color: var(--sh-brown-tx) !important; }
header, .site-header, .main-header{ background: var(--sh-surface); box-shadow:0 2px 10px var(--sh-shadow); }
.header-menu a, header nav a{ font:600 .85rem 'IBM Plex Sans',sans-serif !important; color: var(--sh-ink) !important; }
.header-menu a:hover, header nav a:hover{ color: var(--sh-teal) !important; }

/* CTA buttons in header (Calculate Treatment Budget / Receive Doctor Opinion / Insurance) */
a[class*="calculate"],button[class*="calculate"],
a[class*="opinion-btn"],.header-btn,.btn-header{
  background: var(--sh-teal) !important; border-color: var(--sh-teal) !important;
  color:#fff !important; border-radius:8px !important; font-family:'Sora',sans-serif !important; font-weight:700 !important;
}

/* language selector */
.gtranslate_wrapper, [class*="gtranslate"]{
  border:1px solid var(--sh-line) !important; border-radius:999px !important; background: var(--sh-surface) !important;
}

/* ---------- flight widget (aviasales) card wrapper ---------- */
.flights-wrap, [class*="flight"] .card, [id*="flight"]{
  background: var(--sh-surface);
}

/* ---------- Who We Are & What We Do ---------- */
.shc-whoweare{ background: var(--sh-paper); padding-block: 56px; }
.shc-wwa-badge{
  display:inline-flex; font:700 .72rem 'Sora',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color: var(--sh-gold-dp); background: color-mix(in srgb, var(--sh-gold) 16%, #fff);
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.shc-wwa-title{ font-size: clamp(1.5rem,2.6vw,2rem); line-height:1.15; }
.shc-wwa-desc{ color: var(--sh-ink-soft); line-height:1.65; font-size:1rem; margin-top:14px; max-width:52ch; }
.shc-wwa-stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:22px; }
.shc-wwa-stat{ font-family:'Sora',sans-serif; }
.shc-wwa-features{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.shc-wwa-features li, .shc-wwa-features{ font-size:.9rem; color: var(--sh-ink); }
.shc-wwa-icon{ color: var(--sh-teal) !important; }
.shc-wwa-icon .fa,.shc-wwa-features .fa{ color: var(--sh-teal) !important; }
.shc-wwa-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px; border:none; border-radius:10px;
  padding:13px 22px; font:700 .9rem 'Sora',sans-serif !important; background: var(--sh-teal) !important; color:#fff !important;
}
.shc-wwa-btn:hover{ background: var(--sh-teal-br) !important; }
.shc-wwa-video-wrap{
  position:relative; display:block; border-radius:18px; overflow:hidden;
  background: linear-gradient(135deg, var(--sh-brown), #2c1a15); min-height:280px;
}
.shc-wwa-video-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
}

/* ---------- Why Choose Satyug Healthcare ---------- */
.shc-wcu{ background: var(--sh-teal-wash); padding-block:56px; }
.shc-wcu-badge{
  display:inline-flex; font:700 .72rem 'Sora',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color: var(--sh-teal); background:#fff; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.shc-wcu-title{ font-size: clamp(1.6rem,2.8vw,2.1rem); }
.shc-wcu-title, .shc-wcu-title *{ color: var(--sh-ink) !important; }
.shc-wcu-subtitle{ color: var(--sh-ink-soft); max-width:60ch; margin:12px auto 0; }
.shc-wcu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:36px; }
.shc-wcu-card{
  background: var(--sh-surface); border:1px solid var(--sh-line); border-radius:16px;
  padding:24px; box-shadow:0 8px 20px var(--sh-shadow); position:relative;
}
.shc-wcu-card-num{ color: var(--sh-teal-wash) !important; -webkit-text-stroke:1px var(--sh-line-st); }
.shc-wcu-img-wrap{
  width:52px; height:52px; border-radius:12px; background: var(--sh-teal-wash);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.shc-wcu-img-wrap img,.shc-wcu-img-wrap svg{ width:26px; height:26px; }

/* ---------- Overseas Patient Travel Process (7 steps) ---------- */
.shc-process{ background: var(--sh-surface); padding-block:56px; }
.shc-process-badge{
  display:inline-flex; font:700 .72rem 'Sora',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color: var(--sh-gold-dp); background: color-mix(in srgb, var(--sh-gold) 16%, #fff);
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.shc-process-title{ font-size: clamp(1.6rem,2.8vw,2.1rem); text-align:center; }
.shc-process-sub{ color: var(--sh-ink-soft); text-align:center; max-width:60ch; margin:10px auto 0; }
.shc-steps-wrap{ margin-top:40px; }
.shc-step{ text-align:center; }
.shc-step-circle{
  width:64px; height:64px; border-radius:50%; background: var(--sh-surface);
  border:2px solid var(--sh-line-st); display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; color: var(--sh-teal) !important;
}
.shc-step-circle .fa{ color: var(--sh-teal) !important; font-size:1.3rem; }
.shc-step-num{ font:700 .68rem 'Sora',sans-serif; color: var(--sh-gold-dp); letter-spacing:.06em; }
.shc-step-label{ font:700 .92rem 'Sora',sans-serif; margin-top:4px; }
.shc-step-desc{ font-size:.82rem; color: var(--sh-ink-soft); margin-top:4px; }
.shc-process-cta{ text-align:center; margin-top:34px; }
.shc-process-cta a{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:10px;
  padding:13px 22px; font:700 .9rem 'Sora',sans-serif; background: var(--sh-teal); color:#fff !important; text-decoration:none;
}

/* ---------- doctors / hospitals carousels (existing includes) ---------- */
.wrap-team.team-slide, .wrap-team.waii-slide{ padding-block:20px; }
.featured-thumbnail{ border-radius:14px !important; overflow:hidden; border:1px solid var(--sh-line); box-shadow:0 8px 20px var(--sh-shadow); }
.featured-title, .featured-title a{ font:700 .98rem 'Sora',sans-serif !important; color: var(--sh-ink) !important; }

/* Doctor photo — the real markup (application/views/front/doctor/doctor-list.php)
   already outputs <img src="...$value->image..." class="img-fluid doctor-img">.
   It just needs an explicit, guaranteed-visible box so a card never collapses
   to text-only if the theme's own CSS sized it at 0 or hid it. */
.featured-icon{
  display:block !important; width:100% !important; aspect-ratio:1/1 !important;
  border-radius:14px 14px 0 0 !important; overflow:hidden !important;
  background: var(--sh-teal-wash) !important;
}
.doctor-img, .featured-icon img{
  display:block !important; width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:top center !important;
}
/* If a doctor row genuinely has no photo uploaded, the browser's broken-image
   box is replaced by the soft teal wash above instead of an ugly icon. */
.doctor-img[src=""], .doctor-img:not([src]){ visibility:hidden; }
.data_costs{ color: var(--sh-teal) !important; font-weight:700 !important; font-variant-numeric:tabular-nums; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{ background: var(--sh-teal) !important; }
.owl-nav [class*="owl-"]{ background: var(--sh-surface) !important; color: var(--sh-teal) !important; border:1px solid var(--sh-line) !important; }

/* View Details / Get Doctor Opinion buttons */
a[href*="get-opinion"],.get-opinion-btn,
.wrap-team .btn, .wrap-team a.btn, .wrap-team a[class*="view"]{
  border-radius:8px !important; font:700 .8rem 'Sora',sans-serif !important;
}
.wrap-team a[class*="opinion"]{ background: var(--sh-gold-dp) !important; border-color: var(--sh-gold-dp) !important; color:#fff !important; }
.wrap-team a[class*="opinion"]:hover{ background: var(--sh-gold) !important; }
.wrap-team a[class*="detail"]{ background: var(--sh-brown) !important; border-color: var(--sh-brown) !important; color: var(--sh-brown-tx) !important; }

/* ---------- packages ---------- */
.new_h{ font:700 1rem 'Sora',sans-serif !important; color: var(--sh-ink) !important; }
.data_costs{ display:inline-block; margin-bottom:6px; }

/* ---------- testimonials ---------- */
.shc-video-testimonials{ padding-block:20px; }
.testimonial-slide, .default-view-testimonial{ background: var(--sh-teal-wash); }
.video-container{ border-radius:16px !important; overflow:hidden; box-shadow:0 8px 20px var(--sh-shadow); }

/* ---------- gallery ---------- */
.ptpb-50.galley_sec{ background: var(--sh-paper) !important; }
.gallery_item{
  border-radius:14px !important; overflow:hidden; border:1px solid var(--sh-line);
  box-shadow:0 6px 16px var(--sh-shadow);
}

/* ---------- insurance ---------- */
.inter_insurance{ background: var(--sh-brown) !important; }
.inter_insurance .title, .inter_insurance .title-header{ color: var(--sh-brown-tx) !important; }
.ins_img{ background:#fff; border-radius:10px; padding:10px; }

/* ---------- specialties sitemap block ---------- */
[class*="specialt"] a, [class*="find-doctor"] a{ color: var(--sh-ink-soft) !important; }
[class*="specialt"] a:hover{ color: var(--sh-teal) !important; }

/* ---------- footer ---------- */
footer, .site-footer, .footer{ background: var(--sh-brown) !important; color: var(--sh-brown-tx) !important; }
footer a, .site-footer a, .footer a{ color: var(--sh-brown-tx) !important; opacity:.85; }
footer a:hover, .site-footer a:hover, .footer a:hover{ opacity:1; text-decoration:underline; }
footer h5,footer .widget-title, .site-footer h5,.site-footer .widget-title{
  font:700 .76rem 'Sora',sans-serif !important; letter-spacing:.05em; text-transform:uppercase; color: var(--sh-gold) !important;
}

/* ---------- new: 3-category blog section (see index-blog-section.php) ---------- */
.shc-blog{ background: var(--sh-surface); padding-block:56px; }
.shc-blog-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.shc-blog-tab{
  font:600 .85rem 'IBM Plex Sans',sans-serif; background: var(--sh-teal-wash); color: var(--sh-teal);
  border:none; padding:10px 18px; border-radius:999px; cursor:pointer;
}
.shc-blog-tab.is-active{ background: var(--sh-teal); color:#fff; }
.shc-blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.shc-blog-grid[hidden]{ display:none; }
.shc-blog-card{
  background: var(--sh-surface); border:1px solid var(--sh-line); border-radius:14px; overflow:hidden;
  box-shadow:0 8px 20px var(--sh-shadow); display:flex; flex-direction:column; text-decoration:none;
}
.shc-blog-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.shc-blog-card-body{ padding:16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.shc-blog-tag{ font:700 .66rem 'Sora',sans-serif; text-transform:uppercase; letter-spacing:.05em; color: var(--sh-teal); }
.shc-blog-title{ font:700 .92rem 'Sora',sans-serif; color: var(--sh-ink); line-height:1.4; }
.shc-blog-read{ font:600 .78rem 'IBM Plex Sans',sans-serif; color: var(--sh-gold-dp); margin-top:auto; }

@media (max-width:680px){
  .shc-wwa-stats{ gap:18px; } } /* HERO BANNER + TOP BAR + HEADER restyle to teal/gold system. Real classes confirmed on live DOM: .header-topbar, .shc-est-topbtn, .ins-card-btn-v3, .for_top_header_btn.shc-doc-sq, header#masthead.menu, .d3-hero, .d3-hero-inner, .d3-hero-title, #d3UnifiedBox, #d3_unified_input, #d3_unified_btn, .d3-stats-row, .d3-stat */ .header-topbar{ background: var(--sh-brown) !important; } .header-topbar .helpdesk-label, .header-topbar a, .header-topbar span{ font-family:'IBM Plex Sans',sans-serif !important; } .shc-est-topbtn, .ins-card-btn-v3, .for_top_header_btn.shc-doc-sq{ background: var(--sh-gold-dp) !important; border-color: var(--sh-gold-dp) !important; color:#fff !important; font-family:'Sora',sans-serif !important; font-weight:700 !important; border-radius:999px !important; } .shc-est-topbtn:hover, .ins-card-btn-v3:hover, .for_top_header_btn.shc-doc-sq:hover{ background: var(--sh-gold) !important; } header.ttm-header-style-infostack{ font-family:'IBM Plex Sans',sans-serif; } header.ttm-header-style-infostack .menu a{ font-family:'IBM Plex Sans',sans-serif !important; font-weight:600 !important; color: var(--sh-ink) !important; } header.ttm-header-style-infostack .menu a:hover{ color: var(--sh-teal) !important; } .d3-hero{ background: linear-gradient(90deg, var(--sh-teal-wash) 0%, var(--sh-teal-wash) 46%, transparent 72%), radial-gradient(circle at 78% 28%, rgba(31,139,137,.22), transparent 55%), radial-gradient(circle at 85% 78%, rgba(233,168,48,.20), transparent 50%), var(--sh-teal-wash) !important; background-color: var(--sh-teal-wash) !important; } .d3-hero-title{ font-family:'Sora',sans-serif !important; color: var(--sh-ink) !important; } .d3-hero-title .d3-accent{ color: var(--sh-teal) !important; } .d3-hero-inner p, .d3-hero-inner{ font-family:'IBM Plex Sans',sans-serif; } #d3UnifiedBox, .d3-hero-search{ background: var(--sh-surface) !important; border:1px solid var(--sh-line) !important; border-radius:16px !important; box-shadow:0 12px 28px var(--sh-shadow) !important; } .d3-hero-search input, #d3_unified_input{ font-family:'IBM Plex Sans',sans-serif !important; color: var(--sh-ink) !important; } .d3-hero-search button, #d3_unified_btn{ background: var(--sh-teal) !important; color:#fff !important; font-family:'Sora',sans-serif !important; font-weight:700 !important; border-radius:999px !important; } .d3-hero-search button:hover, #d3_unified_btn:hover{ background: var(--sh-teal-br) !important; } .d3-pill{ background: var(--sh-surface) !important; border:1px solid var(--sh-line) !important; color: var(--sh-teal) !important; font-family:'IBM Plex Sans',sans-serif !important; } .d3-popular-label{ color: var(--sh-ink) !important; font-family:'Sora',sans-serif !important; } .d3-stats-row .d3-stat, .d3-stats-row{ font-family:'IBM Plex Sans',sans-serif; } .d3-stats-row i, .d3-stats-row svg{ color: var(--sh-gold-dp) !important; } .d3-stats-row span{ color: var(--sh-ink) !important; font-weight:600 !important; } /* RECEIVE DOCTOR OPINION modal (#Apointment) restyle only. Already exists and fully functional: name, age, gender, phone, email, country, doctor, report upload, history */ #Apointment .modal-header{ background: var(--sh-teal) !important; } #Apointment .modal-title{ font-family:'Sora',sans-serif !important; } #Apointment .modal-header .close, #Apointment .modal-header button{ color:#fff !important; } #Apointment .submit{ background: var(--sh-teal) !important; border-color: var(--sh-teal) !important; color:#fff !important; font-family:'Sora',sans-serif !important; } #Apointment .submit:hover{ background: var(--sh-teal-br) !important; } .d3-trust-row{ flex-basis:100%; width:100%; margin-top:18px; text-align:center; } .d3-trust-label{ font:600 13px 'IBM Plex Sans',sans-serif; color:var(--sh-ink-soft); margin-bottom:10px; } .d3-trust-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; } .d3-trust-chip{ font:600 13px 'IBM Plex Sans',sans-serif; background:var(--sh-surface); border:1px solid var(--sh-line); color:var(--sh-ink); padding:7px 14px; border-radius:999px; } .d3-opinion-link{ display:inline-flex; align-items:center; gap:6px; font:600 14px 'IBM Plex Sans',sans-serif; color:var(--sh-teal); text-decoration:none; } .d3-opinion-link strong{ color:var(--sh-teal-br); } .d3-opinion-link:hover{ text-decoration:underline; } #treatment_refid, #hospital_refid, #exp_year, #gender{ border:1px solid var(--sh-line) !important; border-radius:10px !important; font-family:'IBM Plex Sans',sans-serif !important; color:var(--sh-ink) !important; } .ttm-box-seperator{ border-radius:14px !important; border:1px solid var(--sh-line) !important; box-shadow:0 6px 18px var(--sh-shadow) !important; } .opinion_button{ background:var(--sh-teal) !important; border-color:var(--sh-teal) !important; color:#fff !important; font-family:'Sora',sans-serif !important; font-weight:700 !important; border-radius:999px !important; } .opinion_button:hover{ background:var(--sh-teal-br) !important; }