/*======================================================================
  MODERN UI LAYER  —  "Modern Fintech / Clean"
  The Banking & Finance Post (Elets-news theme)
  ----------------------------------------------------------------------
  This is an ADDITIVE, OVERRIDE-ONLY stylesheet. It changes only colours,
  typography, spacing, radii, shadows, hover/focus states and a few
  decorative accents by targeting EXISTING class names. It does NOT alter
  any PHP, markup structure, WP queries, AJAX, login, carousels or layout
  grids. Loaded LAST so it wins the cascade; targeted !important is used
  only where the theme sets inline styles.

  To fully revert the redesign: remove the two enqueue lines
    - header.php  ->  <link ... modern.css>
    - footer.php  ->  <script ... modern.js>
======================================================================*/

:root{
  /* Brand */
  --bfsi-red:#a9041b;          /* primary brand red (kept on-brand)      */
  --bfsi-red-dark:#7d0314;
  --bfsi-indigo:#3F51B5;       /* existing link accent, retained          */
  --bfsi-teal:#16868c;         /* refined category accent                 */
  /* Ink / neutrals */
  --bfsi-ink:#13203a;          /* headings + strong text                  */
  --bfsi-ink-soft:#33415c;
  --bfsi-muted:#6b7891;
  --bfsi-bg:#eef1f6;           /* page background                         */
  --bfsi-surface:#ffffff;
  --bfsi-border:#e6eaf2;
  --bfsi-border-soft:#eef1f6;
  /* Shape */
  --bfsi-radius:16px;
  --bfsi-radius-sm:12px;
  /* Elevation */
  --bfsi-shadow-sm:0 1px 2px rgba(16,28,51,.06), 0 2px 8px rgba(16,28,51,.05);
  --bfsi-shadow:0 6px 18px rgba(16,28,51,.08), 0 2px 6px rgba(16,28,51,.05);
  --bfsi-shadow-lg:0 18px 44px rgba(16,28,51,.14);
  /* Motion */
  --bfsi-trans:.25s cubic-bezier(.4,.16,.2,1);
}

/*--------------------------------------------------------------
  1. GLOBAL / BASE
--------------------------------------------------------------*/
body{
  background:var(--bfsi-bg)!important;
  color:#2b3650;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html{scroll-behavior:smooth;}

h1,h2,h3,h4,h5,h6{color:var(--bfsi-ink);letter-spacing:-.01em;}

a{transition:color var(--bfsi-trans);}

::selection{background:rgba(169,4,27,.16);color:var(--bfsi-ink);}

/* Keyboard focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--bfsi-red);
  outline-offset:2px;
  border-radius:6px;
}

/* Refined scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c2cad9 transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#c6cedd;border-radius:8px;border:2px solid var(--bfsi-bg);}
::-webkit-scrollbar-thumb:hover{background:#aab4c8;}

/*--------------------------------------------------------------
  2. SECTION HEADINGS  (.widget-title)
  Adds a clean brand accent bar + red emphasis on the trailing word.
--------------------------------------------------------------*/
.widget-title{
  position:relative;
  font-weight:800!important;
  color:var(--bfsi-ink);
  padding-left:14px;
  letter-spacing:-.015em;
}
.widget-title::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:5px;height:1.05em;
  border-radius:4px;
  background:linear-gradient(180deg,var(--bfsi-red),var(--bfsi-red-dark));
}
.widget-title span{color:var(--bfsi-red);}

/* The "View more / View all" links beside headers */
.widget-header a.text-muted{font-weight:700;}
.widget-header a.text-muted:hover{color:var(--bfsi-red)!important;}

/*--------------------------------------------------------------
  3. MEDIA & IMAGES
  Softens the harsh inline 1px #ccc borders, unifies radii,
  adds gentle elevation to thumbnails.
--------------------------------------------------------------*/
.border-radius-10{border-radius:14px!important;}
.border-radius-15{border-radius:16px!important;}
.border-radius-5{border-radius:10px!important;}

.img-hover-scale img,
.post-thumb img{border-color:var(--bfsi-border)!important;}

.block-tab-item .img-hover-scale,
.featured-slider-1 .img-hover-slide{box-shadow:var(--bfsi-shadow-sm);}

/* Gentle lift on grid media tiles (featured / interviews / videos / testimonials) */
.slider-single{transition:transform var(--bfsi-trans);}
.slider-single:hover{transform:translateY(-3px);}

