/* ========================================
   PeskTop Design System - UI Modernization
   Phase: UI-P0 + UI-P1 + UI-P2 (Modern Blue)
   Date: 2026-01-16
   ======================================== */

/* CSS Custom Properties (Design Tokens) */
:root {
  /* Primary Colors - Modern Blue (Updated) */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-light: #eff6ff;
  --primary-dark: #1d4ed8;

  /* Secondary Accent - Purple */
  --accent: #8b5cf6;
  --accent-light: #f3f0ff;
  --accent-hover: #7c3aed;

  /* Neutral Colors */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Background Colors */
  --bg-primary: #f2f3f7;
  --bg-card: #ffffff;
  --bg-header: #1e293b;
  --bg-footer: #0f172a;

  /* Text Colors - Improved Contrast */
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-on-dark: #f3f4f6;
  --text-on-brand: #ffffff;

  /* Border Colors */
  --border-color: #e5e7eb;
  --border-light: #f1f5f9;

  /* Status Colors */
  --success: #10b981;
  --success-hover: #059669;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Shadows - Enhanced */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 25px -5px rgba(59, 130, 246, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-blue-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Dynamic Colors (for Dark Mode support) */
  --bg-body: var(--bg-primary);
  --bg-surface: #ffffff;
  --bg-surface-elevated: var(--gray-50);
  --text-primary-dynamic: var(--text-primary);
  --text-secondary-dynamic: var(--text-secondary);
  --border-dynamic: var(--border-color);
}

/* ========================================
   Dark Mode Variables (UI-P2)
   ======================================== */
body.darkmode {
  --bg-body: #12141a;
  --bg-surface: #1a1d27;
  --bg-surface-elevated: #222632;
  --bg-header: #161922;
  --bg-footer: #0e1016;
  --text-primary-dynamic: #e8eaef;
  --text-secondary-dynamic: #b4bcc8;
  --border-dynamic: #2c3140;
  --primary: #6b9dff;
  --primary-hover: #8bb0ff;
  --primary-light: rgba(107, 157, 255, 0.14);
  --gray-50: #1a1d27;
  --gray-100: #222632;
}

/* ========================================
   Focus States for Accessibility (UI-P0-3)
   ======================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.uk-button:focus-visible,
.download_link:focus-visible,
.addcoment:focus-visible,
.downloads_box button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Remove default focus for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Unified Border Radius (UI-P0-5)
   ======================================== */
/* Cards and Containers - 8px */
.program-main_v2,
.gird3 .program-main_v2,
.tags_body,
.program_deatils_v2,
.comments_v2,
.slider_v2,
.dectaion,
.praimry_comment {
  border-radius: var(--radius-lg);
}

/* Buttons and Small Elements - 6px */
.tag,
.program_tag_v2,
.download_link,
.addcoment,
.downloads_box button,
div#download_crackv button,
.download_torrent,
.uk-button,
.see_more button {
  border-radius: var(--radius-md);
}

/* Inputs and Textareas - 6px */
.comment_box textarea,
.search input {
  border-radius: var(--radius-md);
}

/* Card Hover Effects - shadows only, NO transform */
.program-main_v2:hover,
.gird3 .program-main_v2:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ========================================
   Component Polish (UI-P1)
   ======================================== */

/* Enhanced Section Labels */
.section_label_v2 {
  border-right-color: var(--primary);
}

/* Enhanced Tags */
.tag,
.program_tag_v2 {
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.tag:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

/* Enhanced Download Buttons */
.download_link {
  transition: background-color var(--transition-normal), transform var(--transition-fast);
}
.download_link:hover {
  transform: translateY(-2px);
}

/* Enhanced Footer */
.footer a:hover {
  color: var(--primary);
  transition: color var(--transition-normal);
}

/* Enhanced Search Results Dropdown */
div#result2,
div#result4 {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.result-aerch:hover {
  background-color: var(--gray-50);
  transition: background-color var(--transition-fast);
}

/* Enhanced Comments Section */
.praimry_comment {
  transition: box-shadow var(--transition-normal);
}
.praimry_comment:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Smooth Transitions for Interactive Elements */
.section_box,
.program-main,
.downloads_box button,
div#download_crackv button {
  transition: all var(--transition-normal);
}

/* ========================================
   Modern Card Enhancements (UI-P2)
   IMPORTANT: DO NOT change dimensions (width, height, padding, margin)
   Only visual enhancements (colors, shadows, borders)
   ======================================== */

/* Enhanced Program Cards - Colors and shadows only */
.program-main_v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
  /* NO transform, NO overflow hidden - keep original layout */
}

/* Subtle hover effect - NO transform */
.program-main_v2:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--primary);
}

/* Program Image Container - Transparent background */
.program_img_v2 {
  background: transparent;
  /* Keep original: float, width (10.8%), height (100%) */
}

body.darkmode .program_img_v2 {
  background: transparent;
}

/* Image styling - keep original size (55px with 15px padding) */
.program_img_v2 img {
  /* Original: width: 55px; padding: 15px; box-sizing: content-box */
  background: transparent;
}

/* Grid View Cards - same approach */
.gird3 .program-main_v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
}

.gird3 .program-main_v2:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--primary);
  /* NO transform */
}

.gird3 .program_img_v2 {
  background: transparent;
  /* NO margin changes - keep original layout */
}

body.darkmode .gird3 .program_img_v2 {
  background: transparent;
}

/* ========================================
   Enhanced Buttons (UI-P2)
   ======================================== */

/* Primary Download Button */
.download_link {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
  color: var(--text-on-brand);
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  position: relative;
  overflow: hidden;
}

.download_link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.download_link:hover::before {
  left: 100%;
}

.download_link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, var(--success-hover) 0%, #047857 100%);
}

/* Secondary Action Buttons */
.downloads_box button {
  background: var(--bg-surface);
  border: 2px solid var(--border-dynamic);
  color: var(--text-primary-dynamic);
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.downloads_box button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.downloads_box button:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.downloads_box button:hover::after {
  opacity: 0.05;
}

/* Torrent Button */
.download_torrent {
  background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}

.download_torrent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45);
}

/* ========================================
   Enhanced Sidebar & Tags (UI-P2)
   ======================================== */

/* Tags Sidebar */
.tags_body {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.tags_header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Tags List - Original Layout with Enhanced Effects */
.tags_list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags_list ul li {
  border-bottom: 1px solid var(--border-dynamic);
  transition: all var(--transition-fast);
}

.tags_list ul li:last-child {
  border-bottom: none;
}

.tags_list ul li a {
  display: block;
  padding: 8px 14px;
  color: var(--text-primary-dynamic);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
  position: relative;
  font-size: 0.9rem;
}

/* RTL border */
[dir="rtl"] .tags_list ul li a,
#rtl .tags_list ul li a {
  border-left: none;
  border-right: 3px solid transparent;
}

.tags_list ul li a:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
  padding-left: 18px;
}

[dir="rtl"] .tags_list ul li a:hover,
#rtl .tags_list ul li a:hover {
  border-left-color: transparent;
  border-right-color: var(--primary);
  padding-left: 14px;
  padding-right: 18px;
}

/* Checkbox icon (fa-square / fa-check-square) */
.tags_list ul li a i.fas.fa-square,
.tags_list ul li a i.fas.fa-stop {
  color: var(--gray-400);
  margin-right: 10px;
  transition: all var(--transition-fast);
}

.tags_list ul li a i.fas.fa-check-square {
  color: var(--primary);
  margin-right: 10px;
}

/* RTL: checkbox floats LEFT (end of line in RTL) - mirrors LTR layout */
[dir="rtl"] .tags_list ul li a i.fas.fa-square,
[dir="rtl"] .tags_list ul li a i.fas.fa-stop,
[dir="rtl"] .tags_list ul li a i.fas.fa-check-square,
#rtl .tags_list ul li a i.fas.fa-square,
#rtl .tags_list ul li a i.fas.fa-stop,
#rtl .tags_list ul li a i.fas.fa-check-square {
  float: left !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.tags_list ul li a:hover i.fas.fa-square,
.tags_list ul li a:hover i.fas.fa-stop {
  color: var(--primary);
}

/* Tag icon (icon_tag) - on the right for LTR, stays on right for RTL too */
.tags_list ul li a i#icon_tag {
  float: right;
  margin-top: 2px;
  margin-left: 10px;
  color: var(--gray-400);
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

/* RTL: icon_tag stays on RIGHT (start of line in RTL) */
[dir="rtl"] .tags_list ul li a i#icon_tag,
#rtl .tags_list ul li a i#icon_tag {
  float: right;
  margin-left: 10px;
  margin-right: 0;
}

/* Clearfix for proper float behavior */
.tags_list ul li a::after {
  content: "";
  display: table;
  clear: both;
}

.tags_list ul li a:hover i#icon_tag {
  color: var(--primary);
  transform: scale(1.1);
}

