/* ===== Tawk.to Clone - Quotation Widget CSS ===== */
:root{
  --purple:#f67c3d;
  --purple-dark:#f56b24;
  --purple-darker:#f56318;
  --green:#0a8a00;
  --border:#e5e7eb;
  --text:#1f2937;
  --muted:#9ca3af;
  --bg:#ffffff;
  --shadow:0 16px 48px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }

/* Floating container */
#quote-widget{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}

/* Bubble button */
#widget-bubble{
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: none;
  background: #F57736;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(108,92,231,.38), 0 2px 8px rgba(0,0,0,.12);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
#widget-bubble:hover{ transform: scale(1.06); }
#widget-bubble:active{ transform: scale(.97); }
#widget-bubble .online-dot{
  position: absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fff;
}
#widget-bubble .icon{ transition: all .2s ease; position: absolute; inset:0; display:grid; place-items:center; }
#widget-bubble .icon-close{ opacity:0; transform: scale(.7) rotate(-90deg); }
#quote-widget.open #widget-bubble .icon-chat{ opacity:0; transform: scale(.7) rotate(90deg); }
#quote-widget.open #widget-bubble .icon-close{ opacity:1; transform: scale(1) rotate(0); }

/* Tooltip */
#widget-tooltip{
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition: all .25s ease;
}
#widget-tooltip:after{
  content:"";
  position:absolute;
  right:-4px; top:50%; transform: translateY(-50%) rotate(45deg);
  width:8px; height:8px; background:#111827;
}
#quote-widget:not(.open) #widget-bubble:hover + #widget-tooltip{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

/* Window */
#widget-window{
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 380px;
  max-height: 85vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid #f0f0f2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity:0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: all .38s cubic-bezier(.16,1,.3,1);
}
#quote-widget.open #widget-window{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Header */
.widget-header{
  background: #f57736;
  color: #fff;
  
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-shrink:0;
}
.widget-header h2{
  color: white;
  padding-top: 2.45%;
  font-size: 1.04rem;
  font-weight: 600;
  margin:0;
  letter-spacing:.01em;
}
.widget-header p{
  color: #ffffff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
   padding-bottom: 1.45%;
  font-size:1rem;
  opacity:.85;
  margin:3px 0 0;
}
.widget-close{
	position: absolute;
	top: 0;
  right: 0;
  width:15px; height:32px;
  border-radius:20%;
  border:none;
  background: rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
}
.widget-close:hover{ background: rgba(255,255,255,.22); }

/* Body */
.widget-body{
  overflow-y:auto;
  padding: 20px 20px 16px;
  background:#fff;
}
.widget-body::-webkit-scrollbar{ width:5px; }
.widget-body::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:10px; }

/* Form */
.form-group{ margin-bottom: 16px; }
.form-group label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.badge-optional{
  font-size:11px;
  font-weight:700;
  color:var(--green);
  background:#e8f5e9;
  border:1px solid #c8e6c9;
  padding:2px 6px;
  border-radius:4px;
  text-transform: lowercase;
  line-height:1;
}
.form-control{
  width:100%;
  height:44px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:0 14px;
  font-size:14px;
  color:var(--text);
  background:#fff;
  outline:none;
  transition: border-color .18s, box-shadow .18s;
}
.form-control::placeholder{ color:var(--muted); }
.form-control:focus{
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(108,92,231,.15);
}
.form-control.error{ border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.1); }
.error-text{ font-size:12px; color:#ef4444; margin-top:6px; display:none; }
.error-text.show{ display:block; }

.form-row{ display:flex; gap:12px; }
.form-row .form-group{ flex:1; }

.section-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin: 8px 0 12px;
}

/* File input */
.file-box{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
}
.file-btn{
  height:36px;
  padding:0 16px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#f7f7f8;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.file-btn:hover{ background:#fff; }
.file-name{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-list{
  margin-top:10px;
  border:1px solid #f0f0f2;
  border-radius:8px;
  background:#fafafb;
  overflow:hidden;
}
.file-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid #f0f0f2;
  font-size:12.5px;
}
.file-item:last-child{ border-bottom:none; }
.file-remove{
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
}
.file-remove:hover{ background:#fff; border-color:var(--border); color:#111827; }

/* Submit */
.btn-submit{
  width:100%;
  height:48px;
  border:none;
  border-radius:4px;
  background:var(--purple);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: background .18s;
}
.btn-submit:hover{ background:var(--purple-dark); }
.btn-submit:disabled{ opacity:.7; cursor:not-allowed; }
.btn-submit .spinner{
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

.terms{
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin-top:10px;
  line-height:1.4;
}

/* Success */
.success-view{
  display:none;
  padding:48px 24px;
  text-align:center;
}
.success-view.show{ display:block; }
.success-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:#e8f5e9;
  color:#16a34a;
  display:grid; place-items:center;
  margin:0 auto 16px;
}
.success-view h3{ font-size:18px; font-weight:700; margin:0 0 8px; color:#111827; }
.success-view p{ font-size:13.5px; color:#6b7280; line-height:1.5; margin:0; }

/* Mobile */
@media (max-width: 480px){
  #quote-widget{ right:12px; bottom:12px; left:12px; }
  #widget-window{
    width: auto;
    right:0; left:0;
    bottom:72px;
    max-height: 82vh;
  }
  #widget-tooltip{ display:none; }
  #widget-bubble{ margin-left:auto; }
}