/*!
Theme Name: UiCore Pro Child
Theme URI: https://uicore.co
Description: One framework for all your website needs.
Author: UiCore
Author URI: https://uicore.co
Template: uicore-pro
Version: 1.0.0
Text Domain: uicore-pro
*/

 /* Add your custom style here */

/* === Grid === */
.catbg-grid{
  display:grid;
  gap:24px;
}
.catbg-cols-auto{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.catbg-cols-fixed.catbg-cols-2{ grid-template-columns: repeat(2,1fr); }
.catbg-cols-fixed.catbg-cols-3{ grid-template-columns: repeat(3,1fr); }
.catbg-cols-fixed.catbg-cols-4{ grid-template-columns: repeat(4,1fr); }
.catbg-cols-fixed.catbg-cols-5{ grid-template-columns: repeat(5,1fr); }

:root {
    --remix-icon: "remixicon";
    --Kaushan: "Kaushan Script", cursive;
    --Dm: "Poppins", sans-serif;
    --white: #fff;
    --light: #d8dbe0;
    --dark: #28292c;
    --info: #0dcaf0;
    --body: #fff;
    --primary-color: #3BADFF;
    --secondary-color: #f26f55;
    --tertiary-color: #39a1f0;
    --primary-soft-color: #daedef;
    --primary-soft-color-two: #efeedb;
    --primary-color-rgb: 1, 123, 110;
    --secondary-color-rgb: 242, 111, 85;
    --primary-title: #071516;
    --secondary-title: #505a59;
    --tertiary-title: #95b2b4;
    --pure-black: #000;
    --primary-paragraph: #4b5051;
    --secondary-paragraph: #333333;
    --tertiary-paragraph: #787787;
    --primary-btn: var(--primary-color);
    --secondary-btn: #ffd502;
    --tertiary-btn: #090e0d;
    --ratting-color: #fcac17;
    --ratting-color-rgb: 255, 193, 7;
    --section-bg-one: #fffff3;
    --section-bg-two: #f5f7f9;
    --section-bg-three: #e5f1ff;
    --primary-border: #c7d2d8;
    --secondary-border: #dddddd70;
    --tertiary-border: #eaebee;
    --primary-shadow: 0px 4.12121px 49.4545px rgba(0, 0, 0, 0.08);
    --primary-gray: #cccdd3;
    --secondary-gray: #f8f8f8;
    --available-card-bg: linear-gradient(180deg, #daedef 0%, rgba(218, 237, 239, 0) 98.91%);
}


/* === Card === */
.catbg-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:260px;                                 /* card height like your shot */
  border-radius:14px;
  text-decoration:none;
  overflow:hidden;
  background: #ddd center/cover no-repeat;
  background-image: var(--catbg);               /* set inline via style attr */
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.catbg-card::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.42);                  /* dark overlay */
}
.catbg-card:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  filter:saturate(1.05);
}

/* Title */
.catbg-title{
  position:relative; z-index:1;
  color:#fff;
  font-weight:800;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.4rem);
  line-height:1.25;
  text-align:center;
  padding:0 14px;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  word-break: break-word;
}

/* Pagination (optional) */
.catbg-pagination{
  margin-top:20px; text-align:center;
}
.catbg-pagination .page-numbers{
  display:inline-block; margin:0 4px; padding:8px 12px; border-radius:8px;
  background:#eef2ff; color:#111; text-decoration:none;
}
.catbg-pagination .current{ background:#dbeafe; font-weight:700; }





/* === Grid === */
.catbg-grid{ display:grid; gap:24px; }
.catbg-cols-auto{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.catbg-cols-fixed.catbg-cols-2{ grid-template-columns:repeat(2,1fr); }
.catbg-cols-fixed.catbg-cols-3{ grid-template-columns:repeat(3,1fr); }
.catbg-cols-fixed.catbg-cols-4{ grid-template-columns:repeat(4,1fr); }
.catbg-cols-fixed.catbg-cols-5{ grid-template-columns:repeat(5,1fr); }

/* === Card with category image background === */
.catbg-card{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:300px; width: 315px; border-radius:14px; text-decoration:none; overflow:hidden;
  background:#ddd center/cover no-repeat;
  background-image: var(--catbg);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.catbg-card::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.42);
}
.catbg-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  filter:saturate(1.05);
}

/* Title overlay */
.catbg-title{
  position:relative; z-index:1; color:#fff; font-weight:800;
  font-size:clamp(1rem, 1.2vw + .6rem, 1.4rem);
  line-height:1.25; text-align:center; padding:0 14px;
  text-shadow:0 2px 6px rgba(0,0,0,.35); word-break:break-word;
}

