@import url('../tiptap-editor.css');
@import url('../react-international-phone.css');

/* Conference Template - Professional & Corporate */
[data-template="conference"] {
  /* Default template values - will be overridden by enhanced settings */
  --background: 0 0% 100%;
  --foreground: 216 12% 8%;
  --card: 0 0% 100%;
  --card-foreground: 216 12% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 216 12% 8%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 9% 46%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 220 14% 96%;
  --accent-foreground: 220 9% 46%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 221 83% 53%;
  --radius: 0.5rem;

  /* Chart Colors */
  --chart-1: 221 83% 53%;
  --chart-2: 212 95% 68%;
  --chart-3: 216 92% 60%;
  --chart-4: 210 98% 78%;
  --chart-5: 212 97% 87%;

  /* Typography */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-serif: "PT Serif", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Conference-specific design tokens */
  --conference-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --conference-shadow-lg: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
  --conference-transition: all 0.2s ease-in-out;
}

/* Dark Mode Support */
[data-template="conference"].dark, .dark [data-template="conference"] {
  --background: 222 84% 5%;
  --foreground: 210 40% 98%;
  --card: 222 84% 5%;
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 222 84% 5%;
  --secondary: 217 32% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 215 32% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 215 32% 17%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 215 32% 17%;
  --input: 215 32% 17%;
  --ring: 217 91% 60%;

  /* Chart Colors - Dark Mode */
  --chart-1: 217 91% 60%;
  --chart-2: 212 95% 68%;
  --chart-3: 216 92% 60%;
  --chart-4: 210 98% 78%;
  --chart-5: 212 97% 87%;
}

/* Section Scheme Classes */
[data-template="conference"] .section-brand {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
[data-template="conference"] .section-soft {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
[data-template="conference"] .section-neutral {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
[data-template="conference"] .section-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
[data-template="conference"] .section-accent {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
[data-template="conference"] .section-contrast {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}
[data-template="conference"] .section-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
[data-template="conference"] .section-inverse {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* Conference Template Specific Styles */
[data-template="conference"] {
  font-family: var(--font-sans);
}

[data-template="conference"] h1,
[data-template="conference"] h2,
[data-template="conference"] h3,
[data-template="conference"] h4,
[data-template="conference"] h5,
[data-template="conference"] h6 {
  font-family: var(--font-sans);
  font-weight: 600;
}

[data-template="conference"] h1 {
  font-weight: 700;
}

/* Hero Section Styling */
[data-template="conference"] .hero-section {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
}

/* Card Enhancements */
[data-template="conference"] .conference-card {
  box-shadow: var(--conference-shadow);
  transition: var(--conference-transition);
}

[data-template="conference"] .conference-card:hover {
  box-shadow: var(--conference-shadow-lg);
  transform: translateY(-2px);
}

/* CTA Section Professional Styling */
[data-template="conference"] .cta-section {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.9));
}

/* Phone Input Styles */
.react-international-phone-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
}

/* Remove default borders and backgrounds - wrapper handles them */
.react-international-phone-country-selector-button,
.react-international-phone-input-container .react-international-phone-input {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background: transparent !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Target the actual input element inside */
input.react-international-phone-input {
  background-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Country button radius and padding override (default style.css sets padding:0) */
.react-international-phone-country-selector-button {
  border-top-left-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 0.75rem !important;
}

/* Input radius */
.react-international-phone-input {
  border-top-right-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Dropdown styling */
.react-international-phone-country-selector-dropdown {
  max-height: 300px;
  overflow-y: auto;
  border-radius: var(--radius, 0.5rem);
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  z-index: 50 !important;
}

.react-international-phone-country-selector-dropdown__list-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: hsl(var(--foreground));
}

.react-international-phone-country-selector-dropdown__list-item:hover {
  background-color: hsl(var(--accent));
}

.react-international-phone-country-selector-dropdown__list-item-flag-emoji {
  margin-right: 0.5rem;
}