/* Platform icon colors */
.tags_list ul li a i.fab.fa-windows { color: #0078d4; }
.tags_list ul li a i.fab.fa-apple { color: #555; }
.tags_list ul li a i.fab.fa-linux { color: #f5a623; }
.tags_list ul li a i.fab.fa-android { color: #3ddc84; }

/* Separator HR */
.tags_list ul hr {
  margin: 8px 0;
  border: none;
  border-top: 1px solid var(--border-dynamic);
}

/* Tag Pills */
.program_tag_v2,
.tag {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
  border: 1px solid transparent;
}

.tag:hover {
  background: var(--primary);
  color: var(--text-on-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   Enhanced Slider & Comments (UI-P2)
   ======================================== */

/* Slider Container */
.slider_v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Slideshow Navigation */
.uk-slidenav-custom {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.uk-slidenav-custom:hover {
  background: var(--primary);
  transform: translateY(-50%) scale(1.15);
  box-shadow: var(--shadow-blue-glow);
}

/* Comments Section */
.comments_v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
}

.praimry_comment {
  background: var(--bg-body);
  border: 1px solid var(--border-dynamic);
  transition: all var(--transition-normal);
}

.praimry_comment:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

/* Comment Form */
.comment_box textarea {
  background: var(--bg-surface);
  border: 2px solid var(--border-dynamic);
  color: var(--text-primary-dynamic);
  transition: all var(--transition-fast);
}

.comment_box textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  outline: none;
}

.addcoment {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--text-on-brand);
  font-weight: 600;
  border: none;
}

.addcoment:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
}

/* ========================================
   Enhanced Section Labels (UI-P2)
   ======================================== */

/* UI-P2 styles - overridden by UI-P3.6 at line ~1587 */
.section_label_v2 {
  background: var(--bg-surface);
}

/* ::after disabled - was causing alignment issues */
.section_label_v2::after {
  display: none !important;
}

.section_label_v2 i {
  color: var(--primary);
}

/* ========================================
   Enhanced Details Section (UI-P2)
   ======================================== */

.program_deatils_v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
  box-shadow: var(--shadow-sm);
}

.deatlis_lable_v2 {
  color: var(--text-primary-dynamic);
  border-bottom: 2px solid var(--primary);
}

.dectaion {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-dynamic);
}

.dectaion h2 {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600;
  color: var(--text-primary-dynamic);
  position: relative;
  padding-bottom: var(--space-2);
}

.dectaion h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
}

/* ========================================
   Mobile Responsiveness Enhancements (UI-P2)
   ======================================== */

