* {
  font-family: "Geist Mono", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  color: #333;
}

/* Modal Close Warning Toast */
.modal-close-warning {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff6b6b;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  animation: slideDown 0.3s ease-out, slideUp 0.3s ease-in 2.7s;
  pointer-events: none;
}

.modal-close-warning::before {
  content: "⚠";
  font-size: 20px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

/* Header */
header {
  padding: 20px 40px;
  border-bottom: 1px solid #e5e5e5;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  color: #103dee;
  font-size: 24px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
}

.h1-version {
  margin-left: 2px;
  margin-bottom: 5px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

#username-display {
  font-size: 12px;
  color: #666;
}

.logout-btn {
  background-color: #f0f2f5;
  color: #333;
  border: 1px solid #dddfe2;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  background-color: #e4e6eb;
  border-color: #bcc0c4;
}

.refresh-data-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.refresh-data-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
}

.refresh-data-btn:active {
  transform: scale(0.95);
}

.refresh-data-btn.refreshing {
  animation: spin 1s linear infinite;
  color: #1a73e8;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Auth message */
.auth-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14px;
  color: #666;
}

.auth-message a {
  color: #103dee;
  text-decoration: none;
}

.auth-message a:hover {
  text-decoration: underline;
}

.h1-version {
  font-size: 11px;
}

.main-container h2 {
  font-size: 16px;
  color: #103dee;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}

/* Main Container */
.main-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 461px;
  min-height: calc(100vh - 80px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.main-container > div,
.main-container > aside {
  border-right: 1px solid #e5e5e5;
  padding: 20px;
}

.main-container > div:last-child,
.main-container > aside:last-child {
  border-right: none;
}

/* Column Headers */
h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

/* Ad Account Column */
.ad-acc-column ul {
  font-size: 14px;
  list-style: none;
}

.ad-acc-column li {
  margin-bottom: 8px;
}

.ad-acc-column a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  border: 1px solid transparent;
}

.ad-acc-column a:hover {
  background-color: #f8f9fa;
  border-color: #e5e5e5;
}

.ad-acc-column a.selected {
  background-color: #e8f2ff;
  border-color: #4a90e2;
  border-left: 3px solid #4a90e2;
}

/* Campaign Column */
.campaign-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #103dee;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.campaign-selection {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  padding-right: 10px;
}

.campaign-selection::-webkit-scrollbar,
.files-container::-webkit-scrollbar,
.images-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.campaign-selection::-webkit-scrollbar-track,
.files-container::-webkit-scrollbar-track,
.images-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.campaign-selection::-webkit-scrollbar-thumb,
.files-container::-webkit-scrollbar-thumb,
.images-wrapper::-webkit-scrollbar-thumb {
  background: #afafaf;
}

.campaign-selection::-webkit-scrollbar-thumb:hover,
.files-container::-webkit-scrollbar-thumb:hover,
.images-wrapper::-webkit-scrollbar-thumb:hover {
  background: #4a90e2;
}

