/* ===========================================
   KEY-STONE - Spirit Design System Integration
   =========================================== */

/* Spirit Design System Imports removed - they are linked directly in index.html for better performance */

/* ===========================================
   Page-specific styles
   =========================================== */

/* Contact Page Styles */
.page-header {
  text-align: center;
  margin-bottom: var(--space-xxl);
  padding: var(--space-xxl) 0;
}

.page-header .heading-1 {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.page-header .text-body-large {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin: 0;
}

.contact-section {
  display: grid;
  gap: var(--space-xxl);
  max-width: 800px;
  margin: 0 auto;
}

.contact-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
  box-shadow: var(--shadow-sm);
}

.contact-card .heading-2 {
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

.contact-card .text-body {
  margin-bottom: var(--space-xl);
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.contact-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-primary);
  color: var(--neutral-0);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-fast);
  justify-content: center;
}

.contact-button:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.contact-button.telegram {
  background: #0088cc;
  border-color: #0088cc;
}

.contact-button.telegram:hover {
  background: #0077b3;
  border-color: #0077b3;
}

.contact-button.whatsapp {
  background: #25d366;
  border-color: #25d366;
}

.contact-button.whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
}

.contact-button svg {
  flex-shrink: 0;
}

.support-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hours-item {
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.hours-item .heading-3 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.hours-item .text-body {
  margin: 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Downloads Page Styles */
.downloads-section {
  display: grid;
  gap: var(--space-xxl);
}

.downloads-category {
  display: grid;
  gap: var(--space-lg);
}

.downloads-category .heading-2 {
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.download-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  text-align: center;
}

.download-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.download-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
}

.download-card .heading-3 {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.download-card .text-body {
  margin-bottom: var(--space-xl);
  color: var(--text-secondary);
  line-height: 1.5;
}

.download-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-primary);
  color: var(--neutral-0);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-fast);
  justify-content: center;
}

.download-button:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.download-button svg {
  flex-shrink: 0;
}

/* Image Processing Animations */
.processing-spinner,
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: var(--space-sm);
  vertical-align: middle;
}

.status-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--neutral-20);
  border-top: 2px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

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

/* Image paste feedback */
.input-action-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.input-action-btn .loading-spinner {
  border-color: rgba(0, 120, 212, 0.3);
  border-top-color: var(--color-primary);
}

/* Enhanced button animations */
.send-image-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.send-image-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.send-image-btn:hover::before {
  left: 100%;
}

/* Pulse animation for highlighting */
@keyframes buttonPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(0, 120, 212, 0);
  }
}

.send-image-btn.pulse-highlight {
  animation: buttonPulse 2s infinite;
}

/* Image preview animations */
#previewImage {
  transition: opacity 0.3s ease;
}

