:root {
  --brand: #4f46e5;
  --bg: #f8fafc;
  --fiverr: #1dbf73;
  --upwork: #14a800;
  --card: #eafff5;
  --danger: #ef4444;
  --theme-blue: #1a5bb8; 
}

.comp-tool-wrapper {
  background: var(--bg) !important;
  color: #0f172a !important;
  padding: 24px !important;
  border-radius: 12px !important;
  font-family: 'Segoe UI', sans-serif !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* HEADER */
.comp-header {
  background-color: var(--theme-blue) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 2rem 1rem !important;
  border-radius: 16px !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}
.comp-header h2 {
  font-size: 1.8rem !important;
  margin: 0 0 0.5rem 0 !important;
  color: #ffffff !important;
}
.comp-header p { 
  opacity: 0.95 !important; 
  font-size: 1rem !important; 
  margin: 0 !important;
  color: #ffffff !important;
}

/* CONTAINER */
.comp-container {
  background: #ffffff !important;
  padding: 2.5rem 1.5rem !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
  border: 1px solid #e2e8f0 !important;
}

/* INPUT */
.input-box {
  max-width: 520px !important;
  margin: 0 auto 2.5rem !important;
  text-align: center !important;
}
.input-box label {
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 12px !important;
  font-size: 1.1rem !important;
  color: #333 !important;
}

.input-wrapper input {
  width: 100% !important;
  padding: 1rem !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 1.3rem !important;
  font-weight: bold !important;
  text-align: center !important;
  color: #333 !important;
  height: auto !important;       
  min-height: 50px !important;   
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* GRID */
.comparison {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 1.5rem !important;
  align-items: start !important;
}

/* CARDS */
.card {
  background: var(--card) !important;
  border-radius: 18px !important;
  padding: 1.8rem !important;
  position: relative !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
  border: 1px solid #d1fae5 !important;
}

.title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #333 !important;
}

.row {
  display: flex !important;
  justify-content: space-between !important;
  margin: 1rem 0 !important;
  font-size: 0.95rem !important;
  color: #475569 !important;
}
.fee { color: var(--danger) !important; font-weight: 700 !important; }

.net {
  margin-top: 1.5rem !important;
  padding-top: 15px !important;
  border-top: 1px dashed #cbd5e1 !important;
}
.net strong {
  display: block !important;
  font-size: 1.8rem !important;
  margin-top: 0.3rem !important;
  color: #0f172a !important;
}

/* VS */
.vs {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background: #0f172a !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  margin-top: 60px !important;
}

/* BADGE */
.winner-badge {
  position: absolute !important;
  top: -12px !important;
  right: -5px !important;
  background: #facc15 !important;
  color: #000 !important;
  padding: 0.4rem 0.8rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  transform: rotate(10deg) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  display: none; 
}

/* BUTTON */
.cta {
  text-align: center !important;
  margin-top: 3rem !important;
}
.cta-btn {
  background: var(--fiverr) !important;
  color: #fff !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(29, 191, 115, 0.3) !important;
}
.cta-btn:hover { 
  transform: translateY(-3px);
  background: #16a363 !important;
}

/* MOBILE */
@media(max-width: 768px){
  .comparison { grid-template-columns: 1fr !important; }
  .vs { margin: 1rem auto !important; transform: rotate(90deg) !important; }
}

/* Universal Input Fix */
.form-control, select, input[type="number"], input[type="text"] {
    height: auto !important;       
    min-height: 45px !important;   
    line-height: 1.5 !important;   
    padding: 10px 12px !important; 
    box-sizing: border-box !important; 
    overflow: visible !important; 
}