/* ==========================================================================
   compare-raseed-vs-others.css
   Styles for the multi-vendor "Raseed Comparison Hub" table used on
   compare-raseed-vs-others.php. Namespaced under .cro- / .comp- so it does
   not collide with global site styles (hero, badges, buttons etc. are
   expected to come from the site's shared stylesheet).
   ========================================================================== */

:root{
  --cro-green:#1f9d55;
  --cro-green-dark:#137a3f;
  --cro-navy:#132a4d;
  --cro-navy-2:#1c3a66;
  --cro-ink:#1b2430;
  --cro-muted:#5b6b7c;
  --cro-line:#e4e9ef;
  --cro-good:#1f9d55;
  --cro-bad:#d64545;
  --cro-highlight:#eaf7ef;
}


.breadcrumb-container {
            margin-bottom: 1.5rem;
            margin-top:50px;
        }

        .custom-breadcrumb {
            font-size: 0.95rem;
            font-weight: 600;
            color: #475569;
            display: block;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
            line-height: 1.5;
        }

        .custom-breadcrumb a {
            color: #475569;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .custom-breadcrumb a:hover {
            color: #2baa4b;
        }

        .custom-breadcrumb .crumb-separator {
            color: #2baa4b;
            font-weight: 700;
            font-size: 1.1rem;
            user-select: none;
        }

        .custom-breadcrumb .crumb-active {
            color:#2baa4b;
            font-weight: 600;
        }