/* Pagination */
.catbg-pagination{ margin-top:22px; text-align:center; }
.catbg-pagination .page-numbers{
  display:inline-block; margin:0 4px; padding:8px 12px; border-radius:8px;
  background:#eef2ff; color:#111; text-decoration:none;
}
.catbg-pagination .current{ background:#dbeafe; font-weight:700; }


/* ===== Base Style for Custom Div Alerts ===== */


/* ===== Green Alert ===== */
/* Green alert box like the screenshot */
div[divtype="greendiv"] {
  background-color: #d1e7dd !important;  /* light green */
  border: 1px solid #badbcc !important;  /* soft green border */
  color: #146c43 !important;             /* readable dark green */

  display: block;
 width:fit-content;            /* spans the container width like your image */
  padding: 0.875rem 1.25rem 0px;
  margin: 1rem 0;
  border-radius: 0.65rem; /* rounder corners as shown */
  line-height: 1.6;
/*  font-size: 19px;  */
}

/* Ensure child elements keep the same text color */
div[divtype="greendiv"] > * {
  color: inherit !important;
}

div[divtype="greendiv"]  strong { 
/* font-size: 19px; */
    color: #212121;
    word-break: auto-phrase
}

/* ===== White Alert ===== */

/* White info box (high-specificity + shorthand override) */
body div[divtype="whitediv"],
body div[divtype="whitediv" i],
body .whitediv,
body [data-divtype="whitediv" i]{
  background: #f8f9fa !important;          /* overrides any background shorthand */
  border: 1px solid #e9ecef !important;
  color: #212121 !important;

  display: block;
  width:fit-content;
  padding: 0.875rem 1.25rem 0px;
  margin: 1rem 0;
  border-radius: 0.65rem;
  line-height: 1.6;
}

/* force inner text color */
body div[divtype="whitediv"] * { color: #212121 !important; }
body div[divtype="whitediv"] * a { color: #3badff !important; }
body div[divtype="greendiv"] * a { color: #3badff !important; }
body div[divtype="reddiv"] * a { color: #3badff !important; }
.accordion-content * a { color: #3badff !important; }



/* ===== Red Alert ===== */
/* Red alert (no variables) */
div[divtype="reddiv"]{
  margin-top:17px;
  display:block;
  width:fit-content;
  padding-right:5rem !important;
  position:relative;

  /* spacing */
  padding:0.875rem 1.25rem 0;   /* top right/left bottom */
  margin-bottom:1rem;
  border-radius:0.375rem;

  /* colors (Bootstrap danger equivalents) */
  color:#212121 !important;                 /* text */
  background-color:#f8d7da !important;      /* bg subtle */
  border:1px solid #f1aeb5 !important;      /* border subtle */
}

/* links inside reddiv should match text color */
div[divtype="reddiv"] a{
  color:#212121 !important;
}




.accpost ol.list {
  list-style-type: auto!important; /* or decimal if you want numbers */
  padding-left: 30px;
  margin: 0.5rem 0 1rem;
}


.list::before {
    content: "\f3c1";
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 9px;
    font-family: "remixIcon";
    color: #000;
    font-weight: 400;
}

@media (max-width: 767px) {
  .gg-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  }
  .gg-table-scroll > table {
    width: 100%;
    /* A min-width forces horizontal scroll only when needed; adjust as you like */
     border-collapse: collapse;
  }
	#fav-heart-btn {   width: 30px!important;}
}

/* MOBILE ONLY (=767px) */
@media (max-width: 767px) {

  /* keep real table layout; allow vertical gaps between rows */
  .gg-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;   /* vertical gap between rows */
    table-layout: auto;
  }

  /* header styling */
  .gg-table thead th {
    background: #eef6ff;
    padding: 10px 14px;
    font-weight: 700;
    color: #0f172a;
    border: 0;
    /* rounded header bar 
    border-radius: 12px;*/
  }

  /* make each row a rounded "pill" using a pseudo background */
  .gg-table tbody tr {
    position: relative;
  }
 /* .gg-table tbody tr::before {
    content: "";
    position: absolute;
    inset: -2px 0;                 /* full row width, tiny bleed */
    background: #d9efff;           /* light blue */
    border-radius: 14px;           /* pill corners */
    z-index: 0;                    /* sit behind the cells */
  }*


  /* cells sit above the blue background */
  .gg-table tbody td {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: 0;
    padding: 12px 14px;
    vertical-align: middle;
    white-space: normal;           /* let long text wrap nicely */
  }

  /* optional: make the first (number) column bold like in the shot */
  .gg-table tbody td.gg-num {
    font-weight: 700;
  }

  /* links look normal (no pills) */
  .gg-table tbody td a {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

}

/* Put the chevron after the inner <span> of your .refe-btn */
/* Make the anchor a positioning context and leave room for the arrow */
.refe-btn{
  position: relative;
  display: inline-block;           /* or inline-flex if you prefer */
  padding-right: 40px;             /* space for the arrow */
  text-decoration: none;
 color:#0c0c0c!important;
}

.refe-btn a{
	color:#0c0c0c!important;
}

/* Border-drawn chevron on the right */
.refe-btn::after{
  content: "";
  position: absolute;
  right: 18px;                     /* distance from right edge */
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;   /* inherit link color */
  border-bottom: 2px solid currentColor;  /* inherit link color */
  transform: translateY(-50%) rotate(-45deg);
  transition: right .18s ease, transform .18s ease;
  opacity: .9;
}

/* Optional hover nudge */
.refe-btn:hover::after,
.refe-btn:focus-visible::after{
  right: 14px;
  transform: translateY(-50%) rotate(-45deg) scale(1.05);
}

/*  Ref Super Script  color Scope to single post area to avoid global bleed; tweak if your container differs */
.single-post .uicore-content sup.gg-ref,
.single-post .uicore-content sup.gg-ref a {
  color: #3f92fe !important;          /* make the brackets and link red */
}

/* Optional: keep it clean (remove underline); delete if you want underline */
.single-post .uicore-content sup.gg-ref a {
  text-decoration: none !important;
}