/* Custom styles for AdNet */

/* Dashboard cards */
.dashboard-card {
    @apply bg-base-100 rounded-lg shadow-lg p-6;
    transition: transform 0.2s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-2px);
}

/* Stats cards */
.stats-card {
    @apply bg-base-100 rounded-lg shadow-lg p-4;
}

.stats-card .stat-value {
    @apply text-3xl font-bold;
}

/* Charts container */
.chart-container {
    @apply bg-base-100 rounded-lg shadow-lg p-6;
    height: 300px;
}

/* Tables */
.table-container {
    @apply overflow-x-auto;
}

.table th {
    @apply bg-base-200;
}

/* Forms */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium mb-1;
}

.form-input {
    @apply input input-bordered w-full;
}

.form-select {
    @apply select select-bordered w-full;
}

/* Buttons */
.btn-primary {
    @apply bg-primary text-primary-content hover:bg-primary-focus;
}

.btn-secondary {
    @apply bg-secondary text-secondary-content hover:bg-secondary-focus;
}

/* Alerts */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-success text-success-content;
}

.alert-error {
    @apply bg-error text-error-content;
}

.alert-warning {
    @apply bg-warning text-warning-content;
}

/* Loading spinner */
.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-card {
        @apply p-4;
    }
    
    .chart-container {
        height: 250px;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-base-200;
}

::-webkit-scrollbar-thumb {
    @apply bg-base-300 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-base-400;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Tooltips */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltip-text {
    @apply invisible absolute z-50 bg-base-200 text-base-content rounded-lg p-2 text-sm;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:hover .tooltip-text {
    @apply visible;
}

/* Badges */
.badge {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
}

.badge-success {
    @apply bg-success text-success-content;
}

.badge-error {
    @apply bg-error text-error-content;
}

.badge-warning {
    @apply bg-warning text-warning-content;
}

/* Modal */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
}

.modal-content {
    @apply bg-base-100 rounded-lg shadow-xl p-6 max-w-lg mx-auto relative z-50;
    animation: modalFadeIn 0.3s ease-in-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Home Page Specific Styles */

.hero-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
}

/* Primary Button Styles */
.primary-btn {
  background: linear-gradient(to right, #f97316, #fb923c);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
}

/* Secondary Button Styles */
.secondary-btn {
  background: white;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  border-color: #f97316;
  color: #f97316;
  transform: translateY(-2px);
}

/* Orange Text Gradient - Specifically for the 3rd image */
.text-orange-gradient {
  background: linear-gradient(to right, #f97316, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Peach Text - For the "Platform" text in the 3rd image */
.text-peach {
  color: #FFDAB9;
}

/* Stats Card Styles */
.stats-card {
  background: white;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Feature Card Styles */
.feature-card {
  transition: all 0.3s ease;
  border-radius: 12px;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-icon-container {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
  font-size: 28px;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-container {
  background: #f97316;
  color: white;
}

/* Testimonial Card Styles */
.testimonial-card {
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Additional responsive adjustments */
@media (max-width: 768px) {
  .hero-heading {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}