/* Court Coach Pro CSS Logo */
.ccp-logo {
  width: 100px;
  height: 100px;
  position: relative;
  background: linear-gradient(135deg, #84cc16 0%, #65a30d 50%, #4d7c0f 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(132, 204, 22, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Tennis court lines */
.ccp-logo::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    transparent 48%,
    rgba(255, 255, 255, 0.6) 48%,
    rgba(255, 255, 255, 0.6) 52%,
    transparent 52%
  );
}

/* Net line in the middle */
.ccp-logo::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Tennis ball - now the main logo element */
.ccp-logo-ball {
  width: 60px;
  height: 60px;
  background: #fde047;
  border-radius: 50%;
  position: relative;
  box-shadow: 
    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Tennis ball curved seam lines */
.ccp-logo-ball::before,
.ccp-logo-ball::after {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  border-left: transparent;
  border-right: transparent;
}

.ccp-logo-ball::before {
  transform: rotate(30deg);
}

.ccp-logo-ball::after {
  transform: rotate(-30deg);
}


/* Smaller version for favicons */
.ccp-logo-small {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.ccp-logo-small .ccp-logo-ball {
  width: 20px;
  height: 20px;
}

.ccp-logo-small .ccp-logo-ball::before,
.ccp-logo-small .ccp-logo-ball::after {
  border-width: 1px;
}

/* Animation for interactivity */
.ccp-logo:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 6px 16px rgba(132, 204, 22, 0.4);
}

.ccp-logo:hover .ccp-logo-ball {
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}