/* Components CSS */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-light);
}

.btn-light {
  background-color: var(--color-text-light);
  color: var(--color-primary);
}

.btn-light:hover {
  background-color: var(--color-neutral-100);
}

.btn-text {
  color: var(--color-text-primary);
}

.btn-text:hover {
  color: var(--color-primary);
}

.btn-outline {
  border: 2px solid var(--color-text-light);
  color: var(--color-text-light);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Forms */
.signup-form {
  margin-top: var(--space-4);
}

.form-group {
  display: flex;
  margin-bottom: var(--space-2);
}

.form-group input {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  transition: border-color var(--transition-fast);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-group .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.form-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Device Mockup */
.device-mockup {
  position: relative;
  width: 280px;
  height: 550px;
  background-color: var(--color-neutral-800);
  border-radius: 36px;
  padding: 12px;
  box-shadow: 
    0 50px 100px rgba(0, 0, 0, 0.15),
    0 25px 50px rgba(0, 0, 0, 0.1),
    0 12.5px 25px rgba(0, 0, 0, 0.05),
    inset 0 -2px 6px rgba(255, 255, 255, 0.1);
}

.device-screen {
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  border-radius: 24px;
  overflow: hidden;
}

.app-interface {
  padding: 16px;
}

.balance-display {
  text-align: left;
  margin-bottom: 12px;
}

.balance-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.balance-amount {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.price-chart {
  height: 160px;
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.1) 0%, rgba(0, 82, 255, 0.05) 100%);
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.price-chart::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 2px;
  background: 
    linear-gradient(90deg, 
      rgba(0, 82, 255, 0.5) 0%, 
      rgba(0, 82, 255, 0.2) 25%,
      rgba(0, 82, 255, 0.5) 50%,
      rgba(0, 82, 255, 0.2) 75%,
      rgba(0, 82, 255, 0.5) 100%);
}

.price-chart::after {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: 
    radial-gradient(
      50% 120% at 50% 100%, 
      rgba(0, 82, 255, 0.3) 0%, 
      rgba(0, 82, 255, 0) 100%);
}

.app-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.action-button {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  padding: 12px 0;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
}

.action-button:active {
  background-color: var(--color-neutral-200);
}

/* Crypto Icons */
.crypto-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-200);
  position: relative;
}

.crypto-icon.large {
  width: 48px;
  height: 48px;
}

.crypto-icon.bitcoin {
  background-color: #F7931A;
}

.crypto-icon.ethereum {
  background-color: #627EEA;
}

.crypto-icon.solana {
  background-color: #00FFA3;
}

.crypto-icon.tether {
  background-color: #26A17B;
}

.crypto-icon.xrp {
  background-color: #23292F;
}

/* Change indicators */
.change {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.change.positive {
  color: var(--color-success);
  background-color: rgba(47, 158, 68, 0.1);
}

.change.negative {
  color: var(--color-error);
  background-color: rgba(224, 49, 49, 0.1);
}

.change.neutral {
  color: var(--color-text-tertiary);
  background-color: rgba(108, 117, 125, 0.1);
}

.change.positive::before {
  content: '↑';
  margin-right: 2px;
}

.change.negative::before {
  content: '↓';
  margin-right: 2px;
}

/* Feature Icons */
.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: rgba(0, 82, 255, 0.1);
  margin: 0 auto;
  position: relative;
}

.feature-icon::before, 
.feature-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.feature-icon.secure::before {
  width: 24px;
  height: 30px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
}

.feature-icon.secure::after {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  top: 60%;
}

.feature-icon.insurance::before {
  width: 30px;
  height: 20px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.feature-icon.insurance::after {
  width: 26px;
  height: 4px;
  background-color: var(--color-primary);
  top: 40%;
}

.feature-icon.compliance::before {
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
}

.feature-icon.compliance::after {
  content: '✓';
  color: var(--color-primary);
  font-size: 18px;
  font-weight: bold;
}

/* Trophy and Chart Graphics */
.trophy-graphic {
  width: 220px;
  height: 220px;
  background-color: #FFD700;
  border-radius: var(--radius-lg);
  position: relative;
  margin: 0 auto;
}

.trophy-graphic::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 120px;
  background-color: var(--color-primary);
  border-radius: 40px 40px 0 0;
}

.trophy-graphic::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  z-index: -1;
}

.chart-graphic {
  width: 240px;
  height: 180px;
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-lg);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.chart-graphic::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: 
    linear-gradient(180deg, 
      rgba(247, 147, 26, 0) 0%,
      rgba(247, 147, 26, 0.3) 100%);
}

.chart-graphic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(247, 147, 26, 0.5);
  clip-path: polygon(
    0% 100%,
    10% 60%,
    20% 90%,
    30% 30%,
    40% 40%,
    50% 20%,
    60% 40%,
    70% 10%,
    80% 30%,
    90% 0%,
    100% 40%,
    100% 100%
  );
}

/* Social icons */
.social-link.twitter::before,
.social-link.facebook::before,
.social-link.instagram::before,
.social-link.linkedin::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: var(--color-text-light);
}

.social-link.twitter::before {
  /* Simplified Twitter icon */
  clip-path: path('M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z');
}

.social-link.facebook::before {
  /* Simplified Facebook icon */
  clip-path: path('M17 2v2h-2c-.7 0-1 .3-1 1v2h3l-.5 3H14v8h-3v-8H8V7h3V5.5C11 3.6 12.5 2 14.4 2H17z');
}

.social-link.instagram::before {
  /* Simplified Instagram icon */
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--color-text-light), 0 0 0 2px transparent, 0 0 0 3px var(--color-text-light);
}

.social-link.instagram::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-text-light);
  border-radius: var(--radius-full);
}

.social-link.linkedin::before {
  /* Simplified LinkedIn icon */
  clip-path: path('M1,6H5V18H1ZM3,1.8C1.8,1.8,0.8,2.8,0.8,4C0.8,5.2,1.8,6.2,3,6.2C4.2,6.2,5.2,5.2,5.2,4C5.2,2.8,4.2,1.8,3,1.8ZM10,9.6C11.7,9.6,13.1,10.9,13.1,12.8V18H17.1V13.2C17.1,9.3,15.3,7.8,12.6,7.8C10.6,7.8,9.5,9,8.9,9.8V8H5C5,9.2,5,18,5,18H9V12.8C9,12.3,9,11.8,9.1,11.5C9.4,10.5,10.2,9.6,11.5,9.6H11.6L10,9.6Z');
}