/**
 * ============================================================================
 * SkyDen MC - Rules Module Stylesheet v1.0.0
 * ============================================================================
 * 
 * @package     SkyDenMC
 * @subpackage  Frontend_Styles
 * @version     1.0.0
 * @author      Amirejk43
 * @author      SkyDen Development Team
 * 
 * @license     Proprietary Software License
 * @copyright   2026 SkyDen MC. All rights reserved.
 * 
 * @link        https://skydenmc.ir
 * @since       Version 1.0.0 (2024-01-01)
 * 
 * @description Complete rules styling with purple theme, responsive design, and vendor prefixes
 *
 * 
/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. CSS VARIABLES
   2. HEADER & BACKGROUND
   3. SCROLLBAR STYLES
   4. CONTAINER & LAYOUT - Empty
   5. HERO SECTION
   6. SECTION TITLES
   7. WELCOME NOTE
   8. RULES CARDS
   9. PUNISHMENT TABLE
   10. WARNING BADGE
   11. FOOTER
   12. RESPONSIVE DESIGN
   ============================================ */

/* --------------------------------------------
 * 1. CSS VARIABLES
 * -------------------------------------------- */

:root {
  /* Primary Colors - Purple Theme */
  --rules-primary: #6c5ce7;
  --rules-primary-dark: #5a4ad7;
  --rules-primary-light: #8b5cf6;
  --rules-primary-glow: rgba(108, 92, 231, 0.88);
  --rules-primary-bg: rgba(108, 92, 231, 0.1);

  /* Border Colors */
  --rules-border: rgba(110, 80, 150, 0.2);
  --rules-border-light: rgba(110, 80, 150, 0.08);
  --rules-border-hover: rgba(110, 80, 150, 0.4);
  --rules-border-bottom: #5e4a8a;

  /* Background Colors */
  --rules-bg-card: rgba(22, 22, 30, 0.6);
  --rules-bg-card-hover: rgba(35, 32, 48, 0.8);
  --rules-bg-table-header: rgba(45, 40, 60, 0.7);
  --rules-bg-table-row: rgba(22, 22, 30, 0.5);
  --rules-bg-table-hover: rgba(60, 50, 90, 0.25);
  --rules-bg-welcome: linear-gradient(135deg, rgba(90, 70, 130, 0.12), rgba(60, 45, 100, 0.08));

  /* Text Colors */
  --rules-text-white: #ffffff;
  --rules-text-hero: #b9a8e0;
  --rules-text-muted: #7a7a99;
  --rules-text-section: #ececf5;
  --rules-text-welcome: #c5c0e0;
  --rules-text-rule-num: #a28fcc;
  --rules-text-rule-name: #ddd;
  --rules-text-rule-code: #c2b0e5;
  --rules-text-rule-desc: #b0b0c5;
  --rules-text-rule-example: #8a8aaa;
  --rules-text-table-header: #c8b8ea;
  --rules-text-table-row: #c0c0d5;
  --rules-text-footer: #6a6a88;

  /* Scrollbar Colors */
  --rules-scrollbar-track: #181820;
  --rules-scrollbar-thumb: #5e4a8a;

  /* Shadows & Effects */
  --rules-gradient-hero: linear-gradient(135deg, #ffffff, #b9a8e0);
  --rules-border-right: 3px solid #8a72c0;

  /* Spacing */
  --rules-spacing-xs: 5px;
  --rules-spacing-sm: 8px;
  --rules-spacing-md: 10px;
  --rules-spacing-lg: 12px;
  --rules-spacing-xl: 14px;
  --rules-spacing-2xl: 20px;
  --rules-spacing-3xl: 25px;
  --rules-spacing-4xl: 35px;
  --rules-spacing-5xl: 45px;

  /* Border Radius */
  --rules-radius-sm: 10px;
  --rules-radius-md: 12px;
  --rules-radius-lg: 14px;
  --rules-radius-xl: 16px;
  --rules-radius-round: 20px;

  /* Transitions */
  --rules-transition: all 0.2s ease;
  --rules-transition-slow: all 0.3s ease;
}

/* --------------------------------------------
 * 2. HEADER & BACKGROUND
 * -------------------------------------------- */

.rules-section-header {
  background: url("../img/courtroom-image.png") !important;
  background-position: top !important;
}

/* --------------------------------------------
 * 3. SCROLLBAR STYLES
 * -------------------------------------------- */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--rules-scrollbar-track);
  border-radius: var(--rules-radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--rules-scrollbar-thumb);
  border-radius: var(--rules-radius-sm);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rules-scrollbar-thumb) var(--rules-scrollbar-track);
}

/* --------------------------------------------
 * 5. HERO SECTION
 * -------------------------------------------- */

.hero {
  text-align: center;
  padding: var(--rules-spacing-5xl) 0 var(--rules-spacing-3xl);
  border-bottom: 1px solid var(--rules-border);
  margin-bottom: var(--rules-spacing-4xl);
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  background: var(--rules-gradient-hero);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  color: var(--rules-text-muted);
  font-size: 0.85rem;
  margin-top: var(--rules-spacing-sm);
}

/* --------------------------------------------
 * 6. SECTION TITLES
 * -------------------------------------------- */

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 30px 0 var(--rules-spacing-sm) 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rules-border-bottom);
  display: inline-block;
  color: var(--rules-text-section);
}

.section-desc {
  color: var(--rules-text-white) !important;
  font-size: 0.8rem;
  margin-top: var(--rules-spacing-xs);
  margin-bottom: var(--rules-spacing-2xl);
}

/* --------------------------------------------
 * 7. WELCOME NOTE
 * -------------------------------------------- */

