/* =====================================================
   INVOICE MODAL STYLES
   ===================================================== */

#invoice-modal {
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.invoice-modal-card {
  animation: slideInUp 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.invoice-header {
  position: relative;
}

.invoice-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

#invoice-iframe {
  border: 2px solid #f0f2f5;
  background: white;
  transition: all 0.3s ease;
}

#invoice-iframe:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .invoice-modal-card {
    width: 98% !important;
    margin: 2% auto !important;
    border-radius: 15px !important;
  }
  
  .invoice-header {
    padding: 15px 20px !important;
  }
  
  .invoice-header h2 {
    font-size: 22px !important;
  }
  
  .invoice-content {
    padding: 15px !important;
  }
  
  #invoice-iframe {
    height: 70vh !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 480px) {
  .invoice-header div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }
  
  .close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
  }
}

/* Loading state for iframe */
#invoice-iframe[src=""] {
  background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ec 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}