@media (max-width: 750px) {
  .program-main_v2 {
    border-radius: var(--radius-md);
  }

  /* Touch-friendly buttons */
  .download_link,
  .downloads_box button {
    min-height: 48px;
  }

  /* Mobile card layout - Grid based like example */
  .program-x5 {
    height: auto !important;
    min-height: 130px !important;
    margin-bottom: 10px !important;
  }

  .section_label_v2 {
    height: 60px !important;
  }

  .program-main_v2 {
    display: grid !important;
    grid-template-columns: 65px 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    padding: 12px !important;
    gap: 3px 12px !important;
    align-items: start !important;
  }

  /* Icon - row 1-3, col 1 */
  .program_img_v2 {
    grid-row: 1 / 4 !important;
    grid-column: 1 !important;
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    align-self: start !important;
    float: none !important;
  }

  .program_img_v2 img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 10px !important;
  }

  /* x1 section - spans rows */
  .program-main_v2 .x1 {
    grid-row: 1 / 3 !important;
    grid-column: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
  }

  .program_name_v2 .text-name {
    font-size: 0.88em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 3px !important;
  }

  .program_name_v2 .dec-short {
    display: block !important;
    font-size: 0.72em !important;
    color: var(--text-secondary-dynamic) !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .program_tag_v2 {
    display: inline-flex !important;
    font-size: 0.58em !important;
    padding: 2px 6px !important;
    margin-top: 4px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  /* x2 - Platform & downloads - row 3 */
  .program-main_v2 .x2 {
    grid-row: 3 !important;
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    padding: 5px 0 0 !important;
    font-size: 0.72em !important;
    color: var(--text-secondary-dynamic) !important;
  }

  .program-main_v2 .x2 > i {
    font-size: 1.1em !important;
    margin: 0 !important;
  }

  .program-main_v2 .x2 .downloads_v2 {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* x3 - Size - top right */
  .program-main_v2 .x3 {
    grid-row: 1 !important;
    grid-column: 3 !important;
    width: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    font-size: 0.82em !important;
    font-weight: 600 !important;
    color: var(--text-primary-dynamic) !important;
    float: none !important;
  }
}

@media (max-width: 450px) {
  .program-main_v2 {
    grid-template-columns: 50px 1fr auto !important;
    gap: 3px 10px !important;
  }

  .program_img_v2 {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
  }

  .program_img_v2 img {
    width: 45px !important;
    height: 45px !important;
  }

  .program_name_v2 .text-name {
    font-size: 0.82em !important;
  }

  .program-main_v2 .x3 {
    font-size: 0.75em !important;
  }
}

/* ========================================
   Utility Classes (UI-P2)
   ======================================== */

.text-primary-color { color: var(--primary); }
.text-accent-color { color: var(--accent); }
.bg-primary-light { background: var(--primary-light); }
.bg-surface { background: var(--bg-surface); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }

/* Page Heading - replaces inline styles */
.page-heading {
  color: var(--text-secondary-dynamic);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

/* ========================================
   Original Styles
   ======================================== */
body,h2,h3 {font-family: 'IBM Plex Sans Arabic',sans-serif;}#hover_logout:hover,.background_green,.fff,.uk-alert-danger {color: #fff!important;}.header,div#cc {width: 100%;}#ltr .gird_v,#ltr .header_2 ul li,#ltr .lang,#ltr .section_label_v2 button,#ltr .section_label_v2 div,.down_file-2,.logo,.search span,div#cc,ul.uk-pagination {float: right;}.program-main:hover,a:hover:not(#wpadminbar a){opacity:.7;}.header_3 ul li,.tags_list ul li {list-style: none;padding-bottom: 15px;}.header,.header_2 ul li,.header_3 ul li,.praimry_comment,.program-x5,.program_slidshow,.tags_side,.x1 {box-sizing: border-box;}#lang,#user-icon {width: 30px;height: 30px;margin-top: -5px;}.gr-g {background: -webkit-linear-gradient(#fff,#4a4a4a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}#menu_ico,#result2,.bluer,.hide-g {display: none;}.result-aerch,.text-name {display: block;text-shadow: none;overflow: hidden;direction: ltr;text-overflow: ellipsis;white-space: nowrap;}.background_green {background: #33d296!important;}f .uk-alert-success {background: #32d296!important;color: #edfbf6!important;}p {color: #545454;font-size: .875em;line-height: 1.71429em;}*+.uk-alert {margin-top: 15px!important;}.uk-alert {margin-bottom: 0!important;}body {background: #f2f3f7;color: #323e56!important;font-size: 15px;}.lang a,.sections li a,a {color: #323e56;}.uk-alert-danger {background: #ffa9ba8a!important;}.comment_button button:hover,.sections button:hover {background: #fff;}.footer .uk-grid {margin-left: 0!important;}.uk-table th {text-align: right!important;}a {transition: .2s;}.sections .uk-dropdown {padding: 0!important;}div#cc a {width: 104%;margin-top: 5px;}.uk-button-primary {background-color: var(--primary)!important;}.uk-modal-dialog {border-radius: 5px;}#toggle-hover li,.reports_button {margin-top: 10px;}.reports_button button {color: var(--bg-header)7a;border: 0;font-size: 11px;}.uk-card-default {box-shadow: unset;}a:hover {text-decoration: none!important;}.uk-dropdown {box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%),0 2px 9px 0 rgb(0 199 197 / 9%);border-radius: 8px;}.header_3.uk-dropdown.uk-open.uk-dropdown-bottom-right {margin-top: 10px!important;padding: 10px;}.header {height: 60px;background: var(--bg-header);padding-top: 8px;padding-bottom: 5px;box-shadow: 0 10px 40px 0 rgb(243 243 243),0 2px 9px 0 rgb(106 51 178 / 18%);}.sections .uk-button-default {color: #fff;border-radius: 5px;}.mainheder {padding: 0 20px;}.logo a {display: flex;}.uk-list-muted>::before {color: #999!important;display: none!important;}.logo img {width: 45px;margin-top: -2px;}#ltr .sections,.search {float: right;margin-right: 20px;}.search span {z-index: 1000;top: -14px!important;background: var(--primary);padding: 10px;height: 20px;border-radius: 0 5px 5px 0;width: 20px!important;color: #fff!important;margin-bottom: -12px;}.program_deatils i,.program_deatils span {color: var(--bg-header)7a;margin-left: 5px;}.download_link span {margin-left: 5px;}#ltr .program_deatils i,#ltr .program_deatils span {color: var(--bg-header)7a;margin-right: 5px;}.uk-search-default .uk-search-icon-flip~.uk-search-input {padding-right: 45px!important;}#ltr .search,.sections {float: left;margin-left: 20px;}#ltr .down_file-2,#ltr .logo,#ltr .x1,#ltr .x2,#ltr ul.uk-pagination,.gird_v,.lang {float: left;}.search input {background: #fff!important;border-radius: 5px;margin-top: -14px;position: absolute;z-index: 999;font-size: .8125em;}.search form {background: #f0f8ff;border-radius: 29px;width: 400px;text-align: right;}.lang button {border: 0!important;padding: 0;}.section_box,.tag {border-radius: 5px;}.lang button img {width: 40px;height: 40px;border-radius: 30px;}::-webkit-input-placeholder {text-align: right;}:-moz-placeholder {text-align: right;}.header_2 a:hover {opacity: 1;}.header_2 ul li i {font-size: 1.8em;padding: 0 10px;cursor: pointer;}.header_2 ul {margin: 0;padding: 0;}.header_2 ul li {list-style: none;float: left;font-size: .875em;color: #f3f4f6;border-left: .5px solid #9a9fa10d;padding-left: 15px;padding-right: 15px;padding-top: 25px;height: 65px;line-height: 1em;margin-top: -13px;transition: .1s;}.header_2 ul li button {color: #f3f4f6;}.header_2 ul li button:hover,.header_2 ul li:hover,.header_2 ul li:hover>.header_2 ul li a {background: var(--primary);color: #fff;}.header_3 ul li {float: NONE!important;color: #9a9fa1;border-left: unset!important;padding-left: 5px;padding-right: 5px;padding-top: 15px!important;height: unset!important;}.section_box {width: 23%;float: left;height: 57px;background: #fff!important;box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%),0 2px 9px 0 rgb(0 199 197 / 9%);text-align: center;padding-top: 33px!important;margin: 1%;transition: .2s;}.section_box i {font-size: 3em;position: absolute;opacity: .2;float: right;margin-right: -55px;margin-top: -11px;}.tag {float: right;color: #fff;background: var(--primary);padding: 8px;margin-left: 6px;margin-bottom: 6px;}.section_label {width: 100%;background: #fff;height: 33px;float: right;padding-top: 10px;border-radius: 9px 9px 0 0;text-align: center;box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%),0 2px 9px 0 rgb(0 0 0 / 9%);margin-top: 20px;margin-bottom: 10px;}#ltr ._2down,#ltr .down-page p,#ltr .down_file-1,#ltr .footer_title,#ltr .search form,.program_name,div#flag_icon,div#footer_image {text-align: left;}.program-main,.program_deatils {box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%),0 2px 9px 0 rgb(0 199 197 / 9%);}#yello {color: #ff0;}.coments_all,.header_content {float: right;width: 100%;}@-webkit-keyframes mover {0% {transform: translateY(0);}100% {transform: translateY(-5px);}}@keyframes mover {0% {transform: translateY(0);}100% {transform: translateY(-5px);}}.program-x4 {width: 33.33333%;float: right;height: 65px;margin-bottom: 5px;}.program-main {background: #fff;height: 100%;transition: .2s;color: #323e56;margin-right: 5px;overflow: hidden;}.program_img {float: left;width: 15%;height: 100%;margin-right: 3px;}.program_img img {width: 100%;height: 100%;padding: 8px;}.program_name {width: 84%;text-transform: uppercase;font-size: 1em;float: left;margin-bottom: 3px;}.text-name {font-weight: 700;font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;color: #0009;}.size_right,.x2 {font-weight: 600;}.program_tag,.program_version {float: left;color: #fff;padding: 3px;margin-right: 4px;font-size: .7em;}.program_version {background: var(--primary);margin-bottom: 4px;}.program_tag {background: #00a8ff;margin-left: 4px;}.sys {background: #fff;font-size: .7em;color: #95afc0;}.download_button button {font-size: .9em;top: 0;padding: 0;border-radius: 5px;background: var(--primary);color: #fff;border-color: var(--primary);width: 85px;display: none;}.downloads_box img {width: 23px;-webkit-animation: 1s infinite alternate mover;animation: 1s infinite alternate mover;}.download_button {float: right;margin-top: -11px;margin-right: 5px;}.footer,.footer_2 {margin-top: 40px;width: 100%;}.footer {border: none;transition: .3s;background: #1e2024;color: #fff;padding-top: 50px;padding-bottom: 0;float: right;}html {background: #f2f3f7!important;}.footer li {font-size: 13px;}.footer a,div#facebook i,div#twitter i {color: #bbb;}.footer_title {font-family: 'IBM Plex Sans Arabic',sans-serif;color: #636974;}.footer_2 {text-align: center;padding: 18px 0;background: #21282a;color: #bbb;font-size: 13px;}div#flag_icon img {width: 23px;margin-right: 7px;}.page {float: left;width: 100%;margin-top: 20px;}div#program_show {background: #fff0 !important;box-shadow: none;padding: unset!important;}.program_show_logo {float: right;width: 70%;height: 205px;text-align: center;margin-bottom: 10px;}h1.program_show_title {margin: 5px 0;font-size: 33px;padding-right: 10px;text-transform: uppercase;}.program_show_version_downlods {color: #57878c;}.program_slidshow {float: right;width: 70%;padding-left: 20px;}.program_deatils {background: #fff;margin-top: 5px;}.program_deatils.program_deatils_v2 li {font-size: .8125em;line-height: 20px;padding: 15px 0;}.program_deatils_v2 .uk-list>:nth-child(n+2) {margin-top: 0;border-top: 1px solid #f5f5f5;}.program_deatils_v2 .uk-float-left {color: #a5a5a5e0;}.program_deatils_size {width: 30%;float: right;margin-top: 37px;}.download_program_main,.downloads_box button {margin: 5px 0;width: 70%;color: #fff;float: left;border-radius: 5px;text-align: center;}.download_program_main {padding-top: 10px;background: #b7f2a5;min-height: 41px;font-size: 18px;}.downloads_box button {background: #4cd137;min-height: 60px;font-size: 17px;transition: .2s;box-shadow: 0 5px 10px rgb(47 191 160 / 24%)!important;border: 3px solid transparent;}.download_option img,i#icon_tag {width: 25px;}.downloads_box i {-webkit-animation: 1s infinite alternate mover;animation: 1s infinite alternate mover;font-size: 25px;}.downloads_box button:focus,.downloads_box button:hover {background-color: var(--success-hover);color: #fff;border-color: var(--success);transition: var(--transition-normal);}#download_crackv button:focus,#download_crackv button:hover {border-color: #9399a7!important;}.download_option .uk-badge {background: #8adcdc!important;}.downloads_box {width: 50%;float: right;height: 81px;}.active,.section_box:hover {background: var(--primary)!important;color: #fff!important;}div#download_crackv button {float: right;margin-right: 10px;background: #888;box-shadow: 0 5px 10px rgb(113 113 113 / 17%)!important;border: 3px solid transparent;}.slider {float: right;width: 96%;padding: 0 15px 15px;}.section_label i,.section_label_v2 i,.see_more i {color: var(--primary);}.program_show_version_downlods .uk-breadcrumb {margin-right: 40%;margin-bottom: 5px;}.program_show_version_downlods p {margin-top: -10px;}.program_deatils {padding: 18px;}.deatlis_lable {width: 110%;height: 31px;background: var(--success);margin-top: -18px;margin-right: -19px;color: #fff;text-align: center;padding-top: 10px;}.comments {margin-top: 20px;width: 98.3%;float: right;}.comment_box textarea {background: #fefefe;padding-top: 18px!important;border: 0;margin-bottom: 10px;border: 1px solid #0000001a;border-radius: 5px;}.comments button {float: left;background: var(--primary);color: #fff;}.praimry_comment {background: #fff;float: right;width: 100%;border-radius: 5px;margin-top: 10px;padding: 20px;border: 1px solid #ebebeb;font-size: 13px;line-height: 20px;}.alert,.comment_content {margin-top: 20px;float: right;}div#result2,div#result4 {position: absolute;z-index: 9999;text-align: left;border-radius: 5px;}#edd {position: absolute;bottom: 0;color: var(--primary);font-size: 3em;}.alert {width: 104%;}.comment_name a {color: #337ab7;float: right;font-weight: 700;}.comment_time {margin-right: 5px;float: right;}.comment_content {width: 100%;}.comment_icon {float: right;width: 40px;height: 40px;margin-left: 5px;}.comment_icon img {border-radius: 25px;height: 100%;}.icon_admin_add img {width: 100px;margin-bottom: 20px;}div#result2 {background: #fff;width: 400px;box-shadow: 0 10px 40px 0 rgb(0 0 0 / 25%),0 2px 9px 0 rgb(0 199 197 / 9%);margin-top: 30px;}.profile_heading,div#result4 {box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%),0 2px 9px 0 rgb(0 199 197 / 9%);background: #fff;}div#result4 {margin-top: 25px;display: none;width: 89%;}.result-aerch {width: 94%;padding: 15px 10px 10px;height: 40px;color: #323e56;}.result-aerch img {width: 40px;margin-right: 5px;}#cus form {background: #f0f8ff00;width: 97%;text-align: right;margin-top: 10px;}div#cus {width: 100%;margin: 0;}img#img_table {width: 30px;}.page,.sec2 {min-height: 600px;}.profile_cover img {width: 100%;margin-top: -112px;filter: blur(4px);}.profile_cover {height: 250px;float: right;overflow: hidden;}.profile_heading {width: 100%;height: 300px;overflow: hidden;float: right;overflow-x: hidden;position: relative;border-radius: 8px;padding-bottom: 20px;}.profile_pic {position: absolute;bottom: 20px;overflow: hidden;right: 20px;}.profile_pic img {width: 150px;float: right;height: 150px;border-radius: 140px;}#user-icon {border-radius: 15px;box-sizing: content-box;}.user_info {position: absolute;bottom: 70px;right: 180px;}.user_name {font-size: 2em;color: #fff;text-shadow: 2px 2px #333;}.user_date {text-shadow: 1px 1px 1px #333;color: #d8d8d8;}div#replay {padding: 15px;background: #fff;width: 93%;margin-right: 20px;}.result-aerch i {float: right;padding-top: 10px;font-size: 1.2em;color: #d6d6d6;}#buton_f {background: linear-gradient(#4e69a2,#3b5998 50%);}.base-timer {position: relative;width: 300px;height: 300px;}.base-timer__svg {transform: scaleX(-1);}.base-timer__circle {fill: none;stroke: none;}.base-timer__path-elapsed {stroke-width: 7px;stroke: grey;}.base-timer__path-remaining {stroke-width: 7px;stroke-linecap: round;transform: rotate(90deg);transform-origin: center;transition: 1s linear;fill-rule: nonzero;stroke: currentColor;}.base-timer__path-remaining.green {color: #41b883;}.base-timer__path-remaining.orange {color: orange;}.base-timer__path-remaining.red {color: red;}.base-timer__label {position: absolute;width: 300px;height: 300px;top: 0;display: flex;align-items: center;justify-content: center;font-size: 48px;}.gird3 .dec-short,.sec_tag .program-x4,.see_more,.soldss {width: 100%;}.dectaion p,.program_deatils_size.v2,div#responseDiv3 {margin: 0;}#menu_ico,#serach_ico {color: #9a9a9a;margin-top: 9px;display: none;float: left;margin-left: 12px;}.new_time {background: var(--primary);color: #fff;position: absolute;padding: 3px 8px;opacity: .5;top: 0;right: 0;margin-right: 0;border-radius: 0 0 0 15px;}#ltr .new_time {left: 0;margin-left: 0;border-radius: 0 0 15px;right: unset;}i#admin_icon {font-size: 27px;}div#footer_image img {width: 250px;margin-left: 15px;margin-top: 10px;-webkit-filter: grayscale(100%);filter: grayscale(100%);}.active i {opacity: 1.2;}.comment_name img {width: 13px;margin-top: -3px;}.see_more button {margin-top: 10px;border-radius: 5px;}.see_more {text-align: center;float: left;}.anti_v span {margin: 0;float: right;}.anti_v {text-align: left;margin-top: 10px;}.anti_v img {width: 130px;}i#none-a {animation: none;}.sochil_me {text-align: center;background: #21282a;padding: 5px;font-size: 14px;margin-left: 5px;}.ac-nav,li.uk-disabled {background: var(--primary);}.soldss {float: left;margin-top: 15px;text-align: left;}.size_right {float: right;width: 80px;margin-right: 10px;border-left: 1px solid #9090902e;color: #0000004a;font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;}.sec_tag {width: 32.6%;float: right;margin-top: 0!important;}.ac-nav {color: #fff!important;}.gird3 .program-main_v2,.program-main_v2 {transition: .2s;color: #323e56;overflow: hidden;}.programs_s {width: 70%;float: left;}.tags_side {width: 30%;float: right;padding: 20px 0 20px 20px;}.tags_body {background: #fff;min-height: 400px;padding: 15px;border: 1px solid #ebebeb;}.gird3 .x1,.x1 {padding-top: 10px;}.tags_header {text-align: center;border-bottom: 1px solid var(--bg-header)14;padding-bottom: 10px;}.tags_list ul {padding: 10px;}.tags_list ul li {cursor: pointer;direction: ltr;font-size: .8125em;}.tags_list ul li i {float: left;font-size: 1.2em;color: #cfcfcf;}.tags_list ul li a,ins {color: #666;}.program-x5 {width: 100%;float: right;height: 80px;margin-bottom: 20px;}.program-main_v2 {background: #fff;height: 100%;border: 1px solid #ebebeb;position: relative;}.program_img_v2 {float: right;width: 10.8%;height: 100%;margin-left: 3px;position: relative;}#ltr .program_img_v2 {float: left;margin-right: 3px;}.program_img_v2 img {width: 55px;padding: 15px;box-sizing: content-box;}.x1 {width: 60%;float: right;}.program_name_v2 {text-align: right;float: right;margin-bottom: 3px;width: 100%;}#ltr .program_name_v2 {text-align: left;float: left;}.program_tag_v2 {float: right;color: var(--primary);font-size: .7em;padding: 3px;margin-right: 4px;font-family: 'IBM Plex Sans Arabic',sans-serif;}.sec1 .gird3 .downloads_v2,.sec1 .gird3 .program_name_v2,.x2 {font-size: 1em;}#ltr .program_tag_v2 {float: left;margin-left: 4px;}.x2 {width: 13%;float: right;border-left: 1px;height: 100%;border-right: 1px solid #f3f3f37d;text-align: center;padding-top: 20px;}.section_label_v2,.x3 {text-align: right;float: right;}.gird3 .x3,.x3 {font-size: 1.325em;box-sizing: border-box;}.x2 i {color: #00aceb;font-size: 1.1em;}.x3 {width: 15%;direction: ltr;padding-top: 31px;padding-right: 26px;font-weight: 500;font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;color: var(--bg-header);}.x3 span {font-size: .7em;margin-left: -4px;color: #898989;font-weight: 700;}.section_label_v2 {width: 100%;background: #fff;height: 55px;padding-top: 15px;border-right: 7px solid var(--primary);border-bottom: 1px solid var(--bg-header)14;border-top: 1px solid var(--bg-header)14;border-left: 1px solid var(--bg-header)14;padding-right: 10px;margin-top: 20px;margin-bottom: 20px;font-family: 'IBM Plex Sans Arabic',sans-serif;font-size: 1.1em;box-sizing: border-box;}.gird3 .text-name,.gird3 .x3,.size_large {font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;direction: ltr;font-weight: 700;}.hover-nav div {float: left;margin-top: 5px;}.downloads_v2 {font-size: .7em;}.downloads_v2 i {color: #cecece;}.section_label_v2 button {float: left;margin-top: -7px;margin-left: 0;border: 0;}.section_label_v2 ul li a {color: var(--bg-header);font-size: .8em;}li.uk-disabled.uk-first-column {background: var(--primary);color: #fff;text-align: center;}.download_link a,.download_link a:hover,li.uk-disabled.uk-first-column a {color: #fff;}.uk-pagination>* {flex: none;margin-left: 20px;background: var(--bg-header);color: #fff;padding: 6px 15px 6px 0;height: 20px;border-radius: 3px;}.uk-pagination>*>* {display: block;color: #fff!important;padding: 0!important;transition: color .1s ease-in-out;}.uk-pagination>* {flex: none;padding-left: 15px!important;position: relative;}.gird3.program-x5 {width: 33%;padding: 10px;float: right;height: 300px;margin-bottom: 20px;box-sizing: border-box;}.gird3 .program-main_v2 {background: #fff;height: 100%;padding: 10px;border: 1px solid #ebebeb;}.gird3 .program_img_v2 {float: left;width: 100%;height: 55%;margin-right: 3px;text-align: center;box-sizing: border-box;}.gird3 .program_img_v2 img {width: auto;height: 80%;padding: 15px;text-align: center;}.gird3 .x1 {width: 100%;float: left;}.gird3 .program_name_v2 {text-align: left;float: left;margin-bottom: 3px;width: 100%;}.gird3 .x2 {padding-top: 0;width: 40%;float: left;border-left: 0 solid #f3f3f3;}.gird3 .x3 {width: 55%;float: left;text-align: right;padding-top: 10px;padding-right: 26px;color: var(--bg-header)99;}.gird3 .text-name {text-overflow: ellipsis;display: block;overflow: hidden;color: var(--bg-header);}.gird_v i {color: var(--bg-header)ab;margin-right: 10px;}.sec1 {float: right;width: 100%;margin-bottom: 11px;}.force_right {float: right!important;}.sec1 .gird3.program-x5 {width: 103%!important;padding: 10px;float: right;height: 220px;margin-bottom: 20px;box-sizing: border-box;}.section-headline-wrap {background: 0 0/cover #fff;text-align: left;color: var(--bg-header);border-bottom: 1px solid #ebebeb!important;}.section-headline-inner {width: 100%;padding: 15px 0;direction: ltr;box-sizing: border-box;height: 60px;}.section-headline-wrap h1 {font-size: 23px;color: #4c4c4c;font-weight: 700;float: left;margin: 0;}.bootc a,.size_large {color: var(--bg-header);}.bootc {float: right;font-size: 14px;line-height: initial;}#ltr i#icon_tag,.activea i {color: var(--primary)!important;}.size_large {width: 100%;text-align: center;font-size: 3em;line-height: 1em;}.size_large span {font-size: .6em;}.download_link {font-family: 'IBM Plex Sans Arabic',sans-serif;border: 0;cursor: pointer;width: 100%!important;box-sizing: border-box;}.deatlis_lable_v2,.dectaion h2 {font-family: 'IBM Plex Sans Arabic',sans-serif;color: var(--bg-header);}.donwload_sec {margin-top: 0!important;}.donwload_sec {margin-top: 0!important;}.donwload_sec .icon_100 {text-align: center !important;width: 100% !important;margin-bottom: 15px !important;}.donwload_sec .icon_100 img {display: block !important;margin: 0 auto !important;}.deatlis_lable_v2 {width: 100%;text-align: right;padding-top: 5px;border-bottom: 1px solid #00000014;padding-bottom: 20px;}.deatlis_lable_v2 {width: 100%;text-align: right;padding-top: 5px;border-bottom: 1px solid #00000014;padding-bottom: 20px;}.program_deatils_v2 {background: #fff;border: 1px solid #ebebeb!important;box-shadow: none;padding: 20px 20px 30px;margin-top: 20px;}.comments_v2,.slider_v2 {padding: 20px;margin-top: 0px !important;border: 1px solid #ebebeb;width: 100%;background: #fff;box-sizing: border-box;float: right;}.comments_v2 {margin-top: 20px !important;}._2down,.ads_sq {margin-top: 10px;}.comment_header {margin-bottom: 20px;height: 60px;}.comment_header span {float: right;width: 150px;text-align: right;height: 100%;cursor: pointer;padding-top: 17px;box-sizing: border-box;border-bottom: 5px solid var(--success);}.program_show_logo_img_v2 {width: 100%;text-align: center;margin-bottom: 25px;}.ads_sq,.ads_sq iframe {margin-bottom: 20px;}i#icon_tag {float: right;margin-left: 5px;color: var(--bg-header)7a;}.ads_sq {min-height: 0;}.sec1 .gird3 .x2 {padding-left: 0;font-size: .8em;padding-top: 10px;}.sec1 .gird3 .x3 {padding-top: 10px;padding-right: 0;font-size: 1.325em;}.dec-short {font-size: .7125em;width: 50%;float: right;direction: rtl;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #9c9c9c;}#ltr .dec-short {width: 50%;float: left;direction: ltr;}._2down {margin-bottom: 15px;text-align: right;opacity: .7;}.ad-300x250 {width: 100%;text-align: center;margin-bottom: 20px;}.ads-728x90 {margin-top: 20px;width: 98.3%;float: right;background: #fff;padding: 27px;box-sizing: border-box;}.zip {font-size: 1rem;font-family: 'IBM Plex Sans Arabic',sans-serif;font-weight: 100;border: 1px solid #e4d6576b;opacity: .8;background: #ffeb3b42;margin-top: 5px;}ins {background: #fff0!important;text-decoration: none;}.dectaion h2 {font-size: 1.5em;font-weight: 700;}.dectaion {margin-top: 20px;width: 100%;float: right;background: #fff;padding: 20px;box-sizing: border-box;border-top: 1px solid #ebebeb;}.addcoment,.download_link {background: var(--success);font-size: .875em;color: #fff;box-sizing: border-box;text-align: center;}#lang {border-radius: 22px;}.uk-subnav-pill>.uk-active>a {background-color: var(--primary);color: #fff;}.addcoment {border: 0;padding-right: 15px;padding-left: 15px;border-radius: 5px;}.down_file-1 p {margin-top: -10px;color: var(--success);}.down_file-1 {margin-bottom: 40px;}.down_file-2 p {margin-top: 25px;}.download_link {padding: 15px;border-radius: 5px;float: right;margin-bottom: 9px;}a.download_link:hover {color: #fff;opacity: .5;}.down-page {border: 1px solid #d8d8d89e;padding: 20px;}.a300_600,.a728_90 {width: 100%;padding: 10px;box-sizing: border-box;overflow: hidden;background-color: #fff;margin-top: 10px;text-align: center;}.login-page {width: 50%;margin-top: 20px!important;margin: auto;float: unset;}@media only screen and (max-width:600px) {.down-page {border: 1px solid #d8d8d89e;margin: 0;padding: 30px;border-radius: 10px;}}@media only screen and (max-width:1250px) {.programs_s,.tags_side {width: 100%!important;}}@media only screen and (max-width:1200px) {.program-x4 {width: 33%;}.program_name {width: 69%;}.program_img {float: left;width: 25%;height: 100%;margin-right: 3px;}}@media only screen and (max-width:845px) {.section_box {width: 48%!important;}.program_deatils_size,.program_slidshow {width: 100%;}.program_deatils {margin-left: 10px;}.deatlis_lable {width: 105%;}.program-x4 {width: 33%;}.program_name {width: 69%;}.program_img {float: left;width: 25%;height: 100%;margin-right: 3px;}}@media only screen and (max-width:880px) {.section_box {width: 48%!important;}.program_show_logo {width: 100%;}.hidfrom {display: none;}#menu_ico {display: block;}}@media only screen and (max-width:800px) {.section_box {width: 48%!important;}.program_img_v2 {width: 11.2%;}}@media only screen and (max-width:750px) {.dec-short,.program_img_v2,.text-name,.x2 {text-align: center;}.login-page {width: 100%;margin-top: 20px!important;margin: auto;float: unset;}.donwload_sec {margin-top: 0!important;position: absolute;top: 0;box-sizing: border-box;width: 100%;}.program_slidshow {padding: 355px 0 0;}.comments_v2,.dectaion,.program-x5,.slider_v2,.x1 {padding: 10px;}.x2,.x3 {padding-top: 10px;}.bootc,.logo h1,.logo h3,.search {display: none;}.section-headline-wrap h1 {width: 75%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.program_show_version_downlods .uk-breadcrumb {margin-right: 0;}.program_show_logo {height: 244px;}.coments_all {float: right;width: 100%;}#serach_ico {display: block;}.header_2 ul li {margin-left: 8px;font-size: .7em;}.section_box {width: 100%!important;}.downloads_box button {font-size: 14px;width: 93%;}.program_deatils {margin-left: 0;}.program_deatils_size {width: 100%;margin-top: 20px;}.deatlis_lable {width: 107%;}.comments {width: 99%;}.praimry_comment {width: 100%;}.program-x4 {width: 50%;}.program-x5 {width: 100%;float: right;height: 300px;margin-bottom: 20px;}.dec-short {font-size: .8125em;width: 100%;float: right;}.program_img_v2 {float: left;width: 100%;height: 40%;margin-right: 3px;}.program_img_v2 img {width: auto;height: 80%;padding: 15px;text-align: center;}.x1 {width: 100%;float: left;}.program_name_v2 {float: left;margin-bottom: 3px;width: 100%;}.x2 {width: 50%;float: left;border-left: 1px solid #f3f3f3;height: unset;border-right: 1px solid #f3f3f3;padding-left: 17px;font-size: 1em;font-weight: 600;}.x3 {width: 36%;}}@media only screen and (max-width:450px) {.section_label_v2 .uk-button {padding: 0 10px;}.program_show_logo {height: 305px;}.downloads_box button {font-size: 14px;width: 97%;}.downloads_box {width: 98%;float: right;height: 81px;}.program_img {width: 15%;}.program-x4 {width: 100%;}.program_name {width: 75%;}}#ltr .tags_list ul li i {float: right!important;font-size: 1.2em;color: #cfcfcf;}#ltr i#icon_tag {float: left!important;margin-right: 5px;}#ltr .section_label_v2 {text-align: left;padding-left: 10px;}#arc-widget-container #arc-widget iframe,#arc-widget-container #arc-widget iframe[data-v-54c7f726] {display: none!important;}.vid_l {min-height: auto;text-align: center;}.vid_l.tags_body i {font-size: 43px;color: red;}.content {padding-bottom: 50px;width: 100%;float: right;height: auto!important;}#ltr ::-webkit-input-placeholder {text-align: left;}#ltr :-moz-placeholder {text-align: left;}#ltr .programs_s {width: 70%;float: right;}#ltr .tags_side {width: 30%;float: left;padding: 20px 20px 20px 0;}#ltr .program_slidshow {float: right;padding-right: 0;padding-left: 20px;}#ltr .program_deatils_v2 .uk-float-left {color: #a5a5a5e0;float: right;}#ltr .deatlis_lable_v2 {text-align: left;}#ltr .comment_header span {float: left;text-align: left;}.blob {background: #000;border-radius: 50%;box-shadow: 0 0 0 0 rgb(0 0 0);margin: 8px;height: 10px;width: 10px;transform: scale(1);animation: 2s infinite pulse-black;float: right;}.blob.green {background: #33d9b2;box-shadow: 0 0 0 0 #33d9b2;animation: 2s infinite pulse-green;}@keyframes pulse-green {0% {transform: scale(.95);box-shadow: 0 0 0 0 rgba(51,217,178,.7);}70% {transform: scale(1);box-shadow: 0 0 0 10px rgba(51,217,178,0);}100% {transform: scale(.95);box-shadow: 0 0 0 0 rgba(51,217,178,0);}}body.darkmode {color: #eee !important;}.darkmode .header {background: black !important;}.darkmode .content {background: #191c1d !important;}.darkmode .a728_90 {background-color: #303233 !important;}.darkmode .a728_90 {background-color: #303233 !important;}.darkmode .section_label_v2 {background-color: black !important;}.darkmode .program-main_v2 {background: #303233 !important;border: 1px solid #3a3a3a !important;}.darkmode .x2 {border-right: 1px solid #3a3a3a !important;}.darkmode .text-name {color: #eee !important;}.darkmode .x3 {color: #eee !important;}.darkmode .gird3 .program-main_v2 {color: #eee !important;}.gird3 .program-main_v2 {color: #eee !important;}.darkmode .tags_body {background: #303233 !important;border: 1px solid #3a3a3a !important;}.darkmode .tags_list ul li a, ins {color: #eee !important;}.darkmode .program_deatils_v2 {background: #303233 !important;border: 1px solid #3a3a3a !important;}.darkmode .deatlis_lable_v2 {border-bottom: 1px solid #3a3a3a !important;}.darkmode .deatlis_lable_v2 {color: #eee !important;}.darkmode .dectaion h2 {color: #eee !important;}.darkmode .uk-search-default .uk-search-input {border: 1px solid #3a3a3a !important;}.darkmode .search input {background: #303233 !important;}.darkmode .result-aerch {color: #eee !important;}.darkmode .uk-search-input {color: #eee !important;}.darkmode .section-headline-wrap {background: 0 0/cover #303233 !important;color: #eee !important;border-bottom: 1px solid #3a3a3a !important;}.darkmode .section-headline-wrap h1 {color: #eee !important;}.darkmode .size_large {color: #eee !important;}.darkmode .size_large {color: #eee !important;}.darkmode .program_deatils_v2 {background: #303233 !important;border: 1px solid #3a3a3a !important;}.darkmode li.download_links {color: #eee !important;}.darkmode .program_deatils_v2 .uk-list>:nth-child(n+2) {border-top: 1px solid #3a3a3a !important;}.darkmode .result-aerch {color: #eee !important;}.darkmode .comments_v2 {padding: 20px !important;border: 1px solid #3a3a3a !important;width: 100% !important;background: #303233 !important;box-sizing: border-box !important;float: right !important;}.darkmode .slider_v2 {padding: 20px !important;border: 1px solid #3a3a3a !important;width: 100% !important;background: #303233 !important;box-sizing: border-box !important;float: right !important;}.darkmode .dectaion {background: #303233 !important;border-top: 1px solid #3a3a3a !important;}.darkmode p {color: #a5a5a5 !important;}.darkmode .lang a {color: #eee !important;}.darkmode .sections li a {color: #eee !important;}.darkmode a:not(#wpadminbar a):not(#wpadminbar *){color:#eee!important;}.darkmode .comment_box textarea {background: #4e4e4e !important;border: 1px solid #3a3a3a !important;}.darkmode .addcoment {color: #303233 !important;}.darkmode .download_link {color: #303233 !important;}.switch {position: relative;display: inline-block;width: 54px;height: 26px;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;width: auto;}.slider:before {position: absolute;content: "";height: 20px;width: 20px;left: 4px;bottom: 3px;background-color: white;-webkit-transition: .4s;transition: .4s;}input:checked + .slider {background-color: #303233;}input:focus + .slider {box-shadow: 0 0 1px #303233;}input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}.slider.round {border-radius: 34px;}span.slider.round i {float: left;text-align: left;color: #ffc107 !important;margin-top: 4px;margin-left: -9px;padding: 0;font-size: 1.3em;}.slider.round:before {border-radius: 50%;}i#sun {float: right;margin-right: -9px;color: #fffad0;}.darkmode .a728_90 {background-color: #303233;}.darkmode .a300_600 {background-color: #303233 !important;}.darkmode .praimry_comment {background: #191c1d !important;border: 1px solid #3a3a3a !important;}.darkmode .uk-card-default {color: #eee !important;}.darkmode .uk-button-default {color: #eee !important;}.darkmode div#download-page {background: #303233 !important;color: #eee !important;}.darkmodeh2 {color: #eee;}.darkmode i:not(#wpadminbar i):not(#wpadminbar *){color:#eee!important;}.darkmode .down-page {border: 1px solid #3a3a3a !important;}.darkmode h2 {color: #fff;}.darkmode .program-main_v2 {color: #eee !important;}.darkmode div#result2 {background: #303233 !important;box-shadow: 0 10px 40px 0 rgb(0 0 0 / 25%), 0 2px 9px 0 rgb(255 255 255 / 22%) !important;}.darkmode .uk-card.uk-card-default.uk-card-body.page {background: #303233 !important;}.darkmode .uk-dropdown {box-shadow: 0 10px 40px 0 rgb(0 0 0 / 2%), 0 2px 9px 0 rgb(255 255 255 / 16%) !important;background: #303233 !important;}.langbut {font-size: 1.8em;padding: 0 10px;cursor: pointer;float: left;position: unset;margin-top: 10px !important;}.langbutm {padding: 0;}.langbutm li {float: unset !important;padding: 10px !important;padding-top: 15px !important;margin-top: 0px !important;}.langbutm li:hover a {color: white;}.langbutm li a:hover {color: white;}svg.flag-icon {border-radius: 20px;}div#aw23 {padding: 0px;}li.active-language, .active-language a {background: var(--primary) !important;color: #fff !important;}.download_torrent {background: #fca120;padding: 15px;border-radius: 5px;float: right;margin-bottom: 9px;font-size: .875em;color: #fff;box-sizing: border-box;text-align: center;font-family: 'IBM Plex Sans Arabic', sans-serif;border: 0;cursor: pointer;width: 100% !important;box-sizing: border-box;}.uk-slidenav-custom {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 40px;background-color: #2e353c;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 18px;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);transition: background-color 0.3s ease, transform 0.3s ease;text-decoration: none;z-index: 10;}.uk-slidenav-custom:hover {background-color: #444b53;transform: translateY(-50%) scale(1.1);}.uk-slidenav-previous {left: 10px;}.uk-slidenav-next {right: 10px;}.uk-slidenav-previous::after {content: '‹';font-size: 20px;}.uk-slidenav-next::after {content: '›';font-size: 20px;}.google-play-icon {font-size: 24px;background: linear-gradient(45deg, #00c853, #ffeb3b, #ff5722, #3e2723);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;}#rtl .tags_list ul li {direction: rtl;}.langbutm li a {display: flex !important;align-items: center !important;gap: 8px !important;}.langbutm li a img {display: block !important;flex-shrink: 0 !important;}.langbutm li a {flex-direction: row-reverse !important;}#ltr .langbutm li a {flex-direction: row !important;}.result-aerch {display: flex !important;align-items: center !important;gap: 8px !important;}.result-aerch img {display: block !important;flex-shrink: 0 !important;margin-right: 5px;}.result-aerch {flex-direction: row-reverse !important;}#ltr .result-aerch {flex-direction: row !important;}

/* ========================================
   UI-P3: Complete Visual Identity System
   Phase: Font, Forms, Pagination, Dark Mode Expansion
   Date: 2026-01-16
   ======================================== */

/* ========================================
   P3.1: Modern Font System - IBM Plex Sans Arabic
   ======================================== */
:root {
  /* Font Family */
  --font-primary: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Font Sizes - Fluid Typography */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1.1rem + 0.25vw, 1.25rem);
  --text-2xl: clamp(1.4rem, 1.3rem + 0.5vw, 1.5rem);
  --text-3xl: clamp(1.7rem, 1.5rem + 1vw, 1.875rem);

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

/* Apply new font system */
body,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
}

body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.section_label_v2,
.tags_header,
.program_title_v2,
.deatlis_lable_v2 {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

/* Override old font references */
.page-heading {
  font-family: var(--font-primary) !important;
}

/* ========================================
   P3.2: Forms & Inputs Styling
   ======================================== */

/* Base Input Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  background: var(--bg-surface);
  border: 2px solid var(--border-dynamic);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary-dynamic);
  transition: all var(--transition-fast);
  outline: none;
}

/* Focus State */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Dark Mode Focus */
body.darkmode input:focus,
body.darkmode textarea:focus,
body.darkmode select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: var(--text-secondary-dynamic);
  opacity: 0.7;
}

/* Textarea */
textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* Select Dropdown */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-3) center;
  background-size: 16px;
  padding-left: var(--space-10);
  cursor: pointer;
}

