/**
 * ============================================================================
 * SkyDen MC - Shop Management System 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 shop styling with purple theme, responsive design, animations, and vendor prefixes.
 * 
/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. CSS VARIABLES
   2. PAGE TITLE SECTION (HERO)
   3. BREADCRUMB STYLES
   4. PRODUCT CARDS
   5. SHOP BUTTONS
   6. FILTER BUTTONS
   7. SORTING DROPDOWN
   8. LOADING STATES
   9. MODAL STYLES
   10. ANIMATIONS
   11. RESPONSIVE DESIGN
   12. UTILITY CLASSES
   ============================================ */

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

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

  /* Background Colors */
  --shop-bg-card: rgb(24, 27, 36);
  --shop-bg-card-hover: #1e2333;
  --shop-bg-body: #0e1119;
  --shop-bg-modal: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

  /* Text Colors */
  --shop-text-white: #ffffff;
  --shop-text-muted: #b39ddb;
  --shop-text-dark: #6c757d;

  /* Border Colors */
  --shop-border-card: rgb(41, 45, 57);
  --shop-border-modal: rgba(108, 92, 231, 0.3);

  /* Button Colors */
  --shop-btn-buy: rgb(92, 19, 218);
  --shop-btn-buy-hover: rgb(65, 18, 146);
  --shop-btn-info-bg: rgba(85, 160, 255, 0.08);
  --shop-btn-info-border: rgba(110, 175, 255, 0.18);
  --shop-btn-info-hover: rgba(85, 160, 255, 0.2);

  /* Toast Colors */
  --shop-toast-success: #28a745;
  --shop-toast-error: #dc3545;

  /* Shadows */
  --shop-shadow-btn: 1px 1px 15px rgb(92, 19, 218);
  --shop-shadow-info: 0 0 14px rgba(89, 168, 255, 0.1);
  --shop-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.2);

  /* Spacing */
  --shop-spacing-xs: 4px;
  --shop-spacing-sm: 8px;
  --shop-spacing-md: 12px;
  --shop-spacing-lg: 20px;
  --shop-spacing-xl: 35px;

  /* Border Radius */
  --shop-radius-sm: 8px;
  --shop-radius-md: 12px;
  --shop-radius-lg: 15px;
  --shop-radius-xl: 22px;
  --shop-radius-round: 25px;

  /* Transitions */
  --shop-transition: all ease 300ms;
  --shop-transition-smooth: all 0.3s ease;
}

/* --------------------------------------------
 * 2. PAGE TITLE SECTION (HERO)
 * -------------------------------------------- */

.page-title-section {
  height: 65vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--shop-text-white) !important;
  background: url("../img/shop-background2.jpeg");
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 2;
}

.page-title-section::after {
  content: "";
  width: 100vw;
  position: absolute;
  bottom: 0 !important;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(19 19 33)), to(transparent));
  background: -webkit-linear-gradient(bottom, rgb(19 19 33), transparent);
  background: -moz-linear-gradient(bottom, rgb(17, 18, 24), transparent);
  background: -o-linear-gradient(bottom, rgb(17, 18, 24), transparent);
  background: linear-gradient(to top, rgb(20 20 34), transparent);
  height: 100%;
  z-index: -1;
}

/* --------------------------------------------
 * 3. BREADCRUMB STYLES
 * -------------------------------------------- */

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--shop-text-white) !important;
}

.breadcrumb-item.active {
  color: var(--shop-text-white);
}

.breadcrumb-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* --------------------------------------------
 * 4. PAGE TITLE COMPONENTS
 * -------------------------------------------- */

.page-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 34px;
  font-weight: 900;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.page-title div {
  margin-top: 20px !important;
}

.page-title div span {
  margin-bottom: 6px;
}

.page-title-section-server-name {
  color: rgb(151, 91, 255);
  text-shadow: 0 4px 40px rgb(151, 91, 255);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  font-family: "YekanBakh";
  font-size: 34px;
  margin-bottom: 6px !important;
  -webkit-text-shadow: 0 4px 40px rgba(103, 47, 190, 0.88);
  -moz-text-shadow: 0 4px 40px rgba(103, 47, 190, 0.88);
  margin-top: 0 !important;
  margin-right: 10px;
  font-weight: 900 !important;
}

.page-title-section p {
  font-size: 13px;
  font-weight: 400;
}

.page-title div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
}

/* --------------------------------------------
 * 5. PRODUCT CARDS
 * -------------------------------------------- */
html[dir="ltr"] * {
  direction: ltr !important;
}

html[dir="ltr"] .product-card-detail {
  align-items: start;
  flex-direction: column !important;
}

html[dir="rtl"] .product-info {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column !important;
}

html[dir="ltr"] .product-info {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column !important;
}

.product-card-toman {
  padding-top: 5px;
}

