/* =========================================================
   STOKDEPOM – SWEETALERT v1 FINAL OVERRIDE (BODY PREFIX)
   ========================================================= */

body .swal-overlay {
  background: rgba(15,23,42,.45) !important;
  backdrop-filter: blur(6px);
}

/* MODAL */
body .swal-overlay .swal-modal {
  width: calc(100% - 32px) !important;
  max-width: 460px !important;
  padding: 24px 8px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* TITLE */
body .swal-overlay .swal-modal .swal-title {
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  font-family: poppins!important;
}

/* TEXT */
body .swal-overlay .swal-modal .swal-text {
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  margin: 4px 0 0 0 !important;
}

/* =========================================================
   ICON FIX
   ========================================================= */

body .swal-overlay .swal-modal .swal-icon {
  margin: 10px auto 12px !important;
  transform: scale(.9);
}

/* SUCCESS – SADE CHECK */
body .swal-icon--success {
  border: none !important;
}

body .swal-icon--success__ring {
    background: #8BC34A;

}

body .swal-icon--success__line {
  background-color: #fff !important;
}

/* ERROR – KIRMIZI DAİRE + X */
body .swal-icon--error {
  border: 1px solid #dc2626;
  background: #dc2626;
}

body .swal-icon--error::before {
  content: "";
  width: 56px;
  height: 56px;
  background: #dc2626;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  margin: auto;
}

body .swal-icon--error__x-mark {
  position: relative;
  z-index: 2;
}

body .swal-icon--error__line {
  background-color: #ffffff !important;
  height: 4px !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

body .swal-overlay .swal-modal .swal-footer {
  background: #ffffff !important;
  border-top: none !important;
  margin-top: 4px !important;
  padding: 14px 0 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* BUTTON CONTAINER */
body .swal-overlay .swal-modal .swal-button-container {
  margin: 0 !important;
}

/* BUTTONS */
body .swal-overlay .swal-modal .swal-button {
  border-radius: 4px !important;
  padding: 8px 18px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border: none !important;
  transition: all .15s ease !important;
}

/* HOVER */
body .swal-overlay .swal-modal .swal-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* CONFIRM */
body .swal-overlay .swal-modal .swal-button--confirm,
body .swal-overlay .swal-modal .swal-button--confirm.btn-theme-3 {
  background: #673ab7 !important;
  color: #ffffff !important;
}

/* SEPETE GİT */
body .swal-overlay .swal-modal .swal-button--cart,
body .swal-overlay .swal-modal .swal-button--cart.btn-theme-4 {
  background: #4CAF50 !important;
  color: #ffffff !important;
}

/* ERROR CONFIRM */
body .swal-overlay .swal-modal.sd-swal-error .swal-button--confirm {
  background: #dc2626 !important;
}

/* MOBILE */
@media (max-width: 480px) {
  body .swal-overlay .swal-modal {
    max-width: 100% !important;
  }

  body .swal-overlay .swal-modal .swal-footer {
    justify-content: right !important;
  }
}

/* =========================================================
   BOOTSTRAP MODAL - MODERN STYLE (Backend Forms)
   ========================================================= */

/* Modal Backdrop */
body .modal-backdrop.show {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px);
}

/* Modal Dialog */
body .modal-dialog {
    max-width: 480px;
}

/* Modal Content */
body .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

/* Modal Header */
body .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 20px 24px !important;
}

body .modal-header .modal-title {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

body .modal-header .close {
    color: #64748b !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

body .modal-header .close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Modal Body */
body .modal-body {
    padding: 24px !important;
    background: #ffffff !important;
}

/* Form Group */
body .modal-body .q-form-group {
    margin-bottom: 0 !important;
}

body .modal-body .q-form-group label,
body .modal-body .q-form-group label.solid {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Form Control */
body .modal-body .form-control {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevents mobile zoom */
    font-family: 'Inter', system-ui, sans-serif !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    transition: all 0.2s ease !important;
}

body .modal-body .form-control:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}

body .modal-body .form-control::placeholder {
    color: #9ca3af !important;
}

body .modal-body textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Error State */
body .modal-body .q-form-group.form-error .form-control,
body .modal-body .form-control.is-invalid {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

body .modal-body .q-form-group.form-error .form-control:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

/* Error Message */
body .modal-body span.message,
body .modal-body .invalid-feedback {
    display: block !important;
    font-size: 12px !important;
    color: #ef4444 !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
}

/* Buttons */
body .modal-body .buttons {
    margin-top: 20px !important;
}

body .modal-body .btn-success,
body .modal-body .btn-primary {
    background: var(--nx-primary-color, #6366f1) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

body .modal-body .btn-success:hover,
body .modal-body .btn-primary:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}

body .modal-body .btn-success:active,
body .modal-body .btn-primary:active {
    transform: translateY(0) !important;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    body .modal-dialog {
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }
    
    body .modal-header {
        padding: 16px 20px !important;
    }
    
    body .modal-body {
        padding: 20px !important;
    }
}

/* =========================================================
   INPUT GROUP (Currency Input)
   ========================================================= */

body .modal-body .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body .modal-body .input-group-append .input-group-text {
    background: #f1f5f9 !important;
    border: 1.5px solid #e5e7eb !important;
    border-left: none !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* =========================================================
   TABLE STYLING (Bank Details)
   ========================================================= */

body .modal-body .table-responsive {
    border-radius: 0 !important;
    overflow-x: auto !important;
    border: 1px solid #e5e7eb !important;
    -webkit-overflow-scrolling: touch !important;
}

body .modal-body .table {
    margin-bottom: 0 !important;
    font-size: 13px !important;
    min-width: auto !important;
}

body .modal-body .table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #e5e7eb !important;
    color: #374151 !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

body .modal-body .table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-color: #f1f5f9 !important;
    color: #475569 !important;
}

body .modal-body .table tbody tr:hover {
    background: #f8fafc !important;
}

body .modal-body .table input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #6366f1 !important;
    cursor: pointer !important;
}

/* =========================================================
   ALERT BOXES
   ========================================================= */

body .modal-body .alert {
    border-radius: 12px !important;
    border: none !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body .modal-body .alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

body .modal-body .alert-success strong {
    background: #166534 !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

body .modal-body .alert-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

body .modal-body .alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

body .modal-body .alert-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

/* =========================================================
   RADIO & CHECKBOX STYLING
   ========================================================= */

body .modal-body input[type="radio"],
body .modal-body input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #6366f1 !important;
    cursor: pointer !important;
}

/* =========================================================
   LARGE MODAL (for tables)
   ========================================================= */

body .modal-dialog.modal-lg {
    max-width: 700px !important;
}

@media (max-width: 768px) {
    body .modal-dialog.modal-lg {
        max-width: calc(100% - 32px) !important;
    }
    
    body .modal-body .table-responsive {
        font-size: 12px !important;
    }
    
    body .modal-body .table thead th,
    body .modal-body .table tbody td {
        padding: 10px 12px !important;
    }
}

/* =========================================================
   2FA (TWO FACTOR) MODAL STYLES
   ========================================================= */

/* Form Title & Description (outside modal) */
body .q-form-soft {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
}

body .q-form-soft .form-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #166534 !important;
    margin-bottom: 8px !important;
}

body .q-form-soft .form-description {
    font-size: 14px !important;
    color: #15803d !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

body .q-form-soft .btn-secondary {
    background: #166534 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

body .q-form-soft .btn-secondary:hover {
    background: #15803d !important;
}

/* QR Box Styling */
body .modal-body .qr-box {
    text-align: center !important;
    padding: 24px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

body .modal-body .qr-box .image {
    margin-bottom: 16px !important;
}

body .modal-body .qr-box .image img {
    width: 48px !important;
    height: auto !important;
}

body .modal-body .qr-box .title-1 {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

body .modal-body .qr-box .title-2 {
    display: block !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
}

body .modal-body .qr-box .qr {
    margin-bottom: 20px !important;
}

body .modal-body .qr-box .qr img {
    width: 160px !important;
    height: 160px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body .modal-body .qr-box .secret {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
}

body .modal-body .qr-box .secret .i-1 {
    font-family: 'Monaco', 'Consolas', monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: 1px !important;
}

body .modal-body .qr-box .secret .btn-copy {
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body .modal-body .qr-box .secret .btn-copy:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}