/* ==========================================================
   MASAIL WORLD - PREMIUM GREEN & WHITE DESIGN SYSTEM
   Brand: MasailWorld (مسائل ورلڈ)
   Color Scheme: Ultra-Premium Clean White with Islamic Emerald & Jade Green Shades
   ========================================================== */

:root {
  /* Green Shade Palette */
  --mw-green-darkest: #072b20;
  --mw-green-deep: #0b4635;
  --mw-green-primary: #0f684e;
  --mw-green-vibrant: #138865;
  --mw-green-light: #20aa80;
  --mw-green-soft: #edf6f1;
  --mw-green-mint: #f2fbf6;
  --mw-green-border: #d4e6dd;
  --mw-green-hairline: #e3ede7;
  
  /* Gold Accents (from Masail World logo dome & book) */
  --mw-gold-primary: #c59b27;
  --mw-gold-light: #dfb743;
  --mw-gold-soft: #fcf8ec;
  --mw-gold-border: #ebd99f;

  /* Premium White Surfaces */
  --mw-bg-page: #ffffff;
  --mw-bg-surface: #ffffff;
  --mw-bg-alt: #f8fbf9;
  --mw-card-shadow: 0 4px 20px -2px rgba(11, 70, 53, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  --mw-card-hover-shadow: 0 12px 30px -4px rgba(11, 70, 53, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
  
  /* Text Colors */
  --mw-text-main: #142820;
  --mw-text-body: #24362e;
  --mw-text-muted: #596e64;
  --mw-text-light: #83978e;

  /* Overwrite legacy CSS variables */
  --theme-color-1: #0f684e !important;
  --theme-color-2: #0b4635 !important;
  --theme-color-1-light: #edf6f1 !important;
  --theme-color-1-light-2: #138865 !important;
  --theme-color-1-dark: #072b20 !important;
  --theme-color-light-white: #f8fbf9 !important;
  --theme-color-white: #ffffff !important;
}

/* Base Body Styling */
body {
  background-color: var(--mw-bg-page) !important;
  color: var(--mw-text-body) !important;
  font-family: 'Mehr Nastaliq Web 3', 'Jameel Noori Nastaleeq', serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------
   TOP BAR & CLONE DEMO BAR
   ---------------------------------------------------- */
.clone-topbar {
  background: linear-gradient(90deg, #072b20 0%, #0b4635 100%) !important;
  border-bottom: 2px solid var(--mw-gold-primary) !important;
  color: #ffffff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.clone-topbar-badge {
  background: var(--mw-gold-primary) !important;
  color: #072b20 !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px;
}
.clone-nav-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f0fdf4 !important;
}
.clone-nav-btn:hover {
  background: var(--mw-green-vibrant) !important;
  border-color: var(--mw-green-vibrant) !important;
  color: #ffffff !important;
}
.clone-nav-btn.active {
  background: var(--mw-gold-primary) !important;
  border-color: var(--mw-gold-light) !important;
  color: #072b20 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.4) !important;
}

/* ----------------------------------------------------
   HEADER & NAVBAR
   ---------------------------------------------------- */
.headerClass {
  background: #ffffff !important;
  border-bottom: 1px solid var(--mw-green-border) !important;
  box-shadow: 0 2px 10px rgba(11, 70, 53, 0.04) !important;
}
.topHeadBar {
  background: linear-gradient(90deg, #072b20 0%, #0b4635 50%, #072b20 100%) !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.3) !important;
  padding: 5px 0 !important;
}
.navbar.navbar-dark {
  background: #ffffff !important;
  border-bottom: 1px solid var(--mw-green-hairline) !important;
  box-shadow: 0 4px 16px rgba(11, 70, 53, 0.03) !important;
}

/* Navbar Brand & Logo Display */
.masail-brand-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.masail-logo-badge {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(11, 70, 53, 0.15), 0 0 0 2px var(--mw-gold-border) !important;
  background: #ffffff !important;
  transition: transform 0.3s ease !important;
}
.masail-brand-container:hover .masail-logo-badge {
  transform: scale(1.08) rotate(3deg) !important;
}
.masail-brand-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  line-height: 1.1 !important;
}
.masail-brand-ur {
  font-family: 'Mehr Nastaliq Web 3', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mw-green-deep) !important;
  letter-spacing: 0px !important;
}
.masail-brand-en {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-primary) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* Navbar Navigation Links */
.navbar a.nav-link {
  color: var(--mw-green-deep) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}
.navbar a.nav-link:hover {
  color: #ffffff !important;
  background: var(--mw-green-primary) !important;
}
.navbar .nav-item.active .nav-link,
.navbar .nav-link.active {
  color: #ffffff !important;
  background: var(--mw-green-deep) !important;
  box-shadow: 0 2px 6px rgba(11, 70, 53, 0.2) !important;
}

/* Search Bar in Navbar */
.searchbar1280,
.navbarFormSubv {
  background: #ffffff !important;
  border: 1.5px solid var(--mw-green-border) !important;
  border-radius: 50px !important;
  padding: 4px 16px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}
.searchbar1280:focus-within,
.navbarFormSubv:focus-within {
  border-color: var(--mw-green-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 104, 78, 0.15) !important;
}
.searchbar1280 .formSearchTbn {
  color: var(--mw-green-primary) !important;
}
.searchbar1280 input {
  color: var(--mw-text-main) !important;
  background: transparent !important;
  border: none !important;
}
.searchbar1280 input::placeholder {
  color: var(--mw-text-muted) !important;
}

/* Language selector */
.lang-selectors button {
  background: #ffffff !important;
  color: var(--mw-green-deep) !important;
  border: 1px solid var(--mw-green-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
.lang-selectors button:hover {
  background: var(--mw-green-soft) !important;
  color: var(--mw-green-deep) !important;
}

/* ----------------------------------------------------
   SECTION & CARD STYLING (PREMIUM WHITE & GREEN)
   ---------------------------------------------------- */
.first-section {
  background-color: var(--mw-bg-page) !important;
}

/* Main Container Card in Home */
.f_SecTabsIdv {
  background: #ffffff !important;
  border: 1px solid var(--mw-green-hairline) !important;
  border-radius: 16px !important;
  box-shadow: var(--mw-card-shadow) !important;
  padding: 24px !important;
}

/* Headings */
h1.fatwaHomeMainHeading,
.page_heading {
  color: var(--mw-green-darkest) !important;
  font-family: 'Mehr Nastaliq Web 3', serif !important;
  position: relative;
  padding-bottom: 8px;
}
h1.fatwaHomeMainHeading::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--mw-gold-primary), transparent);
  border-radius: 2px;
}
.totalLine {
  color: var(--mw-text-muted) !important;
}
.totalLine span:last-child {
  color: var(--mw-green-primary) !important;
  font-weight: 700;
}

/* Filter Navigation Pills / Tabs */
.nav-pills .nav-item button.nav-link {
  background: var(--mw-green-soft) !important;
  border: 1px solid var(--mw-green-border) !important;
  border-radius: 10px !important;
  color: var(--mw-green-deep) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.nav-pills .nav-item button.nav-link:hover {
  background: var(--mw-green-primary) !important;
  border-color: var(--mw-green-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 104, 78, 0.2) !important;
}
.nav-pills .nav-item button.nav-link.active,
.nav-pills .show > .nav-link {
  background: linear-gradient(135deg, var(--mw-green-deep) 0%, var(--mw-green-primary) 100%) !important;
  border-color: var(--mw-green-deep) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(11, 70, 53, 0.3) !important;
}

/* Fatawa Question Cards (QArea / Accordions / Items) */
.qAreaDiv {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--mw-green-hairline) !important;
  border-right: 4px solid var(--mw-green-primary) !important;
  border-radius: 12px !important;
  box-shadow: var(--mw-card-shadow) !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.qAreaDiv:hover {
  background: #ffffff !important;
  border-color: var(--mw-green-border) !important;
  border-right: 4px solid var(--mw-gold-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mw-card-hover-shadow) !important;
}
.qAreaDiv a.listAnchor,
.qAreaDiv a {
  color: var(--mw-text-main) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 0.2s ease, padding-right 0.2s ease !important;
}
.qAreaDiv a:hover {
  color: var(--mw-green-primary) !important;
  padding-right: 6px !important;
}

/* Sidebar & Category Cards */
.sidebar_top_acord,
.right-section,
.left-section {
  background: #ffffff !important;
}
.cat_acord,
.accordion-item {
  background: #ffffff !important;
  border: 1px solid var(--mw-green-hairline) !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--mw-card-shadow) !important;
  overflow: hidden !important;
}
.accordion-button {
  background: var(--mw-green-soft) !important;
  color: var(--mw-green-deep) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 12px 18px !important;
}
.accordion-button:not(.collapsed) {
  background: var(--mw-green-deep) !important;
  color: #ffffff !important;
}
.cat_acord_data a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  background: var(--mw-green-soft) !important;
  color: var(--mw-green-deep) !important;
  border: 1px solid var(--mw-green-hairline) !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.cat_acord_data a:hover {
  background: var(--mw-green-primary) !important;
  color: #ffffff !important;
  border-color: var(--mw-green-primary) !important;
  transform: translateX(-3px) !important;
}
.cat_acord_data a span {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--mw-green-deep) !important;
  padding: 1px 8px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}