.image-preview-container {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Processing status enhancements */
.processing-status {
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* ===========================================
   Microsoft Fabric UI Color Scheme
   Based on Microsoft Design Language
   =========================================== */

:root {
  /* Microsoft Fabric Primary Colors */
  --color-primary: #0078d4;
  /* Microsoft Blue */
  --color-primary-hover: #106ebe;
  /* Hover state */
  --color-primary-active: #005a9e;
  /* Active state */
  --color-primary-disabled: #c8c6c4;
  /* Disabled state */

  /* Microsoft Fabric Neutral Colors */
  --neutral-0: #ffffff;
  /* White */
  --neutral-4: #f4f4f4;
  /* Light gray background */
  --neutral-6: #f8f8f8;
  /* Very light gray */
  --neutral-8: #eaeaea;
  /* Light neutral */
  --neutral-20: #c8c6c4;
  /* Medium neutral */
  --neutral-40: #a19f9d;
  /* Dark neutral */
  --neutral-60: #605e5c;
  /* Very dark neutral */
  --neutral-80: #323130;
  /* Dark text */
  --neutral-100: #000000;
  /* Black */

  /* Microsoft Fabric Semantic Colors */
  --color-success: #107c10;
  /* Success green */
  --color-success-hover: #0b5a0b;
  /* Success hover */
  --color-error: #d13438;
  /* Error red */
  --color-error-hover: #a4262c;
  /* Error hover */
  --color-warning: #ff8c00;
  /* Warning orange */
  --color-warning-hover: #d47300;
  /* Warning hover */
  --color-info: #0078d4;
  /* Info blue */

  /* Microsoft Fabric Background Colors */
  --bg-primary: #ffffff;
  /* Primary background (white) */
  --bg-secondary: #f8f8f8;
  /* Secondary background */
  --bg-tertiary: #f4f4f4;
  /* Tertiary background */
  --bg-quaternary: #eaeaea;
  /* Quaternary background */
  --bg-overlay: rgba(255, 255, 255, 0.6);
  /* Overlay */

  /* Microsoft Fabric Text Colors */
  --text-primary: #323130;
  /* Primary text */
  --text-secondary: #605e5c;
  /* Secondary text */
  --text-tertiary: #a19f9d;
  /* Tertiary text */
  --text-disabled: #c8c6c4;
  /* Disabled text */

  /* Microsoft Fabric Border Colors */
  --border-color: #edebe9;
  /* Light border */
  --border-color-dark: #c8c6c4;
  /* Dark border */

  /* Microsoft Fabric Shadow */
  --shadow-sm: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.11);
  --shadow-md: 0 3.2px 7.2px rgba(0, 0, 0, 0.13), 0 0.6px 1.8px rgba(0, 0, 0, 0.11);
  --shadow-lg: 0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11);

  /* Microsoft Fabric Typography */
  --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 24px;

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.4;
  --line-height-heading: 1.2;

  /* Microsoft Fabric Spacing */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 20px;
  --space-xxxl: 24px;
  --space-xxxxl: 32px;

  /* Header and Layout */
  --header-height: 64px;
  --footer-height: 60px;

  /* Microsoft Fabric Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* Microsoft Fabric Animation */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.6, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Microsoft Fabric Light Theme - Always applied */
.light-theme {
  /* Ensure light theme is always active */
  --bg-primary: #ffffff !important;
  --bg-secondary: #f8f8f8 !important;
  --bg-tertiary: #f4f4f4 !important;
  --text-primary: #323130 !important;
  --text-secondary: #605e5c !important;
  --text-tertiary: #a19f9d !important;
  --border-color: #edebe9 !important;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  margin: 0;
  padding: 0;
  /* Add padding for fixed header */
  padding-top: var(--header-height);
}

/* Force Microsoft Fabric light theme on all elements */
html,
body,
.container,
main,
section,
div,
nav,
header,
footer,
.activation-form,
.instruction-step,
.key-display-container,
.message-container,
.slider-nav {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Ensure main content doesn't get hidden behind fixed header */
main.main-content {
  padding-top: 0 !important;
  /* Remove duplicate padding */
  min-height: calc(100vh - var(--header-height));
}

/* Header specific overrides */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  height: var(--header-height) !important;
  pointer-events: auto !important;
}

/* Layout Components - Microsoft Fabric */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.activation-section {
  margin: var(--space-xxl) 0;
}

.activation-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-xxl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xxl);
}

/* Custom component styles */
.activation-step-section {
  margin-bottom: 2rem;
}

.activation-step-section.visible {
  display: block;
}

.activation-step-section.hidden {
  display: none;
}

/* Form styling */
.input-group {
  margin-bottom: 1.5rem;
}

.input-wrapper {
  margin-bottom: 1rem;
}