[dir="rtl"] select {
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  padding-left: var(--space-4);
}

/* Labels */
label {
  display: block;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--text-primary-dynamic);
}

/* Form Groups */
.form-group {
  margin-bottom: var(--space-5);
}

/* Error State */
input.error,
textarea.error,
select.error {
  border-color: var(--error);
  background-color: rgba(239, 68, 68, 0.05);
}

.error-message {
  color: var(--error);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Disabled State */
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

body.darkmode input:disabled,
body.darkmode textarea:disabled,
body.darkmode select:disabled {
  background: var(--gray-800);
}

/* Comment textarea specific */
.comment_box textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 2px solid var(--border-dynamic);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-primary);
  transition: all var(--transition-fast);
}

.comment_box textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ========================================
   P3.3: Pagination Styling
   ======================================== */

/* Full Reset for UIKit Pagination */
.pagination,
.uk-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 20px 0 !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Reset ALL li items including first-child and uk-first-column */
.uk-pagination > li,
.uk-pagination > li:first-child,
.uk-pagination > li:last-child,
.uk-pagination > li.uk-first-column {
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

/* Base styles for all pagination links/spans */
.uk-pagination > li > a,
.uk-pagination > li > span,
.uk-pagination > li:first-child > a,
.uk-pagination > li:first-child > span,
.uk-pagination > li:last-child > a,
.uk-pagination > li:last-child > span,
.uk-pagination > li.uk-first-column > a,
.uk-pagination > li.uk-first-column > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 14px !important;
  font-family: var(--font-primary), sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Hover State */
.uk-pagination > li > a:hover,
.uk-pagination > li:first-child > a:hover,
.uk-pagination > li:last-child > a:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15) !important;
}

