/* =========================
   Tools Pricing Table CSS
   Targeted only to #tools_table
   ========================= */

#tools_table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: inherit;
    background: #ffffff;
}

/* Header */
#tools_table thead th {
    background: #0f172a;
    color: #ffffff;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 2px solid #e5e7eb;
}

/* Body cells */
#tools_table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
}

/* Zebra striping */
#tools_table tbody tr:nth-child(even) {
    background: #f9fafb;
}

/* Hover effect */
#tools_table tbody tr:hover {
    background: #f1f5f9;
}

/* Price column alignment */
#tools_table tbody td:last-child {
    font-weight: 600;
    color: #111827;
}

/* Dash styling */
#tools_table tbody td:contains("–") {
    color: #9ca3af;
    font-weight: 400;
}

/* =========================
   Mobile Responsive
   ========================= */
@media (max-width: 768px) {
    #tools_table thead {
        display: none;
    }

    #tools_table,
    #tools_table tbody,
    #tools_table tr,
    #tools_table td {
        display: block;
        width: 100%;
    }

    #tools_table tr {
        margin-bottom: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
    }

    #tools_table td {
        padding: 12px 14px;
        text-align: center;
        position: relative;
        border-bottom: 1px solid #e5e7eb;
    }

    #tools_table td:last-child {
        border-bottom: none;
    }

    /* Labels */
    #tools_table td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        font-weight: 600;
        color: #374151;
        text-align: left;
    }
}
 
.aihero-breadcrumbs {
  max-width: 1200px;           /* same as hero */
  margin: 0 auto; 
  padding-bottom: 50px;
  font-size: 14px;
  color: #fff;
}

.aihero-breadcrumbs nav {
  display: flex;
  align-items: center;
}

.aihero-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.aihero-breadcrumbs span.separator {
  margin: 0 8px;
}
.css{border:1px solid #abc;}.share-buttons {
  display: flex;
  gap: 10px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px 10px 30px;;
  border-radius: 12px;           /* rounded rectangle like screenshot */
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
	.social_share_dynamic{padding-top:2%;}

/* Brand colors */
.share-x {
  background: #000000;
}

.share-facebook {
  background: #1877f2;
}

.share-telegram {
  background: #2aabee;
}

/* Hover */
.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  opacity: 0.9;
}

	
	
	

	.dynamic-reviews-section{padding-bottom:10%;}
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Prevent horizontal overflow caused by large elements */
body { overflow-x: hidden; }

/* Color tokens */
:root{
  --bg-dark: #050505;
  --panel-dark: #0b0b0b;
  --accent: #f4c402;   /* yellow */
  --muted: #bbb;
  --text-light: #fff;
  --text-dark: #111;
}

/* ---------- LAYOUT CONTAINERS ---------- */

.aihero-wrapper {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 36px 16px;
}

.aihero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* mobile stacked by default */
  gap: 28px;
  align-items: start;
}

/* Left block inside hero (logo, meta, title, cta) */
.aihero-left {
  width: 100%;
}

