/* General styles */
body {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Card styling */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Form styling */
.form-control:focus, .form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Key row styling */
.key-row {
    transition: background-color 0.3s ease;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.key-row:hover {
    background-color: #f8f9fa;
}

/* Result text area */
#campaign-result {
    font-family: monospace;
    font-size: 0.9rem;
    resize: none;
}

/* Success feedback */
.copy-success {
    animation: fadeInOut 2s ease;
    color: #28a745;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* Ensure proper Bootstrap Icons rendering */
.bi {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Icon sizing and alignment */
h2 .bi {
    font-size: 1.2em;
    margin-right: 0.5rem;
    color: #6c757d; /* Bootstrap secondary color for consistency */
}

/* Enhanced CSS for UTM Close Buttons */

/* Target the close button with high specificity and !important */
.utm-value-badge .btn-close,
.utm-value-badge .btn-close-white,
.badge.utm-value-badge button.btn-close,
.badge.utm-value-badge button.btn-close-white {
  /* Base style - completely redefine the button */
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  opacity: 0.8 !important;
  filter: none !important;
  color: #dc3545 !important;
}

/* Define hover state */
.utm-value-badge .btn-close:hover,
.utm-value-badge .btn-close-white:hover,
.badge.utm-value-badge button.btn-close:hover,
.badge.utm-value-badge button.btn-close-white:hover {
  opacity: 1 !important;
  background-color: transparent !important;
}