/* Focus State - remove dark outline */
.uk-pagination > li > a:focus,
.uk-pagination > li > span:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Current Page - uk-disabled is used for current page in CodeIgniter pagination */
.uk-pagination > li.uk-disabled,
.uk-pagination > li.uk-disabled:first-child {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}

.uk-pagination > li.uk-disabled > a,
.uk-pagination > li.uk-disabled > span,
.uk-pagination > li.uk-disabled:first-child > a,
.uk-pagination > li.uk-disabled:first-child > span {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  cursor: default !important;
  border-radius: 10px !important;
  outline: none !important;
}

/* Navigation arrows - same size */
.uk-pagination > li > a i,
.uk-pagination > li > span i,
.uk-pagination > li > a svg,
.uk-pagination > li > span svg {
  font-size: 0.85rem !important;
  width: 14px !important;
  height: 14px !important;
}

/* Dark Mode */
body.darkmode .uk-pagination > li > a,
body.darkmode .uk-pagination > li > span,
body.darkmode .uk-pagination > li:first-child > a,
body.darkmode .uk-pagination > li:first-child > span {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.darkmode .uk-pagination > li > a:hover {
  background: #334155 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

body.darkmode .uk-pagination > li.uk-disabled > a,
body.darkmode .uk-pagination > li.uk-disabled > span {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Mobile */
@media (max-width: 600px) {
  .uk-pagination > li > a,
  .uk-pagination > li > span {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.85rem !important;
  }
}

/* ========================================
   P3.4: Modal Styling
   ======================================== */

/* Modal Overlay */
.uk-modal {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* Modal Content */
.uk-modal-dialog {
  background: var(--bg-surface);
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 500px;
  overflow: hidden;
}

/* Modal Header */
.uk-modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-dynamic);
  background: var(--bg-surface);
}

.uk-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary-dynamic);
  margin: 0;
}

