/* =========================================================
   CUSTOMER SUPPORT (Floating Widget & Chat)
   ========================================================= */

.support-float-btn {
  position:fixed !important; left:18px !important; right:auto !important; bottom:18px !important; z-index:9998 !important;
  width:66px !important; height:66px !important; border:0 !important; border-radius:50% !important;
  background:linear-gradient(135deg,#061A3D,#0B2A5A) !important; color:#fff !important;
  display:grid !important; place-items:center !important; font-size:28px !important; line-height:1 !important;
  box-shadow:0 18px 42px rgba(6,26,61,.36) !important; cursor:pointer !important; padding:0 !important; margin:0 !important; overflow:visible !important; transition: transform .2s;
}
.support-float-btn:hover { box-shadow:0 22px 50px rgba(6,26,61,.42) !important; transform: translateY(-2px) scale(1.03); }
.support-float-btn i { color:#fff !important; font-size:28px !important; line-height:1 !important; margin:0 !important; }
.support-float-btn .support-dot { position:absolute !important; top:9px !important; right:9px !important; width:12px !important; height:12px !important; border-radius:999px !important; background:#22c55e !important; border:2px solid #fff !important; display:block !important; }

.support-backdrop { position:fixed !important; inset:0 !important; z-index:9997 !important; background:rgba(15,23,42,.55) !important; display:none !important; align-items:flex-end !important; justify-content:center !important; padding:0 14px 14px !important; backdrop-filter:blur(4px) !important; margin:0 !important; }
.support-backdrop.show { display:flex !important; }

.support-sheet { box-sizing:border-box !important; width:min(680px,100%) !important; max-height:86vh !important; overflow:auto !important; background:#fff !important; border-radius:30px !important; box-shadow:0 -20px 60px rgba(15,23,42,.25) !important; padding:28px 24px 24px !important; position:relative !important; direction:rtl !important; text-align:right !important; margin:0 auto !important; }
.support-grip { width:70px !important; height:7px !important; border-radius:999px !important; background:#e5e7eb !important; margin:0 auto 22px !important; display:block !important; }
.support-close { position:absolute !important; top:18px !important; left:18px !important; width:42px !important; height:42px !important; border:0 !important; border-radius:14px !important; background:#f8fafc !important; color:#0f172a !important; display:grid !important; place-items:center !important; font-size:18px !important; padding:0 !important; z-index:2 !important; cursor: pointer; }

.support-title { text-align:center !important; margin:0 0 18px !important; display:block !important; }
.support-title i { font-size:58px !important; color:#061A3D !important; margin:0 0 10px !important; display:block !important; }
.support-title h3 { margin:0 !important; font-size:28px !important; font-weight:950 !important; color:#111827 !important; }
.support-title p { margin:8px 0 0 !important; color:#94a3b8 !important; font-weight:800 !important; }

.support-option { box-sizing:border-box !important; width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:24px !important; padding:18px !important; margin:14px 0 0 !important; color:#111827 !important; text-decoration:none !important; box-shadow:0 12px 30px rgba(15,23,42,.05) !important; cursor:pointer !important; text-align:right !important; font-family:inherit !important; }
.support-option-main { display:flex !important; align-items:center !important; gap:14px !important; }
.support-option-icon { flex:0 0 auto !important; width:58px !important; height:58px !important; border-radius:20px !important; display:grid !important; place-items:center !important; font-size:23px !important; background:#eef4ff !important; color:#061A3D !important; }
.support-option-icon i { color:inherit !important; }
.support-option-icon.chat { background:#eef4ff !important; color:#061A3D !important; }
.support-option strong { display:block !important; font-size:18px !important; font-weight:950 !important; color:#111827 !important; }
.support-option span span, .support-option-main span span { display:block !important; color:#94a3b8 !important; font-weight:800 !important; margin-top:2px !important; direction: ltr; }
.support-option .arrow { color:#94a3b8 !important; font-size:21px !important; }

.support-chat-panel { display:none !important; margin-top:16px !important; border:1px solid #e5e7eb !important; border-radius:24px !important; background:#f8fafc !important; padding:14px !important; }
.support-chat-panel.show { display:block !important; }
.support-start-grid { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
.support-start-grid input, .support-chat-form textarea { box-sizing:border-box !important; width:100% !important; border:1px solid #e5e7eb !important; border-radius:18px !important; background:#fff !important; padding:13px 14px !important; font-family:inherit !important; font-weight:850 !important; outline:none !important; color:#0f172a !important; }
.support-start-grid input:focus, .support-chat-form textarea:focus { border-color:#60a5fa !important; box-shadow:0 0 0 5px rgba(59,130,246,.12) !important; }
.support-start-grid input.phone { direction:ltr !important; text-align:left !important; }
.support-action-btn { border:0 !important; border-radius:18px !important; background:#0f172a !important; color:#fff !important; padding:13px 16px !important; font-family:inherit !important; font-weight:950 !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; }
.support-action-btn.blue { background:#061A3D !important; }
.support-action-btn.red { background:#dc2626 !important; }

.support-msgs { height:260px !important; overflow:auto !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:20px !important; padding:12px !important; display:grid !important; gap:9px !important; align-content:start !important; margin-top:12px !important; }
.support-msg { max-width:88%; border-radius:18px; padding:10px 12px; font-weight:800; line-height:1.8; white-space:pre-wrap; }
.support-msg.admin { justify-self:start; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; }
.support-msg.customer { justify-self:end; background:#dcfce7; border:1px solid #bbf7d0; color:#166534; }
.support-msg small { display:block; color:#64748b; font-size:11px; font-weight:900; margin-top:5px; }

.support-chat-form { display:grid !important; gap:8px !important; margin-top:10px !important; }
.support-chat-form textarea { min-height:82px !important; resize:vertical !important; }
.support-note { font-size:12px !important; color:#64748b !important; font-weight:800 !important; line-height:1.7 !important; margin-top:9px !important; }
.support-error { color:#dc2626 !important; font-weight:900 !important; margin-top:8px !important; display:none !important; }
.support-error.show { display:block !important; }

@media(max-width:640px) {
  .support-float-btn { width:64px !important; height:64px !important; left:16px !important; bottom:16px !important; }
  .support-backdrop { padding:0 !important; }
  .support-sheet { width:100% !important; max-height:88vh !important; border-radius:28px 28px 0 0 !important; padding:24px 18px 20px !important; }
  .support-title h3 { font-size:24px !important; }
  .support-option { padding:14px !important; border-radius:20px !important; }
  .support-option-icon { width:52px !important; height:52px !important; border-radius:17px !important; }
  .support-option strong { font-size:16px !important; }
}