.campaign-column h2 {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.campaign-title-wrapper img {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  margin-bottom: -2.5px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.campaign-title-wrapper img:hover {
  opacity: 1;
}

/* Create New Campaign Button */
.create-new-campaign-btn {
  width: 100%;
  padding: 12px 16px;
  background-color: #103dee;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.create-new-campaign-btn:hover {
  background-color: #0d32c4;
}

.create-new-campaign-btn:active {
  transform: scale(0.98);
}

/* Create Multi-Campaign Ad Set Button */
.create-multi-adset-btn {
  width: 100%;
  padding: 12px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.create-multi-adset-btn:hover {
  background-color: #218838;
}

.create-multi-adset-btn:active {
  transform: scale(0.98);
}

/* Create Multi-Account Campaign Button (Header) */
.create-multi-account-campaign-btn {
  background-color: #6f42c1;
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  margin-left: 8px;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.create-multi-account-campaign-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #6f42c1;
  border: #6f42c1 1px solid;
}

.create-multi-account-campaign-btn p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* Campaign Search */
.campaign-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  position: relative;
}

.campaign-search-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #e5e5e5;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.campaign-search-input:focus {
  border-color: #103dee;
  box-shadow: 0 0 0 2px rgba(16, 61, 238, 0.1);
}

.campaign-search-input::placeholder {
  color: #999;
}

.search-close-btn {
  padding: 6px 12px;
  background-color: #f8f9fa;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.search-close-btn:hover {
  background-color: #e5e5e5;
  color: #333;
}

.campaign {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
}

.campaign:hover {
  border-color: #e5e5e5;
  background-color: #f8f9fa;
}

.campaign.selected {
  background-color: #e8f2ff;
  border-color: #4a90e2;
  border-left: 3px solid #4a90e2;
}

.campaign h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.campaign ul {
  list-style: none;
}

.campaign li {
  font-size: 12px;
  margin-bottom: 4px;
  color: #666;
}

.campaign li:first-child {
  font-weight: 500;
}

/* Status colors */
.campaign.active li:first-child {
  color: #28a745;
}

.campaign li:first-child:contains("Paused") {
  color: #6c757d;
}

/* Action Column */
.action-column ul {
  list-style: none;
}

.action-column li {
  font-size: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  color: #333;
}

.action-column li:hover {
  background-color: #f8f9fa;
  border-color: #e5e5e5;
}

.action-column li.selected {
  background-color: #e8f2ff;
  border-color: #4a90e2;
  border-left: 3px solid #4a90e2;
}

/* Upload Column */
.upload-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Campaign Creation Column */
.campaign-creation-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.campaign-creation-column h2 {
  font-size: 18px;
  color: #103dee;
  border-bottom: 1px solid #103dee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.campaign-form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.campaign-form-container input[type="text"] {
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.campaign-form-container input[type="text"]:focus {
  border-color: #103dee;
}

.campaign-form-container input[type="text"].empty-input {
  border-color: #ff4444;
}

.campaign-create-btn {
  padding: 14px 20px;
  background-color: #e5e5e5;
  color: #999;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.2s ease;
  margin-top: 10px;
  width: 100%;
}

.campaign-create-btn.active {
  background-color: #1877f2;
  color: white;
  cursor: pointer;
}

.campaign-create-btn.active:hover {
  background-color: #166fe5;
}

.campaign-preview-btn {
  padding: 14px 20px;
  background-color: #42b72a;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
  width: 100%;
}

.campaign-preview-btn:hover {
  background-color: #36a420;
}

.campaign-cancel-btn {
  padding: 12px 20px;
  background-color: transparent;
  color: #666;
  border: 1px solid #dddfe2;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 8px;
}

.campaign-cancel-btn:hover {
  background-color: #f0f2f5;
}

/* Ad Set List Container */
.adset-list-container {
  margin-bottom: 30px;
}

.adset-list-container h3 {
  font-size: 16px;
  color: #103dee;
  border-bottom: 1px solid #103dee;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.adset-list {
  max-height: 400px;
  overflow-y: auto;
}

.adset-item {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adset-item:hover {
  background-color: #f8f9fa;
  border-color: #e5e5e5;
}

.adset-item:active {
  background-color: #e8f2ff;
  border-color: #4a90e2;
}

.adset-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.adset-item p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* Ad Set Configuration */

.adset-form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.adset-config input {
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  font-family: inherit;
  font-size: 14px;
}

.adset-config input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.adset-config input::placeholder {
  color: #999;
}

/* Budget Input Wrappers */
.budget-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #e5e5e5;
  background-color: white;
  position: relative;
}

.budget-input-wrapper:focus-within {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.budget-input-wrapper input {
  border: none;
  flex: 1;
  padding: 12px 8px;
  min-width: 0;
}

.budget-input-wrapper input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.currency-prefix {
  padding: 0 8px 0 12px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.currency-suffix {
  padding: 0 12px 0 8px;
  color: #999;
  font-size: 13px;
  white-space: nowrap;
}

.adset-config .preselect {
  background-color: #f0f0f0;
  color: #999;
}

.targeting-age {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.targeting-age input {
  width: 100%;
  max-width: 100%;
}

.adset-config button {
  padding: 12px 24px;
  background-color: #e5e5e5;
  color: #999;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: not-allowed;
  margin-bottom: 20px;
  transition: background-color 0.2s, color 0.2s;
}

.adset-config button.active {
  background-color: #103dee;
  color: white;
  cursor: pointer;
}

.adset-config button.active:hover {
  background-color: #0e35c7;
}

/* Dropdown Container */
.dropdown-container {
  width: 100%;
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  background-color: white;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.dropdown-selected:hover {
  background-color: #f8f9fa;
  border-color: #e5e5e5;
}

.dropdown-selected:focus,
.dropdown-selected.focused {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.dropdown-display {
  color: #333;
  flex-grow: 1;
}

.dropdown-display.placeholder {
  color: #999;
}

.dropdown-arrow {
  transition: transform 0.1s ease;
  flex-shrink: 0;
}

.dropdown-selected.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown Options */
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-top: none;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
}

.dropdown-options.show {
  display: block;
}

.dropdown-options li {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  list-style: none;
}

.dropdown-options li:last-child {
  border-bottom: none;
}

.dropdown-options li:hover {
  background-color: #f8f9fa;
}

.dropdown-options li.selected {
  background-color: #e8f2ff;
  color: #103dee;
}

/* Multi-select checkbox styling */
.multi-select-checkbox {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

.dropdown-options[data-multiple="true"] li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-options[data-multiple="true"] li.selected .multi-select-checkbox {
  color: #103dee;
  font-weight: bold;
}

/* None option in multi-select acts as clear button */
.dropdown-options[data-multiple="true"] li.none-option {
  color: #dc3545;
  font-style: italic;
  border-top: 1px solid #e5e5e5;
  margin-top: 4px;
  padding-top: 12px;
}

.dropdown-options[data-multiple="true"] li.none-option:hover {
  background-color: #fff5f5;
  color: #c82333;
}

/* Multi-select clear button */
.multi-select-clear-btn {
  display: none;
  width: 20px;
  height: 20px;
  border: none;
  background: #e8f2ff;
  color: #103dee;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.multi-select-clear-btn:hover {
  background: #103dee;
  color: white;
}

.dropdown-selected:not(.placeholder) .multi-select-clear-btn {
  display: inline-flex;
}

.dropdown-selected {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Pixel status indicators */
.pixel-option .pixel-status-icon {
  margin-right: 6px;
  font-size: 12px;
}

.pixel-option.pixel-inactive {
  opacity: 0.6;
}

.pixel-option.pixel-unavailable {
  opacity: 0.5;
  color: #999;
}

.pixel-option.pixel-active {
  font-weight: 500;
}

/* Dropdown search input */
.dropdown-search {
  position: sticky;
  top: 0;
  background: white;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e5e5;
  z-index: 1001;
}

.dropdown-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}

.dropdown-search input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

/* Special Ad Category Country dropdown - limit height and make scrollable */
.dropdown-options.campaign-special-country,
.dropdown-options.multi-campaign-special-country {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* CTA dropdown - limit height and make scrollable for long list */
.dropdown-options.cta {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Creative Upload */
.creative-upload h2 {
  margin-bottom: 20px;
}

.upload-type-section {
  display: flex;
  gap: 16px;
}

.upload-type-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.upload-type-box:hover {
  background-color: #f8f9fa;
  border-color: #e5e5e5;
}

.upload-type-box.selected {
  border-color: #4a90e2;
  background-color: #f8f9fa;
}

.file-drop-zone.drag-over {
  border-color: #103dee;
  background-color: #f0f6ff;
}

.empty-input {
  border-color: red !important;
  animation: shake 0.1s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.upload-type-box img {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  opacity: 0.7;
}

/* Upload Steps Container */
.upload-steps-container {
  width: 100%;
}

.upload-step {
  width: 100%;
}

/* File Drop Zone */
.file-drop-zone {
  border: 1px dashed #d0d0d0;
  padding: 40px 20px;
  margin-top: 20px;
  text-align: center;
  background-color: #f8f9fa;
  cursor: pointer;
}

.file-drop-zone:hover {
  border-color: #103dee;
  background-color: #f0f6ff;
}

.file-drop-zone p {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.file-drop-zone input[type="file"] {
  display: none;
}

/* Uploaded Files List */
.uploaded-files-list {
  border: 1px solid #e5e5e5;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
}

/* File containers with fade effect */
.files-container {
  position: relative;
  transition: max-height 0.3s ease;
}

/* Uploaded files list container needs relative positioning */
.uploaded-files-list {
  position: relative;
}

.uploaded-files-list.collapsed::after {
  display: block;
}

.images-wrapper {
  position: relative;
  transition: max-height 0.3s ease;
}

/* Review section gradient overlay */
.data-container-creatives .images {
  position: relative;
}

.data-container-creatives.collapsed .images::after {
  display: block;
}

.continue-btn {
  padding: 12px 24px;
  background-color: #103dee;
  color: white;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.continue-btn:hover {
  background-color: #3f65ff;
}

.continue-btn.upload-complete:hover {
  background-color: #28a745 !important;
}

.back-btn {
  padding: 8px 16px;
  background-color: #f8f9fa;
  color: #666;
  border: 1px solid #e5e5e5;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background-color: #e5e5e5;
  color: #333;
}

/* Ad Copy Container */
.ad-copy-container {
  padding-top: 30px;
  border-top: 1px solid #e5e5e5;
}

.ad-copy-container h2 {
  font-size: 16px;
  color: #103dee;
  border-bottom: 1px solid #103dee;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.ad-copy-container .adset-form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ad-copy-container input,
.ad-copy-container textarea {
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  font-family: inherit;
  font-size: 14px;
}

.ad-copy-container textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
}

.ad-copy-container input:focus,
.ad-copy-container textarea:focus {
  outline: none;
  border-color: #103dee;
  box-shadow: 0 0 0 2px rgba(16, 61, 238, 0.1);
}

.gdrive-link-input,
.gdrive-link-input-additional {
  border: 1px solid #d0d0d0;
}

.gdrive-link-input:focus,
.gdrive-link-input-additional:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.ad-copy-container input::placeholder,
.ad-copy-container textarea::placeholder {
  color: #999;
}

.ad-copy-container button {
  padding: 12px 24px;
  background-color: #103dee;
  color: white;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ad-copy-container button:hover {
  background-color: #3f65ff;
}

/* Create Ads Container */
.create-ads-container {
  padding-top: 30px;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.create-ads-container h2 {
  font-size: 16px;
  color: #103dee;
  border-bottom: 1px solid #103dee;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.review-container {
  margin-bottom: 30px;
}

.review-container h3 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

/* Creative Data Container */
.data-container-creatives {
  margin-bottom: 30px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  background-color: #f8f9fa;
}

.data-container-creatives .images {
  margin-bottom: 10px;
}

.creative-data-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background-color: white;
  border: 1px solid #e5e5e5;
  min-width: 0;
  margin-bottom: 8px;
  margin-right: 5px;
}

.creative-data-row:last-child {
  margin-bottom: 0;
}

.creative-data-row img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
}

.creative-data-row p {
  font-size: 12px;
  color: #666;
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Ad Copy Data Container */
.data-container-adcopy {
  padding: 20px;
  border: 1px solid #e5e5e5;
  background-color: #f8f9fa;
  margin-bottom: 20px;
}

.adcopy-text-review,
.headline-review {
  margin-bottom: 20px;
}

.adcopy-text-review:last-child {
  margin-bottom: 0;
}

.adcopy-text-review h3,
.headline-review h3 {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.primary-text-review-container,
.headline-review-container,
.cta-text-review-container {
  background-color: white;
  border: 1px solid #e5e5e5;
  padding: 12px;
  overflow: auto;
}

.primary-text-review-container p,
.headline-review-container p,
.cta-text-review-container p {
  font-size: 12px;
  color: #666;
  margin: 0;
  margin-bottom: 4px;
}

.primary-text-review-container p {
  white-space: pre-wrap;
}

.primary-text-review-container p:last-child,
.headline-review-container p:last-child,
.cta-text-review-container p:last-child {
  margin-bottom: 0;
}

.create-ads-container button {
  padding: 12px 24px;
  background-color: #103dee;
  color: white;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.create-ads-container button:hover {
  background-color: #3f65ff;
}

/* Success Container */
.success-container {
  padding-top: 30px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.success-wrapper h2 {
  color: #28a745;
  border-bottom: 1px solid #28a745;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.success-container p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.success-container img {
  width: 60px;
  height: 60px;
  margin-bottom: 30px;
  opacity: 0.8;
}

.success-container button {
  padding: 12px 24px;
  background-color: #28a745;
  color: white;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-bottom: 20px;
  transition: background-color 0.2s ease;
}

.success-container button:hover {
  background-color: #218838;
}

.success-container h3 {
  font-size: 14px;
  color: #103dee;
  cursor: pointer;
  text-decoration: underline;
}

.success-container h3:hover {
  color: #3f65ff;
}

/* Status Colors for Paused Campaigns */
.campaign li:first-child {
  font-weight: 500;
}

.campaign li:first-child:contains("Paused"),
.campaign:has(li:first-child:contains("Paused")) li:first-child {
  color: #6c757d;
}

/* Hide sections by default - you'll control visibility with JavaScript */
/* .ad-copy-container,
.create-ads-container,
.success-container {
  display: none;
} */

/* Responsive adjustments */
/* @media (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .main-container > div,
  .main-container > aside {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }
} */

/* File Upload Progress Styles */
.file-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #e0e0e0;
  overflow: hidden;
}

.file-progress-fill {
  height: 100%;
  background: #4caf50;
  transition: width 0.3s ease;
  width: 0%;
}

/* Loading state animation */
.file-progress-fill.loading {
  background: #4caf50;
  animation: progress-loading 1.5s ease-in-out infinite;
}

@keyframes progress-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Error state */
.file-progress-fill.error {
  background: #f44336;
}

/* Geo Selection Styles */
.geo-selection-container {
  width: 100%;
  position: relative;
}

.country-selection,
.region-selection {
  position: relative;
}

.selected-countries-container,
.selected-regions-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
  background-color: white;
  gap: 8px;
  cursor: text;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.geo-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: #f0f4ff;
  color: #103dee;
  font-size: 13px;
  border-radius: 16px;
  gap: 6px;
  transition: all 0.2s ease;
}

.geo-tag.included {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.geo-tag.excluded {
  background-color: #ffebee;
  color: #c62828;
}

.geo-tag .region-name {
  cursor: pointer;
  user-select: none;
}

.geo-tag .region-name:hover {
  text-decoration: underline;
}

.geo-tag .remove-tag {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.geo-tag .remove-tag:hover {
  opacity: 1;
}

.country-search-input,
.region-search-input {
  flex: 1;
  min-width: 150px;
  border: none !important;
  padding: 0 !important;
  outline: none !important;
  font-family: inherit;
  font-size: 14px;
}

.country-suggestions,
.region-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e5e5e5;
  border-top: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
}

.country-suggestions li,
.region-suggestions li {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

.country-suggestions li:hover,
.region-suggestions li:hover,
.country-suggestions li.highlighted,
.region-suggestions li.highlighted {
  background-color: #f0f4ff;
}

.country-suggestions li:last-child,
.region-suggestions li:last-child {
  border-bottom: none;
}

.geo-no-results {
  padding: 10px 16px;
  color: #999;
  font-size: 14px;
  text-align: center;
}

.selected-countries-container.empty-input,
.selected-regions-container.empty-input {
  border-color: #e91e63;
}

/* Event Type Selection Styles */
.event-type-container {
  position: relative;
  width: 100%;
  opacity: 1;
  /* z-index: 101; */
}

.config-event-type {
  cursor: pointer;
  width: 100%;
}

.event-type-search {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  position: relative;
  z-index: 102;
  background: white;
}

.event-type-search:focus {
  border-color: #103dee;
  box-shadow: 0 0 0 1px #103dee;
}

.event-type-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e5e5e5;
  border-top: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 103;
}

.event-type-suggestions li {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

.event-type-suggestions li:hover,
.event-type-suggestions li.highlighted {
  background-color: #f0f4ff;
}

.event-type-suggestions li:last-child {
  border-bottom: none;
}

.event-type-suggestions .event-description {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* Duplicate Ad Set Dialog */
.duplicate-adset-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.duplicate-adset-dialog .dialog-content {
  background: white;
  border-radius: 0;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.duplicate-adset-dialog h3 {
  color: #103dee;
  font-size: 18px;
  margin-bottom: 20px;
}

.duplicate-adset-dialog p {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.duplicate-adset-dialog .button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 25px;
}

.duplicate-adset-dialog button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.duplicate-adset-dialog .btn-primary {
  background: #103dee;
  color: white;
}

.duplicate-adset-dialog .btn-primary:hover {
  background: #0e35c7;
}

.duplicate-adset-dialog .btn-secondary {
  background: #e5e5e5;
  color: #333;
}

.duplicate-adset-dialog .btn-secondary:hover {
  background: #d5d5d5;
}

.duplicate-adset-dialog input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  margin-top: 10px;
}

.duplicate-adset-dialog input[type="text"]:focus {
  outline: none;
  border-color: #103dee;
}

/* Campaign Compatibility Warning */
.campaign-compatibility-warning {
  color: #dc3545;
  font-size: 13px;
  margin: 0 0 16px 0;
  background: #ffe6e6;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #dc3545;
  line-height: 1.5;
}

/* Age Section in Multi-Campaign Modal */
.multi-campaign-adset-form .targeting-age {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.multi-campaign-adset-form .targeting-age label {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #666;
  margin-bottom: 0;
}

.multi-campaign-adset-form .targeting-age input {
  width: calc(50% - 4px);
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.multi-campaign-adset-form .targeting-age input:focus {
  outline: none;
  border-color: #4caf50;
}

/* Age Warning for Special Ad Categories */
.age-warning {
  color: #ff9800;
  font-size: 13px;
  margin-top: 8px;
  background: #fff3e0;
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid #ff9800;
  line-height: 1.5;
}

/* App Promotion Fields */
.app-promotion-container {
  display: none;
  margin-top: 4px;
}

.app-promotion-container > small:first-child {
  display: block;
  margin-bottom: 16px;
  padding: 12px;
  background: #fff3e0;
  border-left: 3px solid #ff9800;
  border-radius: 4px;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

.app-promotion-container input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  margin-bottom: 4px;
  margin-top: 8px;
}

.app-promotion-container input:focus {
  border-color: #103dee;
  box-shadow: 0 0 0 1px #103dee;
}

.app-promotion-container small {
  display: block;
  margin-top: 4px;
  margin-bottom: 12px;
  color: #999;
  font-size: 11px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

/* App Promotion Fields for Multi-Campaign Modal */
.app-promotion-container-multi {
  display: none;
  margin-top: 4px;
}

.app-promotion-container-multi > small:first-child {
  display: block;
  margin-bottom: 16px;
  padding: 12px;
  background: #fff3e0;
  border-left: 3px solid #ff9800;
  border-radius: 4px;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

.app-promotion-container-multi input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  margin-bottom: 4px;
  margin-top: 8px;
}

.app-promotion-container-multi input:focus {
  border-color: #103dee;
  box-shadow: 0 0 0 1px #103dee;
}

.app-promotion-container-multi small {
  display: block;
  margin-top: 4px;
  margin-bottom: 12px;
  color: #999;
  font-size: 11px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

/* Event Type Container for Multi-Campaign Modal */
.event-type-container-multi {
  position: relative;
  margin-top: 4px;
}

.event-type-container-multi input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.event-type-container-multi .config-event-type-multi {
  cursor: pointer;
}

.event-type-container-multi .event-type-search-multi {
  margin-top: 0;
}

.event-type-suggestions-multi {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-type-suggestions-multi li {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.event-type-suggestions-multi li:hover {
  background: #f5f5f5;
}

.event-type-suggestions-multi .event-description {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* Cost Per Result Input for Multi-Campaign Modal */
.cost-per-result-multi {
  margin-top: 4px;
}

/* Ad Scheduling Container for Multi-Campaign Modal */
.ad-scheduling-container-multi {
  margin-top: 20px;
}

.schedule-item-multi {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

.remove-schedule-btn-multi:hover {
  background: #c82333 !important;
}

/* Multi-Campaign Modal - Campaign List Styling */
.multi-campaign-adset-list .account-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
}

.multi-campaign-adset-list .account-item label input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}

/* Account Mismatch Warning */
.account-mismatch-warning {
  color: #dc3545;
  font-size: 13px;
  margin: 10px 0;
  background: #ffe6e6;
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid #dc3545;
  line-height: 1.5;
  font-weight: 500;
}

.duplicate-adset-dialog .dialog-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.duplicate-adset-dialog .dialog-close-btn:hover {
  color: #333;
}

/* Duplicate Campaign Dialog - Same styles as ad set dialog */
.duplicate-campaign-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.duplicate-campaign-dialog .dialog-content {
  background: white;
  border-radius: 0;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.duplicate-campaign-dialog h3 {
  color: #103dee;
  font-size: 18px;
  margin-bottom: 20px;
}

.duplicate-campaign-dialog p {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.duplicate-campaign-dialog .button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 25px;
}

.duplicate-campaign-dialog button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.duplicate-campaign-dialog .btn-primary {
  background: #103dee;
  color: white;
}

.duplicate-campaign-dialog .btn-primary:hover {
  background: #0e35c7;
}

.duplicate-campaign-dialog .btn-secondary {
  background: #e5e5e5;
  color: #333;
}

.duplicate-campaign-dialog .btn-secondary:hover {
  background: #d5d5d5;
}

.duplicate-campaign-dialog input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  margin-top: 10px;
}

.duplicate-campaign-dialog input[type="text"]:focus {
  outline: none;
  border-color: #103dee;
}

.duplicate-campaign-dialog .dialog-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.duplicate-campaign-dialog .dialog-close-btn:hover {
  color: #333;
}

/* Creative Library Modal */
.creative-library-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.creative-library-modal .modal-content {
  background: white;
  border-radius: 0;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.creative-library-modal .modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creative-library-modal .modal-header h2 {
  margin: 0;
  color: #103dee;
  font-size: 20px;
}

.creative-library-modal .modal-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creative-library-modal .clear-all-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.creative-library-modal .clear-all-btn:hover {
  background: #c82333;
}

.creative-library-modal .modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creative-library-modal .modal-close-btn:hover {
  color: #333;
}

.library-controls {
  padding: 20px;
  padding-bottom: 10px;
}

.library-view-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.view-toggle-btn {
  flex: 1;
  padding: 10px;
  background: #f5f5f5;
  border: 2px solid #e5e5e5;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.view-toggle-btn.active {
  background: #103dee;
  color: white;
  border-color: #103dee;
}

.view-toggle-btn:hover:not(.active) {
  background: #e5e5e5;
}

.library-search-container {
  width: 100%;
}

.library-search {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
}

.library-filters {
  padding: 0 20px 15px;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 14px;
}

.filter-checkbox input[type="checkbox"] {
  cursor: pointer;
}

.library-grid-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.creative-item {
  border: 2px solid #e5e5e5;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.creative-item:hover {
  border-color: #103dee;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.creative-item.selected {
  border-color: #103dee;
  background-color: #f0f4ff;
}

.creative-item .creative-thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creative-item .creative-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creative-item .creative-thumbnail .no-thumbnail {
  color: #999;
  font-size: 14px;
}

.creative-item .creative-info {
  padding: 10px;
}

.creative-item .creative-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creative-item .creative-meta {
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creative-item .creative-type {
  background-color: #e5e5e5;
  padding: 2px 6px;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 10px;
}

.creative-item .creative-type.video {
  background-color: #ffeaa7;
}

.creative-item .creative-type.image {
  background-color: #a8e6cf;
}

.creative-item .upload-status {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
}

.creative-item .selection-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #103dee;
  border-radius: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.creative-item.selected .selection-checkbox,
.creative-item:hover .selection-checkbox {
  display: flex;
}

.creative-item.selected .selection-checkbox::after {
  content: "✓";
  color: #103dee;
  font-weight: bold;
}

.creative-item .delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}

.creative-item:hover .delete-btn {
  display: flex;
}

.creative-item .delete-btn:hover {
  background: rgba(200, 35, 51, 0.9);
}

.creative-item:hover .upload-status {
  display: none;
}

.creative-item .add-to-batch-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}

.creative-item:hover .add-to-batch-btn {
  display: flex;
}

.creative-item .add-to-batch-btn:hover {
  background: rgba(33, 136, 56, 0.9);
}

.library-loading,
.library-empty {
  text-align: center;
  padding: 40px;
  color: #666;
}

.library-selected-info {
  padding: 15px 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-count {
  color: #666;
  font-size: 14px;
}

.add-selected-btn {
  padding: 10px 20px;
  background-color: #103dee;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.add-selected-btn:hover:not(:disabled) {
  background-color: #0d32bb;
}

.add-selected-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Batch-specific styles */
.batch-actions {
  padding: 0 20px 15px;
}

.create-batch-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.create-batch-btn:hover {
  background: #218838;
}

.batch-breadcrumb {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  color: #103dee;
  cursor: pointer;
  text-decoration: underline;
}

.breadcrumb-item:hover {
  color: #0a2fb3;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #999;
}

.breadcrumb-current {
  font-weight: 500;
  color: #333;
}

/* Batch folder styles */
.batch-item {
  border: 2px solid #e5e5e5;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  background: #f9f9f9;
}

.batch-item:hover {
  border-color: #103dee;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.batch-item .batch-folder-icon {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  font-size: 48px;
  color: #666;
}

.batch-item .batch-info {
  padding: 15px;
}

.batch-item .batch-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.batch-item .batch-stats {
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 15px;
}

.batch-item .batch-count {
  display: flex;
  align-items: center;
  gap: 5px;
}

.batch-item .batch-actions-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
}

.batch-item .batch-action-btn {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.batch-item:hover .batch-action-btn {
  display: flex;
}

.batch-item .batch-action-btn:hover {
  background: white;
  border-color: #103dee;
  color: #103dee;
}

/* ============================================
   BULK UPLOAD ADS MODAL
   ============================================ */

.bulk-upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  overflow-y: auto;
  padding: 20px;
}

.bulk-upload-content {
  background: white;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

.bulk-upload-body {
  padding: 20px;
}

.bulk-step {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-description {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

/* Account Selection */
.account-selection-container {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.search-box {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.account-search {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
}

.account-list {
  padding: 10px;
}

.account-item {
  padding: 15px;
  border: 1px solid #e5e5e5;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  background: white;
}

.account-item:hover {
  background: #f5f5f5;
  border-color: #103dee;
}

.account-item.selected {
  background: #e3f2fd;
  border-color: #103dee;
  border-width: 2px;
}

.account-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.account-info {
  flex: 1;
}

.account-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.account-id {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* Campaign Groups - Visual Grouping for Multi-Campaign Features */
.campaign-group {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
}

.campaign-group.disabled {
  opacity: 0.6;
  background-color: #f9f9f9;
}

.group-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: default;
}

.group-header.disabled {
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
}

.group-icon {
  font-size: 16px;
}

.group-title {
  flex: 1;
}

.group-count {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
}

.group-campaigns {
  padding: 12px;
  background: white;
}

.group-campaigns.disabled {
  background: #fafafa;
}

.campaign-group.disabled .account-item {
  opacity: 0.5;
  pointer-events: none;
}

.incompatible-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #ff9800;
  color: white;
  font-size: 11px;
  border-radius: 12px;
  font-weight: 600;
}

/* Bulk Actions */
.bulk-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.btn-secondary {
  padding: 10px 20px;
  background: #f0f2f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #e4e6eb;
}

.btn-primary {
  padding: 10px 20px;
  background: #103dee;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
  background: #0d32bb;
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Configuration Step */
.bulk-config-container {
  margin-bottom: 20px;
}

.config-option {
  padding: 15px;
  border: 1px solid #e5e5e5;
  margin-bottom: 15px;
}

.config-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.config-option input[type="radio"] {
  cursor: pointer;
}

.same-count-input,
.custom-count-container {
  margin-left: 30px;
}

.bulk-ad-count {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
  width: 150px;
}

.input-hint {
  margin-left: 10px;
  font-size: 12px;
  color: #666;
}

.custom-count-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.custom-count-item:last-child {
  border-bottom: none;
}

.custom-account-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.custom-ad-count {
  width: 100px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
}

.selected-accounts-summary {
  margin-top: 20px;
  padding: 15px;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
}

.selected-accounts-summary h4 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}

.selected-accounts-list {
  max-height: 150px;
  overflow-y: auto;
}

.selected-account-chip {
  display: inline-block;
  padding: 6px 12px;
  background: #e3f2fd;
  border: 1px solid #103dee;
  margin: 4px;
  font-size: 12px;
  color: #333;
}

/* Progress Step */
.bulk-progress-container {
  margin-bottom: 20px;
}

.overall-progress {
  padding: 20px;
  border: 1px solid #e5e5e5;
  background: #f9f9f9;
  margin-bottom: 20px;
}

.overall-progress h4 {
  margin-bottom: 10px;
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 24px;
  background: #e0e0e0;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.progress-text {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.account-progress-list {
  max-height: 400px;
  overflow-y: auto;
}

.account-progress-item {
  padding: 15px;
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  background: white;
}

.account-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.account-progress-name {
  font-weight: 600;
  font-size: 14px;
}

.account-progress-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 0;
  font-weight: 600;
}

.account-progress-status.pending {
  background: #ffeaa7;
  color: #856404;
}

.account-progress-status.processing {
  background: #74b9ff;
  color: #004085;
}

.account-progress-status.success {
  background: #55efc4;
  color: #155724;
}

.account-progress-status.failed {
  background: #ff7675;
  color: #721c24;
}

.account-progress-bar {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 8px;
}

.account-progress-fill {
  height: 100%;
  background: #103dee;
  transition: width 0.3s ease;
}

.account-progress-details {
  font-size: 12px;
  color: #666;
}

.account-error-message {
  margin-top: 8px;
  padding: 8px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  font-size: 12px;
}

/* Results Step */
.bulk-results-container {
  margin-bottom: 20px;
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.result-stat {
  padding: 20px;
  text-align: center;
  border: 2px solid #e5e5e5;
  background: white;
}

.result-stat.success {
  border-color: #28a745;
  background: #f0fff4;
}

.result-stat.failed {
  border-color: #dc3545;
  background: #fff5f5;
}

.result-stat.accounts {
  border-color: #103dee;
  background: #f0f6ff;
}

.stat-number {
  display: block;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.result-stat.success .stat-number {
  color: #28a745;
}

.result-stat.failed .stat-number {
  color: #dc3545;
}

.result-stat.accounts .stat-number {
  color: #103dee;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.results-details {
  border: 1px solid #e5e5e5;
  padding: 20px;
  background: #f9f9f9;
}

.results-details h4 {
  margin-bottom: 15px;
  font-size: 16px;
}

.results-list {
  max-height: 400px;
  overflow-y: auto;
}

.result-item {
  padding: 15px;
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  background: white;
}

.result-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.result-account-name {
  font-weight: 600;
  font-size: 14px;
}

.result-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 0;
  font-weight: 600;
}

.result-status.success {
  background: #d4edda;
  color: #155724;
}

.result-status.partial {
  background: #fff3cd;
  color: #856404;
}

.result-status.failed {
  background: #f8d7da;
  color: #721c24;
}

.result-stats {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #666;
}

.result-stat-item {
  display: flex;
  gap: 5px;
}

.result-stat-item strong {
  color: #333;
}

.result-errors {
  margin-top: 10px;
  padding: 10px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  font-size: 12px;
  color: #856404;
}

.result-errors-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.result-error-list {
  list-style: none;
  padding-left: 0;
}

.result-error-list li {
  padding: 4px 0;
}

/* Bulk Upload Ads Button */
.bulk-upload-ads-button {
  width: 100%;
  padding: 15px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: 10px;
}

.bulk-upload-ads-button:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.bulk-upload-ads-button:active {
  transform: translateY(0);
}

/* Loading state */
.bulk-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

.custom-dropdown.dropdown-is-open {
  z-index: 2;
}

/* ========================================
   Automated Rules Styling
   ======================================== */

/* Rules button in header */
.rules-btn {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  margin-left: 8px;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rules-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #007bff;
  border: #007bff 1px solid;
}

.rules-btn svg {
  width: 16px;
  height: 16px;
}

/* Rules modal */
.automated-rules-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
}

.rules-modal-content {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

/* Rules account selector */
.rules-account-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.rules-account-selector label {
  font-weight: 600;
  color: #333;
}

.rules-account-dropdown {
  flex: 1;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

/* Rules table */
.rules-list-container {
  overflow-x: auto;
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rules-table thead {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.rules-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.rules-table td {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
  vertical-align: top;
}

/* Fix table row alignment issues when rule names span multiple lines */
.rules-table tbody tr {
  border-bottom: 1px solid #dee2e6;
}

.rules-table tbody td {
  border-bottom: none;
}

.rules-table tr:hover {
  background-color: #f8f9fa;
}

.rules-table .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  font-style: italic;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.status-active {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.status-paused {
  background-color: #f8d7da;
  color: #721c24;
}

/* Rule actions */
.rule-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #6c757d;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background-color: #e9ecef;
  color: #495057;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Rule editor modal */
.rule-editor-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  overflow-y: auto;
  padding: 20px;
}

.rule-editor-content {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

/* Form styling */
.rule-form {
  padding: 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dee2e6;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.form-help-text {
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 15px;
  font-style: italic;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Rule type selector */
.rule-type-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-label:hover {
  background-color: #f8f9fa;
}

.radio-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.radio-label input[type="radio"]:checked + span {
  font-weight: 600;
  color: #007bff;
}

/* Conditions */
.conditions-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.condition-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr auto;
  gap: 10px;
  align-items: center;
}

.remove-condition-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #dc3545;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.remove-condition-btn:hover {
  background-color: #f8d7da;
}

/* Range inputs (for IN_RANGE and NOT_IN_RANGE operators) */
.condition-range-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.condition-range-inputs input {
  flex: 1;
  min-width: 0;
}

/* Days selector */
.days-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.day-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.day-checkbox:hover {
  background-color: #f8f9fa;
}

.day-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.day-checkbox input[type="checkbox"]:checked + * {
  font-weight: 600;
}

.condition-value-container {
  display: flex;
  gap: 4px;
}

/* JSON preview */
.json-preview {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
  margin: 0;
}

.json-preview code {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #333;
  white-space: pre;
  display: block;
}

/* Buttons */
.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px);
}

/* Modal header buttons */
.modal-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header .modal-header-buttons {
  justify-content: space-between;
}

.modal-header .modal-close-btn {
  background-color: red;
  color: white;
  font-size: 20px;
  padding: 2px 6px;
}

.modal-close-btn {
  cursor: pointer;
}

.rule-editor-content .modal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Modal footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
  border-radius: 0 0 8px 8px;
}

/* Responsive design */
@media (max-width: 768px) {
  .rules-modal-content,
  .rule-editor-content {
    margin: 10px;
    width: calc(100% - 20px);
  }

  .condition-row {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .rule-actions {
    flex-wrap: wrap;
  }

  .rules-table {
    font-size: 12px;
  }

  .rules-table th,
  .rules-table td {
    padding: 8px;
  }
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.automated-rules-modal[style*="display: block"] .rules-modal-content,
.rule-editor-modal[style*="display: block"] .rule-editor-content {
  animation: fadeIn 0.3s ease;
}

/* ===== Multi-Account Rule Creation Modals ===== */

/* Account Selector Modal */
.account-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.account-selector-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.account-selector-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-selector-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.account-selector-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-description {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.account-selector-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.btn-link {
  background: none;
  border: none;
  color: #1877f2;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 0;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.account-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 0;
}

.account-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-checkbox-label:hover {
  background-color: #f5f5f5;
  border-color: #1877f2;
}

.account-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1877f2;
}

.account-checkbox-label input[type="checkbox"]:checked + span {
  font-weight: 500;
  color: #1877f2;
}

.account-checkbox-label span {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.form-help-text {
  margin: 15px 0 0 0;
  font-size: 13px;
  color: #666;
}

.form-help-text strong {
  color: #1877f2;
  font-weight: 600;
}

.account-selector-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Batch Progress Modal */
.batch-progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10001;
}

.batch-progress-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 650px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.batch-progress-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.batch-progress-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.batch-progress-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.progress-description {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.progress-bar-container {
  margin-bottom: 24px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #1877f2;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 0;
}

.progress-text strong {
  color: #333;
  font-weight: 600;
}

.batch-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
}

.batch-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.batch-result-item.pending {
  background-color: #fff8e1;
  border-color: #ffc107;
}

.batch-result-item.success {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.batch-result-item.failed {
  background-color: #ffebee;
  border-color: #f44336;
}

.batch-result-item .result-icon {
  font-size: 18px;
  font-weight: bold;
}

.batch-result-item.pending .result-icon {
  color: #ffc107;
}

.batch-result-item.success .result-icon {
  color: #4caf50;
}

.batch-result-item.failed .result-icon {
  color: #f44336;
}

.batch-result-item .result-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.batch-result-item .error-text {
  display: block;
  color: #f44336;
  font-size: 12px;
  margin-top: 4px;
}

.batch-progress-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

/* Batch Results Summary Modal */
.batch-results-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10002;
}

.batch-results-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.batch-results-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.batch-results-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.batch-results-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.results-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.result-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.result-stat.success-stat {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.result-stat.failed-stat {
  background-color: #ffebee;
  border-color: #f44336;
}

.result-stat .stat-icon {
  font-size: 32px;
  font-weight: bold;
}

.result-stat.success-stat .stat-icon {
  color: #4caf50;
}

.result-stat.failed-stat .stat-icon {
  color: #f44336;
}

.result-stat .stat-content {
  flex: 1;
}

.result-stat .stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  margin-bottom: 4px;
}

.result-stat .stat-label {
  font-size: 13px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detailed-results h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.result-item.success {
  background-color: #f1f8f4;
  border-color: #c8e6c9;
}

.result-item.failed {
  background-color: #fef5f5;
  border-color: #ffcdd2;
}

.result-item .result-icon {
  font-size: 18px;
  font-weight: bold;
}

.result-item.success .result-icon {
  color: #4caf50;
}

.result-item.failed .result-icon {
  color: #f44336;
}

.result-item .result-account {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.result-item .result-error {
  font-size: 12px;
  color: #f44336;
  font-style: italic;
}

.batch-results-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

/* Animations */
.account-selector-modal[style*="display: flex"] .modal-content,
.batch-progress-modal[style*="display: flex"] .modal-content,
.batch-results-modal[style*="display: flex"] .modal-content {
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Duplicate Choice Modal for Automated Rules */
.duplicate-choice-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000; /* Higher than automated rules modal */
}

.duplicate-choice-modal .dialog-content {
  background: white;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  animation: slideUp 0.3s ease;
}

.duplicate-choice-modal .dialog-header {
  padding: 24px 24px 0 24px;
  border-bottom: none;
}

.duplicate-choice-modal .dialog-header h2 {
  color: #103dee;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.duplicate-choice-modal .dialog-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  line-height: 1;
}

.duplicate-choice-modal .dialog-close-btn:hover {
  color: #333;
}

.duplicate-choice-modal .dialog-body {
  padding: 24px;
}

.duplicate-choice-modal .btn {
  width: 100%;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 4px;
}

.config-adset-name {
  padding: 12px 16px;
}

.duplicate-choice-modal .btn-primary {
  background: #103dee;
  color: white;
}

.duplicate-choice-modal .btn-primary:hover {
  background: #0e35c7;
}

.duplicate-choice-modal .btn-secondary {
  background: #f0f2f5;
  color: #333;
  border: 1px solid #dddfe2;
}

.duplicate-choice-modal .btn-secondary:hover {
  background: #e4e6eb;
  border-color: #bcc0c4;
}

.bulk-duplicate-content .modal-header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
}

input.bulk-campaign-name {
  padding: 10px;
  width: 100%;
}

input.bulk-adset-name {
  padding: 10px;
  width: 100%;
}

/* Bulk Duplicate Campaign Modal */
.bulk-duplicate-campaign-modal,
.bulk-duplicate-adset-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  overflow-y: auto;
  padding: 20px;
}

.bulk-duplicate-content {
  background: white;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

.bulk-duplicate-body {
  padding: 20px;
}

/* Bulk Adset Selection List */
.bulk-adset-list-container {
  margin: 20px 0;
}

.bulk-adset-selection-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f9f9f9;
}

.bulk-adset-item {
  background: white;
  border: 2px solid #e4e6eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bulk-adset-item:hover {
  border-color: #103dee;
  background: #f0f5ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(16, 61, 238, 0.1);
}

.bulk-adset-item h4 {
  margin: 0 0 8px 0;
  color: #1c1e21;
  font-size: 16px;
  font-weight: 600;
}

.bulk-adset-item p {
  margin: 0;
  color: #65676b;
  font-size: 13px;
}

.bulk-adset-account-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f9f9f9;
  margin-top: 10px;
}

/* Campaign Selection Step */
.campaign-selection-container {
  margin: 20px 0;
}

.bulk-campaign-mappings-list {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
}

.campaign-mapping-item {
  background: white;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.mapping-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e6eb;
}

.mapping-item-header strong {
  font-size: 15px;
  color: #1c1e21;
}

.mapping-item-id {
  font-size: 12px;
  color: #65676b;
}

.campaign-selector {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e4e6eb;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: #1c1e21;
  cursor: pointer;
  transition: all 0.2s ease;
}

.campaign-selector:hover {
  border-color: #103dee;
}

.campaign-selector:focus {
  outline: none;
  border-color: #103dee;
  box-shadow: 0 0 0 3px rgba(16, 61, 238, 0.1);
}

/* Multi-Campaign Ad Set Modal */
.multi-campaign-adset-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.multi-campaign-adset-modal[style*="display: block"] {
  display: flex !important;
}

.multi-campaign-adset-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.multi-campaign-adset-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multi-campaign-adset-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.multi-campaign-adset-modal .bulk-duplicate-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.multi-campaign-adset-modal .multi-campaign-adset-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  margin-top: 12px;
}

.multi-campaign-adset-modal .search-box {
  margin-bottom: 12px;
}

.multi-campaign-adset-modal .search-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* Multi-Account Campaign Modal */
.multi-account-campaign-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.multi-account-campaign-modal[style*="display: block"] {
  display: flex !important;
}

.multi-account-campaign-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.multi-account-campaign-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
}

.multi-account-campaign-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.multi-account-campaign-modal .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.multi-account-campaign-modal .close-btn:hover {
  background-color: #e0e0e0;
  color: #333;
}

.multi-account-campaign-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.multi-account-campaign-modal .step {
  display: none;
}

.multi-account-campaign-modal .step.active {
  display: block;
}

.multi-account-campaign-modal .step-indicator {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.multi-account-campaign-modal .step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #999;
}

.multi-account-campaign-modal .step-item.active {
  color: #6f42c1;
  font-weight: 600;
}

.multi-account-campaign-modal .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.multi-account-campaign-modal .step-item.active .step-number {
  background-color: #6f42c1;
  color: white;
}

.multi-account-campaign-modal .section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.multi-account-campaign-modal .search-box {
  margin-bottom: 16px;
}

.multi-account-campaign-modal .search-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.multi-account-campaign-modal .search-box input:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.multi-account-campaign-modal .selection-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.multi-account-campaign-modal .select-all-btn,
.multi-account-campaign-modal .deselect-all-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.multi-account-campaign-modal .select-all-btn:hover,
.multi-account-campaign-modal .deselect-all-btn:hover {
  background-color: #f8f9fa;
  border-color: #6f42c1;
  color: #6f42c1;
}

.multi-account-campaign-modal .ad-accounts-list {
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  background-color: #fafafa;
}

.multi-account-campaign-modal .ad-account-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.multi-account-campaign-modal .ad-account-item:hover {
  background-color: #f8f9fa;
  border-color: #6f42c1;
}

.multi-account-campaign-modal .ad-account-item input[type="checkbox"] {
  margin-right: 12px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.multi-account-campaign-modal .ad-account-info {
  flex: 1;
}

.multi-account-campaign-modal .ad-account-name {
  font-weight: 500;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.multi-account-campaign-modal .ad-account-id {
  font-size: 12px;
  color: #666;
}

.multi-account-campaign-modal .form-group {
  margin-bottom: 20px;
}

.multi-account-campaign-modal .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

/* Dropdown containers in multi-account modal */
.multi-account-campaign-modal .dropdown-container {
  margin-bottom: 20px;
  position: relative;
}

.multi-account-campaign-modal .custom-dropdown {
  position: relative;
  width: 100%;
}

.multi-account-campaign-modal .dropdown-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.multi-account-campaign-modal .dropdown-selected:hover {
  border-color: #6f42c1;
}

.multi-account-campaign-modal .dropdown-display {
  font-size: 14px;
  color: #333;
}

.multi-account-campaign-modal .dropdown-display.placeholder {
  color: #999;
}

.multi-account-campaign-modal .dropdown-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.multi-account-campaign-modal .dropdown-options.show ~ .dropdown-selected .dropdown-arrow {
  transform: rotate(180deg);
}

.multi-account-campaign-modal .dropdown-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

.multi-account-campaign-modal .dropdown-options.show {
  display: block;
}

.multi-account-campaign-modal .dropdown-options li {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.15s ease;
}

.multi-account-campaign-modal .dropdown-options li:hover {
  background-color: #f5f5f5;
}

.multi-account-campaign-modal .dropdown-options li.selected {
  background-color: #6f42c1;
  color: white;
}

.multi-account-campaign-modal .dropdown-options li.selected:hover {
  background-color: #5a35a0;
}

.multi-account-campaign-modal .form-group input,
.multi-account-campaign-modal .form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.multi-account-campaign-modal .form-group input:focus,
.multi-account-campaign-modal .form-group select:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.multi-account-campaign-modal .checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multi-account-campaign-modal .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-account-campaign-modal .checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.multi-account-campaign-modal .checkbox-item label {
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: #555;
}

.multi-account-campaign-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background-color: #f8f9fa;
}

.multi-account-campaign-modal .selected-count {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.multi-account-campaign-modal .footer-buttons {
  display: flex;
  gap: 12px;
}

.multi-account-campaign-modal .btn-cancel,
.multi-account-campaign-modal .btn-back,
.multi-account-campaign-modal .btn-next,
.multi-account-campaign-modal .btn-preview,
.multi-account-campaign-modal .btn-create {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.multi-account-campaign-modal .btn-cancel {
  background-color: white;
  color: #666;
  border: 1px solid #ddd;
}

.multi-account-campaign-modal .btn-cancel:hover {
  background-color: #f8f9fa;
  border-color: #999;
  color: #333;
}

.multi-account-campaign-modal .btn-back {
  background-color: white;
  color: #6f42c1;
  border: 1px solid #6f42c1;
}

.multi-account-campaign-modal .btn-back:hover {
  background-color: #f8f9fa;
}

.multi-account-campaign-modal .btn-preview {
  background-color: #42b72a;
  color: white;
}

.multi-account-campaign-modal .btn-preview:hover {
  background-color: #36a420;
}

.multi-account-campaign-modal .btn-next,
.multi-account-campaign-modal .btn-create {
  background-color: #6f42c1;
  color: white;
}

.multi-account-campaign-modal .btn-next:hover,
.multi-account-campaign-modal .btn-create:hover {
  background-color: #5a32a3;
}

.multi-account-campaign-modal .btn-next:disabled,
.multi-account-campaign-modal .btn-create:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.multi-account-campaign-modal .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.multi-account-campaign-modal .empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Dropdown styling for multi-account campaign modal */
.multi-account-campaign-modal .dropdown-container {
  margin-bottom: 20px;
}

.multi-account-campaign-modal .custom-dropdown {
  position: relative;
  width: 100%;
}

.multi-account-campaign-modal .dropdown-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.multi-account-campaign-modal .dropdown-selected:hover {
  border-color: #999;
}

.multi-account-campaign-modal .dropdown-selected.open {
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.multi-account-campaign-modal .dropdown-display {
  flex: 1;
  color: #333;
}

.multi-account-campaign-modal .dropdown-display.placeholder {
  color: #999;
}

.multi-account-campaign-modal .dropdown-arrow {
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.multi-account-campaign-modal .dropdown-selected.open .dropdown-arrow {
  transform: rotate(180deg);
}

.multi-account-campaign-modal .dropdown-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
}

.multi-account-campaign-modal .dropdown-options.show {
  display: block;
}

.multi-account-campaign-modal .dropdown-options li {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.15s ease;
}

.multi-account-campaign-modal .dropdown-options li:hover {
  background-color: #f8f9fa;
}

.multi-account-campaign-modal .dropdown-options li.selected {
  background-color: #e8e0f5;
  color: #6f42c1;
  font-weight: 500;
}

.multi-account-campaign-modal .dropdown-options li.selected:hover {
  background-color: #dcd0f0;
}

/* Multi-Campaign Ad Set Modal - Step 5 Ad Copy Form Styles */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .multi-campaign-ad-copy-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Text inputs and textareas */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="text"],
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="url"],
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  background: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="text"]:focus,
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="url"]:focus,
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] textarea:focus {
  outline: none;
  border-color: #103dee;
  box-shadow: 0 0 0 3px rgba(16, 61, 238, 0.1);
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="text"]::placeholder,
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[type="url"]::placeholder,
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] textarea::placeholder {
  color: #999;
}

/* Primary text textarea */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .multi-campaign-primary-text {
  min-height: 100px;
  max-height: 200px;
  resize: vertical;
  line-height: 1.5;
  font-size: 14px;
}

/* Dropdown containers */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-container {
  position: relative;
}

/* Custom dropdown selected state */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-selected {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-selected:hover {
  border-color: #bbb;
  background: #fafafa;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-selected.open {
  border-color: #103dee;
  box-shadow: 0 0 0 3px rgba(16, 61, 238, 0.1);
}

/* Dropdown display text */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-display {
  font-size: 14px;
  color: #333;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-display.placeholder {
  color: #999;
}

/* Dropdown arrow */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .custom-dropdown .dropdown-selected.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown options list */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .multi-campaign-ad-copy-form .dropdown-options {
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: -1px;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options::-webkit-scrollbar {
  width: 6px;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options::-webkit-scrollbar-thumb:hover {
  background: #103dee;
}

/* Dropdown option items */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options li {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f5f5f5;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options li:last-child {
  border-bottom: none;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options li:hover {
  background-color: #f0f4ff;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .dropdown-options li.selected {
  background-color: #e8f2ff;
  color: #103dee;
  font-weight: 500;
}

/* Action buttons styling */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .bulk-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 0 0 0;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .btn-secondary {
  padding: 12px 24px;
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .btn-secondary:hover {
  background: #e9ecef;
  border-color: #bbb;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .btn-primary {
  padding: 12px 24px;
  background: #103dee;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .btn-primary:hover {
  background: #0d32c4;
  box-shadow: 0 2px 8px rgba(16, 61, 238, 0.3);
}

.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .btn-primary:active {
  transform: scale(0.98);
}

/* Required field indicator */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] input[required]::placeholder::after,
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] textarea[required]::placeholder::after {
  content: " *";
  color: #dc3545;
}

/* Empty/error state */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] .empty-input {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Form field labels (if needed) */
.multi-campaign-adset-modal .bulk-duplicate-step[data-step="5"] label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-bottom: 6px;
}

/* Campaign Preview Modal */
.campaign-preview-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  overflow-y: auto;
  padding: 20px;
  align-items: center;
  justify-content: center;
}

.campaign-preview-modal .preview-modal-content {
  max-width: 600px;
  width: 100%;
  margin: 40px auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s ease-out;
}

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

.campaign-preview-modal .preview-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e4e6eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.campaign-preview-modal .preview-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #050505;
}

.campaign-preview-modal .close-preview-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #65676b;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.campaign-preview-modal .close-preview-btn:hover {
  background: #f0f2f5;
}

.campaign-preview-modal .preview-modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.campaign-preview-modal .preview-modal-body > div {
  margin-bottom: 24px;
}

.campaign-preview-modal .preview-modal-body > div:last-child {
  margin-bottom: 0;
}

.campaign-preview-modal .preview-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e4e6eb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #f7f8fa;
  border-radius: 0 0 8px 8px;
}

.campaign-preview-modal .preview-edit-btn {
  padding: 10px 24px;
  background: white;
  color: #050505;
  border: 1px solid #ccd0d5;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

.campaign-preview-modal .preview-edit-btn:hover {
  background: #f0f2f5;
  border-color: #bec3c9;
}

.campaign-preview-modal .preview-confirm-create-btn {
  padding: 10px 24px;
  background: #1877f2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

.campaign-preview-modal .preview-confirm-create-btn:hover {
  background: #166fe5;
}

.campaign-preview-modal .preview-confirm-create-btn:active {
  transform: scale(0.98);
}