body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #f8fafc; /* slate-50 */
      color: #1e293b; /* slate-800 */
      -webkit-font-smoothing: antialiased;
    }

    /* Custom Utilities */
    .text-slate-500 { color: #64748b; }
    .text-slate-600 { color: #475569; }
    .text-slate-700 { color: #334155; }
    .text-slate-800 { color: #1e293b; }
    .text-slate-900 { color: #0f172a; }
    
    .bg-slate-50 { background-color: #f8fafc; }
    .bg-slate-100 { background-color: #f1f5f9; }
    
    .text-brand-600 { color: #2563eb; }
    .text-brand-700 { color: #1d4ed8; }
    .text-accent-400 { color: #34d399; }
    .text-accent-600 { color: #059669; }

    .fw-extrabold { font-weight: 800; }
    
    .tracking-tight { letter-spacing: -0.025em; }
    .tracking-widest { letter-spacing: 0.1em; }

    /* Gradients */
    .text-gradient {
      background: linear-gradient(to right, #193f70, #059669); /* brand-600 to accent-600 */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .bg-gradient-brand {
      background: linear-gradient(to right, #184070, #3f68b0); /* brand-600 to brand-700 */
      color:white;
      border: none;
    }
    .bg-gradient-brand:hover {
      background: linear-gradient(to right, #3f68b0, #184070); /* brand-700 to brand-900 */
      color: white;
    }
    
    .bg-gradient-dark {
      background: linear-gradient(to top right, #0f172a, #020617); /* slate-900 to slate-950 */
      color: white;
    }

    /* Components */
    .hero-glow {
      background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 60%);
      background-color: #fff;
    }

    .badge-brand {
      background-color: #f0f9ff; /* brand-50 */
      color: #1d4ed8; /* brand-700 */
      border: 1px solid #e0f2fe; /* brand-100 */
      
    }

    .card-custom {
      border-radius: 1.5rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      border: 1px solid #e2e8f0; /* slate-200 */
      background-color: #fff;
    }

    .btn-custom {
      border-radius: 0.75rem;
      padding: 1rem 2rem;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .btn-custom:hover {
      transform: translateY(-2px);
    }

    .icon-circle-rose {
      width: 24px;
      height: 24px;
      background-color: #fff1f2; /* rose-50 */
      color: #f43f5e; /* rose-500 */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .icon-circle-accent {
      width: 24px;
      height: 24px;
      background-color: rgba(16, 185, 129, 0.1);
      color: #059669; /* accent-600 */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    /* Custom Form Range */
    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      background: transparent;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: #2563eb; /* brand-600 */
      cursor: pointer;
      margin-top: -6px; 
    }
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      cursor: pointer;
      background: #e2e8f0; /* slate-200 */
      border-radius: 4px;
    }


/* ---------- Outer wrapper / card ---------- */
.cro-outer-wrapper{
  max-width:1600px;
  margin:1rem auto 3rem;
  padding:0 1rem;
}

.cro-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(19,42,77,.08);
  overflow:hidden;
  padding:2rem 1.5rem 1.5rem;
}

.cro-heading{
  text-align:center;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:800;
  color:var(--cro-ink);
  margin-bottom:.4rem;
}

.cro-subheading{
  text-align:center;
  color:var(--cro-muted);
  font-size:.95rem;
  max-width:620px;
  margin:0 auto 1.75rem;
}

/* ---------- Toolbar ---------- */
.cro-toolbar{
  background:#f8fafc;
  border:1px solid var(--cro-line);
  border-radius:14px;
  padding:1.1rem 1.25rem;
  margin-bottom:1.5rem;
}

.cro-search{
  position:relative;
}
.cro-search i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--cro-muted);
}
.cro-search input{
  padding-left:38px;
  border-radius:10px;
  border:1px solid var(--cro-line);
}
.cro-search input:focus{
  border-color:var(--cro-green);
  box-shadow:0 0 0 .2rem rgba(31,157,85,.15);
}

.cro-chip{
  border:1px solid var(--cro-line);
  background:#fff;
  color:var(--cro-ink);
  font-size:.82rem;
  font-weight:600;
  padding:.35rem .8rem;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
  user-select:none;
}
.cro-chip.active{
  background:var(--cro-green);
  border-color:var(--cro-green);
  color:#fff;
}
.cro-chip.cro-chip-primary.active{
  background:var(--cro-navy);
  border-color:var(--cro-navy);
}
.cro-chip:hover{ transform:translateY(-1px); }

.cro-toggle-label{
  font-size:.85rem;
  font-weight:600;
  color:var(--cro-muted);
}

/* ---------- Table wrapper ---------- */
.cro-table-wrap{
  background:#fff;
  border:1px solid var(--cro-line);
  border-radius:14px;
  overflow:hidden;
}
.cro-scroll{
  overflow-x:auto;
  max-height:75vh;
  overflow-y:auto;
}

table.cro-table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:1180px;
}
.cro-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--cro-navy);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  padding:.9rem .85rem;
  white-space:nowrap;
  border-bottom:2px solid var(--cro-navy-2);
}
.cro-table thead th.cro-col-feature{
  left:0;
  z-index:4;
  text-align:left;
  min-width:230px;
}
.cro-table thead th.cro-col-raseed{
  color:#fff;
  background:var(--cro-green-dark);
}

.cro-table tbody td, .cro-table tbody th{
  padding:.7rem .75rem;
  font-size:.83rem;
  border-bottom:1px solid var(--cro-line);
  text-align:center;
  vertical-align:middle;
}
.cro-table tbody th.cro-feature-cell{
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
  text-align:left;
  font-weight:600;
  color:var(--cro-ink);
  white-space:nowrap;
}
.cro-table tbody tr:nth-child(even) td,
.cro-table tbody tr:nth-child(even) th.cro-feature-cell{
  background:#f8fafc;
}
.cro-table tbody tr:hover td,
.cro-table tbody tr:hover th.cro-feature-cell{
  background:#eef6f1;
}

.cro-table tbody td.cro-col-raseed, .cro-table tbody th.cro-col-raseed{
  background:var(--cro-highlight) !important;
  font-weight:600;
}
.cro-table tbody tr:hover td.cro-col-raseed{
  background:#dcf1e3 !important;
}

/* ---------- Cell content ---------- */
.cro-yes{ color:var(--cro-good); font-size:1.05rem; }
.cro-no{ color:var(--cro-bad); font-size:1.05rem; }
.cro-dash{ color:#b6bfc9; }
.cro-soon{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  color:#a5670a;
  background:#fff3d9;
  padding:.15rem .5rem;
  border-radius:999px;
}
.cro-note{
  display:block;
  font-size:.72rem;
  font-weight:500;
  color:var(--cro-muted);
  margin-top:.15rem;
  white-space:normal;
  line-height:1.2;
}
.cro-text{
  white-space:normal;
  line-height:1.3;
}

.cro-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--cro-muted);
}
.cro-empty i{ font-size:1.4rem; }

/* ---------- Mobile card view ---------- */
.cro-cards{ display:none; padding:1rem; }
.cro-card-item{
  border:1px solid var(--cro-line);
  border-radius:12px;
  margin-bottom:1rem;
  overflow:hidden;
}
.cro-card-head{
  background:var(--cro-navy);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:.7rem .9rem;
}
.cro-card-row{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem .9rem;
  border-top:1px solid var(--cro-line);
  font-size:.85rem;
}
.cro-card-row.cro-is-raseed{ background:var(--cro-highlight); }
.cro-card-row .cro-vendor-name{
  font-weight:600;
  color:var(--cro-muted);
  white-space:nowrap;
}
.cro-card-row .cro-vendor-val{
  text-align:right;
}
.cro-card-row .cro-vendor-val .cro-note{
  text-align:right;
}

@media (max-width:768px){
  .cro-scroll{ display:none; }
  .cro-cards{ display:block; }
}

/* ---------- Shared footer note (also used by compare-section.php) ---------- */
.comp-footer-text{
  text-align:center;
  font-size:.85rem;
  color:var(--cro-muted);
  margin-top:1.5rem;
}
.comp-footer-text a{
  color:var(--cro-green-dark);
  font-weight:600;
  text-decoration:none;
}
.comp-footer-text a:hover{
  text-decoration:underline;
}

@media (max-width:576px){
  .cro-card{
    padding:1.5rem 1rem 1.25rem;
  }
}


/* ==========================================================================
   CTA ACTION BANNER STYLES
   ========================================================================== */

/* Custom Background & Text Utilities (Direct Values) */
.bg-brand-gradient {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.text-brand-700 {
  color: #0a58ca !important;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.pointer-events-none {
  pointer-events: none;
}

/* Button Micro-Interactions & Hover Effects */
.cta-btn {
  transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), 
              box-shadow 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
              background-color 0.25s ease,
              border-color 0.25s ease;
  will-change: transform, box-shadow;
}

.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25) !important;
}

.cta-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2) !important;
}

/* Secondary Outline Button Custom Hover State */
.btn-outline-light.cta-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
}

/* Subtle Background Orb Animation */
@keyframes floatGlow {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.1) translate(-10px, 15px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.bg-glow-orb {
  animation: floatGlow 10s ease-in-out infinite;
}

/* Mobile Responsiveness Adjustments */
@media (max-width: 575.98px) {
  .cta-btn {
    width: 100%;
    text-align: center;
  }
}