.input-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.installation-input {
  width: 100%;
  padding: var(--space-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.installation-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

/* Button styles - Microsoft Fabric */
.activation-button {
  background: var(--color-primary);
  color: var(--neutral-0);
  border: 1px solid var(--color-primary);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.activation-button:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.activation-button:active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.activation-button:disabled {
  background: var(--neutral-20);
  border-color: var(--neutral-20);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Message styles - Microsoft Fabric */
.message-container {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  border-left: 3px solid;
}

.message-container.success {
  background: rgba(16, 124, 16, 0.1);
  border-left-color: var(--color-success);
  color: var(--neutral-80);
}

.message-container.error {
  background: rgba(214, 52, 56, 0.1);
  border-left-color: var(--color-error);
  color: var(--neutral-80);
}

.message-container.warning {
  background: rgba(255, 140, 0, 0.1);
  border-left-color: var(--color-warning);
  color: var(--neutral-80);
}

/* Confirmation Container - Microsoft Fabric Style */
.confirmation-container {
  background: var(--bg-primary);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-xl);
  padding: var(--space-xxxxl);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-xxxxl);
}

.confirmation-container h3 {
  color: var(--color-success);
  font-size: var(--font-size-xxxxl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0 0 var(--space-xl) 0;
}

.confirmation-container .confirmation-id-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.confirmation-container .confirmation-id-label {
  color: var(--color-success);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  display: block;
}

.confirmation-container .confirmation-id-display {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  word-break: break-all;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.confirmation-container .confirmation-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.confirmation-container .confirmation-block {
  background: var(--bg-primary);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: var(--transition-fast);
}

.confirmation-container .confirmation-block:hover {
  background: var(--bg-secondary);
  transform: translateY(-2px);
}

.confirmation-container .confirmation-help {
  background: rgba(255, 140, 0, 0.1);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--neutral-80);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.confirmation-container .confirmation-help .help-button {
  background: var(--color-warning);
  color: var(--neutral-0);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  margin-top: var(--space-md);
  transition: var(--transition-fast);
}

.confirmation-container .confirmation-help .help-button:hover {
  background: rgba(255, 140, 0, 0.9);
  border-color: rgba(255, 140, 0, 0.9);
}

/* Key display - Microsoft Fabric */
.key-display-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
}

.key-display-input {
  width: 100%;
  padding: var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  background: var(--bg-primary);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.copy-button {
  background: var(--color-success);
  color: var(--neutral-0);
  border: 1px solid var(--color-success);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.copy-button:hover {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

/* Instructions styling */
.instruction-guide {
  margin-top: 2rem;
}

.instruction-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1rem;
}

.nav-button {
  padding: 0.75rem 1.5rem;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.nav-button:hover {
  border-color: var(--color-primary);
}

.instruction-section {
  display: none;
}

.instruction-section.active {
  display: block;
}

/* Slider navigation - Microsoft Fabric */
.slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.slider-dot {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  border: 2px solid #0078d4;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: #0078d4;
  position: relative;
}

.slider-dot::before {
  content: attr(data-slide);
  counter-increment: slide-counter;
}

.slider-dot.active {
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  border-color: #0078d4;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.slider-dot:hover:not(.active) {
  background: rgba(0, 120, 212, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

.slider-arrow {
  background: white;
  color: #0078d4;
  border: 2px solid #0078d4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-arrow:hover:not(:disabled) {
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  border-color: #0078d4;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.slider-arrow:active:not(:disabled) {
  background: linear-gradient(135deg, #005a9e 0%, #004578 100%);
  transform: scale(0.95);
}

.slider-arrow:disabled {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #bdbdbd;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Step styling - Microsoft Fabric */
.instruction-step {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: var(--neutral-0);
  border-radius: 50%;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
}

.step-content {
  display: flex;
  gap: 1.5rem;
}

.step-text {
  flex: 1;
}

.step-image {
  flex: 1;
  min-width: 300px;
}

.instruction-screenshot {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness - Microsoft Fabric */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-sm);
  }

  .activation-form {
    padding: var(--space-lg);
  }

  .step-content {
    flex-direction: column;
  }

  .step-image {
    min-width: auto;
  }

  .instruction-nav {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .slider-nav {
    padding: var(--space-sm);
  }

  /* Mobile adjustments for CID input */
  .input-methods-tabs {
    flex-direction: column;
  }

  .method-tab {
    width: 100%;
    justify-content: center;
  }

  .manual-input-wrapper {
    flex-direction: column;
  }

  .upload-buttons {
    flex-direction: column;
  }

  .info-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* Drag and Drop Styles */
.upload-zone.dragover {
  background: var(--bg-tertiary);
  border-color: var(--color-primary);
  transform: scale(1.02);
  transition: var(--transition-fast);
}

/* Hide file input */
#imageInput {
  display: none;
}

/* Support FAB - Microsoft Fabric Style */
.support-fab {
  position: fixed;
  bottom: var(--space-xxl);
  right: var(--space-xxl);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-primary);
  color: var(--neutral-0);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.support-fab:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.support-fab:active {
  background: var(--color-primary-active);
  transform: translateY(0);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Mobile FAB adjustments - Microsoft Fabric */
@media (max-width: 640px) {
  .support-fab {
    bottom: var(--space-lg);
    right: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
  }

  .support-fab .support-fab-text {
    display: none;
  }
}

/* Professional Input Styles */
/* Professional Input Styles */
.input-label-large {
  font-size: 1.25rem;
  /* Increased from 1.1rem */
  font-weight: 700;
  margin-bottom: 16px;
  /* Increased from 12px */
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: block;
}

.professional-input {
  width: 100%;
  padding: 20px 24px;
  /* Increased padding */
  border: 3px solid #e2e8f0;
  /* Thicker border (3px) and slightly cooler gray */
  border-radius: 16px;
  /* Larger radius */
  font-family: 'Courier New', monospace;
  font-size: 22px;
  /* Decreased from 26px to help visibility */
  font-weight: 700;
  text-overflow: clip;
  /* Ensure no ellipsis */
  white-space: nowrap;
  overflow-x: auto;
  /* Allow horizontal scroll if needed */
  background: #f8fafc;
  /* Subtle background color */
  color: #1e293b;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  letter-spacing: 1px;
  /* Reduced from 2px */
  padding-right: 160px;
  /* Space for the absolute button on desktop */
  height: auto;
  /* Let padding define height */
}

.professional-input:focus {
  outline: none;
  border-color: #3b82f6;
  /* Stronger blue */
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.professional-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
  font-family: var(--font-family);
  letter-spacing: normal;
  font-size: 18px;
  /* Larger placeholder */
  padding-top: 2px;
  /* Visual alignment */
}

/* Professional Section Container */
.professional-card {
  background: #ffffff;
  border-radius: 20px;
  /* Larger radius */
  padding: 40px;
  /* More breathing room */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* Stronger shadow */
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.professional-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  /* Thicker top accent */
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.step-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-weight: 800;
  font-size: 20px;
}

.step-title-large {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Large Button Style */
.btn-professional-large {
  width: 100%;
  padding: 20px 32px;
  /* Larger padding */
  font-size: 20px;
  /* Larger text */
  font-weight: 700;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  /* Space from input */
}

.btn-professional-large:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.btn-professional-large:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Beautiful Image Upload & CID Menu Styles */
.cid-professional-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-width: 800px;
  margin: 0 auto;
}

.cid-input-wrapper {
  position: relative;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

/* Drag & Drop Feedback */
.cid-input-wrapper.dragover {
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.cid-input-wrapper.dragover .professional-input {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.cid-info-banner {
  background: #eff6ff;
  /* light blue */
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1e40af;
  /* dark blue text */
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
}

.cid-action-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.btn-upload-camera {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 10px;
  font-weight: 600;
  padding: 4px;
}

.btn-upload-camera:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f8fafc;
}

.btn-cid-action {
  flex-grow: 1;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.3);
  transition: all 0.2s ease;
}

.btn-cid-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px -1px rgba(2, 132, 199, 0.4);
}

.btn-cid-action:active {
  transform: translateY(0);
}

/* Result Grid */
.cid-result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.cid-result-block {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  text-align: center;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #334155;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-copy-all {
  width: 100%;
  padding: 14px;
  background: #cbd5e1;
  color: #475569;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-copy-all:hover {
  background: #94a3b8;
  color: white;
}

/* Mobile Optimization */
@media (max-width: 640px) {
  .cid-professional-card {
    padding: 20px;
    border-radius: 20px;
  }

  .cid-result-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on mobile */
  }

  .btn-upload-camera {
    width: 50px;
    height: 50px;
  }

  .btn-cid-action {
    font-size: 16px;
  }

  .step-title-large {
    font-size: 18px;
  }
}

/* Fix for Key Display Visibility on Mobile */
@media (max-width: 768px) {
  #keyDisplay.professional-input {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    width: 100% !important;
    text-overflow: clip !important;
    font-size: 14.5px !important;
    /* Slightly smaller to ensure full 29-char key fits */
    letter-spacing: 0px !important;
    text-align: center;
    padding: 16px 8px !important;
    height: auto !important;
  }

  /* INCREASE copy button size as requested */
  #copyKeyButton {
    position: static !important;
    margin-top: 1rem !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 22px 32px !important;
    /* Larger height for better touch/visibility */
    font-size: 22px !important;
    border-radius: 14px !important;
    height: auto !important;
    line-height: 1.2;
  }

  /* DECREASE instructions button height as requested */
  #openInstructionsMainBtn {
    padding: 12px 24px !important;
    /* Smaller height */
    font-size: 16px !important;
    height: auto !important;
    margin-top: 12px !important;
  }

  /* Ensure parent allows flow */
  .input-group>div {
    display: flex;
    flex-direction: column;
  }
}

/* Enhanced Confirmation Blocks Design */
.confirmation-block {
  font-size: 26px !important;
  /* Significantly larger */
  padding: 20px 10px !important;
  border-width: 2px !important;
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  /* Ensure enough height */
}

.confirmation-block:hover {
  border-color: #3b82f6 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-2px);
  color: #0f172a !important;
}

/* Grid container adjustment overrides if possible, though inline styles are strong. 
   We can try to target the container if we can identify it, but the blocks resizing will likely push the grid. 
   The inline grid is: display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); 
   80px min might be too small for 26px font. 
   Let's hope standard flow handles it, or use JS to remove inline style? 
   No, let's trust the browser to expand content. */