/*   SINGLE KIT    */


    :root {
      --kit-primary: #016CE4;
      --kit-secondary: #0056B3;
      --kit-accent: #004494;
      --kit-light: #E6F2FF;
      --kit-bg: #FFFFFF;

      /* Test type colors - Red theme for tests */
      --type-test: rgba(94, 234, 212, 0.3); /* Light teal */
      --type-test-border: #14b8a6;
      --type-test-tag: #0f766e;

      /* Dataset type colors - Pastel with transparency */
      --type-quiz: rgba(255, 179, 186, 0.3); /* Light pink */
      --type-quiz-border: #ff6b7a;
      --type-quiz-tag: #ff3d4f;

      --type-hybrid: rgba(186, 225, 255, 0.3); /* Light blue */
      --type-hybrid-border: #4da3ff;
      --type-hybrid-tag: #0066cc;

      --type-color-matching: rgba(255, 223, 186, 0.3); /* Light orange */
      --type-color-matching-border: #ffaa3d;
      --type-color-matching-tag: #ff8800;

      --type-memory-game: rgba(200, 230, 201, 0.3); /* Light green */
      --type-memory-game-border: #66bb6a;
      --type-memory-game-tag: #388e3c;

      --type-trivia: rgba(225, 190, 231, 0.3); /* Light purple */
      --type-trivia-border: #ba68c8;
      --type-trivia-tag: #8e24aa;

      --type-training: rgba(255, 245, 157, 0.3); /* Light yellow */
      --type-training-border: #ffd54f;
      --type-training-tag: #f9a825;

      --type-assessment: rgba(156, 204, 255, 0.3); /* Light sky blue */
      --type-assessment-border: #4a90e2;
      --type-assessment-tag: #2e5ca6;

      --type-other: rgba(224, 224, 224, 0.3); /* Light gray */
      --type-other-border: #9e9e9e;
      --type-other-tag: #616161;
    }

    body {
      background-color: var(--kit-bg);
    }

    .kit-hero-wrapper {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      margin-bottom: 2rem;
      align-items: start;
    }

    .kit-hero {
      background: linear-gradient(135deg, #ff6b7a 0%, #ff8e95 100%);
      border-radius: 24px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      direction: rtl;
      box-shadow: 0 10px 30px rgba(255, 107, 122, 0.3);
    }

    .kit-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 300px;
      height: 300px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }

    .kit-hero h1 {
      position: relative;
      z-index: 1;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Updated description styles */
    .kit-description {
      font-size: 1.375rem;
      color: rgba(255, 255, 255, 0.95);
      font-weight: 500;
      line-height: 1.7;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
      padding-right: 2rem;
      border-right: 4px solid rgba(255, 255, 255, 0.4);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .kit-detailed-description {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      position: relative;
      z-index: 1;
      max-width: 900px;
    }

    .kit-detailed-description p {
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.9;
      margin-bottom: 1.25rem;
      font-size: 1.125rem;
    }

    .kit-detailed-description p:last-child {
      margin-bottom: 0;
    }

    .kit-detailed-description ul,
    .kit-detailed-description ol {
      margin: 1.25rem 0;
      padding-right: 2rem;
      color: rgba(255, 255, 255, 0.9);
    }

    .kit-detailed-description li {
      margin-bottom: 0.75rem;
      line-height: 1.8;
      font-size: 1.125rem;
    }

    .kit-detailed-description strong {
      color: white;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .kit-detailed-description em {
      color: rgba(255, 255, 255, 0.95);
      font-style: italic;
    }

    .kit-detailed-description::before {
      content: '';
      position: absolute;
      top: -2px;
      right: 30px;
      width: 60px;
      height: 4px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 2px;
    }

    .kit-count-badge {
      position: absolute;
      top: 2rem;
      left: 2rem;
      background: rgba(255, 255, 255, 0.9);
      color: var(--kit-primary);
      padding: 0.5rem 1.5rem;
      border-radius: 30px;
      font-weight: bold;
      font-size: 1.125rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .purchase-panel {
      background: #FFD700;
      background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
      border-radius: 16px;
      padding: 1.5rem;
      border: 1px solid rgba(255, 193, 7, 0.3);
      min-width: 250px;
      text-align: center;
      direction: rtl;
      box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
    }

    .price-tag {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
      margin: 0.5rem 0;
    }

    .purchase-btn {
      background: var(--kit-primary);
      color: white;
      padding: 0.75rem 2rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: inline-block;
      text-decoration: none;
      box-shadow: 0 2px 4px rgba(1, 108, 228, 0.3);
      margin-top: 1rem;
    }

    .purchase-btn:hover {
      background: var(--kit-secondary);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(1, 108, 228, 0.3);
    }

    .purchase-btn:disabled,
    .purchase-btn.disabled {
      background: #E5E7EB;
      color: #9CA3AF;
      cursor: not-allowed;
      box-shadow: none;
    }

    .cards-section {
      background: white;
      border-radius: 24px;
      padding: 2rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      direction: rtl;
    }

    .filter-section {
      background: #f8f9fa;
      border-radius: 16px;
      padding: 1rem 1.5rem;
      margin-bottom: 1.5rem;
      direction: rtl;
    }

    .filter-controls-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .filter-chips-compact {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      flex: 1;
      min-width: 0;
    }

    .search-box-compact {
      position: relative;
      width: 280px;
      flex-shrink: 0;
    }

    .filter-chips {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .filter-chip {
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      background: white;
      color: #333;
      white-space: nowrap;
    }

    .filter-chip:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .filter-chip.active {
      background: var(--chip-bg);
      color: white;
      border-color: var(--chip-border);
    }

    .filter-chip.type-all {
      --chip-bg: #6c757d;
      --chip-border: #5a6268;
    }

    .filter-chip.type-assessment {
      --chip-bg: var(--type-assessment-tag);
      --chip-border: var(--type-assessment-border);
    }

    .filter-chip.type-training {
      --chip-bg: var(--type-training-tag);
      --chip-border: var(--type-training-border);
    }

    .filter-chip.type-trivia {
      --chip-bg: var(--type-trivia-tag);
      --chip-border: var(--type-trivia-border);
    }

    .filter-chip.type-quiz {
      --chip-bg: var(--type-quiz-tag);
      --chip-border: var(--type-quiz-border);
    }

    .filter-chip.type-memory-game {
      --chip-bg: var(--type-memory-game-tag);
      --chip-border: var(--type-memory-game-border);
    }

    .filter-chip.type-color-matching {
      --chip-bg: var(--type-color-matching-tag);
      --chip-border: var(--type-color-matching-border);
    }

    .filter-chip.type-other {
      --chip-bg: var(--type-other-tag);
      --chip-border: var(--type-other-border);
    }

    .filter-chip.type-test {
      --chip-bg: var(--type-test-tag);
      --chip-border: var(--type-test-border);
    }

    .filter-count {
      background: rgba(255, 255, 255, 0.3);
      padding: 0.1rem 0.5rem;
      border-radius: 12px;
      font-size: 0.85rem;
      margin-right: 0.5rem;
    }

    .cards-header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .page-card {
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      border: 3px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      direction: rtl;
    }

    /* Card type-specific styles */
    .page-card.type-quiz {
      background: var(--type-quiz);
      border-color: var(--type-quiz-border);
    }

    .page-card.type-hybrid {
      background: var(--type-hybrid);
      border-color: var(--type-hybrid-border);
    }

    .page-card.type-color-matching {
      background: var(--type-color-matching);
      border-color: var(--type-color-matching-border);
    }

    .page-card.type-memory-game {
      background: var(--type-memory-game);
      border-color: var(--type-memory-game-border);
    }

    .page-card.type-trivia {
      background: var(--type-trivia);
      border-color: var(--type-trivia-border);
    }

    .page-card.type-training {
      background: var(--type-training);
      border-color: var(--type-training-border);
    }

    .page-card.type-assessment {
      background: var(--type-assessment);
      border-color: var(--type-assessment-border);
    }

    .page-card.type-test {
      background: var(--type-test);
      border-color: var(--type-test-border);
    }

    .page-card.type-other {
      background: var(--type-other);
      border-color: var(--type-other-border);
    }

    .page-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    }

    .page-type {
      display: inline-block;
      padding: 0.5rem 1.25rem;
      color: white;
      border-radius: 25px;
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .page-type.type-quiz { background: var(--type-quiz-tag); }
    .page-type.type-hybrid { background: var(--type-hybrid-tag); }
    .page-type.type-color-matching { background: var(--type-color-matching-tag); }
    .page-type.type-memory-game { background: var(--type-memory-game-tag); }
    .page-type.type-trivia { background: var(--type-trivia-tag); }
    .page-type.type-training { background: var(--type-training-tag); }
    .page-type.type-assessment { background: var(--type-assessment-tag); }
    .page-type.type-other { background: var(--type-other-tag); }
    .page-type.type-test { background: var(--type-test-tag); }

    .page-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 0.75rem;
      line-height: 1.4;
    }

    .page-title.ltr {
      direction: ltr;
      text-align: left;
    }

    .page-description {
      color: #4a4a4a;
      font-size: 0.95rem;
      margin-bottom: 1.25rem;
      line-height: 1.6;
    }

    .page-stats {
      display: flex;
      gap: 1.5rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid rgba(0, 0, 0, 0.1);
    }

    .page-stat {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: #333;
      font-weight: 500;
    }

    .loading-skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: 16px;
      border: 3px solid #e0e0e0;
    }

    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Search box styles */
    #searchBox:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    #searchBox:hover {
      border-color: #cbd5e1;
    }

    #clearSearch:hover {
      background: #cbd5e1;
      color: #475569;
    }

    /* Highlight search matches */
    .search-highlight {
      background: #fef3c7;
      padding: 0 2px;
      border-radius: 2px;
    }

    /* NEW Badge Styles */
    .new-badge {
      position: absolute;
      top: 10px;
      left: 10px;  /* Changed from right to left for RTL */
      background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: bold;
      text-transform: uppercase;
      box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
      animation: pulse 2s infinite;
      z-index: 10;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
      }
    }

    /* Recent Additions Section */
    .recent-additions-section {
      margin-bottom: 1rem;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid #e2e8f0;
      direction: rtl;
    }

    .section-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .section-count {
      background: #f1f5f9;
      color: #64748b;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.875rem;
      font-weight: 500;
    }

    /* Grid adjustments for recent additions */
    .recent-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 0.5rem;
    }

    /* Hide recent section if empty */
    .recent-additions-section:empty {
      display: none;
    }

    /* Restricted card styling */
    .restricted-card {
      opacity: 0.7;
      position: relative;
    }

    .restricted-card:hover {
      transform: none !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .restricted-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.3);
      pointer-events: none;
    }

    /* Responsive styles */
    @media (max-width: 1024px) {
      .filter-controls-row {
        flex-direction: column;
        align-items: stretch;
      }

      .search-box-compact {
        width: 100%;
      }
    }

    @media (max-width: 768px) {
      .kit-hero-wrapper {
        grid-template-columns: 1fr;
      }

      .kit-count-badge {
        position: static;
        display: inline-block;
        margin-bottom: 1rem;
      }

      .purchase-panel {
        margin-top: -1rem;
      }

      .cards-grid {
        grid-template-columns: 1fr;
      }

      .kit-hero {
        padding: 2rem;
      }

      .kit-description {
        font-size: 1.125rem;
        padding-right: 1.5rem;
      }

      .kit-detailed-description {
        padding: 1.5rem;
      }

      .kit-detailed-description p,
      .kit-detailed-description li {
        font-size: 1rem;
      }
    }