.product-card-img {
  border-radius: var(--shop-radius-xl) var(--shop-radius-xl) 0 0;
  width: 100%;
  height: 260px;
  padding: var(--shop-spacing-xl);
  -o-object-fit: cover;
  object-fit: cover;
}

.product-card-title {
  font-size: 20px;
  font-family: "YekanBakh";
  color: var(--shop-text-white);
  font-weight: 900;
  margin-bottom: 0 !important;
  line-height: 35px;
}

.product-card:hover {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
  background: var(--shop-bg-card-hover);
}

.product-card:hover .card-body {
  background: var(--shop-bg-card-hover);
}

.product-card .card-body {
  background: var(--shop-bg-body);
  -webkit-transition: var(--shop-transition);
  -moz-transition: var(--shop-transition);
  -ms-transition: var(--shop-transition);
  -o-transition: var(--shop-transition);
  transition: var(--shop-transition);
}

.product-card-price {
  color: var(--shop-text-muted);
  font-size: 30px;
  font-weight: 900;
  font-family: "YekanBakh";
}

.per-month-product-card {
  color: var(--shop-text-white);
  font-size: 12px;
}

.product-card-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.product-card-detail ~ div {
  max-height: 75px !important;
}

.product-card-toman {
  margin: 0 !important;
  display: block;
  position: relative;
  top: -10px;
  margin-bottom: -24px !important;
  font-size: 14px;
  color: var(--shop-text-white);
}

/* --------------------------------------------
 * 6. SHOP BUTTONS
 * -------------------------------------------- */

.btn-buy-rank {
  background: var(--shop-btn-buy);
  -webkit-box-shadow: var(--shop-shadow-btn);
  box-shadow: var(--shop-shadow-btn);
  border: 1px solid rgba(92, 19, 218, 0.603);
  font-weight: 600;
  color: var(--shop-text-white);
  font-size: 14px !important;
  font-weight: 400;
  padding: 10px 30px;
  border-radius: var(--shop-radius-md);
  -webkit-transition: var(--shop-transition);
  -moz-transition: var(--shop-transition);
  -ms-transition: var(--shop-transition);
  -o-transition: var(--shop-transition);
  transition: var(--shop-transition);
  min-width: 76%;
}

.btn-buy-rank:hover {
  background: var(--shop-btn-buy-hover);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);
}

.btn-rank-info {
  background: var(--shop-btn-info-bg);
  border: 1px solid var(--shop-btn-info-border);
  color: var(--shop-text-white);
  -webkit-box-shadow: var(--shop-shadow-info);
  box-shadow: var(--shop-shadow-info);
  font-weight: 400;
  font-size: 15px;
  padding: 12px 14px 7px 14px;
  border-radius: var(--shop-radius-md);
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin-right: 10px !important;
  -webkit-transition: var(--shop-transition);
  -moz-transition: var(--shop-transition);
  -ms-transition: var(--shop-transition);
  -o-transition: var(--shop-transition);
  transition: var(--shop-transition);
}

