/* ── FaxFlow User Site Styles ────────────────────────────────────────── */

/* Toast */
.toast-enter { animation: slideInRight .3s ease-out; }
@keyframes slideInRight { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* Drop zone */
.drop-zone { border: 2px dashed #bfdbfe; border-radius: .75rem; transition: all .2s; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }

/* File list item */
.file-item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; }
.file-item .drag-handle { cursor: grab; color: #9ca3af; }
.file-item .drag-handle:active { cursor: grabbing; }
.file-item .file-name { flex:1; font-size:.875rem; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .remove-btn { color:#9ca3af; cursor:pointer; flex-shrink:0; }
.file-item .remove-btn:hover { color:#ef4444; }

/* Plan card */
.plan-card { border:2px solid #e5e7eb; border-radius:.75rem; padding:1.5rem; text-align:center; transition:all .2s; cursor:pointer; position:relative; }
.plan-card:hover { border-color:#3b82f6; }
.plan-card.selected { border-color:#2563eb; background:#eff6ff; }
.plan-card .save-badge { position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); background:#2563eb; color:#fff; font-size:.7rem; font-weight:700; padding:.15rem .6rem; border-radius:9999px; white-space:nowrap; }

/* Status badge */
.badge { display:inline-flex; align-items:center; padding:.125rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:500; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef9c3; color:#854d0e; }
.badge-danger  { background:#fee2e2; color:#991b1b; }
.badge-info    { background:#dbeafe; color:#1e40af; }
.badge-gray    { background:#f3f4f6; color:#4b5563; }

/* Table */
.ff-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.ff-table thead { background:#f9fafb; }
.ff-table th { padding:.75rem 1rem; text-align:left; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb; }
.ff-table td { padding:.75rem 1rem; border-bottom:1px solid #f3f4f6; color:#4b5563; }
.ff-table tbody tr:hover { background:#f9fafb; }

/* Pagination */
.pagination { display:flex; gap:.25rem; align-items:center; justify-content:center; }
.pagination button { min-width:2rem; height:2rem; border-radius:.375rem; font-size:.8rem; border:1px solid #e5e7eb; background:#fff; color:#374151; cursor:pointer; }
.pagination button:hover { background:#f3f4f6; }
.pagination button.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.pagination button:disabled { opacity:.5; cursor:not-allowed; }

/* Toggle switch */
.toggle-switch { position:relative; width:3rem; height:1.625rem; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:9999px; cursor:pointer; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; height:1.25rem; width:1.25rem; left:.1875rem; bottom:.1875rem; background:#fff; border-radius:50%; transition:.3s; }
.toggle-switch input:checked + .toggle-slider { background:#2563eb; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(1.375rem); }

/* Modal overlay */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#fff; border-radius:.75rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); max-height:90vh; overflow-y:auto; }

/* Country selector */
.country-select { display:flex; align-items:center; border:1px solid #d1d5db; border-radius:.5rem; overflow:hidden; }
.country-select select { border:none; background:#f9fafb; padding:.625rem .5rem; font-size:.875rem; color:#374151; outline:none; cursor:pointer; border-right:1px solid #d1d5db; }
.country-select input { border:none; flex:1; padding:.625rem .75rem; font-size:.875rem; outline:none; }
.country-select input::placeholder { color:#9ca3af; }

/* Loading spinner */
.spinner { border:3px solid #e5e7eb; border-top-color:#2563eb; border-radius:50%; width:2rem; height:2rem; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Responsive */
@media (max-width:768px) {
  .plan-cards-grid { flex-direction:column !important; }
  .ff-table { display:block; overflow-x:auto; }
}

/* Stable scrollbar gutter — prevents layout shift when scrollbar appears/disappears */
html { scrollbar-gutter: stable; }

/* Sidebar & mobile nav: hidden by default, shown via body class when logged in */
#sidebar-container { display: none; }
#mobile-nav        { display: none; }

@media (min-width: 768px) {
  body.user-logged-in #sidebar-container { display: block; }
}
body.user-logged-in #mobile-nav { display: block; }
@media (min-width: 768px) {
  body.user-logged-in #mobile-nav { display: none; }
}

/* ── Checkout Modal ─────────────────────────────────────────────────── */
.checkout-overlay {
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(55,65,81,.6); backdrop-filter:blur(2px);
}
.checkout-dialog {
  display:flex; background:#fff; border-radius:.75rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  max-width:820px; width:95%; max-height:90vh; overflow:hidden;
}
.checkout-summary {
  flex:0 0 48%; padding:2rem; border-right:1px solid #e5e7eb; overflow-y:auto; background:#fafafa;
}
.checkout-summary h3 { font-size:.9375rem; font-weight:600; color:#374151; margin-bottom:1.25rem; }
.checkout-summary .co-total { font-size:2rem; font-weight:700; color:#2563eb; line-height:1.2; }
.checkout-summary .co-total span { font-size:.8125rem; font-weight:400; color:#6b7280; }
.checkout-summary .co-total #co-total-amount { font-size:2rem; font-weight:700; color:#2563eb; }
.checkout-summary .co-recur { font-size:.8125rem; color:#6b7280; margin-top:.25rem; display:flex; align-items:center; gap:.25rem; }
.checkout-summary .co-plan { margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e5e7eb; }
.checkout-summary .co-plan-name { font-size:.875rem; font-weight:500; color:#1f2937; }
.checkout-summary .co-plan-period { font-size:.75rem; color:#2563eb; font-weight:500; }
.checkout-summary .co-qty { display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }
.checkout-summary .co-qty span { font-size:.8125rem; color:#9ca3af; }
.checkout-summary .co-qty-val { width:2.5rem; text-align:center; border:1px solid #d1d5db; border-radius:.375rem; padding:.25rem; font-size:.8125rem; color:#374151; background:#fff; }
.checkout-summary .co-lines { margin-top:1.25rem; border-top:1px solid #e5e7eb; padding-top:1rem; }
.checkout-summary .co-line { display:flex; justify-content:space-between; padding:.375rem 0; font-size:.8125rem; }
.checkout-summary .co-line-label { color:#6b7280; }
.checkout-summary .co-line-value { color:#1f2937; font-weight:500; }
.checkout-summary .co-line a { color:#2563eb; font-size:.8125rem; text-decoration:none; }
.checkout-summary .co-line a:hover { text-decoration:underline; }
.checkout-summary .co-line.co-line-total { font-weight:600; }
.checkout-summary .co-line.co-line-due { padding-top:.75rem; border-top:1px solid #e5e7eb; margin-top:.375rem; }

.checkout-form {
  flex:1; padding:1.75rem; overflow-y:auto; position:relative;
}
.checkout-steps { display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; font-size:.875rem; }
.checkout-steps .step { color:#9ca3af; cursor:pointer; }
.checkout-steps .step.active { color:#2563eb; font-weight:600; }
.checkout-steps .step-sep { color:#d1d5db; }
.checkout-close {
  position:absolute; top:1rem; right:1rem; width:2rem; height:2rem; border:none;
  background:transparent; font-size:1.25rem; color:#9ca3af; cursor:pointer; display:flex;
  align-items:center; justify-content:center; border-radius:.375rem;
}
.checkout-close:hover { background:#f3f4f6; color:#374151; }

.checkout-form label { display:block; font-size:.8125rem; font-weight:500; color:#1f2937; margin-bottom:.375rem; }
.checkout-form label .req { color:#ef4444; }
.checkout-form .co-input {
  width:100%; padding:.625rem .75rem; border:1px solid #d1d5db; border-radius:.5rem;
  font-size:.875rem; color:#1f2937; background:#fff; outline:none; transition:border-color .15s;
}
.checkout-form .co-input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.checkout-form .co-field { margin-bottom:1rem; }

.checkout-form .co-btn-primary {
  width:100%; padding:.75rem; border:none; border-radius:.5rem; font-size:.9375rem;
  font-weight:600; color:#fff; background:#2563eb; cursor:pointer; transition:background .15s;
}
.checkout-form .co-btn-primary:hover { background:#1d4ed8; }
.checkout-form .co-btn-primary:disabled { opacity:.6; cursor:not-allowed; }

/* Payment step */
.co-paypal-btn {
  width:100%; padding:.75rem; border:2px solid #ffc439; border-radius:.5rem; background:#ffc439;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.co-paypal-btn:hover { background:#f0b90b; border-color:#f0b90b; }
.co-gpay-btn {
  width:100%; padding:.75rem; border:none; border-radius:.5rem; background:#1f2937;
  cursor:pointer; display:flex; align-items:center; justify-content:center; margin-top:.625rem; transition:all .15s;
}
.co-gpay-btn:hover { background:#111827; }

.co-divider {
  display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; font-size:.8125rem; color:#9ca3af;
}
.co-divider::before, .co-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }

.co-card-icons { display:flex; gap:.25rem; position:absolute; right:.75rem; top:50%; transform:translateY(-50%); }
.co-card-icons img { height:1.25rem; }
.co-card-row { display:flex; gap:.75rem; }
.co-card-row > div { flex:1; }

/* Info tooltip */
.co-info {
  display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem;
  border:1px solid #d1d5db; border-radius:50%; font-size:.625rem; color:#9ca3af; cursor:help;
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#f1f1f1; border-radius:3px; }
::-webkit-scrollbar-thumb { background:#c1c1c1; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#a1a1a1; }

/* Responsive checkout */
@media (max-width:640px) {
  .checkout-dialog { flex-direction:column; max-height:95vh; }
  .checkout-summary { flex:none; border-right:none; border-bottom:1px solid #e5e7eb; max-height:35vh; }
}