.welcome-note {
  background: var(--rules-bg-welcome);
  border-right: var(--rules-border-right);
  padding: var(--rules-spacing-xl) var(--rules-spacing-2xl);
  border-radius: var(--rules-radius-md);
  margin-bottom: var(--rules-spacing-4xl);
  font-size: 0.85rem;
  color: var(--rules-text-welcome);
}

/* --------------------------------------------
 * 8. RULES CARDS
 * -------------------------------------------- */

.rules-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--rules-spacing-md);
  margin-bottom: 40px;
}

.rule-card {
  background: var(--rules-bg-card);
  border: 1px solid var(--rules-border);
  border-radius: var(--rules-radius-lg);
  padding: var(--rules-spacing-xl) var(--rules-spacing-2xl);
  -webkit-transition: var(--rules-transition);
  -moz-transition: var(--rules-transition);
  -ms-transition: var(--rules-transition);
  -o-transition: var(--rules-transition);
  transition: var(--rules-transition);
  margin-block: var(--rules-spacing-xs);
}

.rule-card:hover {
  background: var(--rules-bg-card-hover);
  border-color: var(--rules-border-hover);
  cursor: pointer;
}

.rule-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--rules-spacing-sm);
  margin-bottom: var(--rules-spacing-sm);
}

.rule-num {
  font-weight: 800;
  color: var(--rules-text-rule-num);
  font-size: 0.9rem;
}

.rule-name {
  font-weight: 700;
  color: var(--rules-text-rule-name);
  font-size: 0.95rem;
  margin-bottom: 7px;
}

.rule-code {
  font-family: monospace;
  font-size: 0.85rem;
  background: rgba(94, 74, 138, 0.35);
  padding: 2px var(--rules-spacing-sm);
  border-radius: var(--rules-radius-round);
  color: var(--rules-text-rule-code);
  position: relative;
  top: -2px;
}

.rule-desc {
  font-size: 0.82rem;
  color: var(--rules-text-rule-desc);
  padding-right: 22px;
  line-height: 1.55;
}

.rule-example {
  font-size: 0.74rem;
  color: var(--rules-text-rule-example);
  padding-right: 22px;
  margin-top: 6px;
  font-style: italic;
}

/* --------------------------------------------
 * 9. PUNISHMENT TABLE
 * -------------------------------------------- */

.punishment-table {
  border-radius: var(--rules-radius-xl);
  overflow-x: auto;
  margin: var(--rules-spacing-2xl) 0 30px;
}

.punishment-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.punishment-table th {
  background: var(--rules-bg-table-header);
  padding: var(--rules-spacing-md) var(--rules-spacing-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rules-text-table-header);
  border-bottom: 1px solid var(--rules-border);
  text-align: center;
}

.punishment-table td {
  background: var(--rules-bg-table-row);
  padding: var(--rules-spacing-sm) var(--rules-spacing-sm);
  font-size: 0.85rem;
  color: var(--rules-text-table-row);
  border-bottom: 1px solid var(--rules-border-light);
  text-align: center;
}

.punishment-table tr:last-child td {
  border-bottom: none;
}

.punishment-table tr:hover td {
  background: var(--rules-bg-table-hover);
}

/* RTL Support for Punishment Table */
html[dir="rtl"] .punishment-table th,
html[dir="rtl"] .punishment-table td {
  text-align: center;
}

/* --------------------------------------------
 * 10. WARNING BADGE
 * -------------------------------------------- */

.warning-badge {
  background: transparent;
  padding: 2px var(--rules-spacing-sm);
  border-radius: var(--rules-radius-round);
  display: inline-block;
}

/* --------------------------------------------
 * 11. FOOTER
 * -------------------------------------------- */

.footer {
  text-align: center;
  padding: var(--rules-spacing-4xl) 0 var(--rules-spacing-3xl);
  border-top: 1px solid var(--rules-border);
  margin-top: 40px;
  color: var(--rules-text-footer);
  font-size: 0.7rem;
}

/* --------------------------------------------
 * 12. RESPONSIVE DESIGN
 * -------------------------------------------- */

@media (max-width: 768px) {
  .rule-card {
    padding: var(--rules-spacing-sm) var(--rules-spacing-xl);
  }

  .rule-desc,
  .rule-example {
    font-size: 0.73rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .rules-grid {
    gap: var(--rules-spacing-sm);
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 0.75rem;
  }

  .punishment-table th,
  .punishment-table td {
    padding: var(--rules-spacing-sm) 6px;
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .hero {
    padding: 30px 0 20px;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.1rem;
  }

  .section-desc {
    font-size: 0.7rem;
  }

  .rule-name {
    font-size: 0.85rem;
  }

  .rule-code {
    font-size: 0.7rem;
  }

  .rule-desc {
    font-size: 0.68rem;
    padding-right: 15px;
  }

  .punishment-table {
    margin: 15px 0 20px;
  }

  .punishment-table th,
  .punishment-table td {
    padding: 6px 4px;
    font-size: 0.65rem;
  }

  .footer {
    padding: 25px 0 20px;
    font-size: 0.6rem;
  }
}

/* --------------------------------------------
 * 13. UTILITY CLASSES
 * -------------------------------------------- */

/* RTL Support for Cards */
html[dir="rtl"] .rule-desc,
html[dir="rtl"] .rule-example {
  padding-right: 22px;
  padding-left: 0;
}

html[dir="ltr"] .rule-desc,
html[dir="ltr"] .rule-example {
  padding-left: 22px;
  padding-right: 0;
}

/* Welcome Note RTL Support */
html[dir="rtl"] .welcome-note {
  border-right: var(--rules-border-right);
  border-left: none;
}

html[dir="ltr"] .welcome-note {
  border-left: var(--rules-border-right);
  border-right: none;
}