/* ===== CHECKOUT STYLES MODERNES ===== */

/* Delivery Options */
.delivery-option {
  @apply relative cursor-pointer rounded-2xl border-2 border-slate-200 bg-white p-4 transition-all duration-200;
}

.delivery-option:hover {
  @apply border-indigo-300 shadow-md;
}

.delivery-option:has(input:checked) {
  @apply border-indigo-500 bg-indigo-50 ring-2 ring-indigo-200;
}

.option-body {
  @apply flex items-start gap-4;
}

.option-icon {
  @apply h-6 w-6 text-indigo-600;
}

.option-title {
  @apply font-semibold text-slate-900;
}

.option-text {
  @apply text-sm text-slate-600;
}

/* Payment Tiles */
.payment-tile {
  @apply relative flex flex-col items-center gap-3 rounded-2xl border-2 border-slate-200 bg-white p-6 transition-all duration-200 hover:border-indigo-300 hover:shadow-lg;
}

.payment-tile:disabled {
  @apply pointer-events-none opacity-50;
}

.payment-tile img {
  @apply h-10 w-auto object-contain;
}

.payment-tile span {
  @apply text-sm font-semibold text-slate-700;
}

.payment-tile:hover {
  @apply bg-gradient-to-br from-indigo-50 to-blue-50;
}

/* Toast Notifications */
.toast {
  @apply fixed top-4 right-4 z-50 transform translate-x-full rounded-lg px-6 py-4 font-semibold text-white shadow-xl transition-transform duration-300;
}

.toast.success {
  @apply bg-gradient-to-r from-emerald-500 to-green-600;
}

.toast.error {
  @apply bg-gradient-to-r from-red-500 to-rose-600;
}

.toast.show {
  @apply translate-x-0;
}

/* Modern Modal Styles */
.modal-backdrop {
  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm;
  animation: fadeIn 0.2s ease-out;
}

.modal-box {
  @apply relative w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto rounded-3xl bg-white shadow-2xl;
  animation: slideUp 0.3s ease-out;
}

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

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

/* Modal Header */
.modal-header {
  @apply sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/95 p-6 backdrop-blur-sm;
}

.modal-title {
  @apply text-2xl font-bold text-slate-900;
}

.modal-close {
  @apply flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-500 transition-colors hover:bg-red-100 hover:text-red-600;
}

/* Modal Content */
.modal-content {
  @apply p-6 space-y-6;
}

/* Order Summary in Modal */
.order-summary {
  @apply rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-indigo-50 p-6;
}

.order-summary h4 {
  @apply mb-4 text-lg font-semibold text-slate-900;
}

.order-items {
  @apply space-y-3;
}

.order-item {
  @apply flex items-center justify-between rounded-xl bg-white p-4 shadow-sm;
}

.order-item-info {
  @apply flex-1;
}

.order-item-name {
  @apply font-semibold text-slate-900;
}

.order-item-details {
  @apply text-sm text-slate-600;
}

.order-item-price {
  @apply font-bold text-indigo-600;
}

.total-section {
  @apply mt-6 space-y-3 rounded-xl bg-white p-4;
}

.total-line {
  @apply flex items-center justify-between text-sm;
}

.total-line.final {
  @apply border-t border-slate-200 pt-3 text-lg font-bold text-slate-900;
}

/* Payment Info Section */
.payment-info {
  @apply rounded-2xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-green-50 p-6;
}

.payment-info h5 {
  @apply mb-4 flex items-center gap-2 text-lg font-semibold text-emerald-800;
}

.info-row {
  @apply flex items-center justify-between rounded-lg bg-white p-3;
}

.info-label {
  @apply font-medium text-slate-700;
}

.info-value {
  @apply flex items-center gap-2 font-mono font-semibold text-slate-900;
}

.copy-btn {
  @apply rounded-lg bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-200;
}

.qr-code {
  @apply mx-auto mt-4 max-w-48 rounded-2xl border border-slate-200 bg-white p-4 shadow-lg;
}

/* Form Styles in Modal */
.modal-form {
  @apply space-y-6;
}

.form-group {
  @apply space-y-2;
}

.form-label {
  @apply text-sm font-semibold text-slate-700;
}

.form-input {
  @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm transition-all focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200;
}

.form-file {
  @apply w-full rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition-colors hover:border-indigo-400 hover:bg-indigo-50;
}

.file-input {
  @apply hidden;
}

.file-label {
  @apply cursor-pointer;
}

.file-icon {
  @apply mx-auto mb-2 h-12 w-12 text-slate-400;
}

.file-text {
  @apply text-sm text-slate-600;
}

/* Preview Container */
.preview-container {
  @apply mt-4 grid gap-4 sm:grid-cols-2;
}

.proof-thumb {
  @apply h-32 w-full rounded-xl border border-slate-200 object-cover shadow-sm;
}

/* Button Styles */
.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 font-semibold transition-all duration-200;
}

.btn.primary {
  @apply bg-gradient-to-r from-indigo-600 to-blue-600 text-white shadow-lg shadow-indigo-500/20 hover:from-indigo-700 hover:to-blue-700 hover:shadow-xl;
}

.btn.secondary {
  @apply border-2 border-slate-300 bg-white text-slate-700 hover:border-slate-400 hover:bg-slate-50;
}

.btn.success {
  @apply bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-lg shadow-emerald-500/20 hover:from-emerald-700 hover:to-green-700;
}

/* Loading States */
.btn.loading {
  @apply pointer-events-none opacity-75;
}

.btn.loading::after {
  content: '';
  @apply ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .modal-box {
    @apply mx-2 max-h-[95vh];
  }
  
  .modal-header,
  .modal-content {
    @apply p-4;
  }
  
  .order-summary,
  .payment-info {
    @apply p-4;
  }
  
  .preview-container {
    @apply grid-cols-1;
  }
}

/* Animation pour les éléments avec data-animate */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.6s ease-out forwards;
}

[data-animate]:nth-child(2) {
  animation-delay: 0.1s;
}

[data-animate]:nth-child(3) {
  animation-delay: 0.2s;
}

[data-animate]:nth-child(4) {
  animation-delay: 0.3s;
}

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

/* Success checkmark animation */
.success-checkmark {
  @apply inline-flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100;
  animation: scaleIn 0.5s ease-out;
}

.success-checkmark svg {
  @apply h-8 w-8 text-emerald-600;
  animation: drawCheck 0.5s ease-out 0.2s both;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes drawCheck {
  from {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  to {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
  }
}

/* Pulse effect for important elements */
.pulse-subtle {
  animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}