/* communicard-interactive.css - Interactive element styles */

/* Editable text fields */
[contenteditable="true"] {
    outline: none;
    transition: background-color 0.3s ease;
  }
  
  [contenteditable="true"]:focus {
    background-color: rgba(129, 159, 205, 0.1);
    border-radius: 4px;
    padding: 2px;
  }
  
  [contenteditable="true"]:hover {
    background-color: rgba(129, 159, 205, 0.05);
  }
  
  /* Checkbox frames */
  [class^="frame-"][style*="cursor: pointer"] {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  [class^="frame-"][style*="cursor: pointer"]:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  [class^="frame-"].checked {
    background-color: transparent !important;
  }
  
  /* Selection frames for multi-select */
  [class^="frame-"][class*="selected"] {
    background-color: rgba(129, 159, 205, 0.2);
    border: 2px solid #819fcd !important;
  }
  
  /* Button hover effects */
  a div[class^="frame-"]:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Design selection cards */
  .screen-9 [class^="frame-"]:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  
  /* Input field placeholders */
  .text-wrapper-50,
  .text-wrapper-51,
  .text-wrapper-87,
  .text-wrapper-173,
  .text-wrapper-199,
  .text-wrapper-242 {
    color: #999;
  }
  
  [contenteditable="true"]:not(:empty).text-wrapper-50,
  [contenteditable="true"]:not(:empty).text-wrapper-51,
  [contenteditable="true"]:not(:empty).text-wrapper-87,
  [contenteditable="true"]:not(:empty).text-wrapper-173,
  [contenteditable="true"]:not(:empty).text-wrapper-199,
  [contenteditable="true"]:not(:empty).text-wrapper-242 {
    color: #212121;
  }
  
  /* Loading state */
  .loading {
    opacity: 0.6;
    pointer-events: none;
  }
  
  /* Error state */
  .error {
    border: 2px solid #c97a7a !important;
    animation: shake 0.5s;
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  
  /* Success feedback */
  .success-feedback {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #1e7c56;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes slideIn {
    from {
      transform: translateX(400px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Tooltip for character limit */
  .char-limit-tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
  }
  
  /* Focus indicators for accessibility */
  [class^="frame-"]:focus-visible {
    outline: 3px solid #455fd3;
    outline-offset: 2px;
  }
  
  /* Smooth transitions for all interactive elements */
  * {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  
  /* Preview card animations */
  #dynamicCardPreview {
    animation: fadeIn 0.5s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Responsive adjustments */
  @media (max-width: 1280px) {
    .success-feedback {
      right: 10px;
      left: 10px;
      text-align: center;
    }
  }