/* Right block inside hero for featured image */
.aihero-right {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Featured image styling */
.aihero-featured-img {
  width: 100%;
  border-radius: 14px;
  display: block;
  object-fit: cover;
}

/* logo box */
.aihero-logo-box img {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}

/* meta and title */
.aihero-date { font-size: 13px; opacity: .75; margin: 0 0 6px; color: var(--muted); }
.aihero-title { font-size: 34px; margin: 6px 0 14px; line-height: 1.05; color: var(--text-light); font-weight:700; }
.aihero-subtitle { font-size: 15px; color: #dcdcdc; max-width: 720px; margin-bottom: 18px; }

/* badges row */
.aihero-left-middle { display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0; }
.aihero-plan-badge, .aihero-category-badge {
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; font-weight:600; font-size:13px;
}
.aihero-plan-badge { background: var(--accent); color: #000; }
.aihero-category-badge { background: #111; color: var(--accent); border: 1px solid rgba(255,255,255,0.04); }

/* tags */
.aihero-tags ul { list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.aihero-tags li a { padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.04); color:var(--muted); font-size:13px; }

/* CTA */
.aihero-cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#000; padding:20px; border-radius:10px; font-weight:700; font-size:24px;
  transition: transform .12s ease, background .12s ease;
  width:100%;
  margin-top: 20px;
	justify-content:center;
}
.aihero-cta-btn:hover { transform: translateY(-3px); background:#ffde5f; }

/* ---------- TABS + MAIN CONTENT ---------- */

.aitabs-wrapper { background: #fff; color: var(--text-dark); padding: 26px 12px; }
.aitabs-inner {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* mobile stacked */
  gap: 28px;
	padding: 2% 5% 2% 5%;
}

/* left area (tabs + panels) */
.aitabs-left { width: 100%; }

/* tab nav */
.aitabs-nav { display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid rgba(0,0,0,0.08); padding-bottom:12px; margin-bottom:18px; }
.aitabs-nav-item {
  background: transparent; border: none; padding:8px 14px; cursor:pointer; font-size:14px; color:#666; border-radius:6px;
}
/* Active Tab */
.aitabs-nav-item.is-active {
    background: #fff;
    color: #000;
    font-weight: 700;
    font-size: 19px;
    border-bottom: 3px solid rgb(244 196 2);
    border-radius: 0;
}

/* Non-Active Tab (default state) */
.aitabs-nav-item {
    background: transparent;
    color: #000;
    font-weight: 700;
    font-size: 19px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

/* Hover State (same as active) */
.aitabs-nav-item:hover {
    background: #fff;
    color: #000;
    border-bottom: 3px solid #000;
}


/* panels */
.aitabs-panels { margin-top: 6px; }
.aitabs-panel { display:none; }
.aitabs-panel.is-active { display:block; }
.aitabs-heading { font-size:20px; margin: 4px 0 12px; color:var(--text-dark); font-weight:700; }
.aitabs-content { color:#222; line-height:1.75; font-size:15px; }

/* bottom row CTA + sharing */
.aitabs-bottom-row {  gap:14px; align-items:center; flex-wrap:wrap; margin-top:20px; }
.aitabs-visit-btn { background:var(--accent); color:#000; padding:12px 18px; border-radius:999px; font-weight:700; }
.aitabs-share { display:flex; gap:8px; align-items:center; }

/* ---------- RIGHT SIDEBAR: FEATURED TOOLS ---------- */
.aitabs-right { width:100%; }
.aitabs-right-title { font-size:20px; font-weight:700; margin: 0 0 10px; color:var(--text-dark); }

/* featured list layout: vertical stack on mobile */
.aitabs-featured-list { display:flex; flex-direction:column; gap:16px; }

/* featured item: card */
.aitabs-featured-item {
  display:grid;
  grid-template-columns: 72px 1fr; /* image + content */
  gap: 14px;
  padding: 24px;
  background: #fff;
  color: var(--text-light);
  border-radius: 12px;
  border: 2px solid #000;
  align-items: center;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
}

/* make entire card clickable (avoid nested links causing overflow) */
.aitabs-featured-item a { color:inherit; display:block; }

.aitabs-featured-item:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }

.aitabs-featured-logo img { width:72px; height:72px; border-radius:10px; object-fit:cover; display:block; }

/* featured info & text truncation / wrap */
.aitabs-featured-title { font-size:22px; margin:0 0 6px; color:var(--text-light); font-weight:700; }
.aitabs-featured-title a { color:#000; }
.aitabs-featured-text { font-size:18px; color:#000; margin:0; line-height:1.35; }

/* ---------- RELATED TOOLS GRID ---------- */
.aitools-related { max-width:1200px; margin: 34px auto; padding: 0 12px; color:var(--text-dark); }
.aitools-related-title { font-size:22px; font-weight:700; margin-bottom:14px; }
.aitools-related-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }

/* related card inner */
.aitools-related-card-inner {
  background:#fff; border-radius:12px; padding:30px; border:2px solid #000; box-shadow: 0 8px 18px rgba(0,0,0,0.04);
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
}
.aitools-related-left { display:flex; gap:12px; align-items:flex-start; }
.aitools-related-logo img { width:72px; height:72px; object-fit:cover; border-radius:10px; }
.aitools-related-name { font-size:16px; margin:0 0 6px; font-weight:700; color:#111; }
.aitools-related-desc { font-size:14px; color:#444; margin:0; }
.aitools-related-bottom { display:flex; gap:10px; margin-top:12px; align-items:center; }
.aitools-related-badge { background:var(--accent); padding:6px 12px; border-radius:999px; font-weight:700; font-size:12px; }



/* ============================
   RESPONSIVE BREAKPOINTS
   (mobile-first -> larger screens)
   ============================ */

/* ---------- small phones up to 480px (already mobile stacking) ---------- */
@media (max-width: 480px) {
  .aihero-title { font-size:24px; }
  .aihero-logo-box img { width:64px; height:64px; }
  .aitabs-featured-item { grid-template-columns: 60px 1fr; padding:12px; }
  .aitabs-featured-logo img { width:60px; height:60px; }
  .aitools-related-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr; text-align:center; gap:22px; }
  .aitabs-nav { gap:6px; }
}

/* ---------- tablets: >=481px and <= 768px ---------- */
@media (min-width:481px) and (max-width:768px) {
  .aihero-inner { grid-template-columns: 1fr; gap:22px; padding: 0 8px; }
  .aitabs-inner { grid-template-columns: 1fr; gap:22px; }
  .aitools-related-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: repeat(2, 1fr); gap:22px; }
  .aihero-title { font-size:28px; }
  .aitabs-featured-item { grid-template-columns: 64px 1fr; }
  .aitabs-featured-logo img { width:64px; height:64px; }
}

/* ---------- landscape tablets / small laptops: >=769px and <= 1024px ---------- */
@media (min-width:769px) and (max-width:1024px) {
  /* switch to two columns: content + sidebar */
  .aihero-inner { grid-template-columns: 1fr 420px; gap:28px; align-items:start; }
  .aitabs-inner { grid-template-columns: 1fr 360px; gap:28px; align-items:start; }
  .aitabs-right { position: relative; }
  .aitabs-featured-list { gap:14px; }
  .aitools-related-grid { grid-template-columns: 1fr; }  /* related becomes single column on tablets */
  .aihero-title { font-size:32px; }
}

/* ---------- desktops >=1025px and <=1279px ---------- */
@media (min-width:1025px) and (max-width:1279px) {
  .aihero-inner { grid-template-columns: 1fr 440px; gap:32px; }
  .aitabs-inner { grid-template-columns: 1fr 380px; gap:32px; }
  .aitools-related-grid { grid-template-columns: 1fr 1fr; }
  .footer-container { grid-template-columns: repeat(4, 1fr); }
  .aihero-title { font-size:36px; }
  .aitabs-featured-item { grid-template-columns: 72px 1fr; padding:14px; }
  .aitabs-featured-logo img { width:72px; height:72px; }
}

/* ---------- large screens >=1280px ---------- */
@media (min-width:1280px) {
  .aihero-inner { grid-template-columns: 1fr 520px; gap:40px; }
  .aitabs-inner { grid-template-columns: 1fr 620px; gap:100px; }
  .aihero-title { font-size:40px; }
  .aitabs-right-title { font-size:22px; }
  .aitools-related-grid { grid-template-columns: repeat(2, 1fr); gap:28px; }
}

/* ---------- TEXT-TRUNCATION / safeties for long content ---------- */
/* Ensure long words or links don't break layout */
.aitabs-featured-text, .aitabs-featured-title, .aitools-related-desc {
  word-break: break-word;
}

/* Multi-line clamp for featured text (3 lines) */
.aitabs-featured-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Accessibility focus */
.aitabs-nav-item:focus, .aihero-cta-btn:focus, .aitabs-visit-btn:focus, .aitabs-featured-item:focus {
  outline: 3px solid rgba(244,196,2,0.12);
  outline-offset: 2px;
}

/* small helper to keep consistent gap inside cards */
.aitabs-featured-info { min-width: 0; } /* allow text ellipsis inside grid */

/* Done */
.aihero-left-top {
    display: flex;
    gap: 20px;
    align-items: center;
}

.aihero-tags li a:hover {
    border-color: #f4c402;
    color: #f4c402;
}
	
.aihero-tags li a {
    display: inline-block;
    font-size: 13px;
    color: #bbb;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #333;
}
	
	/* ===== HERO LEFT–RIGHT FIX (33.3% / 66.7%) ===== */

/* Tablets & up */
@media (min-width: 769px) {
  .aihero-inner {
    grid-template-columns: 33.33% 66.67%;
  }

  .aihero-left {
    width: 100%;
  }

  .aihero-right {
    width: 100%;
  }
}

/* Larger desktops */
@media (min-width: 1025px) {
  .aihero-inner {
    grid-template-columns: 33.33% 66.67%;
  }
}

/* XL screens */
@media (min-width: 1280px) {
  .aihero-inner {
    grid-template-columns: 33.33% 66.67%;
  }
}