/*--------------------------------------------------------------
  4. CATEGORY BADGE  (.top-right-icon on cards)
  Turns the small square badge into a premium glass pill.
--------------------------------------------------------------*/
.top-right-icon{
  background:rgba(15,23,42,.82)!important;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  border-radius:999px!important;
  width:auto!important;
  height:auto!important;
  line-height:1.6!important;
  padding:4px 12px!important;
  font-size:11px!important;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.20);
}

/* Inline category tag used on article lists */
.post-in.text-danger{color:var(--bfsi-red)!important;font-weight:700;letter-spacing:.02em;}

/*--------------------------------------------------------------
  5. CARD SURFACES  (article lists, aside widgets)
--------------------------------------------------------------*/
.latest-post article,
.post-aside-style-3 article,
article.background-white,
article.bg-white{
  background:var(--bfsi-surface)!important;
  border:1px solid var(--bfsi-border);
  border-radius:var(--bfsi-radius)!important;
  box-shadow:var(--bfsi-shadow-sm);
  transition:box-shadow var(--bfsi-trans),transform var(--bfsi-trans);
}
.latest-post article:hover,
.post-aside-style-3 article:hover,
article.background-white:hover,
article.bg-white:hover{
  box-shadow:var(--bfsi-shadow);
  transform:translateY(-2px);
}

.post-aside-style-1{
  border:1px solid var(--bfsi-border);
  border-radius:var(--bfsi-radius)!important;
  box-shadow:var(--bfsi-shadow-sm);
}

/* Compact list rows (NBFC updates, Press Release, Payment Gateways) */
.post-aside-style-2 .list-post > li{
  padding-bottom:14px;
  border-bottom:1px solid var(--bfsi-border);
}
.post-aside-style-2 .post-thumb img{border-radius:10px!important;}
.post-aside-style-1 .post-title a:hover,
.post-aside-style-2 .post-title a:hover,
.post-aside-style-3 .post-title a:hover,
.post-title a:hover{color:var(--bfsi-red)!important;}

