@charset "UTF-8";

/* src/theme/variables.scss */
:root {
  --ion-color-primary: #6366F1;
  --ion-color-primary-rgb:
    99,
    102,
    241;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb:
    255,
    255,
    255;
  --ion-color-primary-shade: #5558d5;
  --ion-color-primary-tint: #737af2;
  --ion-color-secondary: #10B981;
  --ion-color-secondary-rgb:
    16,
    185,
    129;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb:
    255,
    255,
    255;
  --ion-color-secondary-shade: #0ea372;
  --ion-color-secondary-tint: #28c08e;
  --ion-color-tertiary: #F59E0B;
  --ion-color-tertiary-rgb:
    245,
    158,
    11;
  --ion-color-tertiary-contrast: #000000;
  --ion-color-tertiary-contrast-rgb:
    0,
    0,
    0;
  --ion-color-tertiary-shade: #d88b0a;
  --ion-color-tertiary-tint: #f6a823;
  --ion-color-success: #10B981;
  --ion-color-success-rgb:
    16,
    185,
    129;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb:
    255,
    255,
    255;
  --ion-color-success-shade: #0ea372;
  --ion-color-success-tint: #28c08e;
  --ion-color-warning: #F59E0B;
  --ion-color-warning-rgb:
    245,
    158,
    11;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb:
    0,
    0,
    0;
  --ion-color-warning-shade: #d88b0a;
  --ion-color-warning-tint: #f6a823;
  --ion-color-danger: #EF4444;
  --ion-color-danger-rgb:
    239,
    68,
    68;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb:
    255,
    255,
    255;
  --ion-color-danger-shade: #d23c3c;
  --ion-color-danger-tint: #f15757;
  --ion-color-dark: #1E293B;
  --ion-color-dark-rgb:
    30,
    41,
    59;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb:
    255,
    255,
    255;
  --ion-color-dark-shade: #1a2434;
  --ion-color-dark-tint: #353f4f;
  --ion-color-light: #F8FAFC;
  --ion-color-light-rgb:
    248,
    250,
    252;
  --ion-color-light-contrast: #1E293B;
  --ion-color-light-contrast-rgb:
    30,
    41,
    59;
  --ion-color-light-shade: #daddde;
  --ion-color-light-tint: #f9fbfc;
  --ion-color-medium: #64748B;
  --ion-color-medium-rgb:
    100,
    116,
    139;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb:
    255,
    255,
    255;
  --ion-color-medium-shade: #58667a;
  --ion-color-medium-tint: #748297;
  --ion-font-family:
    "Plus Jakarta Sans",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --ion-background-color: #F8FAFC;
  --ion-background-color-rgb:
    248,
    250,
    252;
  --ion-text-color: #1E293B;
  --ion-text-color-rgb:
    30,
    41,
    59;
  --ion-toolbar-background: #ffffff;
  --ion-toolbar-color: #1E293B;
  --ion-item-background: #ffffff;
  --ion-card-background: #ffffff;
  --pm-surface: #ffffff;
  --pm-surface-elevated: #ffffff;
  --pm-surface-muted: #F1F5F9;
  --pm-surface-subtle: #E2E8F0;
  --pm-border: #E2E8F0;
  --pm-border-light: #F1F5F9;
  --pm-text-primary: #0F172A;
  --pm-text-secondary: #475569;
  --pm-text-muted: #94A3B8;
  --pm-text-inverse: #ffffff;
  --pm-gradient-primary:
    linear-gradient(
      135deg,
      #6366F1 0%,
      #8B5CF6 50%,
      #A855F7 100%);
  --pm-gradient-warm:
    linear-gradient(
      135deg,
      #F97316 0%,
      #EF4444 50%,
      #EC4899 100%);
  --pm-gradient-cool:
    linear-gradient(
      135deg,
      #06B6D4 0%,
      #3B82F6 50%,
      #6366F1 100%);
  --pm-gradient-success:
    linear-gradient(
      135deg,
      #10B981 0%,
      #059669 100%);
  --pm-gradient-hero:
    linear-gradient(
      135deg,
      #667EEA 0%,
      #764BA2 100%);
  --pm-gradient-card-hover:
    linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.03) 0%,
      rgba(168, 85, 247, 0.06) 100%);
  --pm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --pm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --pm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --pm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --pm-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
  --pm-shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.04);
  --pm-shadow-card-hover: 0 4px 12px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.06);
  --pm-radius-sm: 8px;
  --pm-radius-md: 12px;
  --pm-radius-lg: 16px;
  --pm-radius-xl: 24px;
  --pm-radius-full: 9999px;
  --pm-space-xs: 4px;
  --pm-space-sm: 8px;
  --pm-space-md: 16px;
  --pm-space-lg: 24px;
  --pm-space-xl: 32px;
  --pm-space-2xl: 48px;
  --pm-space-3xl: 64px;
  --pm-text-xs: 0.75rem;
  --pm-text-sm: 0.875rem;
  --pm-text-base: 1rem;
  --pm-text-lg: 1.125rem;
  --pm-text-xl: 1.25rem;
  --pm-text-2xl: 1.5rem;
  --pm-text-3xl: 1.875rem;
  --pm-text-4xl: 2.25rem;
  --pm-text-5xl: 3rem;
  --pm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --pm-transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --pm-cat-mobile: #F97316;
  --pm-cat-web: #3B82F6;
  --pm-cat-wordpress: #8B5CF6;
  --pm-cat-javascript: #EAB308;
  --pm-cat-uikit: #EC4899;
  --pm-cat-fullstack: #10B981;
}

/* src/global.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family:
    "Plus Jakarta Sans",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #F8FAFC;
  color: var(--pm-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--pm-text-primary);
}
a {
  color: var(--ion-color-primary);
  text-decoration: none;
  transition: color var(--pm-transition-fast);
}
a:hover {
  color: var(--ion-color-primary-shade);
}
img {
  max-width: 100%;
  height: auto;
}
ul,
ol {
  list-style: none;
}
button {
  cursor: pointer;
}
.pm-card {
  background: var(--pm-surface);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-card);
  border: 1px solid var(--pm-border-light);
  overflow: hidden;
  transition: transform var(--pm-transition-base), box-shadow var(--pm-transition-base);
}
.pm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-card-hover);
}
.pm-card-flat {
  background: var(--pm-surface);
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  padding: var(--pm-space-lg);
}
.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--pm-radius-sm);
  font-weight: 600;
  font-size: var(--pm-text-sm);
  cursor: pointer;
  border: none;
  transition: all var(--pm-transition-base);
  font-family: inherit;
  text-decoration: none;
  line-height: 1.4;
}
.pm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pm-btn-primary {
  background: var(--pm-gradient-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.pm-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.pm-btn-success {
  background: var(--pm-gradient-success);
  color: white;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.pm-btn-success:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}
.pm-btn-outline {
  background: transparent;
  color: var(--ion-color-primary);
  border: 2px solid var(--ion-color-primary);
}
.pm-btn-outline:hover {
  background: rgba(99, 102, 241, 0.05);
}
.pm-btn-ghost {
  background: transparent;
  color: var(--pm-text-secondary);
}
.pm-btn-ghost:hover {
  background: var(--pm-surface-muted);
  color: var(--pm-text-primary);
}
.pm-btn-lg {
  padding: 16px 32px;
  font-size: var(--pm-text-base);
  border-radius: var(--pm-radius-md);
}
.pm-btn-sm {
  padding: 8px 16px;
  font-size: var(--pm-text-xs);
}
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--pm-radius-full);
  font-size: var(--pm-text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pm-badge-primary {
  background: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}
.pm-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.pm-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}
.pm-badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}
.pm-badge-featured {
  background:
    linear-gradient(
      135deg,
      #F97316,
      #EF4444);
  color: white;
}
.pm-stars {
  display: inline-flex;
  gap: 2px;
  color: #F59E0B;
  font-size: 14px;
}
.pm-star-filled::before {
  content: "\2605";
  color: #F59E0B;
}
.pm-star-half::before {
  content: "\2605";
  opacity: 0.5;
  color: #F59E0B;
}
.pm-star-empty::before {
  content: "\2606";
  color: #CBD5E1;
}
.pm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pm-space-lg);
}
.pm-section {
  padding: var(--pm-space-3xl) 0;
}
.pm-grid {
  display: grid;
  gap: var(--pm-space-lg);
}
.pm-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.pm-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.pm-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .pm-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .pm-grid-3,
  .pm-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pm-container {
    padding: 0 var(--pm-space-md);
  }
  .pm-section {
    padding: var(--pm-space-2xl) 0;
  }
}
@media (max-width: 480px) {
  .pm-grid-2,
  .pm-grid-3,
  .pm-grid-4 {
    grid-template-columns: 1fr;
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}
.fade-in {
  animation: fadeIn 0.4s ease forwards;
}
.scale-in {
  animation: scaleIn 0.3s ease forwards;
}
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) {
  animation-delay: 0ms;
}
.stagger-children > *:nth-child(2) {
  animation-delay: 60ms;
}
.stagger-children > *:nth-child(3) {
  animation-delay: 120ms;
}
.stagger-children > *:nth-child(4) {
  animation-delay: 180ms;
}
.stagger-children > *:nth-child(5) {
  animation-delay: 240ms;
}
.stagger-children > *:nth-child(6) {
  animation-delay: 300ms;
}
.stagger-children > *:nth-child(7) {
  animation-delay: 360ms;
}
.stagger-children > *:nth-child(8) {
  animation-delay: 420ms;
}
.pm-heading-xl {
  font-size: var(--pm-text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pm-heading-lg {
  font-size: var(--pm-text-3xl);
  font-weight: 700;
  line-height: 1.2;
}
.pm-heading-md {
  font-size: var(--pm-text-xl);
  font-weight: 600;
}
.pm-text-secondary {
  color: var(--pm-text-secondary);
}
.pm-text-muted {
  color: var(--pm-text-muted);
}
.pm-search-bar {
  display: flex;
  align-items: center;
  background: var(--pm-surface);
  border: 2px solid var(--pm-border);
  border-radius: var(--pm-radius-full);
  padding: 4px 4px 4px 20px;
  box-shadow: var(--pm-shadow-lg);
  transition: all var(--pm-transition-base);
  max-width: 640px;
  width: 100%;
  gap: 8px;
}
.pm-search-bar:focus-within {
  border-color: var(--ion-color-primary);
  box-shadow: var(--pm-shadow-glow);
}
.pm-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--pm-text-base);
  font-family: inherit;
  color: var(--pm-text-primary);
  padding: 8px 0;
  min-width: 0;
}
.pm-search-bar input::placeholder {
  color: var(--pm-text-muted);
}
.pm-search-bar button {
  background: var(--pm-gradient-primary);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: var(--pm-radius-full);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--pm-transition-base);
  font-family: inherit;
  flex-shrink: 0;
}
.pm-search-bar button:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}
.pm-price {
  font-weight: 800;
  font-size: var(--pm-text-xl);
  color: var(--ion-color-primary);
}
.pm-price-original {
  text-decoration: line-through;
  color: var(--pm-text-muted);
  font-weight: 400;
  font-size: var(--pm-text-sm);
  margin-left: 6px;
}
.pm-price-discount {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  padding: 2px 8px;
  border-radius: var(--pm-radius-full);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  margin-left: 8px;
}
@media (max-width: 576px) {
  .pm-heading-xl {
    font-size: var(--pm-text-3xl);
  }
  .pm-heading-lg {
    font-size: var(--pm-text-2xl);
  }
  .pm-search-bar {
    flex-direction: column;
    border-radius: var(--pm-radius-lg);
    padding: 12px;
  }
  .pm-search-bar button {
    width: 100%;
    border-radius: var(--pm-radius-sm);
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */