/* Couple Name Combiner WordPress Plugin Styles */
/* Scoped to avoid conflicts with theme styles */

.couple-name-combiner-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  line-height: 1.5;
  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 50%, #f3e8ff 100%);
  border-radius: 1rem;
  --cnc-pink-50: #fdf2f8;
  --cnc-pink-100: #fce7f3;
  --cnc-pink-400: #f472b6;
  --cnc-pink-500: #ec4899;
  --cnc-pink-600: #db2777;
  --cnc-violet-50: #f3e8ff;
  --cnc-violet-100: #e9d5ff;
  --cnc-violet-400: #a855f7;
  --cnc-violet-500: #8b5cf6;
  --cnc-violet-600: #7c3aed;
  --cnc-slate-100: #f1f5f9;
  --cnc-slate-200: #e2e8f0;
  --cnc-slate-300: #cbd5e1;
  --cnc-slate-500: #64748b;
  --cnc-slate-600: #475569;
  --cnc-slate-700: #334155;
  --cnc-slate-800: #1e293b;
  --cnc-emerald-100: #dcfce7;
  --cnc-emerald-200: #bbf7d0;
  --cnc-emerald-500: #10b981;
  --cnc-emerald-700: #047857;
  --cnc-amber-100: #fef3c7;
  --cnc-amber-200: #fde68a;
  --cnc-amber-500: #f59e0b;
  --cnc-amber-800: #92400e;
}

.couple-name-combiner-container * {
  box-sizing: border-box;
}

/* Utility Classes */
.cnc-hidden { display: none !important; }
.cnc-flex { display: flex; }
.cnc-grid { display: grid; }
.cnc-relative { position: relative; }
.cnc-absolute { position: absolute; }
.cnc-w-full { width: 100%; }
.cnc-h-auto { height: auto; }
.cnc-items-center { align-items: center; }
.cnc-justify-center { justify-content: center; }
.cnc-gap-2 { gap: 0.5rem; }
.cnc-gap-3 { gap: 0.75rem; }
.cnc-gap-4 { gap: 1rem; }
.cnc-gap-6 { gap: 1.5rem; }
.cnc-p-1 { padding: 0.25rem; }
.cnc-p-3 { padding: 0.75rem; }
.cnc-p-4 { padding: 1rem; }
.cnc-p-6 { padding: 1.5rem; }
.cnc-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.cnc-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cnc-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.cnc-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.cnc-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.cnc-px-4 { padding-left: 1rem; padding-right: 1rem; }
.cnc-mb-2 { margin-bottom: 0.5rem; }
.cnc-mb-3 { margin-bottom: 0.75rem; }
.cnc-mb-4 { margin-bottom: 1rem; }
.cnc-mb-6 { margin-bottom: 1.5rem; }
.cnc-text-center { text-align: center; }
.cnc-text-sm { font-size: 0.875rem; }
.cnc-text-lg { font-size: 1.125rem; }
.cnc-text-xl { font-size: 1.25rem; }
.cnc-text-4xl { font-size: 2.25rem; }
.cnc-font-medium { font-weight: 500; }
.cnc-font-semibold { font-weight: 600; }
.cnc-font-bold { font-weight: 700; }
.cnc-leading-relaxed { line-height: 1.625; }
.cnc-italic { font-style: italic; }
.cnc-rounded-lg { border-radius: 0.5rem; }
.cnc-rounded-full { border-radius: 9999px; }
.cnc-border-2 { border-width: 2px; }
.cnc-cursor-pointer { cursor: pointer; }
.cnc-pointer-events-none { pointer-events: none; }
.cnc-transition-all { transition: all 0.2s ease; }
.cnc-transform { transform: translateZ(0); }
.cnc-scale-105 { transform: scale(1.05); }

/* Grid System */
.cnc-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cnc-flex-col { flex-direction: column; }
.cnc-flex-1 { flex: 1 1 0%; }

/* Colors */
.cnc-text-pink-500 { color: var(--cnc-pink-500); }
.cnc-text-pink-600 { color: var(--cnc-pink-600); }
.cnc-text-slate-500 { color: var(--cnc-slate-500); }
.cnc-text-slate-600 { color: var(--cnc-slate-600); }
.cnc-text-slate-700 { color: var(--cnc-slate-700); }
.cnc-text-slate-800 { color: var(--cnc-slate-800); }
.cnc-bg-white { background-color: #ffffff; }
.cnc-bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.cnc-from-pink-500 { --tw-gradient-from: var(--cnc-pink-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.cnc-to-violet-500 { --tw-gradient-to: var(--cnc-violet-500); }
.cnc-from-pink-600 { --tw-gradient-from: var(--cnc-pink-600); }
.cnc-to-violet-600 { --tw-gradient-to: var(--cnc-violet-600); }

/* Card Component */
.cnc-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--cnc-slate-200);
}

.cnc-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cnc-card-content {
  width: 100%;
}

/* Floating Input Component */
.cnc-floating-input {
  position: relative;
  margin-bottom: 1rem;
}

.cnc-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--cnc-slate-200);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: white;
  transition: border-color 0.2s ease;
  outline: none;
}

.cnc-input:focus {
  border-color: var(--cnc-pink-400);
}

.cnc-floating-label {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  color: var(--cnc-slate-500);
  transition: all 0.2s ease;
  pointer-events: none;
  background: white;
  padding: 0 0.25rem;
  font-size: 1rem;
}

.cnc-input:focus + .cnc-floating-label,
.cnc-input:not(:placeholder-shown) + .cnc-floating-label {
  top: -0.5rem;
  font-size: 0.875rem;
  color: var(--cnc-pink-500);
}

/* Button Component */
.cnc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  font-size: 1rem;
}

.cnc-btn:hover {
  transform: translateY(-1px);
}

.cnc-btn-primary {
  background: linear-gradient(135deg, var(--cnc-pink-500), var(--cnc-violet-500));
  color: white !important;
  box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.3);
}

.cnc-btn-primary:hover {
  background: linear-gradient(135deg, var(--cnc-pink-600), var(--cnc-violet-600));
  box-shadow: 0 6px 20px 0 rgba(236, 72, 153, 0.4);
  color: white !important;
}

.cnc-btn-outline {
  background: white;
  border: 2px solid var(--cnc-slate-200);
  color: var(--cnc-slate-700);
}

.cnc-btn-outline:hover {
  border-color: var(--cnc-pink-400);
  background: var(--cnc-pink-50);
}

.cnc-btn-ghost {
  background: transparent;
  border: none;
  color: var(--cnc-pink-500);
}

.cnc-btn-ghost:hover {
  background: var(--cnc-pink-50);
}

.cnc-btn-success {
  background: var(--cnc-emerald-100);
  color: var(--cnc-emerald-700);
  border-color: var(--cnc-emerald-200);
}

.cnc-btn-success:hover {
  background: var(--cnc-emerald-200);
}

.cnc-btn-violet {
  background: var(--cnc-violet-100);
  color: var(--cnc-violet-600);
  border-color: var(--cnc-violet-200);
}

.cnc-btn-violet:hover {
  background: var(--cnc-violet-200);
}

/* Select Component */
.cnc-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--cnc-slate-200);
  border-radius: 0.5rem;
  background: white;
  font-size: 1rem;
  color: var(--cnc-slate-700);
  cursor: pointer;
}

.cnc-select:focus {
  border-color: var(--cnc-pink-400);
  outline: none;
}

/* Label Component */
.cnc-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cnc-slate-700);
  margin-bottom: 0.5rem;
}

/* Toggle Component */
.cnc-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 2px solid var(--cnc-slate-200);
  border-radius: 0.5rem;
  background: white;
  transition: border-color 0.2s ease;
}

.cnc-toggle-container:hover {
  border-color: var(--cnc-pink-300);
}

.cnc-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cnc-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cnc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cnc-slate-300);
  transition: 0.3s;
  border-radius: 24px;
}

.cnc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.cnc-toggle-input:checked + .cnc-toggle-slider {
  background-color: var(--cnc-pink-500);
}

.cnc-toggle-input:checked + .cnc-toggle-slider:before {
  transform: translateX(20px);
}

.cnc-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cnc-slate-700);
}

/* Results Section */
.cnc-results {
  animation: cnc-fade-in 0.5s ease-out;
}

.cnc-compatibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--cnc-pink-100), var(--cnc-violet-100));
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--cnc-slate-700);
}

.cnc-compatibility-score {
  font-size: 2.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--cnc-pink-500), var(--cnc-violet-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.cnc-story-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--cnc-pink-100), var(--cnc-violet-100));
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--cnc-slate-700);
}

.cnc-love-story {
  color: var(--cnc-slate-600);
  font-style: italic;
  line-height: 1.625;
}

/* Export Controls */
.cnc-export-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cnc-favorite-count {
  background: var(--cnc-pink-500);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
}

/* Name Grid */
.cnc-results-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cnc-slate-800);
  margin-bottom: 1rem;
}

.cnc-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.cnc-name-card {
  background: linear-gradient(135deg, var(--cnc-pink-50), var(--cnc-violet-50));
  padding: 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--cnc-slate-100);
  transition: all 0.2s ease;
}

.cnc-name-card:hover {
  border-color: var(--cnc-pink-200);
  transform: translateY(-2px);
}

.cnc-name-card-header {
  display: flex;
  align-items: center;
  justify-content: between;
  margin-bottom: 0.75rem;
}

.cnc-name-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cnc-slate-800);
  flex: 1;
}

.cnc-favorite-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--cnc-slate-300);
  transition: color 0.2s ease;
}

.cnc-favorite-btn:hover {
  color: var(--cnc-pink-500);
}

.cnc-favorite-btn.cnc-active {
  color: var(--cnc-pink-500);
}

/* Section Titles */
.cnc-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cnc-slate-800);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tags */
.cnc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cnc-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cnc-tag-amber {
  background: var(--cnc-amber-100);
  color: var(--cnc-amber-800);
}

.cnc-tag-amber:hover {
  background: var(--cnc-amber-200);
}

.cnc-tag-violet {
  background: var(--cnc-violet-100);
  color: var(--cnc-violet-600);
}

.cnc-tag-violet:hover {
  background: var(--cnc-violet-200);
}

/* Toast Messages */
.cnc-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--cnc-slate-800);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: cnc-slide-up 0.3s ease-out;
}

/* Icons */
.cnc-heart { color: var(--cnc-pink-500); }
.cnc-plus { font-weight: bold; }
.cnc-icon { font-size: 1rem; }
.cnc-star { color: var(--cnc-amber-500); }
.cnc-story-icon { color: var(--cnc-pink-500); }
.cnc-download-icon { color: var(--cnc-emerald-500); }
.cnc-card-icon { color: var(--cnc-violet-500); }
.cnc-instagram { color: var(--cnc-violet-500); }

/* Animations */
@keyframes cnc-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cnc-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

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

.cnc-slide-down {
  animation: cnc-slide-down 0.3s ease-out;
}

/* Responsive Design */
@media (min-width: 640px) {
  .cnc-sm-flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .cnc-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cnc-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark Theme Support */
.couple-name-combiner-container[data-theme="dark"] {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
  color: #f1f5f9;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-card {
  background: #334155;
  border-color: #475569;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-input {
  background: #475569;
  border-color: #64748b;
  color: #f1f5f9;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-floating-label {
  background: #334155;
  color: #94a3b8;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-select {
  background: #475569;
  border-color: #64748b;
  color: #f1f5f9;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-toggle-container {
  background: #475569;
  border-color: #64748b;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-name-card {
  background: linear-gradient(135deg, #475569, #334155);
  border-color: #64748b;
}

.couple-name-combiner-container[data-theme="dark"] .cnc-btn-outline {
  background: #475569;
  border-color: #64748b;
  color: #f1f5f9;
}

/* Ensure no conflicts with WordPress themes */
.couple-name-combiner-container,
.couple-name-combiner-container * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

.couple-name-combiner-container button {
  background: none;
  border: none;
  outline: none;
}

/* ULTIMATE CSS RESET - Force button text visibility in ANY WordPress theme */
html .couple-name-combiner-container button,
html .couple-name-combiner-container button *,
html .couple-name-combiner-container .cnc-btn,
html .couple-name-combiner-container .cnc-btn *,
body .couple-name-combiner-container button,
body .couple-name-combiner-container button *,
body .couple-name-combiner-container .cnc-btn,
body .couple-name-combiner-container .cnc-btn * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
  text-align: center !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-variant: normal !important;
  white-space: nowrap !important;
  overflow: visible !important;
  clip: unset !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* Emergency button text fixes */
html body .couple-name-combiner-container .cnc-btn-primary,
html body .couple-name-combiner-container .cnc-btn-primary *,
html body .couple-name-combiner-container .cnc-btn-primary span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Force button text visibility - override any theme conflicts */
.couple-name-combiner-container .cnc-btn-primary,
.couple-name-combiner-container .cnc-btn-primary *,
.couple-name-combiner-container .cnc-btn-primary span,
.couple-name-combiner-container .cnc-btn-primary:hover,
.couple-name-combiner-container .cnc-btn-primary:hover *,
.couple-name-combiner-container .cnc-btn-primary:hover span,
.couple-name-combiner-container .cnc-btn-primary:focus,
.couple-name-combiner-container .cnc-btn-primary:focus *,
.couple-name-combiner-container .cnc-btn-primary:active,
.couple-name-combiner-container .cnc-btn-primary:active * {
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
}

.couple-name-combiner-container .cnc-btn-primary .cnc-heart {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* NUCLEAR CSS - Override ALL WordPress theme conflicts */
.couple-name-combiner-container button,
.couple-name-combiner-container button *,
.couple-name-combiner-container .cnc-btn,
.couple-name-combiner-container .cnc-btn *,
.couple-name-combiner-container .cnc-btn-outline,
.couple-name-combiner-container .cnc-btn-outline *,
.couple-name-combiner-container .cnc-btn-ghost,
.couple-name-combiner-container .cnc-btn-ghost *,
.couple-name-combiner-container .cnc-btn-success,
.couple-name-combiner-container .cnc-btn-success *,
.couple-name-combiner-container .cnc-btn-violet,
.couple-name-combiner-container .cnc-btn-violet * {
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
  -webkit-text-fill-color: unset !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* Specific button colors with maximum override power */
.couple-name-combiner-container .cnc-btn-outline,
.couple-name-combiner-container .cnc-btn-outline *,
.couple-name-combiner-container .cnc-btn-outline span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

.couple-name-combiner-container .cnc-btn-outline:hover,
.couple-name-combiner-container .cnc-btn-outline:hover *,
.couple-name-combiner-container .cnc-btn-outline:hover span {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

.couple-name-combiner-container .cnc-btn-ghost,
.couple-name-combiner-container .cnc-btn-ghost *,
.couple-name-combiner-container .cnc-btn-ghost span {
  color: #ec4899 !important;
  -webkit-text-fill-color: #ec4899 !important;
}

.couple-name-combiner-container .cnc-btn-ghost:hover,
.couple-name-combiner-container .cnc-btn-ghost:hover *,
.couple-name-combiner-container .cnc-btn-ghost:hover span {
  color: #db2777 !important;
  -webkit-text-fill-color: #db2777 !important;
}

.couple-name-combiner-container .cnc-btn-success,
.couple-name-combiner-container .cnc-btn-success *,
.couple-name-combiner-container .cnc-btn-success span {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}

.couple-name-combiner-container .cnc-btn-success:hover,
.couple-name-combiner-container .cnc-btn-success:hover *,
.couple-name-combiner-container .cnc-btn-success:hover span {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}

.couple-name-combiner-container .cnc-btn-violet,
.couple-name-combiner-container .cnc-btn-violet *,
.couple-name-combiner-container .cnc-btn-violet span {
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}

.couple-name-combiner-container .cnc-btn-violet:hover,
.couple-name-combiner-container .cnc-btn-violet:hover *,
.couple-name-combiner-container .cnc-btn-violet:hover span {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
}

/* Override any WordPress theme button hiding */
.couple-name-combiner-container .cnc-favorite-count {
  background: #ec4899 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}