/* Extended Single Product Styles */

/* Typography */
.fontfamblockvarheading {
  border: 1px solid var(--border, #e5e5e5);
  padding: 20px;
  margin-bottom: 30px;
  border-radius: var(--radius, 4px);
  background-color: var(--card, #fff);
  border: 1px solid var(--border, #ccc);
}

.fontfamblockvarheading h2 {
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.fontfamblockvarheading p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted-foreground, #666);
}

/* Product Variations */
.product-variations {
  margin: 30px 0;
}

.variation-selector {
  margin-bottom: 20px;
}

.variation-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.variation-selector select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border, #ccc);
  border-radius: var(--radius, 4px);
  background: var(--input, #fff);
  color: var(--foreground, #000);
  font-size: 14px;
}

.variation-selector select:focus {
  outline: none;
  border-color: var(--primary, #007cba);
  box-shadow: 0 0 0 2px var(--primary, rgba(0, 124, 186, 0.2));
}

/* Product Description */
.woocommerce-variation-description {
  margin-top: 20px;
  padding: 20px;
  background-color: var(--muted, #f8f9fa);
  border-radius: var(--radius, 4px);
  border: 1px solid var(--border, #ccc);
}

.woocommerce-variation-description h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.woocommerce-variation-description p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: var(--muted-foreground, #666);
}

.woocommerce-variation-description ul {
  margin: 0 0 15px 20px;
  padding: 0;
}

.woocommerce-variation-description li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--muted-foreground, #666);
}

/* Pricing Display */
.woocommerce-variation-price {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--foreground, #333);
}

.price .amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Add to Cart Section */
.single_variation_wrap {
  margin-top: 30px;
}

.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 480px) {
  .woocommerce-variation-add-to-cart {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

.quantity {
  display: flex;
  align-items: center;
}

.quantity .qty {
  width: 80px;
  padding: 12px;
  border: 1px solid var(--border, #ccc);
  border-radius: var(--radius, 4px);
  text-align: center;
  font-size: 16px;
  background: var(--input, #fff);
  color: var(--foreground, #000);
}

.single_add_to_cart_button {
  flex: 1;
  padding: 15px 30px;
  background-color: var(--primary, #007cba);
  color: var(--primary-foreground, #fff);
  border: none;
  border-radius: var(--radius, 4px);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.single_add_to_cart_button:hover {
  background-color: var(--primary, #005a8b);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.single_add_to_cart_button:disabled {
  background-color: var(--muted, #ccc);
  color: var(--muted-foreground, #666);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Product Meta Information */
.product_meta {
  margin: 30px 0;
  padding: 20px;
  background-color: var(--muted, #f8f9fa);
  border-radius: var(--radius, 4px);
  border: 1px solid var(--border, #e0e0e0);
}

.product_meta span {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--muted-foreground, #666);
}

.product_meta a {
  color: var(--primary, #007cba);
  text-decoration: none;
}

.product_meta a:hover {
  text-decoration: underline;
}

/* Font Display Styles */
.font-preview {
  margin: 30px 0;
  padding: 30px;
  background-color: var(--card, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 4px);
}

.font-preview h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.font-sample {
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--foreground, #333);
}

.font-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.font-detail-item {
  padding: 15px;
  background-color: var(--muted, #f8f9fa);
  border-radius: var(--radius, 4px);
  text-align: center;
}

.font-detail-item .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted-foreground, #666);
  margin-bottom: 5px;
}

.font-detail-item .value {
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground, #333);
}

/* Related Products */
.related-products {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--border, #e0e0e0);
}

.related-products h2 {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
  color: var(--foreground, #333);
  text-align: center;
}

/* Font License Information */
.font-license-info {
  margin: 30px 0;
  padding: 25px;
  background: linear-gradient(
    135deg,
    var(--muted, #f8f9fa) 0%,
    var(--card, #fff) 100%
  );
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.68));
}

.font-license-info h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--foreground, rgba(153, 141, 141, 0.9));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.77));
  background-color: var(--background, rgba(0, 0, 0, 0.2));
  padding: 12px;
  border-radius: var(--radius, 4px);
}

.font-license-info p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: var(--primary-foreground, #fff);
  background-color: var(--background, rgba(0, 0, 0, 0.77));
  padding: 15px;
  border-radius: var(--radius, 4px);
}

.font-license-info ul {
  margin: 15px 0 0 20px;
  padding: 0;
}

.font-license-info li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--muted-foreground, rgba(59, 59, 59, 0.9));
  background: var(--background, #fff);
  padding: 8px;
  border-radius: var(--radius, 4px);
  margin-bottom: 8px;
}

/* Download Section */
.font-download-section {
  margin: 30px 0;
  padding: 25px;
  background-color: var(--card, #fff);
  border-radius: var(--radius, 8px);
  border: 2px solid var(--primary, #f1b218);
  text-align: center;
}

.font-download-section h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.font-download-section p {
  margin: 0 0 20px 0;
  color: var(--muted-foreground, rgba(255, 255, 255, 0.31));
  line-height: 1.6;
}

.download-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: var(--primary, #f1b218);
  color: var(--primary-foreground, rgba(255, 255, 255, 1));
  text-decoration: none;
  border-radius: var(--radius, 4px);
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.download-button:hover {
  background-color: var(--primary, #d4a017);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.15));
  color: var(--primary-foreground, rgba(255, 255, 255, 1));
  text-decoration: none;
}

/* Font Character Set */
.font-character-set {
  margin: 40px 0;
  padding: 30px;
  background-color: var(--muted, #f8f9fa);
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, #e0e0e0);
}

.font-character-set h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground, #333);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.character-item {
  padding: 15px;
  background-color: var(--card, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 4px);
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease;
}

.character-item:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.15));
  border-color: var(--primary, #007cba);
}

/* Responsive Design */
@media (max-width: 768px) {
  .fontfamblockvarheading {
    padding: 15px;
  }

  .font-preview {
    padding: 20px;
  }

  .font-sample {
    font-size: 24px;
  }

  .font-details {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .font-license-info,
  .font-download-section,
  .font-character-set {
    padding: 20px;
  }

  .character-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
  }
}