/* Modal Body */
.uk-modal-body {
  padding: var(--space-6);
}

/* Modal Footer */
.uk-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-dynamic);
  background: var(--bg-surface-elevated);
}

/* Close Button */
.uk-modal-close-default {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  transition: all var(--transition-fast);
}

.uk-modal-close-default:hover {
  background: var(--error);
  color: white;
}

body.darkmode .uk-modal-close-default {
  background: var(--gray-700);
}

/* Dark Mode */
body.darkmode .uk-modal-dialog {
  background: var(--bg-surface);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ========================================
   P3.5: Breadcrumbs Styling
   ======================================== */

.uk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  list-style: none;
  margin: 0;
}

.uk-breadcrumb > * {
  display: flex;
  align-items: center;
}

.uk-breadcrumb a {
  color: var(--text-secondary-dynamic);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.uk-breadcrumb a:hover {
  color: var(--primary);
  background: var(--primary-light);
}

/* Separator */
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--gray-400);
}

/* Current Page */
.uk-breadcrumb > .uk-disabled > span {
  color: var(--text-primary-dynamic);
  font-weight: var(--font-medium);
}

/* ========================================
   P3.6: Utility Classes for Inline Style Replacement
   ======================================== */

/* Text Colors */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-muted { color: var(--text-secondary-dynamic) !important; }
.text-error { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }

/* Background Colors */
.bg-primary { background: var(--primary) !important; }
.bg-success { background: var(--success) !important; }
.bg-surface { background: var(--bg-surface) !important; }
.bg-primary-light { background: var(--primary-light) !important; }

/* Font Weights */
.fw-300 { font-weight: var(--font-light) !important; }
.fw-400 { font-weight: var(--font-regular) !important; }
.fw-500 { font-weight: var(--font-medium) !important; }
.fw-600 { font-weight: var(--font-semibold) !important; }
.fw-700 { font-weight: var(--font-bold) !important; }

/* Font Sizes */
.fs-xs { font-size: var(--text-xs) !important; }
.fs-sm { font-size: var(--text-sm) !important; }
.fs-base { font-size: var(--text-base) !important; }
.fs-lg { font-size: var(--text-lg) !important; }
.fs-xl { font-size: var(--text-xl) !important; }
.fs-2xl { font-size: var(--text-2xl) !important; }
.fs-3xl { font-size: var(--text-3xl) !important; }

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ========================================
   P3.7: Dark Mode Expansion
   ======================================== */