.cat_acord_data a:hover span {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------
   FATWA DETAIL PAGE (khala-ko-zakat-dena.html)
   ---------------------------------------------------- */
.q_page_area .qAreaDiv {
  background: linear-gradient(135deg, var(--mw-green-deep) 0%, var(--mw-green-primary) 100%) !important;
  border-right: none !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(11, 70, 53, 0.15) !important;
}
.q_page_area .qAreaDiv-2 p {
  color: #ffffff !important;
  font-size: 21px !important;
  line-height: 1.8 !important;
}

/* The Answer Box */
.ans_div {
  filter: none !important;
  background: #ffffff !important;
  border: 1.5px solid var(--mw-green-border) !important;
  border-top: 5px solid var(--mw-green-primary) !important;
  border-radius: 14px !important;
  box-shadow: var(--mw-card-shadow) !important;
  padding: 24px 28px !important;
  color: var(--mw-text-main) !important;
  line-height: 2 !important;
}
.ans_div p {
  color: var(--mw-text-main) !important;
  font-size: 21px !important;
  line-height: 2 !important;
}

/* Highlighted Quranic / Arabic Verses */
.ans_div span[style*="Al Qalam Quran Majeed"],
.ans_div span[style*="Al_Mushaf"],
.ans_div span[style*="Naskh Unicode"] {
  background: var(--mw-green-mint) !important;
  color: var(--mw-green-darkest) !important;
  padding: 3px 12px !important;
  border-radius: 6px !important;
  border-right: 3px solid var(--mw-gold-primary) !important;
  display: inline-block !important;
  margin: 4px 0 !important;
}

/* Tags in Fatwa Detail */
.tagArea a {
  background: var(--mw-green-soft) !important;
  color: var(--mw-green-deep) !important;
  border: 1px solid var(--mw-green-border) !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.tagArea a:hover {
  background: var(--mw-green-primary) !important;
  color: #ffffff !important;
  border-color: var(--mw-green-primary) !important;
  transform: translateY(-1px) !important;
}

/* Social Share Buttons */
.read_page .icons button {
  border: 1.5px solid var(--mw-green-border) !important;
  background: #ffffff !important;
  transition: all 0.25s ease !important;
}
.read_page .icons button:hover {
  border-color: var(--mw-green-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(11, 70, 53, 0.15) !important;
}

/* ----------------------------------------------------
   ASK QUESTION FORM & CONTACT SECTION
   ---------------------------------------------------- */
.ask_question_form_div {
  background: #ffffff !important;
  border: 1px solid var(--mw-green-hairline) !important;
  border-top: 4px solid var(--mw-green-primary) !important;
  border-radius: 16px !important;
  box-shadow: var(--mw-card-shadow) !important;
  padding: 30px !important;
}
.ask_question_form_div h2 {
  color: var(--mw-green-deep) !important;
  font-family: 'Mehr Nastaliq Web 3', serif !important;
  font-size: 26px !important;
}
.noteForm {
  color: var(--mw-text-muted) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}
.ask_question_form input,
.ask_question_form textarea,
.ask_question_form select {
  background: #ffffff !important;
  border: 1.5px solid var(--mw-green-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: var(--mw-text-main) !important;
}
.ask_question_form input:focus,
.ask_question_form textarea:focus,
.ask_question_form select:focus {
  border-color: var(--mw-green-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 104, 78, 0.15) !important;
  outline: none !important;
}
.ask_question_form button[type="submit"],
.ask_question_form .btnSubmit {
  background: linear-gradient(135deg, var(--mw-green-deep) 0%, var(--mw-green-primary) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 28px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(11, 70, 53, 0.25) !important;
  transition: all 0.25s ease !important;
}
.ask_question_form button[type="submit"]:hover,
.ask_question_form .btnSubmit:hover {
  background: linear-gradient(135deg, var(--mw-green-primary) 0%, var(--mw-green-vibrant) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(11, 70, 53, 0.35) !important;
}

/* ----------------------------------------------------
   BREADCRUMBS
   ---------------------------------------------------- */
.breadcrumb,
.f_breadcrumb {
  background: var(--mw-green-soft) !important;
  border: 1px solid var(--mw-green-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
}
.breadcrumb a,
.f_breadcrumb a {
  color: var(--mw-green-deep) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.breadcrumb a:hover,
.f_breadcrumb a:hover {
  color: var(--mw-green-vibrant) !important;
  text-decoration: underline !important;
}

/* ----------------------------------------------------
   PAGINATION
   ---------------------------------------------------- */
.pagination .page-item .page-link {
  color: var(--mw-green-deep) !important;
  border: 1px solid var(--mw-green-border) !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  margin: 0 3px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link:hover {
  background: var(--mw-green-primary) !important;
  border-color: var(--mw-green-primary) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------
   FOOTER (ELEGANT DEEP GREEN & GOLD ACCENTS)
   ---------------------------------------------------- */
footer.footer {
  background: linear-gradient(180deg, #072b20 0%, #051e16 100%) !important;
  border-top: 3px solid var(--mw-gold-primary) !important;
  color: #e2f0e8 !important;
  padding-top: 40px !important;
  visibility: visible !important;
}
footer .ftperaDesc h3.h4BottomLine,
footer h3.h4BottomLine {
  color: #ffffff !important;
  font-family: 'Mehr Nastaliq Web 3', serif !important;
  font-size: 22px !important;
  border-bottom: 2px solid rgba(197, 155, 39, 0.4) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
footer .h4BottomLinePera {
  color: #cbdcd3 !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}
footer a.text-white {
  color: #e2f0e8 !important;
  transition: all 0.2s ease !important;
  font-size: 17px !important;
}
footer a.text-white:hover {
  color: var(--mw-gold-light) !important;
  padding-right: 4px;
}
.masail-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.masail-footer-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--mw-gold-primary);
  background: #ffffff;
  padding: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.masail-footer-title {
  font-family: 'Mehr Nastaliq Web 3', serif;
  font-size: 24px;
  color: #ffffff;
  font-weight: 700;
  margin: 0;
}
.masail-footer-sub {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mw-gold-primary);
  text-transform: uppercase;
}
.footer-bottom-bar {
  background: rgba(0, 0, 0, 0.35) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbdcd3 !important;
  padding: 12px 0 !important;
  font-size: 15px !important;
}
.footer-bottom-bar a {
  color: var(--mw-gold-light) !important;
  text-decoration: none !important;
}
.footer-bottom-bar a:hover {
  text-decoration: underline !important;
}