.btn-rank-info:hover {
  background: var(--shop-btn-info-hover);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

/* --------------------------------------------
 * 7. FILTER BUTTONS
 * -------------------------------------------- */

.btn-filter {
  background: transparent;
  border: 2px solid var(--shop-primary-dark);
  color: var(--shop-primary-dark);
  padding: 8px 20px;
  border-radius: var(--shop-radius-round);
  -webkit-transition: var(--shop-transition-smooth);
  -moz-transition: var(--shop-transition-smooth);
  -ms-transition: var(--shop-transition-smooth);
  -o-transition: var(--shop-transition-smooth);
  transition: var(--shop-transition-smooth);
  font-weight: 500;
  cursor: pointer;
}

.btn-filter:hover,
.btn-filter.active {
  background: var(--shop-primary-dark);
  color: var(--shop-text-white);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* --------------------------------------------
 * 8. SORTING DROPDOWN
 * -------------------------------------------- */

.form-select {
  background: rgba(255, 255, 255, 0.1);
  color: var(--shop-text-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--shop-radius-round);
  width: auto;
}

.form-select option {
  background: #2d3436;
  color: var(--shop-text-white);
}

.form-select:focus {
  background: rgba(255, 255, 255, 0.15);
  color: var(--shop-text-white);
  border-color: var(--shop-primary-dark);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

/* --------------------------------------------
 * 9. LOADING STATES
 * -------------------------------------------- */

.loading-spinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 400px;
}

.filter-buttons {
  margin-bottom: 0 !important;
}

/* --------------------------------------------
 * 10. MODAL STYLES
 * -------------------------------------------- */

.modal-title {
  color: var(--shop-text-white);
}

.modal-content {
  background: var(--shop-bg-modal);
  border: 1px solid var(--shop-border-modal);
  border-radius: var(--shop-radius-lg);
}

.modal-header {
  border-bottom-color: var(--shop-border-modal);
}

.modal-footer {
  border-top-color: var(--shop-border-modal);
}

/* --------------------------------------------
 * 11. ANIMATIONS
 * -------------------------------------------- */

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -moz-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@-ms-keyframes fadeInUp {
  from {
    opacity: 0;
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-o-keyframes fadeInUp {
  from {
    opacity: 0;
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

.product-card {
  -webkit-animation: fadeInUp 0.5s ease forwards;
  -moz-animation: fadeInUp 0.5s ease forwards;
  -ms-animation: fadeInUp 0.5s ease forwards;
  -o-animation: fadeInUp 0.5s ease forwards;
  animation: fadeInUp 0.5s ease forwards;
}

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

@media (max-width: 768px) {
  .page-title-section {
    height: 50vh;
  }

  .page-title {
    font-size: 24px;
  }

  .page-title-section-server-name {
    font-size: 24px;
  }

  .filter-buttons {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .btn-filter {
    padding: 6px 14px;
    font-size: 0.85rem;
  }

  .btn-buy-rank {
    min-width: 85% !important;
  }

  .product-card-title {
    font-size: 1.5rem !important;
  }

  .product-card-price {
    font-size: 1.4rem !important;
    margin-bottom: 4px;
  }

  .product-card-img {
    height: 250px !important;
    padding: 20px;
    -o-object-fit: unset !important;
    object-fit: unset !important;
  }

  .btn-buy-rank {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .btn-rank-info {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .breadcrumb-container {
    padding-top: 22.5%;
  }

  .d-flex.flex-wrap {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .sort-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .sort-wrapper i {
    margin-left: 10px;
    color: var(--shop-text-white);
  }

  .shop-sorting {
    width: 100%;
  }

  .form-select {
    width: 100% !important;
  }

  .page-title-section {
    height: 40vh;
  }

  .page-title {
    font-size: 18px;
  }

  .page-title-section-server-name {
    font-size: 18px;
  }

  .product-card-img {
    height: 150px;
    padding: 15px;
  }

  .product-card-title {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .btn-buy-rank {
    padding: 8px 12px;
  }

  .btn-rank-info {
    width: 20%;
  }
}

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

.no-products {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--shop-radius-lg);
  margin: 40px 0;
}

.no-products i {
  font-size: 64px;
  color: #8272f9;
  margin-bottom: 20px;
}

.shop-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background: var(--shop-toast-success);
  color: var(--shop-text-white);
  padding: 12px 24px;
  border-radius: var(--shop-radius-sm);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -moz-transition:
    transform 0.3s ease,
    -moz-transform 0.3s ease;
  -o-transition:
    transform 0.3s ease,
    -o-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease,
    -moz-transform 0.3s ease,
    -o-transform 0.3s ease;
  font-weight: 500;
}

.shop-toast.show {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.shop-toast.error {
  background: var(--shop-toast-error);
}

.product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: -webkit-gradient(linear, left top, right bottom, from(#667eea), to(#764ba2));
  background: -webkit-linear-gradient(top left, #667eea, #764ba2);
  background: -moz-linear-gradient(top left, #667eea, #764ba2);
  background: -o-linear-gradient(top left, #667eea, #764ba2);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: var(--shop-text-white);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
  -webkit-box-shadow: var(--shop-shadow-card);
  box-shadow: var(--shop-shadow-card);
}

.btn-wishlist {
  background: transparent;
  border: none;
  color: #ff4757;
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -moz-transition:
    transform 0.2s ease,
    -moz-transform 0.2s ease;
  -o-transition:
    transform 0.2s ease,
    -o-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition:
    transform 0.2s ease,
    -webkit-transform 0.2s ease,
    -moz-transform 0.2s ease,
    -o-transform 0.2s ease;
}

.btn-wishlist:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.btn-wishlist.active {
  color: #ff4757;
}

.pagination .page-link {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--shop-text-white);
  cursor: pointer;
  margin: 0 5px;
  border-radius: var(--shop-radius-sm);
  -webkit-transition: var(--shop-transition-smooth);
  -moz-transition: var(--shop-transition-smooth);
  -ms-transition: var(--shop-transition-smooth);
  -o-transition: var(--shop-transition-smooth);
  transition: var(--shop-transition-smooth);
}

.pagination .page-link:hover {
  background: rgba(108, 92, 231, 0.5);
}

.pagination .page-item.active .page-link {
  background: var(--shop-primary);
  color: var(--shop-text-white);
}

.pagination .page-item.disabled .page-link {
  background: rgba(255, 255, 255, 0.05);
  color: var(--shop-text-dark);
  cursor: not-allowed;
}

.shop-page-content {
  margin-top: 100px !important;
}

.shop-filters button,
#sortProducts {
  border-radius: var(--shop-radius-md) !important;
  font-size: 14px !important;
}