/* Article excerpt readability */
.post-exerpt{line-height:1.7;color:#54607a!important;}

/* Overlay cards (Appointments News) */
.post-content-overlay .post-title a{font-weight:800;}

/*--------------------------------------------------------------
  6. BUTTONS  (.readmore + newsletter + offer band)
--------------------------------------------------------------*/
.readmore{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  width:auto!important;
  box-shadow:0 4px 12px rgba(169,4,27,.16);
  transition:all var(--bfsi-trans);
}
.readmore:hover{
  box-shadow:0 10px 22px rgba(169,4,27,.30);
  transform:translateY(-1px);
}
.readmore i{transition:transform var(--bfsi-trans);}
.readmore:hover i{transform:translateX(3px);}

/*--------------------------------------------------------------
  7. HEADER
--------------------------------------------------------------*/
/* Top utility bar -> refined deep-navy gradient */
.headers{
  background:linear-gradient(90deg,#0d1726,#13203a)!important;
  border-top:0!important;
}
.top-list li a{opacity:.86;transition:opacity var(--bfsi-trans),color var(--bfsi-trans);}
.top-list li a:hover{opacity:1;color:#fff!important;}

/* Main nav links */
.main-menu > li > a,
.main-header .main-nav ul li > a{color:var(--bfsi-ink);}
.main-header .main-nav ul li:hover > a,
.main-header .main-nav ul li.current-menu-item > a{color:var(--bfsi-red)!important;}
.main-header .main-nav ul li > a::after{
  background:var(--bfsi-red)!important;
  height:3px;border-radius:3px;
}

/* Dropdown sub-menus -> modern rounded card */
.main-header .main-nav ul ul.sub-menu{
  border-radius:14px!important;
  box-shadow:var(--bfsi-shadow-lg)!important;
  border:1px solid var(--bfsi-border);
  padding:10px!important;
}
.main-header .main-nav ul ul.sub-menu > li > a{
  border-radius:8px;
  padding:6px 12px!important;
  transition:background var(--bfsi-trans),color var(--bfsi-trans);
}
.main-header .main-nav ul ul.sub-menu > li > a:hover{
  background:#f4f6fb;
  color:var(--bfsi-red)!important;
}

/* Search field -> pill input with focus ring */
.header-style-2 input.search_field,
.offcanvas-sidebar input.search_field{
  border:1px solid var(--bfsi-border)!important;
  border-radius:999px!important;
  background:#f4f6fb!important;
  transition:background var(--bfsi-trans),border-color var(--bfsi-trans),box-shadow var(--bfsi-trans);
}
.header-style-2 input.search_field:focus,
.offcanvas-sidebar input.search_field:focus{
  background:#fff!important;
  border-color:var(--bfsi-red)!important;
  box-shadow:0 0 0 3px rgba(169,4,27,.12)!important;
}

/* Subtle elevation once the page is scrolled (class added by modern.js) */
body.bfsi-scrolled .header-bottom.header-sticky.background-white{
  box-shadow:0 6px 24px rgba(16,28,51,.10);
}

/* Off-canvas toggle */
#off-canvas-toggle ion-icon{color:var(--bfsi-ink);}

/*--------------------------------------------------------------
  8. OFFCANVAS SIDEBAR  (tags, search)
--------------------------------------------------------------*/
.tagcloud a{
  display:inline-block;
  border:1px solid var(--bfsi-border);
  border-radius:999px;
  padding:4px 14px;
  margin:0 6px 8px 0;
  font-size:12px;
  color:var(--bfsi-ink-soft);
  transition:all var(--bfsi-trans);
}
.tagcloud a:hover{
  background:var(--bfsi-red);
  border-color:var(--bfsi-red);
  color:#fff!important;
}

/*--------------------------------------------------------------
  9. NEWSLETTER WIDGET  (inc-newsletter.php)
  Recolours the flat teal box into a branded gradient card.
--------------------------------------------------------------*/
.widget_newsletter{
  background:linear-gradient(135deg,#13203a 0%,#26406f 100%)!important;
  border:0!important;
  border-radius:var(--bfsi-radius)!important;
  box-shadow:var(--bfsi-shadow);
}
.widget_newsletter .widget-title{color:#fff!important;}
.widget_newsletter .widget-title::before{background:var(--bfsi-red);}
.widget_newsletter p,
.widget_newsletter .newsletter p{color:rgba(255,255,255,.82)!important;}
.widget_newsletter input[type="email"]{
  width:100%;
  border:1px solid rgba(255,255,255,.25)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border-radius:10px!important;
  padding:11px 14px!important;
}
.widget_newsletter input[type="email"]::placeholder{color:rgba(255,255,255,.65)!important;}
.widget_newsletter input[type="email"]:focus{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.10)!important;
}
.widget_newsletter .newsletter button{
  margin-top:12px;
  background:var(--bfsi-red)!important;
  color:#fff!important;
  border:0!important;
  border-radius:10px!important;
  padding:10px 20px!important;
  font-weight:700;
  transition:all var(--bfsi-trans);
}
.widget_newsletter .newsletter button:hover{
  background:var(--bfsi-red-dark)!important;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/*--------------------------------------------------------------
  10. FOOTER  (kept light so inline black text stays readable)
--------------------------------------------------------------*/
.footer-area{
  background:#eef1f6!important;
  border-top:1px solid var(--bfsi-border);
}
.one{position:relative;padding-bottom:12px!important;letter-spacing:.01em;}
.one::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:44px;height:3px;border-radius:3px;
  background:var(--bfsi-red);
}
.listcio li{
  border-bottom:1px solid var(--bfsi-border)!important;
  margin-bottom:6px;
}
.listcio li a{transition:color var(--bfsi-trans),padding var(--bfsi-trans);}
.listcio li a:hover{color:var(--bfsi-red)!important;padding-left:4px;}

.footer-bottom-area .footer-border{border-top:1px solid var(--bfsi-border)!important;}
.footer-bottom-area .list-inline-item a:hover{color:var(--bfsi-red)!important;}

/* Social share chips */
.single-social-share a{
  box-shadow:var(--bfsi-shadow-sm)!important;
  transition:transform var(--bfsi-trans),box-shadow var(--bfsi-trans);
}
.single-social-share a:hover{
  transform:translateY(-3px);
  box-shadow:var(--bfsi-shadow)!important;
}

/*--------------------------------------------------------------
  11. PAGINATION / BREADCRUMB
--------------------------------------------------------------*/
.pagination-area .page-item.active .page-link{background:var(--bfsi-red)!important;color:#fff!important;}
.pagination-area .page-link:hover{color:var(--bfsi-red)!important;}
.breadcrumb a:hover{color:var(--bfsi-red)!important;}

/*--------------------------------------------------------------
  12. SINGLE POST READING
--------------------------------------------------------------*/
.entry-main-content p{font-size:16px;line-height:1.8;color:#2c3a52;}
.entry-main-content h2{color:var(--bfsi-ink);}
.wp-block-quote.is-large,
.wp-block-quote.is-style-large{
  border-left:4px solid var(--bfsi-red);
  background:#f6f8fc!important;
  border-radius:10px;
}
.entry-bottom .tags a{transition:all var(--bfsi-trans);}
.entry-bottom .tags a:hover{
  background:var(--bfsi-red);
  border-color:var(--bfsi-red);
  color:#fff;
}

/*--------------------------------------------------------------
  14. ARCHIVE / PAGE HEADERS  (category.php, all-magazine.php, conferences.php)
  Centered modern page title with a brand underline + pill breadcrumb.
--------------------------------------------------------------*/
.archive-header{padding:18px 0 6px;}
.archive-header h1,
.archive-header h2,
.archive-header h3{font-weight:800;letter-spacing:-.02em;margin-bottom:12px;}
.archive-header h2 span,
.archive-header h3 span,
.archive-header .text-danger,
.archive-header .text-success{
  color:var(--bfsi-ink)!important;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.archive-header h2 span::after,
.archive-header h3 span::after{
  content:"";
  position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:60px;height:3px;border-radius:3px;
  background:var(--bfsi-red);
}
.archive-header .breadcrumb{
  display:inline-flex;align-items:center;gap:2px;
  background:#fff;
  border:1px solid var(--bfsi-border);
  padding:7px 18px!important;
  border-radius:999px;
  box-shadow:var(--bfsi-shadow-sm);
}
.archive-header .breadcrumb a{color:var(--bfsi-ink-soft);font-weight:600;}
.archive-header .breadcrumb a:hover{color:var(--bfsi-red)!important;}

/*--------------------------------------------------------------
  15. CATEGORY / GRID CARDS
  category.php puts .background-white on an inner div (not the <article>),
  so it needs its own card treatment + hover.
--------------------------------------------------------------*/
.loop-grid .background-white,
.loop-list-style-1 .background-white{
  border:1px solid var(--bfsi-border);
  box-shadow:var(--bfsi-shadow-sm);
  transition:box-shadow var(--bfsi-trans),transform var(--bfsi-trans);
}
.loop-grid article:hover .background-white,
.loop-list-style-1 article:hover .background-white{
  box-shadow:var(--bfsi-shadow);
  transform:translateY(-2px);
}

/*--------------------------------------------------------------
  16. LOAD-MORE / PAGE BUTTONS  (all-magazine.php #loadMore)
  Inline bg colour is kept; we add modern shape + elevation.
--------------------------------------------------------------*/
#loadMore{
  display:inline-block;
  border-radius:999px!important;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(63,81,181,.25);
  transition:all var(--bfsi-trans);
}
#loadMore:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(63,81,181,.35);
  color:#fff!important;
}

/*--------------------------------------------------------------
  17. SINGLE POST EXTRAS  (single.php)
--------------------------------------------------------------*/
.like-button{
  border-radius:999px!important;
  border-color:var(--bfsi-border)!important;
  padding:4px 14px!important;
  transition:all var(--bfsi-trans);
}
.like-button:hover{
  border-color:var(--bfsi-red)!important;
  box-shadow:0 4px 12px rgba(169,4,27,.12);
}
.post-in.background2{border-radius:999px;padding:3px 12px!important;}
.post-cat{border-radius:999px!important;letter-spacing:.03em;font-weight:700;}

/*======================================================================
  18. ENHANCED POLISH  (v2 — second pass, additive, builds on theme)
======================================================================*/

/* 18.1 Overlay cards — deeper cinematic scrim + legible white text.
   Theme already paints a bottom scrim on .thumb-overlay::before; we
   make it a smoother three-stop gradient and round it to match cards. */
.thumb-overlay::before{
  background:linear-gradient(to bottom,
    rgba(13,23,42,0) 28%,
    rgba(11,18,33,.42) 60%,
    rgba(8,13,26,.90) 100%)!important;
  border-radius:var(--bfsi-radius)!important;
}
.post-content-overlay .post-title a{text-shadow:0 1px 12px rgba(0,0,0,.5);}
.post-content-overlay .entry-meta,
.post-content-overlay .entry-meta a,
.post-content-overlay .color-white{text-shadow:0 1px 8px rgba(0,0,0,.45);}

/* 18.2 Animated underline that grows under card titles on hover */
.post-title a{
  background:linear-gradient(var(--bfsi-red),var(--bfsi-red)) left bottom / 0% 2px no-repeat;
  transition:background-size var(--bfsi-trans),color var(--bfsi-trans);
}
.post-title a:hover{background-size:100% 2px;}
.post-content-overlay .post-title a{background-image:linear-gradient(#fff,#fff);}

/* 18.3 Nav underline runs the full link width (extends theme's 50px) */
.main-header .main-nav ul li.current-menu-item > a::after,
.main-header .main-nav ul li:hover a::after{
  width:100%!important;left:0!important;transform:none!important;
}

/* 18.4 Category chips -> unified branded gradient pill */
.post-cat,
a.post-cat{
  background:linear-gradient(135deg,var(--bfsi-red),var(--bfsi-red-dark))!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(169,4,27,.22);
  transition:filter var(--bfsi-trans),transform var(--bfsi-trans);
}
.post-cat:hover{filter:brightness(1.07);transform:translateY(-1px);}

/* 18.5 Post meta -> quieter text with branded icons */
.entry-meta{color:var(--bfsi-muted)!important;}
.entry-meta .fa,
.meta-1 .fa,
.meta-0 .fa{color:var(--bfsi-red);opacity:.85;}
.post-content-overlay .entry-meta,
.post-content-overlay .entry-meta a{color:rgba(255,255,255,.92)!important;}
.post-content-overlay .entry-meta .fa{color:#fff;opacity:.9;}

/* 18.6 Reading-progress bar (element injected by modern.js on articles) */
#bfsi-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  z-index:9999;
  background:linear-gradient(90deg,var(--bfsi-red),#e0506a);
  box-shadow:0 0 10px rgba(169,4,27,.5);
  transition:width .1s linear;
  pointer-events:none;
}

/* 18.7 Hairline section dividers fade out at the edges */
hr{
  border:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bfsi-border) 22%,var(--bfsi-border) 78%,transparent);
}

/*======================================================================
  19. LEFT SIDEBAR  (left-sidebar.php)
  The heavy teal (#7EA2AE) inline backgrounds were removed from the
  markup; here we turn the widgets into clean white nav cards.
======================================================================*/
.primary-sidebar .sidebar-widget{
  background:var(--bfsi-surface)!important;
  border:1px solid var(--bfsi-border);
  border-radius:var(--bfsi-radius)!important;
  box-shadow:var(--bfsi-shadow-sm);
  padding:14px!important;
  margin-bottom:22px!important;
}
.primary-sidebar .sidebar-widget ul{margin:0;padding:0;list-style:none;}
.primary-sidebar .sidebar-widget .widget-header{margin-bottom:10px!important;}

/* Nav rows (Magazine / Conferences / Webinars …) */
.primary-sidebar .widget_categories_2 li,
.primary-sidebar .widget_categories li{
  list-style:none!important;
  margin:2px 0;
  border:0!important;
  padding:0!important;
}
.primary-sidebar .widget_categories_2 li a,
.primary-sidebar .widget_categories li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  color:var(--bfsi-ink-soft)!important;
  font-weight:600;
  font-size:13.5px;
  line-height:1.3;
  transition:background var(--bfsi-trans),color var(--bfsi-trans),padding var(--bfsi-trans);
}
.primary-sidebar .widget_categories_2 li a .mr-10{margin-right:0!important;display:inline-flex;}
.primary-sidebar .widget_categories_2 li a ion-icon{
  font-size:18px;
  color:var(--bfsi-red);
  flex:0 0 auto;
}
.primary-sidebar .widget_categories_2 li a:hover,
.primary-sidebar .widget_categories li a:hover{
  background:#f4f6fb;
  color:var(--bfsi-red)!important;
  padding-left:16px;
}
/* Active page highlight */
.primary-sidebar .widget_categories_2 li.active > a{
  background:linear-gradient(135deg,var(--bfsi-red),var(--bfsi-red-dark));
  color:#fff!important;
  box-shadow:0 6px 14px rgba(169,4,27,.22);
}
.primary-sidebar .widget_categories_2 li.active > a ion-icon{color:#fff;}

/*--------------------------------------------------------------
  13. MOTION PREFERENCES
--------------------------------------------------------------*/
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}