/**
 * Cyberpunk Component Styles
 * Standard button and UI component design for 3D Learning Club
 */

:root {
  --cyber-cyan: #00f0ff;
  --cyber-magenta: #ff00aa;
  --cyber-purple: #9d00ff;
  --cyber-dark: #0a0a12;
  --cyber-darker: #050508;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Standard Cyberpunk Button */
.cyber-btn {
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.05) 0%,
    rgba(157, 0, 255, 0.05) 100%
  );
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  transition: all 0.2s ease;
  cursor: pointer;
}

.cyber-btn:hover {
  border-color: var(--cyber-cyan);
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.1) 0%,
    rgba(157, 0, 255, 0.1) 100%
  );
}

.cyber-btn:active {
  transform: scale(0.98);
}

.cyber-btn:focus {
  outline: none;
  border-color: var(--cyber-cyan);
}

/* Primary Button - Full gradient fill */
.cyber-btn-primary {
  border: none;
  background: linear-gradient(
    135deg,
    var(--cyber-cyan) 0%,
    var(--cyber-purple) 100%
  );
  color: #000;
  font-weight: 700;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  transition: all 0.2s ease;
  cursor: pointer;
}

.cyber-btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--cyber-cyan) 0%,
    var(--cyber-magenta) 100%
  );
}

/* Secondary Button - Outline style */
.cyber-btn-secondary {
  border: 1px solid var(--cyber-magenta);
  background: transparent;
  color: var(--cyber-magenta);
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  transition: all 0.2s ease;
  cursor: pointer;
}

.cyber-btn-secondary:hover {
  background: rgba(255, 0, 170, 0.1);
  border-color: var(--cyber-magenta);
}

/* Ghost Button - Minimal style */
.cyber-btn-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--cyber-cyan);
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  transition: all 0.2s ease;
  cursor: pointer;
}

.cyber-btn-ghost:hover {
  border-color: rgba(0, 240, 255, 0.3);
  background: rgba(0, 240, 255, 0.05);
}

/* Button Sizes */
.cyber-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
}

.cyber-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
}

/* ========================================
   LINKS
   ======================================== */

.cyber-link {
  position: relative;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.cyber-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta));
  transition: width 0.3s ease;
}

.cyber-link:hover::before {
  width: 100%;
}

.cyber-link:hover {
  color: var(--cyber-cyan);
}

/* ========================================
   DROPDOWNS & PANELS
   ======================================== */

.cyber-dropdown {
  background: var(--cyber-dark);
  border: 1px solid rgba(0, 240, 255, 0.2);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%
  );
}

.cyber-dropdown li a {
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.cyber-dropdown li a:hover {
  border-left-color: var(--cyber-cyan);
  background: rgba(0, 240, 255, 0.08);
  color: var(--cyber-cyan);
}

.cyber-panel {
  background: var(--cyber-dark);
  border: 1px solid rgba(0, 240, 255, 0.2);
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
}

/* ========================================
   CARDS
   ======================================== */

.cyber-card {
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.03) 0%,
    rgba(157, 0, 255, 0.03) 100%
  );
  border: 1px solid rgba(0, 240, 255, 0.15);
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
  transition: all 0.3s ease;
}

.cyber-card:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.06) 0%,
    rgba(157, 0, 255, 0.06) 100%
  );
}

/* ========================================
   INPUTS
   ======================================== */

.cyber-input {
  background: var(--cyber-darker);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: #fff;
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
  transition: all 0.2s ease;
}

.cyber-input:focus {
  outline: none;
  border-color: var(--cyber-cyan);
  background: rgba(0, 240, 255, 0.05);
}

.cyber-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   DIVIDERS & ACCENTS
   ======================================== */

.cyber-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 240, 255, 0.3),
    rgba(255, 0, 170, 0.3),
    transparent
  );
}

.cyber-accent-border {
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--cyber-cyan), var(--cyber-magenta))
    1;
}

/* ========================================
   TEXT EFFECTS
   ======================================== */

.cyber-text-gradient {
  background: linear-gradient(135deg, var(--cyber-cyan), var(--cyber-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cyber-icon {
  color: var(--cyber-cyan);
  opacity: 0.8;
}

/* ========================================
   BADGES
   ======================================== */

.cyber-badge {
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.2) 0%,
    rgba(157, 0, 255, 0.2) 100%
  );
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--cyber-cyan);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  clip-path: polygon(
    4px 0,
    100% 0,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    0 100%,
    0 4px
  );
}

.cyber-badge-magenta {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 170, 0.2) 0%,
    rgba(157, 0, 255, 0.2) 100%
  );
  border: 1px solid rgba(255, 0, 170, 0.4);
  color: var(--cyber-magenta);
}