body.darkmode {
  /* Additional Dark Mode Variables */
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-focus-shadow: rgba(59, 130, 246, 0.25);
  --card-hover-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  --button-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

/* Forms Dark Mode */
body.darkmode input[type="text"],
body.darkmode input[type="email"],
body.darkmode input[type="password"],
body.darkmode input[type="search"],
body.darkmode input[type="url"],
body.darkmode input[type="number"],
body.darkmode input[type="tel"],
body.darkmode textarea,
body.darkmode select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary-dynamic);
}

/* Tables Dark Mode */
body.darkmode table {
  background: var(--bg-surface);
}

body.darkmode th {
  background: var(--bg-surface-elevated);
  border-color: var(--border-dynamic);
}

body.darkmode td {
  border-color: var(--border-dynamic);
}

body.darkmode tr:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Code Blocks Dark Mode */
body.darkmode pre,
body.darkmode code {
  background: #0d1117;
  border-color: var(--border-dynamic);
}

/* Alerts Dark Mode */
body.darkmode .uk-alert {
  background: var(--bg-surface-elevated);
  border-color: var(--border-dynamic);
}

/* Dropdown Menus Dark Mode */
body.darkmode .uk-dropdown {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-dynamic);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Search Results Dark Mode */
body.darkmode div#result2,
body.darkmode div#result4 {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-dynamic);
}

/* ========================================
   P3.8: Micro-interactions & Animations
   ======================================== */

/* Smooth Page Load Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.program-main_v2,
.tags_body,
.comments_v2,
.program_deatils_v2,
.slider_v2 {
  animation: fadeInUp 0.4s ease-out;
}

/* Stagger Animation for Grid Items */
.gird3.program-x5:nth-child(1) { animation-delay: 0.05s; }
.gird3.program-x5:nth-child(2) { animation-delay: 0.1s; }
.gird3.program-x5:nth-child(3) { animation-delay: 0.15s; }
.gird3.program-x5:nth-child(4) { animation-delay: 0.2s; }
.gird3.program-x5:nth-child(5) { animation-delay: 0.25s; }
.gird3.program-x5:nth-child(6) { animation-delay: 0.3s; }

/* Button Click Effect */
.download_link:active,
.addcoment:active,
.uk-button:active {
  transform: scale(0.98);
}

/* Link Underline Animation */
.animated-link {
  position: relative;
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width var(--transition-normal);
}

[dir="ltr"] .animated-link::after {
  right: auto;
  left: 0;
}

.animated-link:hover::after {
  width: 100%;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Loading Skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

body.darkmode .skeleton {
  background: linear-gradient(90deg,
    var(--gray-700) 25%,
    var(--gray-600) 50%,
    var(--gray-700) 75%
  );
  background-size: 200% 100%;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   P3.9: Header, Footer & Scrollbar Improvements
   ======================================== */

/* Header Sticky Behavior */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--transition-normal);
}

.header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Footer Improvements */
.footer {
  background: var(--bg-footer);
}

.footer a {
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--primary) !important;
}

/* Social Links in Footer */
.sochil_me a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gray-800);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.sochil_me a:hover {
  background: var(--primary);
  transform: translateY(-3px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

body.darkmode ::-webkit-scrollbar-track {
  background: var(--gray-800);
}

body.darkmode ::-webkit-scrollbar-thumb {
  background: var(--gray-600);
}

body.darkmode ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) var(--gray-100);
}

body.darkmode * {
  scrollbar-color: var(--gray-600) var(--gray-800);
}

/* ========================================
   P3.10: Additional Component Polish
   ======================================== */

/* Tags Sidebar Enhancement - Duplicate removed, see line ~380 */

/* Download Button Enhancement */
.download_link {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  font-weight: var(--font-semibold);
  transition: all var(--transition-normal);
}

.download_link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

/* Comment Submit Button */
.addcoment {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
  font-weight: var(--font-semibold);
  transition: all var(--transition-normal);
}

.addcoment:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

/* Program Cards Image Container - colors only for Grid view */
.gird3 .program_img_v2 {
  background: transparent;
}

body.darkmode .gird3 .program_img_v2 {
  background: transparent;
}

/* Section Labels Enhancement */
.section_label_v2 {
  background: var(--bg-surface);
  border-right: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

[dir="ltr"] .section_label_v2 {
  border-right: none;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* Comments Enhancement */
.praimry_comment {
  background: var(--bg-surface);
  border: 1px solid var(--border-dynamic);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.praimry_comment:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

/* Slider Enhancement */
.slider_v2 {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Program Details Enhancement */
.program_deatils_v2 {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Description Section */
.dectaion {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dectaion h2 {
  color: var(--text-primary-dynamic);
  position: relative;
  padding-bottom: var(--space-3);
}

.dectaion h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
}

[dir="ltr"] .dectaion h2::after {
  right: auto;
  left: 0;
}

/* Show All Button - replaces inline teal styles */
.btn-show-all {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: transparent;
  transition: all var(--transition-fast);
}

.btn-show-all:hover {
  background: var(--primary) !important;
  color: white !important;
}

/* ========================================
   UI-P3.5: Bug Fixes & Polish
   Date: 2026-01-16
   ======================================== */

/* 1. Remove Sidebar Divider - Remove border-bottom from tags_list items */
.tags_list ul li {
  border-bottom: none !important;
}

/* Keep subtle separator with spacing instead */
.tags_list ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ========================================
   UI-P3.6: Card Layout Redesign
   - Card height: 75px (compact)
   - Section header matches card height
   - Centered content vertically
   ======================================== */

/* 2. Section Header - Smaller than cards */
.section_label_v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 55px !important;
  padding: 0 20px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-dynamic) !important;
  border-right: 4px solid var(--primary) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  box-sizing: border-box !important;
  font-size: 0.95em;
  line-height: 1 !important;
  position: static !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin-bottom: 12px !important;
}

[dir="ltr"] .section_label_v2 {
  border-right: 1px solid var(--border-dynamic) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

/* Title area - icon - vertically centered */
.section_label_v2 > i {
  color: var(--primary);
  margin-inline-end: 8px;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* Sort button - push to the right */
.section_label_v2 > button,
.section_label_v2 > .uk-button {
  margin-inline-start: auto !important;
  padding: 5px 10px !important;
  font-size: 0.75em !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-dynamic) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary-dynamic) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.section_label_v2 > button:hover,
.section_label_v2 > .uk-button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Grid/List view toggle */
.section_label_v2 .gird_v {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  margin-inline-start: 8px;
  margin-inline-end: 5px;
  flex-shrink: 0;
}

.section_label_v2 .gird_v a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary-dynamic);
  transition: all 0.2s ease;
}

.section_label_v2 .gird_v a:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* Section show all container - styles moved to section 9 */

/* 3. Program Cards - Taller than header */
.program-x5 {
  height: 90px !important;
  margin-bottom: 12px !important;
}

.program-main_v2 {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-dynamic) !important;
  border-radius: var(--radius-md) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
}

.program-main_v2:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--primary) !important;
}

body.darkmode .program-main_v2 {
  background: var(--bg-surface) !important;
  border-color: var(--border-dynamic) !important;
}

body.darkmode .program-main_v2:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

/* 4. Program Icon - Centered vertically */
.program_img_v2 {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10% !important;
  min-width: 90px;
  padding: 0 10px !important;
  float: none !important;
  height: auto !important;
}

.program_img_v2 img {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  background: transparent !important;
  object-fit: contain;
}

body.darkmode .program_img_v2 {
  background: transparent !important;
}

/* 5. x1 area - Name, description, tag - Centered vertically */
.program-main_v2 .x1 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  float: none !important;
  width: 50% !important;
  height: auto !important;
}

.program_name_v2 {
  margin-bottom: 2px;
  width: 100% !important;
  float: none !important;
  text-align: inherit !important;
}

.program_name_v2 .text-name {
  color: var(--text-primary-dynamic);
  font-size: 0.9em;
  line-height: 1.2;
}

.program_name_v2 .dec-short {
  color: var(--text-secondary-dynamic);
  font-size: 0.72em;
  margin-top: 1px;
  width: 100% !important;
  line-height: 1.2;
}

/* Program tag */
.program_tag_v2 {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  font-size: 0.65em !important;
  margin-top: 2px;
  width: fit-content;
  float: none !important;
}

body.darkmode .program_tag_v2 {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* 6. x2 - Platform icon and downloads - Centered vertically */
.program-main_v2 .x2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18% !important;
  min-width: 95px;
  float: none !important;
  padding: 8px 10px !important;
  height: auto !important;
  border-right: 1px solid var(--border-dynamic) !important;
  border-left: none !important;
}

[dir="ltr"] .program-main_v2 .x2 {
  border-right: none !important;
  border-left: 1px solid var(--border-dynamic) !important;
}

.program-main_v2 .x2 > i {
  font-size: 1.2em;
  margin-bottom: 4px;
}

.downloads_v2 {
  color: var(--text-secondary-dynamic);
  font-size: 0.75em;
}

.downloads_v2 i {
  color: var(--primary);
  margin-inline-start: 3px;
}

/* 7. x3 - Size display - Centered vertically */
.program-main_v2 .x3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18% !important;
  min-width: 85px;
  float: none !important;
  padding: 8px 12px !important;
  height: auto !important;
  color: var(--text-primary-dynamic) !important;
  font-weight: 600;
  font-size: 0.95em;
}

/* Platform icons */
.x2 i.win { color: #0078d4 !important; }
.x2 i.mac { color: #555 !important; }
.x2 i.sys { color: #f8b500 !important; }

body.darkmode .x2 i.mac { color: #aaa !important; }

/* 8. Grid View Override - Keep original grid layout */
.gird3.program-x5 {
  height: 300px !important;
}

.gird3 .program-main_v2 {
  display: block !important;
  padding: 10px;
}

.gird3 .program_img_v2 {
  width: 100% !important;
  height: 55% !important;
  float: none !important;
  min-width: auto;
}

.gird3 .program_img_v2 img {
  width: auto !important;
  height: 80% !important;
}

.gird3 .x1 {
  width: 100% !important;
  float: none !important;
  padding: 5px 0 !important;
  height: auto !important;
}

.gird3 .program_name_v2 {
  text-align: left !important;
}

.gird3 .x2 {
  width: 40% !important;
  float: left !important;
  border: none !important;
  padding-top: 0 !important;
  height: auto !important;
  flex-direction: row !important;
  gap: 5px;
}

.gird3 .x3 {
  width: 55% !important;
  float: left !important;
  text-align: right !important;
  padding: 0 !important;
  height: auto !important;
}

/* 9. Show All Button - Full clickable area */
.section-show-all {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
}

.btn-show-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  padding: 7px 12px !important;
  line-height: 1 !important;
  font-size: 0.75em !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Make entire button clickable */
  position: relative;
  z-index: 1;
}

.btn-show-all:hover {
  background: var(--primary) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Arrow icon */
.btn-show-all::after {
  content: '→';
  font-size: 0.9em;
  font-weight: 600;
  transition: transform 0.2s ease;
}

[dir="rtl"] .btn-show-all::after {
  content: '←';
}

.btn-show-all:hover::after {
  transform: translateX(4px);
}

[dir="rtl"] .btn-show-all:hover::after {
  transform: translateX(-4px);
}

/* 5. Footer Complete Redesign */
.footer {
  background: var(--bg-footer) !important;
  color: var(--gray-300) !important;
  padding: var(--space-10) 0 var(--space-6) !important;
  border-top: 1px solid var(--gray-800);
  margin-bottom: -50px !important; /* Fix gap below footer caused by .content padding-bottom: 50px */
}

.footer .uk-grid {
  margin-left: 0 !important;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.footer a {
  color: var(--gray-400) !important;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer a:hover {
  color: var(--primary) !important;
  transform: translateX(3px);
}

[dir="rtl"] .footer a:hover {
  transform: translateX(-3px);
}

.footer_title,
.footer_title a {
  color: var(--gray-100) !important;
  font-weight: var(--font-semibold) !important;
  font-size: var(--text-base) !important;
  margin-bottom: var(--space-4) !important;
  font-family: var(--font-primary) !important;
}

/* Footer copyright bar - no gap below */
.footer_2 {
  background: var(--gray-900) !important;
  color: var(--gray-500) !important;
  padding: var(--space-4) 0 !important;
  font-size: var(--text-sm);
  text-align: center;
  margin: 0 !important;
  border-top: 1px solid var(--gray-800);
}

/* Body and HTML reset */
html {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .uk-container,
body > .sec2,
body > div:not(.footer):not(.footer_2) {
  flex: 1;
}

/* Footer social icons - Twitter Button Style */
#footer_image1 > div[uk-grid] {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Social Icons - Modern Design */
.social-icons {
  display: flex !important;
  gap: 12px !important;
  margin-top: 15px !important;
}

.social-icon {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 1.4rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  background: rgba(29, 161, 242, 0.1) !important;
  border: 2px solid #1da1f2 !important;
  color: #1da1f2 !important;
}

.social-icon i {
  position: relative !important;
  z-index: 1 !important;
}

.social-icon:hover {
  background: #1da1f2 !important;
  color: white !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(29, 161, 242, 0.5) !important;
}

/* Footer download counter */
.footer .blob {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: var(--radius-full);
  margin-inline-end: var(--space-2);
  animation: pulse-blob 2s infinite;
}

@keyframes pulse-blob {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* 6. Add Comment Button Fix */
.addcoment,
button.addcoment,
input.addcoment {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: white !important;
  border: none !important;
  padding: var(--space-3) var(--space-6) !important;
  font-weight: var(--font-semibold) !important;
  font-size: var(--text-base) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: all var(--transition-normal) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
}

.addcoment:hover,
button.addcoment:hover,
input.addcoment:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45) !important;
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%) !important;
}

/* Dark mode comment button */
body.darkmode .addcoment,
body.darkmode button.addcoment {
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25);
}

body.darkmode .addcoment:hover,
body.darkmode button.addcoment:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35) !important;
}

/* Comment textarea styling */
.comment_box textarea,
.coments_all textarea {
  background: var(--bg-surface) !important;
  border: 2px solid var(--border-dynamic) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) !important;
  color: var(--text-primary-dynamic) !important;
  font-family: var(--font-primary) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
  min-height: 100px;
}

.comment_box textarea:focus,
.coments_all textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: none;
}

body.darkmode .comment_box textarea,
body.darkmode .coments_all textarea {
  background: var(--bg-surface-elevated) !important;
}

/* 7. Section Header Hover Improvements - DISABLED, see UI-P3.6 above */
/* Styles moved to section 1587 */

/* 8. Extra Card Polish */
.program_name_v2 {
  flex: 1;
  min-width: 0;
}

.program_name_v2 .text-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary-dynamic);
  margin-bottom: var(--space-1);
}

.program_name_v2 .text-name span {
  color: var(--text-secondary-dynamic);
  font-weight: var(--font-regular);
  font-size: var(--text-sm);
}

.program_name_v2 .dec-short {
  color: var(--text-secondary-dynamic);
  font-size: var(--text-sm);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Program tag styling */
.program_tag_v2 {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-medium) !important;
}

body.darkmode .program_tag_v2 {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* New tag */
.program_tag.new_time {
  background: var(--success) !important;
  color: white !important;
}

/* Download count styling */
.downloads_v2 {
  color: var(--text-secondary-dynamic);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.downloads_v2 i {
  color: var(--primary);
}

/* Size display - color only, keep original font-size */
.x3 {
  color: var(--text-secondary-dynamic);
  /* Keep original: font-size: 1.325em; padding-top: 31px */
}

/* Platform icons */
.x2 i.win { color: #0078d4; }
.x2 i.mac { color: #555; }
.x2 i.sys { color: #f8b500; }

body.darkmode .x2 i.mac { color: #aaa; }

/* Section show all container */
.section-show-all {
  margin-inline-start: auto;
}

/* ========================================
   End of UI-P3.5 Styles
   ======================================== */

/* ========================================
   UI-P3.6: Mobile Program Page Fix
   Use flexbox to reorder: Download first, then Slider
   ======================================== */

@media (max-width: 750px) {
  /* Container uses flexbox for reordering */
  #program_show {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Download section appears FIRST (order: -1) */
  .program_deatils_size.v2 {
    order: -1 !important;
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
  }

  /* Remove the old absolute positioning hack */
  .donwload_sec {
    position: static !important;
  }

  /* Reset the old padding hack on slider */
  .program_slidshow {
    padding-top: 10px !important;
    width: 100% !important;
    float: none !important;
  }

  /* Fix slider size on mobile */
  .slider_v2 {
    width: 100% !important;
    overflow: hidden !important;
  }

  .slider_v2 #slids {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    min-height: 220px !important;
    max-height: 300px !important;
  }

  .slider_v2 .uk-slideshow-items {
    min-height: 220px !important;
  }

  .slider_v2 .uk-slideshow-items img {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
  }

  /* Make sure icon and size show properly */
  .donwload_sec .icon_100 {
    display: block !important;
    text-align: center !important;
    margin-bottom: 15px !important;
  }

  .donwload_sec .size_large {
    display: block !important;
    text-align: center !important;
  }
}

/* ========================================
   UI-P3.7: RTL Program Cards Fix
   Align text-name and version to the right for RTL
   ======================================== */

/* RTL: Program name and description aligned right */
[dir="rtl"] .program_name_v2,
#rtl .program_name_v2 {
  text-align: right !important;
}

[dir="rtl"] .program_name_v2 .text-name,
#rtl .program_name_v2 .text-name {
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] .program_name_v2 .dec-short,
#rtl .program_name_v2 .dec-short {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL: Program tag aligned right */
[dir="rtl"] .program_tag_v2,
#rtl .program_tag_v2 {
  float: right !important;
  margin-right: 0 !important;
  margin-left: 4px !important;
}

/* LTR: Keep left alignment */
[dir="ltr"] .program_name_v2,
#ltr .program_name_v2 {
  text-align: left !important;
}

[dir="ltr"] .program_name_v2 .text-name,
#ltr .program_name_v2 .text-name {
  text-align: left !important;
  direction: ltr !important;
}

[dir="ltr"] .program_name_v2 .dec-short,
#ltr .program_name_v2 .dec-short {
  text-align: left !important;
  direction: ltr !important;
}

/* ========================================
   UI-P3.8: Mobile Cards RTL/LTR Fix
   Grid layout with proper alignment
   ======================================== */

@media (max-width: 750px) {
  /* RTL Mobile: Reverse grid columns (icon right, size left) */
  [dir="rtl"] .program-main_v2,
  #rtl .program-main_v2 {
    grid-template-columns: auto 1fr 65px !important;
    direction: rtl !important;
  }

  [dir="rtl"] .program_img_v2,
  #rtl .program_img_v2 {
    grid-column: 3 !important;
  }

  [dir="rtl"] .program-main_v2 .x1,
  #rtl .program-main_v2 .x1 {
    text-align: right !important;
  }

  [dir="rtl"] .program_name_v2 .text-name,
  #rtl .program_name_v2 .text-name {
    text-align: right !important;
  }

  [dir="rtl"] .program_name_v2 .dec-short,
  #rtl .program_name_v2 .dec-short {
    text-align: right !important;
  }

  [dir="rtl"] .program-main_v2 .x2,
  #rtl .program-main_v2 .x2 {
    justify-content: flex-start !important;
  }

  [dir="rtl"] .program-main_v2 .x3,
  #rtl .program-main_v2 .x3 {
    grid-column: 1 !important;
    text-align: left !important;
  }

  /* LTR Mobile: Normal grid (icon left, size right) */
  [dir="ltr"] .program-main_v2,
  #ltr .program-main_v2 {
    direction: ltr !important;
  }

  [dir="ltr"] .program-main_v2 .x1,
  #ltr .program-main_v2 .x1 {
    text-align: left !important;
  }

  [dir="ltr"] .program_name_v2 .text-name,
  #ltr .program_name_v2 .text-name {
    text-align: left !important;
  }
}

/* Lang icon margin fix */
#lang {
  margin-right: 20px;
}